История изменений тайтла

Просмотр истории действий с отдельным тайтлом.
安裝腳本 ?
換行
// ==UserScript==
// @name         История изменений тайтла
// @namespace    http://tampermonkey.net/
// @version      1.10
// @description  Просмотр истории действий с отдельным тайтлом.
// @author       grin3671
// @license      MIT
// @match        https://shikimori.one/*
// @match        https://shikimori.org/*
// @match        https://shikimori.me/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=shikimori.me
// @grant        none
// ==/UserScript==

(function() {
  "use strict";

  function checkPage () {
    let currentURL = location.pathname.substring(1).split("/");
    let isInPage = (node) => (node === document.body) ? false : document.body.contains(node);

    switch (currentURL[0]) {
      case "animes":
      case "mangas":
      case "ranobe":
        // remove old
        if (document.getElementById("btn-title-history")) document.getElementById("btn-title-history").remove();
        if (document.getElementById("modal-title-history")) document.getElementById("modal-title-history").remove();

        if (isInPage(document.querySelector(".b-db_entry .b-user_rate form")) && isTitleInUserList()) insertButton();
        break;
    }
  }

  // Adds Button to Title's Page
  function insertButton () {
    let parent = document.querySelector(".b-db_entry .b-user_rate").parentElement;
    let el = createElement("div", { "id": "btn-title-history", "class": "b-link_button mt-2 mb-2", "text": "История изменений" }, (e) => { e.onclick = () => { openModal() } });
    parent.append(el);
  }

  /**
   * Gets User Data
   * @property param (string) requested Property
   * @return (string) Property from User Data
   * @return (boolean) false if Property not found
   */
  const getUserData = (param) => param ? JSON.parse(document.body.getAttribute("data-user"))[param] || false : false;

  /**
   * Gets Title's ID
   * @return (string) Title ID
   * @return (boolean) false if Title ID can't be found
   */
  function getTitleID () {
    let el = document.querySelector(".b-db_entry .b-user_rate");
    if (!el) return false; // for checkPage function
    // data-entry="{"id":3649}"
    let data = JSON.parse(el.getAttribute("data-entry"));
    return data.id || false;
  }

  /**
   * Gets Title's type
   * @return (string) Title type for API (Anime || Manga)
   * @return (boolean) false if Title type is undefined
   */
  function getTitleType () {
    let currentURL = location.pathname.substring(1).split("/");
    return (currentURL[0] === "animes") ? "Anime" : (currentURL[0] === "mangas" || currentURL[0] === "ranobe") ? "Manga" : false;
  }

  function isTitleInUserList () {
    let e = document.querySelector(".b-db_entry .b-user_rate form[action*='/api/v2/user_rates']");
    e = e ? e.getAttribute("data-method") : false;
    return e == "PATCH" ? true : false;
  }

  /**
   * Utility. Creates Element with custom properties
   * @property type (string) element type
   * @property data (object) custom properties (id, class, text, style)
   * @property callback (function) callback with element itself as func prop
   * @return element
   */
  function createElement (type, data, callback) {
    let e = document.createElement(type || "div");

    if (data && data.id) e.id = data.id;
    if (data && data.class) e.classList = data.class;
    if (data && data.text) e.textContent = data.text;
    if (data && data.style) e.setAttribute("style", data.style);

    if (typeof callback === "function") callback(e);

    return e;
  }

  /**
   * Creates Modal for Title's History
   * @return element
   */
  function createModal () {
    let modal = createElement("div", { "id": "modal-title-history", "class": "b-modal hidden" });
    let modal_inner = createElement("div", { "class": "inner", "style": "top: 0" });
    let modal_title = createElement("div", { "class": "subheadline m5", "text": "История изменений" });
    let modal_block = createElement("div", { "id": "title-history-block", "class": "use-scroll pt-2 pb-2 mb-4", "style": "min-height: 150px; max-height: 500px; overflow: hidden auto; resize: vertical;" });
    let modal_close = createElement("div", { "class": "b-button", "text": "Закрыть" }, (e) => { e.onclick = () => { closeModal() } });
    let modal_shade = createElement("div", { "class": "b-shade", "style": "display: block; z-index: 1000;" }, (e) => { e.onclick = () => { closeModal() } });
    modal_inner.append(modal_title, modal_block, modal_close);
    modal.append(modal_shade, modal_inner);

    insertHistory(modal_block);

    return modal;
  }

  function openModal () {
    let modal = document.getElementById("modal-title-history") || document.body.appendChild(createModal());
    modal.classList.remove("hidden");
  }

  function closeModal () {
    let modal = document.getElementById("modal-title-history") || document.body.appendChild(createModal());
    modal.classList.add("hidden");
  }

  /**
   * Fills block with History Data
   * @property block (element) Node where the History will be filled
   */
  function insertHistory (block) {
    // reset old data // TODO: check if old data even possible
    block.innerHTML = "";

    // get user & title data
    let user_id = getUserData("id");
    let title_id = getTitleID();
    let title_type = getTitleType();

    // if smth goes wrong insert error message
    if (!user_id || !title_id || !title_type) {
      block.append(createElement("div", { "class": "b-nothing_here d-flex justify-content-center p-4", "text": "Не удалось собрать данные. Попробуйте позже." }));
      return false;
    }

    // main part
    block.classList.add("b-ajax");
    getHistoryData(user_id, title_id, title_type) // test: getHistoryData(324961, 21, "Anime")
      .then((data) => {
        block.classList.remove("b-ajax");
        if (data.length == 0) {
          block.append(createElement("div", { "class": "b-nothing_here d-flex justify-content-center p-4", "text": "История изменений тайтла отсутствует." }));
        } else {
          let historyTbody;
          block.append(createElement("table", { "class": "b-table b-editable_grid block2" }, e => { historyTbody = e.appendChild(createElement("tbody")); }));
          fillHistoryBlocks(data).forEach(entry => historyTbody.append(entry));
        }
      })
  }

  /**
   * Gets JSON History in Promise
   * @property user_id (integer) User ID
   * @property title_id (integer) Title ID
   * @property title_type (string) Title Type ["Anime" || "Manga"]
   * @return historyData (array) JSON History data
   */
  async function getHistoryData (user_id, title_id, title_type) {
    const RPS = 5;
    let requestIndex = 0; // works as a "page" param in request
    let historyLength = 100;
    let historyData = [];

    while (historyLength >= 100) {
      if (requestIndex >= RPS) break; // too many requests
      requestIndex++;
      let response = await requestHistory(user_id, title_id, title_type, requestIndex);
      // TODO: check response status
      let data = await response.json();
      historyLength = data.length || 0;
      historyData = historyData.concat(data || []);
    }

    return historyData;
  }

  async function requestHistory (user_id, title_id, title_type, page) {
    return await fetch(location.origin + "/api/users/" + user_id + "/history?target_id=" + title_id + "&target_type=" + title_type + "&limit=100&page=" + page);
  }

  /**
   * Fills Table Row from API History
   * @property history (array) API formatted data
   * @return historyBlocks (array) Array with Nodes
   */
  function fillHistoryBlocks (history) {
    let historyBlocks = [];

    history.forEach((entry, index) => {
      let row = createElement("tr", { "class": "b_history-row" }, (e) => {
        e.append(
          createElement("td", { "text": (index + 1).toString() }, e => { e.style.width = "5%" }),
          createElement("td", null, e => { e.innerHTML = entry.description }),
          createElement("td", { "text": new Intl.DateTimeFormat([], { dateStyle: "long", timeStyle: "medium"}).format(Date.parse(entry.created_at)) }, e => { e.style.width = "35%" }),
          createElement("td", null, e => {
            e.style.width = "10%";
            e.append(
              createElement("a", null, e => {
                e.textContent = "Удалить";
                e.href = getUserData("url") + "/history/" + entry.id;
                e.dataset.confirm = "Это действие необратимо. Точно?";
                e.dataset.method = "delete";
                e.dataset.remote = true;
                window.$(e).on("ajax:success", (e) => e.currentTarget.parentNode.parentNode.remove() );
              })
            )
          })
        )
      });
      historyBlocks.push(row);
    });

    return historyBlocks;
  }

  checkPage();

  document.addEventListener("page:load", checkPage);
  document.addEventListener("turbolinks:load", checkPage);
})();
欢迎访问Greasy Fork镜像
