An gui for users to select items from given standardized json
بۇ قوليازمىنى بىۋاسىتە قاچىلاشقا بولمايدۇ. بۇ باشقا قوليازمىلارنىڭ ئىشلىتىشى ئۈچۈن تەمىنلەنگەن ئامبار بولۇپ، ئىشلىتىش ئۈچۈن مېتا كۆرسەتمىسىگە قىستۇرىدىغان كود: // @require https://update.greasyfork.org/scripts/458132/1138364/ItemSelector.js
/* eslint-disable no-multi-spaces */
/* eslint-disable dot-notation */
// ==UserScript==
// @name ItemSelector
// @namespace ItemSelector
// @version 0.3.4
// @description An gui for users to select items from given standardized json
// @author PY-DNG
// @license GPL-v3
// ==/UserScript==
/* global structuredClone */
let ItemSelector = (function() {
// function DoLog() {}
// Arguments: level=LogLevel.Info, logContent, trace=false
const [LogLevel, DoLog] = (function() {
const LogLevel = {
None: 0,
Error: 1,
Success: 2,
Warning: 3,
Info: 4,
};
return [LogLevel, DoLog];
function DoLog() {
// Get window
const win = (typeof(unsafeWindow) === 'object' && unsafeWindow !== null) ? unsafeWindow : window;
const LogLevelMap = {};
LogLevelMap[LogLevel.None] = {
prefix: '',
color: 'color:#ffffff'
}
LogLevelMap[LogLevel.Error] = {
prefix: '[Error]',
color: 'color:#ff0000'
}
LogLevelMap[LogLevel.Success] = {
prefix: '[Success]',
color: 'color:#00aa00'
}
LogLevelMap[LogLevel.Warning] = {
prefix: '[Warning]',
color: 'color:#ffa500'
}
LogLevelMap[LogLevel.Info] = {
prefix: '[Info]',
color: 'color:#888888'
}
LogLevelMap[LogLevel.Elements] = {
prefix: '[Elements]',
color: 'color:#000000'
}
// Current log level
DoLog.logLevel = (win.isPY_DNG && win.userscriptDebugging) ? LogLevel.Info : LogLevel.Warning; // Info Warning Success Error
// Log counter
DoLog.logCount === undefined && (DoLog.logCount = 0);
// Get args
let [level, logContent, trace] = parseArgs([...arguments], [
[2],
[1,2],
[1,2,3]
], [LogLevel.Info, 'DoLog initialized.', false]);
// Log when log level permits
if (level <= DoLog.logLevel) {
let msg = '%c' + LogLevelMap[level].prefix + (typeof GM_info === 'object' ? `[${GM_info.script.name}]` : '') + (LogLevelMap[level].prefix ? ' ' : '');
let subst = LogLevelMap[level].color;
switch (typeof(logContent)) {
case 'string':
msg += '%s';
break;
case 'number':
msg += '%d';
break;
default:
msg += '%o';
break;
}
if (++DoLog.logCount > 512) {
console.clear();
DoLog.logCount = 0;
}
console[trace ? 'trace' : 'log'](msg, subst, logContent);
}
}
}) ();
return ItemSelector;
function ItemSelector(useWrapper=true) {
const IS = this;
const DATA = {
showing: false, json: null, data: null, options: null
};
const elements = IS.elements = {};
defineGetter(IS, 'showing', () => DATA.showing);
defineGetter(IS, 'json', () => MakeReadonlyObj(DATA.json));
defineGetter(IS, 'data', () => MakeReadonlyObj(DATA.data));
defineGetter(IS, 'options', () => MakeReadonlyObj(DATA.options));
IS.show = show;
IS.close = close;
IS.setTheme = setTheme;
IS.getSelectedItems = getSelectedItems;
init();
function init() {
const wrapperDoc = elements.wrapperDoc = useWrapper ? (function() {
const wrapper = elements.wrapper = $CrE(randstr(4, false, false) + '-' + randstr(4, false, false));
const shadow = wrapper.attachShadow({mode: 'closed'});
wrapper.style.display = 'block';
wrapper.style.zIndex = 99999999;
document.body.appendChild(wrapper);
return shadow;
}) () : document;
const wrapper = elements.wrapper = useWrapper ? wrapperDoc : wrapperDoc.body;
const container = elements.container = $CrE('div');
const header = elements.header = $CrE('div');
const body = elements.body = $CrE('div');
const footer = elements.footer = $CrE('div');
container.classList.add('itemselector-container');
header.classList.add('itemselector-header');
body.classList.add('itemselector-body');
footer.classList.add('itemselector-footer');
container.appendChild(header);
container.appendChild(body);
container.appendChild(footer);
wrapper.appendChild(container);
const title = elements.title = $CrE('span');
title.classList.add('itemselector-title');
header.appendChild(title);
const bglist = elements.bglist = $CrE('div');
bglist.classList.add('itemselector-bglist');
body.appendChild(bglist);
const list = elements.list = $CrE('pre');
list.classList.add('itemselector-list');
body.appendChild(list);
const btnOK = $CrE('button');
const btnCancel = $CrE('button');
const btnClose = $CrE('button');
btnOK.innerText = 'OK';
btnCancel.innerText = 'Cancel';
btnClose.innerText = 'x';
btnOK.className = 'itemselector-button itemselector-button-ok';
btnCancel.className = 'itemselector-button itemselector-button-cancel';
btnClose.className = 'itemselector-button itemselector-button-close';
$AEL(btnOK, 'click', ok_onClick);
$AEL(btnCancel, 'click', cancel_onClick);
$AEL(btnClose, 'click', close_onClick);
header.appendChild(btnClose);
footer.appendChild(btnCancel);
footer.appendChild(btnOK);
elements.button = {btnOK, btnCancel, btnClose};
const cssParent = useWrapper ? wrapper : document.head;
const css = '.itemselector-container {display: none;position: fixed;position: fixed;width: 60vw;height: 60vh;left: 20vw;top: 20vh;border-radius: 1em;padding: 2em;user-select: none;font-family: -apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol!important;}.itemselector-container.itemselector-show {display: block;}.itemselector-header {position: absolute;width: calc(100% - 4em);padding-bottom: 0.3em;}.itemselector-title {position: relative;font-size: 1.3em;}.itemselector-body {position: absolute;top: calc(2em + 20px * 1.3 + 20px * 0.3 + 1px + 0.3em);bottom: calc(2em + 20px + 20px + calc(60vw - 4em) * 2 / 100 + 0.3em);overflow: auto;width: calc(100% - 4em);z-index: -2;}.itemselector-bglist {position: absolute;left: 0;width: 100%;z-index: -1;}.itemselector-footer {position: absolute;bottom: 2em;width: calc(100% - 4em);}.itemselector-button {font-size: 20px;width: 48%;margin: 1%;border: none;border-radius: 3px;padding: 0.5em;font-weight: 500;}.itemselector-button.itemselector-button-close {position: relative;float: right;margin: 0;padding: 0;width: 1.3em;height: 1.3em;text-align: center;font-size: 20px;}.itemselector-list {margin: 0;pointer-events: none;}.itemselector-item {margin: 0;margin-left: 1em;}.itemselector-item-root {margin-left: 0;}.itemselector-item-background {width: 100%;height: 49px;}.itemselector-item-background:first-child {border-top: none;}.itemselector-item-background.itemselector-hide {display: none;}.itemselector-item-self {font-size: 14px;line-height: 34px;padding: 8px;background-color: rgba(0,0,0,0);pointer-events: auto;}.itemselector-toggle {position: relative;visibility: hidden;}.itemselector-toggle.itemselector-show {visibility: visible;}.itemselector-toggle:before {content: "\\25BC";width: 1em;display: inline-block;position: relative;}.itemselector-item-collapsed>.itemselector-item-self>.itemselector-toggle:before {content: "\\25B6";}.itemselector-item-collapsed>.itemselector-item-child>.itemselector-item {display: none;}.itemselector-text {pointer-events: none;margin-left: 0.5em;}.itemselector-container.light {--itemselector-color: #000;--itemselector-bgcolor-1: #dddddd;--itemselector-bgcolor-0: #e2e2e2;--itemselector-bgcolor-2: #cdcdcd;--itemselector-bgcolor-3: #bdbdbd;--itemselector-btnclose-bgcolor: #00bcd4;--itemselector-spliter-color: rgba(0,0,0,0.28);}.itemselector-container.dark {--itemselector-color: #fff;--itemselector-bgcolor-0: #1d1d1d;--itemselector-bgcolor-1: #222222;--itemselector-bgcolor-2: #323232;--itemselector-bgcolor-3: #424242;--itemselector-btnclose-bgcolor: #00bcd4;--itemselector-spliter-color: rgba(255,255,255,0.28);}.itemselector-container {box-shadow: 0 3px 15px rgb(0 0 0 / 20%), 0 6px 6px rgb(0 0 0 / 14%), 0 9px 3px -6px rgb(0 0 0 / 12%);color: var(--itemselector-color);background-color: var(--itemselector-bgcolor-0);}.itemselector-header {border-bottom: 1px solid var(--itemselector-spliter-color);}.itemselector-body {scrollbar-color: var(--itemselector-bgcolor-2) var(--itemselector-bgcolor-1);}.itemselector-body:hover {scrollbar-color: var(--itemselector-bgcolor-3) var(--itemselector-bgcolor-1);}.itemselector-body::-webkit-scrollbar {background-color: var(--itemselector-bgcolor-1);}.itemselector-body::-webkit-scrollbar-corner {background-color: var(--itemselector-bgcolor-1);}.itemselector-body::-webkit-scrollbar-thumb, .itemselector-body::-webkit-scrollbar-button {background-color: var(--itemselector-bgcolor-2);}.itemselector-body::-webkit-scrollbar-thumb:hover, .itemselector-body::-webkit-scrollbar-button:hover {background-color: var(--itemselector-bgcolor-3);}.itemselector-item-background {transition-duration: 0.3s;border-top: 1px solid var(--itemselector-spliter-color);}.itemselector-item-background.itemselector-item-hover {background-color: var(--itemselector-bgcolor-2);}.itemselector-button {background-color: var(--itemselector-btnclose-bgcolor);color: var(--itemselector-color);}.itemselector-button.itemselector-button-close {background-color: var(--itemselector-bgcolor-2);}.itemselector-button.itemselector-button-close:hover {background-color: var(--itemselector-bgcolor-3);}';
const style = $CrE('style');
style.innerHTML = css;
cssParent.appendChild(style);
function ok_onClick(e) {
if (!DATA.showing) {
DoLog(LogLevel.Warning, 'ok_onClick invoked when dialog is not showing');
return false;
}
if (!DATA.options) {
DoLog(LogLevel.Warning, 'DATA.options missing while ok_onClick invoked');
return false;
}
typeof DATA.options.onok === 'function' && DATA.options.onok.call(this, e, getSelectedItems());
close();
}
function cancel_onClick(e) {
if (!DATA.showing) {
DoLog(LogLevel.Warning, 'cancel_onClick invoked when dialog is not showing');
return false;
}
if (!DATA.options) {
DoLog(LogLevel.Warning, 'DATA.options missing while cancel_onClick invoked');
return false;
}
typeof DATA.options.oncancel === 'function' && DATA.options.oncancel.call(this, e, getSelectedItems());
close();
}
function close_onClick(e) {
if (!DATA.showing) {
DoLog(LogLevel.Warning, 'close_onClick invoked when dialog is not showing');
return false;
}
if (!DATA.options) {
DoLog(LogLevel.Warning, 'DATA.options missing while close_onClick invoked');
return false;
}
typeof DATA.options.onclose === 'function' && DATA.options.onclose.call(this, e, getSelectedItems());
close();
}
}
function show(json, options={title: ''}) {
// Status check & update
if (!json) {
DoLog(LogLevel.Error, 'json missing');
return false;
}
if (DATA.showing) {
DoLog(LogLevel.Error, 'show invoked while DATA.showing === true');
return false;
}
DATA.showing = true;
DATA.options = options;
DATA.json = structuredClone(json);
DATA.data = makeData(json);
// elements
const {container, header, title, body, footer, bglist, list} = elements;
// cleanings
[...list.children].forEach(c => c.remove());
[...bglist.children].forEach(c => c.remove());
// make new <ul>
const ul = makeListItem(json);
ul.classList.add('itemselector-item-root');
list.appendChild(ul);
// configure with options
options.hasOwnProperty('title') && (title.innerText = options.title);
// display container
updateElementSelect();
container.classList.add('itemselector-show');
return IS;
function makeListItem(json_item, path=[]) {
const item = pathItem(path);
const hasChild = Array.isArray(item.children);
// create new div
const div = item.elements.div = $CrE('div');
const self_container = item.elements.self_container = $CrE('div');
const child_container = item.elements.child_container = $CrE('div');
const background = item.elements.background = $CrE('div');
div.classList.add('itemselector-item');
self_container.classList.add('itemselector-item-self');
child_container.classList.add('itemselector-item-child');
background.classList.add('itemselector-item-background');
hasChild && div.classList.add('itemselector-item-parent');
$AEL(background, 'mouseenter', e => background.classList.add('itemselector-item-hover'));
$AEL(background, 'mouseleave', e => background.classList.remove('itemselector-item-hover'));
$AEL(self_container, 'mouseenter', e => background.classList.add('itemselector-item-hover'));
$AEL(self_container, 'mouseleave', e => background.classList.remove('itemselector-item-hover'));
bglist.appendChild(background);
div.appendChild(self_container);
div.appendChild(child_container);
// triangle toggle for folder items
const toggle = item.elements.toggle = $CrE('a');
toggle.classList.add('itemselector-toggle');
hasChild && toggle.classList.add('itemselector-show');
$AEL(toggle, 'click', e => {
destroyEvent(e);
const collapsed = [...div.classList].includes('itemselector-item-collapsed');
div.classList[collapsed ? 'remove' : 'add']('itemselector-item-collapsed');
toggleBackground(item);
function toggleBackground(item) {
if (Array.isArray(item.children)) {
for (const child of item.children) {
child.elements.background.classList[collapsed ? 'remove' : 'add']('itemselector-hide');
toggleBackground(child);
}
}
}
});
self_container.appendChild(toggle);
// checkbox for selecting
const checkbox = item.elements.checkbox = $CrE('input');
checkbox.type = 'checkbox';
checkbox.classList.add('itemselector-checker');
$AEL(checkbox, 'change', checkbox_onChange);
self_container.appendChild(checkbox);
// check checkbox when self_container or background block onclick
const clickTargets = [self_container, background]
clickTargets.forEach(elm => $AEL(elm, 'click', function(e) {
if (clickTargets.includes(e.target)) {
checkbox.checked = !checkbox.checked;
checkbox_onChange();
}
}));
// item text
const text = item.elements.text = $CrE('span');
text.classList.add('itemselector-text');
text.innerText = json_item.text;
self_container.appendChild(text);
// make child items
if (hasChild) {
item.elements.children = [];
for (let i = 0; i < json_item.children.length; i++) {
const childItem = makeListItem(json_item.children[i], [...path, i]);
item.elements.children.push(childItem);
child_container.appendChild(childItem);
}
}
return div;
function checkbox_onChange(e) {
// set select status
item.selected = checkbox.checked;
// update element
updateElementSelect();
}
}
}
function close() {
if (!DATA.showing) {
DoLog(LogLevel.Error, 'show invoked while DATA.showing === false');
return false;
}
DATA.showing = false;
DATA.options = null;
elements.container.classList.remove('itemselector-show');
}
function setTheme(theme='light') {
const THEMES = ['light', 'dark'];
const root = elements.container;
if (THEMES.includes(theme)) {
THEMES.filter(t => t !== theme).forEach(t => root.classList.remove(t));
root.classList.add(theme);
return true;
} else {
return false;
}
}
function updateElementSelect() {
//const data = DATA.data;
update(DATA.data);
function update(item) {
// item elements
const elements = item.elements;
const checkbox = elements.checkbox;
// props
checkbox.checked = item.selected;
checkbox.indeterminate = item.childSelected && !item.selected;
// update children
if (Array.isArray(item.children)) {
for (const child of item.children) {
update(child);
}
}
}
}
function getSelectedItems() {
const json = structuredClone(DATA.json);
const data = DATA.data;
const MARK = Symbol('cut-mark');
mark(json, data);
return cut(json);
function mark(json_item, data_item) {
if (!data_item.selected && !data_item.childSelected) {
json_item[MARK] = true;
} else if (Array.isArray(data_item.children)) {
for (let i = 0; i < data_item.children.length; i++) {
mark(json_item.children[i], data_item.children[i]);
}
}
}
function cut(json_item) {
if (json_item[MARK]) {
return null;
} else {
const children = json_item.children;
if (Array.isArray(children)) {
for (const cutchild of children.filter(child => child[MARK])) {
children.splice(children.indexOf(cutchild), 1);
}
children.forEach((child, i) => {
children[i] = cut(child);
});
}
return json_item;
}
}
}
function pathItem(path) {
return pathObj(DATA.data, path);
}
function pathObj(obj, path) {
let target = obj;
const _path = [...path];
while (_path.length) {
target = target.children[_path.shift()];
}
return target;
}
function makeData(json) {
return proxyItemData(makeItemData(json));
function proxyItemData(data) {
return typeof data === 'object' && data !== null ? new Proxy(data, {
get: function(target, property, receiver) {
const value = target[property];
const noproxy = typeof value === 'object' && value !== null && value['__NOPROXY__'] === true;
return noproxy ? value : proxyItemData(value);
},
set: function(target, property, value, receiver) {
switch (property) {
case 'selected':
// set item and its children's selected status by rule
select(target, value, !value);
break;
default:
// setting other props are not allowed
break;
}
return true;
function select(item, selected) {
// write item
item.selected = selected;
// write children selected
select_children(item)
// write parent selected
select_parent(item);
// calculate children childSelected
childSelected_children(item);
// calculate parent childSelected
childSelected_parent(item);
function select_children(item) {
if (Array.isArray(item.children)) {
for (const child of item.children) {
if (child.selected !== selected) {
child.selected = selected;
select_children(child, selected);
}
}
}
}
function select_parent(item) {
if (item.parent) {
const parent = item.parent;
const selected = parent.children.every(child => child.selected);
if (parent.selected !== selected) {
parent.selected = selected;
select_parent(parent);
}
}
}
function childSelected_children(item) {
if (Array.isArray(item.children)) {
for (const child of item.children) {
childSelected_children(child);
}
item.childSelected = item.children.some(child => child.selected || child.childSelected);
} else {
item.childSelected = false;
}
}
function childSelected_parent(item) {
if (item.parent) {
const parent = item.parent;
const childSelected = parent.children.some(child => child.selected || child.childSelected);
if (parent.childSelected !== childSelected) {
parent.childSelected = childSelected;
childSelected_parent(parent);
}
}
}
}
}
}) : data;
}
function makeItemData(json, parent=null) {
const hasChild = Array.isArray(json.children);
const item = {};
item.elements = {__NOPROXY__:true};
item.selected = true;
item.childSelected = hasChild && json.children.length > 0;
item.parent = parent !== null && typeof parent === 'object' ? parent : null;
if (hasChild) {
item.children = json.children.map(child => makeItemData(child, item));
}
return item;
}
}
function defineGetter(obj, prop, getter) {
Object.defineProperty(obj, prop, {
get: getter,
set: v => true,
configurable: false,
enumerable: true,
});
}
}
// Basic functions
// querySelector
function $() {
switch(arguments.length) {
case 2:
return arguments[0].querySelector(arguments[1]);
break;
default:
return document.querySelector(arguments[0]);
}
}
// querySelectorAll
function $All() {
switch(arguments.length) {
case 2:
return arguments[0].querySelectorAll(arguments[1]);
break;
default:
return document.querySelectorAll(arguments[0]);
}
}
// createElement
function $CrE() {
switch(arguments.length) {
case 2:
return arguments[0].createElement(arguments[1]);
break;
default:
return document.createElement(arguments[0]);
}
}
// addEventListener
function $AEL(...args) {
const target = args.shift();
return target.addEventListener.apply(target, args);
}
// Just stopPropagation and preventDefault
function destroyEvent(e) {
if (!e) {return false;};
if (!e instanceof Event) {return false;};
e.stopPropagation();
e.preventDefault();
}
function parseArgs(args, rules, defaultValues=[]) {
// args and rules should be array, but not just iterable (string is also iterable)
if (!Array.isArray(args) || !Array.isArray(rules)) {
throw new TypeError('parseArgs: args and rules should be array')
}
// fill rules[0]
(!Array.isArray(rules[0]) || rules[0].length === 1) && rules.splice(0, 0, []);
// max arguments length
const count = rules.length - 1;
// args.length must <= count
if (args.length > count) {
throw new TypeError(`parseArgs: args has more elements(${args.length}) longer than ruless'(${count})`);
}
// rules[i].length should be === i if rules[i] is an array, otherwise it should be a function
for (let i = 1; i <= count; i++) {
const rule = rules[i];
if (Array.isArray(rule)) {
if (rule.length !== i) {
throw new TypeError(`parseArgs: rules[${i}](${rule}) should have ${i} numbers, but given ${rules[i].length}`);
}
if (!rule.every((num) => (typeof num === 'number' && num <= count))) {
throw new TypeError(`parseArgs: rules[${i}](${rule}) should contain numbers smaller than count(${count}) only`);
}
} else if (typeof rule !== 'function') {
throw new TypeError(`parseArgs: rules[${i}](${rule}) should be an array or a function.`)
}
}
// Parse
const rule = rules[args.length];
let parsed;
if (Array.isArray(rule)) {
parsed = [...defaultValues];
for (let i = 0; i < rule.length; i++) {
parsed[rule[i]-1] = args[i];
}
} else {
parsed = rule(args, defaultValues);
}
return parsed;
}
function MakeReadonlyObj(val) {
return isObject(val) ? new Proxy(val, {
get: function(target, property, receiver) {
return MakeReadonlyObj(target[property]);
},
set: function(target, property, value, receiver) {
return true;
}
}) : val;
function isObject(value) {
return ['object', 'function'].includes(typeof value) && value !== null;
}
}
// Returns a random string
function randstr(length=16, nums=true, cases=true) {
const all = 'abcdefghijklmnopqrstuvwxyz' + (nums ? '0123456789' : '') + (cases ? 'ABCDEFGHIJKLMNOPQRSTUVWXYZ' : '');
return Array(length).fill(0).reduce(pre => (pre += all.charAt(randint(0, all.length-1))), '');
}
function randint(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
}) ();