☰

Poipiku Remark

给 poipiku 作品和用户添加备注，支持分组

As of 2021-03-28. See the latest version.

// ==UserScript==
// @name         Poipiku Remark
// @namespace    https://greasyfork.org/zh-CN/users/8659-fc4soda
// @version      20210328
// @description  给 poipiku 作品和用户添加备注，支持分组
// @author       fc4soda
// @match        https://poipiku.com/*
// @grant        GM.info
// @grant        GM_info
// @grant        GM.getValue
// @grant        GM_getValue
// @grant        GM.setValue
// @grant        GM_setValue
// @grant        GM.deleteValue
// @grant        GM_deleteValue
// @grant        GM.listValues
// @grant        GM_listValues
// @grant        GM.openInTab
// @grant        GM_openInTab
// @grant        GM_registerMenuCommand
// @grant        GM_unregisterMenuCommand
// @grant        GM_addValueChangeListener
// @grant        GM_removeValueChangeListener
// @license      GNU General Public License v3.0 or later
// ==/UserScript==
/* jshint esversion: 6 */

// TODO 作品分组
// TODO 用户备注 & 分组

const AddonName = '8659-pr-';
const ICON = {};
const PAGE_TYPE = {
  'USER1': 'USER1', // https://poipiku.com/928521/
  'WORK1': 'WORK1', // https://poipiku.com/IllustViewPcV.jsp?ID=928521&TD=3996609
  'WORK2': 'WORK2', // https://poipiku.com/928521/2382608.html
};

// id:用户id td:作品id
const EditboxClass = AddonName + 'editbox', WorkItemClassUser = 'IllustThumbImg', IdSelector = 'data-' + AddonName + 'id',
  TdSelector = 'data-' + AddonName + 'td', WorkItemClassWork = 'IllustItemThumb',
  StoreKeyWorkGroupAll = AddonName + 'workgroupall', storeKeyWorkGroup = AddonName + 'workgroup-',
  StoreKeyWork = AddonName + 'work-', EditboxChangeEvent = 'input', EditboxContentSelector = 'textContent';

(function () {
  'use strict';

  // 判断不同页面使用不同选择器
  var url = window.location.href;
  console.log("url", url);
  var pageReturn = checkPage(url);
  console.log('pageReturn', pageReturn)
  if (pageReturn == null) {
    return
  }
  var pageType = pageReturn[0];
  switch (pageType) {
    case PAGE_TYPE.USER1:
      userPageFunc();
      break;
    case PAGE_TYPE.WORK1:
    case PAGE_TYPE.WORK2:
      var id = pageReturn[1], td = pageReturn[2];
      workPageFunc(id, td);
      break;
  }
})();

function workPageFunc(id, td) {
  console.log("workPageFunc");
  var work = document.getElementsByClassName(WorkItemClassWork);
  for (let item of work) {
    var key = StoreKeyWork + id + '-' + td;
    var oldVal = GM.getValue(key);
    oldVal.then((val) => {
      console.log("getVal", StoreKeyWork + id + '-' + td, val);
      if (val != null) {
        var oldEditor = document.getElementById(StoreKeyWork + id + '-' + td);
        if (oldEditor != null) {
          oldEditor.textContent = val;
          //oldEditor.addEventListener(EditboxChangeEvent, storeVal);
        } else {
          var editboxContainer = newEditbox(StoreKeyWork, id, td);
          editboxContainer.children[0].textContent = val;
          editboxContainer.children[0].addEventListener(EditboxChangeEvent, storeVal);
          item.parentElement.insertBefore(editboxContainer, item);
        }
      }
    });
    var editboxContainer = newEditbox(StoreKeyWork, id, td);
    editboxContainer.children[0].addEventListener(EditboxChangeEvent, storeVal);
    item.parentElement.insertBefore(editboxContainer, item);
  }
}

function userPageFunc() {
  console.log("userPageFunc");
  var elements = document.getElementsByClassName(WorkItemClassUser);
  for (let item of elements) {
    var href = item.href;
    if (href == null) {
      continue;
    }

    let regex = /(\d+)/g;
    let idtd = href.match(regex);
    var key = StoreKeyWork + idtd[0] + '-' + idtd[1];
    var oldVal = GM.getValue(key);
    oldVal.then((val) => {
      console.log("getVal", StoreKeyWork + idtd[0] + '-' + idtd[1], val);
      if (val != null) {
        var oldEditor = document.getElementById(StoreKeyWork + idtd[0] + '-' + idtd[1]);
        if (oldEditor != null) {
          oldEditor.textContent = val;
          //oldEditor.addEventListener(EditboxChangeEvent, storeVal);
        } else {
          var editboxContainer = newEditbox(StoreKeyWork, idtd[0], idtd[1]);
          editboxContainer.children[0].textContent = val;
          editboxContainer.children[0].addEventListener(EditboxChangeEvent, storeVal);
          item.parentElement.insertBefore(editboxContainer, item.nextSibling);
        }
      }
    });
    var editboxContainer = newEditbox(StoreKeyWork, idtd[0], idtd[1]);
    editboxContainer.children[0].addEventListener(EditboxChangeEvent, storeVal);
    item.parentElement.insertBefore(editboxContainer, item.nextSibling);
  }
}

function newEditbox(key, id, td) {
  let editboxContainer = document.createElement("div");
  editboxContainer.style.width = '100%';
  editboxContainer.style.display = 'flex';
  editboxContainer.style.justifyContent = 'center';
  editboxContainer.style.alignContent = 'center';
  let editbox = document.createElement("div");
  editbox.id = key + id + '-' + td;
  editbox.class = EditboxClass;
  editbox.contentEditable = true;
  editbox.style.backgroundColor = 'lemonchiffon';
  editbox.style.width = '99%';
  editbox.style.display = 'inline-block';
  editbox.style.border = '1px darkgrey solid';
  editbox.style.margin = '1px';
  editbox.style.wordWarp = 'break-word';
  editbox.style.maxHeight = '2.5rem';
  editbox.style.overflow = 'auto';
  editbox.setAttribute(IdSelector, id);
  editbox.setAttribute(TdSelector, td);
  editboxContainer.appendChild(editbox);
  return editboxContainer
}

// 是否可优化为编辑框失去焦点时保存值
function storeVal(event) {
  var element = event.target;
  console.log(EditboxChangeEvent, element);
  if (element.class == EditboxClass) {
    var id = element.getAttribute(IdSelector);
    var td = element.getAttribute(TdSelector);
    var val = element[EditboxContentSelector];
    var key = StoreKeyWork + id + '-' + td;
    console.log('set', key, val);
    // 这里应该不判断空，可以用空值覆盖旧值
    if (val != null) {
      GM.setValue(key, val);
    }
  }
}

// 返回数组:[页面类型, id, td]
function checkPage(url) {
  var arr;
  var work1Regex = /poipiku\.com\/IllustViewPcV\.jsp\?ID=(\d+)\&TD=(\d+)$/;
  arr = url.match(work1Regex);
  if (arr != null && arr.length == 3) {
    return [PAGE_TYPE.WORK1, arr[1], arr[2]];
  }

  var work2Regex = /poipiku\.com\/(\d+)\/(\d+)\.html$/;
  arr = url.match(work2Regex);
  if (arr != null && arr.length == 3) {
    return [PAGE_TYPE.WORK2, arr[1], arr[2]];
  }

  var user1Regex = /poipiku\.com\/(\d+)\/?$/;
  arr = url.match(user1Regex);
  if (arr != null && arr.length == 2) {
    return [PAGE_TYPE.USER1, arr[1]];
  }
  return null;
}