// ==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;
}
