SettingPanel for wenku8++
This script should not be not be installed directly. It is a library for other scripts to include with the meta directive // @require https://update.greasyfork.org/scripts/450209/1091923/SettingPanel.js
/* eslint-disable no-multi-spaces */
/* eslint-disable no-implicit-globals */
/* eslint-disable userscripts/no-invalid-headers */
/* eslint-disable userscripts/no-invalid-grant */
// ==UserScript==
// @name SettingPanel
// @displayname SettingPanel
// @namespace Wenku8++
// @version 0.3.9
// @description SettingPanel for wenku8++
// @author PY-DNG
// @license GPL-v3
// @regurl NONE
// @require https://greasyfork.org/scripts/449412-basic-functions/code/Basic%20Functions.js?version=1085783
// @require https://greasyfork.org/scripts/449583-configmanager/code/ConfigManager.js?version=1085836
// @grant none
// ==/UserScript==
/*
计划任务：
[x] 表格线换成蓝色的
[x] 允许使用不同的alertify对话框
[x] 点击按钮的时候要有GUI反馈
[ ] 未保存内容，关闭窗口前要有提示
[ ] 提供注册SettingOptions组件的接口
*/
(function __MAIN__() {
'use strict';
const ASSETS = require('assets');
const alertify = require('alertify');
const CONST = {
Text: {
Saved: '已保存',
Reset: '已恢复到修改前'
},
Manager_Config_Ruleset: {
'version-key': 'config-version',
'ignores': ["LOCAL-CDN"],
'defaultValues': {
//'config-key': {},
}
}
};
const SettingOptionElements = {
'string': {
createElement: function() {const e = $CrE('input'); e.style.width = '90%'; return e;},
setValue: function(val) {this.element.value = val;},
getValue: function() {return this.element.value;},
},
'number': {
createElement: function() {const e = $CrE('input'); e.type = 'number'; e.style.width = '90%'; return e;},
setValue: function (val) {this.element.value = val;},
getValue: function() {return this.element.value;},
},
'boolean': {
createElement: function() {const e = $CrE('input'); e.type = 'checkbox'; return e;},
setValue: function(val) {this.element.checked = val;},
getValue: function(data) {return this.element.checked ? (this.hasOwnProperty('data') ? this.data.checked : true) : (data ? this.data.unchecked : false);},
},
'select': {
createElement: (() => {const e = $CrE('select'); this.hasOwnProperty('data') && this.data.forEach((d) => {const o = $CrE('option'); o.innerText = d; e.appendChild(o)}); return e;}),
setValue: (val) => (Array.from(this.element.children).find((opt) => (opt.value === val)).selected = true),
getValue: function() {return this.element.value;},
}
}
// initialize
alertify.dialog('setpanel', function factory(){
return {
// The dialog startup function
// This will be called each time the dialog is invoked
// For example: alertify.myDialog( data );
main:function(){
// Split arguments
let content, header, buttons, onsave, onreset, onclose;
switch (arguments.length) {
case 1:
switch (typeof arguments[0]) {
case 'string':
content = arguments[0];
break;
case 'object':
arguments[0].hasOwnProperty('content') && (content = arguments[0].content);
arguments[0].hasOwnProperty('header') && (header = arguments[0].header);
arguments[0].hasOwnProperty('buttons') && (buttons = arguments[0].buttons);
arguments[0].hasOwnProperty('onsave') && (onsave = arguments[0].onsave);
arguments[0].hasOwnProperty('onreset') && (onreset = arguments[0].onreset);
arguments[0].hasOwnProperty('onclose') && (buttons = arguments[0].onclose);
break;
default:
Err('Arguments invalid', 1);
}
break;
case 2:
content = arguments[0];
header = arguments[1];
break;
case 3:
content = arguments[0];
header = arguments[1];
buttons = buttons[2];
break;
}
// Prepare dialog
this.resizeTo('80%', '80%');
content && this.setContent(content);
header && this.setHeader(header);
onsave && this.set('onsave', onsave);
onreset && this.set('onreset', onreset);
onclose && this.set('onclose', onclose);
// Choose & show selected button groups
const btnGroups = {
// Close button only
basic: [[1, 0]],
// Save & reset button
saver: [[0, 0], [1, 1]]
};
const group = btnGroups[buttons || 'basic'];
const divs = ['auxiliary', 'primary'];
divs.forEach((div) => {
Array.from(this.elements.buttons[div].children).forEach((btn) => {
btn.style.display = 'none';
});
});
group.forEach((button) => {
this.elements.buttons[divs[button[0]]].children[button[1]].style.display = '';
});
return this;
},
// The dialog setup function
// This should return the dialog setup object ( buttons, focus and options overrides ).
setup:function(){
return {
/* buttons collection */
buttons:[{
/* button label */
text: '恢复到修改前',
/*bind a keyboard key to the button */
key: undefined,
/* indicate if closing the dialog should trigger this button action */
invokeOnClose: false,
/* custom button class name */
className: alertify.defaults.theme.cancel,
/* custom button attributes */
attrs: {},
/* Defines the button scope, either primary (default) or auxiliary */
scope:'auxiliary',
/* The will conatin the button DOMElement once buttons are created */
element: undefined
},{
/* button label */
text: '关闭',
/*bind a keyboard key to the button */
key: undefined,
/* indicate if closing the dialog should trigger this button action */
invokeOnClose: false,
/* custom button class name */
className: alertify.defaults.theme.ok,
/* custom button attributes */
attrs: {},
/* Defines the button scope, either primary (default) or auxiliary */
scope:'primary',
/* The will conatin the button DOMElement once buttons are created */
element: undefined
},{
/* button label */
text: '保存',
/*bind a keyboard key to the button */
key: undefined,
/* indicate if closing the dialog should trigger this button action */
invokeOnClose: false,
/* custom button class name */
className: alertify.defaults.theme.ok,
/* custom button attributes */
attrs: {},
/* Defines the button scope, either primary (default) or auxiliary */
scope:'primary',
/* The will conatin the button DOMElement once buttons are created */
element: undefined
}],
/* default focus */
focus:{
/* the element to receive default focus, has differnt meaning based on value type:
number: action button index.
string: querySelector to select from dialog body contents.
function: when invoked, should return the focus element.
DOMElement: the focus element.
object: an object that implements .focus() and .select() functions.
*/
element: 0,
/* indicates if the element should be selected on focus or not*/
select: true
},
/* dialog options, these override the defaults */
options: {
title: 'Setting Panel',
modal: true,
basic: false,
frameless: false,
pinned: false,
movable: true,
moveBounded: false,
resizable: true,
autoReset: false,
closable: true,
closableByDimmer: true,
maximizable: false,
startMaximized: false,
pinnable: false,
transition: 'fade',
padding: true,
overflow: true,
/*
onshow:...,
onclose:...,
onfocus:...,
onmove:...,
onmoved:...,
onresize:...,
onresized:...,
onmaximize:...,
onmaximized:...,
onrestore:...,
onrestored:...
*/
}
};
},
// This will be called once the dialog DOM has been created, just before its added to the document.
// Its invoked only once.
build:function(){
// Do custom DOM manipulation here, accessible via this.elements
// this.elements.root ==> Root div
// this.elements.dimmer ==> Modal dimmer div
// this.elements.modal ==> Modal div (dialog wrapper)
// this.elements.dialog ==> Dialog div
// this.elements.reset ==> Array containing the tab reset anchor links
// this.elements.reset[0] ==> First reset element (button).
// this.elements.reset[1] ==> Second reset element (button).
// this.elements.header ==> Dialog header div
// this.elements.body ==> Dialog body div
// this.elements.content ==> Dialog body content div
// this.elements.footer ==> Dialog footer div
// this.elements.resizeHandle ==> Dialog resize handle div
// Dialog commands (Pin/Maximize/Close)
// this.elements.commands ==> Object containing dialog command buttons references
// this.elements.commands.container ==> Root commands div
// this.elements.commands.pin ==> Pin command button
// this.elements.commands.maximize ==> Maximize command button
// this.elements.commands.close ==> Close command button
// Dialog action buttons (Ok, cancel ... etc)
// this.elements.buttons ==> Object containing dialog action buttons references
// this.elements.buttons.primary ==> Primary buttons div
// this.elements.buttons.auxiliary ==> Auxiliary buttons div
// Each created button will be saved with the button definition inside buttons collection
// this.__internal.buttons[x].element
},
// This will be called each time the dialog is shown
prepare:function(){
// Do stuff that should be done every time the dialog is shown.
},
// This will be called each time an action button is clicked.
callback:function(closeEvent){
//The closeEvent has the following properties
//
// index: The index of the button triggering the event.
// button: The button definition object.
// cancel: When set true, prevent the dialog from closing.
const myEvent = deepClone(closeEvent);
switch (closeEvent.index) {
case 0: {
// Rests button
closeEvent.cancel = myEvent.cancel = true;
myEvent.save = false;
myEvent.reset = true;
const onreset = this.get('onreset');
typeof onreset === 'function' && onreset(myEvent);
break;
}
case 1: {
// Close button
// Do something here if need
break;
}
case 2: {
// Save button
closeEvent.cancel = myEvent.cancel = true;
myEvent.save = true;
myEvent.reset = false;
const onsave = this.get('onsave');
typeof onsave === 'function' && onsave(myEvent);
}
}
this.get(myEvent.save ? 'saver' : 'reseter').call(this);
closeEvent.cancel = myEvent.cancel;
},
// To make use of AlertifyJS settings API, group your custom settings into a settings object.
settings:{
onsave: function() {},
onreset: function() {},
options: [], // SettingOption array
saver: function() {
this.get('options').forEach((o) => (o.save()));
},
reseter: function() {
this.get('options').forEach((o) => (o.reset()));
}
},
// AlertifyJS will invoke this each time a settings value gets updated.
settingUpdated:function(key, oldValue, newValue){
// Use this to respond to specific setting updates.
const _this = this;
['onsave', 'onreset', 'saver', 'reseter'].includes(key) && check('function');
['options'].includes(key) && check(Array);
function rollback() {
_this.set(key, oldValue);
}
function check(type) {
valid(oldValue, type) && !valid(newValue, type) && rollback();
}
function valid(value, type) {
return ({
'string': () => (typeof value === type),
'function': () => (value instanceof type)
})[typeof type]();
}
},
// listen to internal dialog events.
hooks:{
// triggered when the dialog is shown, this is seperate from user defined onshow
onshow: function() {
this.resizeTo('80%', '80%');
},
// triggered when the dialog is closed, this is seperate from user defined onclose
onclose: function() {
const onclose = this.get('onclose');
typeof onclose === 'function' && onclose();
},
// triggered when a dialog option gets updated.
// IMPORTANT: This will not be triggered for dialog custom settings updates ( use settingUpdated instead).
onupdate: function() {
}
}
}
}, true);
exports = {
SettingPanel: SettingPanel,
SettingOption: SettingOption,
optionAvailable: optionAvailable,
isOption: isOption,
registerElement: registerElement,
};
// A table-based setting panel using alertify-js
// For wenku8++ only version
// Use 'new' keyword
// Usage:
/*
var panel = new SettingPanel({
buttons: 0,
header: '',
className: '',
id: '',
name: '',
tables: [
{
className: '',
id: '',
name: '',
rows: [
{
className: '',
id: '',
name: '',
blocks: [
{
isHeader: false,
width: '',
height: '',
innerHTML / innerText: ''
colSpan: 1,
rowSpan: 1,
className: '',
id: '',
name: '',
options: [SettingOption, ...]
children: [HTMLElement, ...]
},
...
]
},
...
]
},
...
]
});
*/
function SettingPanel(details={}, storage) {
const SP = this;
SP.insertTable = insertTable;
SP.appendTable = appendTable;
SP.removeTable = removeTable;
SP.remove = remove;
SP.PanelTable = PanelTable;
SP.PanelRow = PanelRow;
SP.PanelBlock = PanelBlock;
// <div> element
const elm = $CrE('div');
copyProps(details, elm, ['id', 'name', 'className']);
elm.classList.add('settingpanel-container');
// Configure object
let css='', usercss='';
SP.element = elm;
SP.elements = {};
SP.children = {};
SP.tables = [];
SP.length = 0;
details.id !== undefined && (SP.elements[details.id] = elm);
copyProps(details, SP, ['id', 'name']);
Object.defineProperty(SP, 'css', {
configurable: false,
enumerable: true,
get: function() {
return css;
},
set: function(_css) {
addStyle(_css, 'settingpanel-css');
css = _css;
}
});
Object.defineProperty(SP, 'usercss', {
configurable: false,
enumerable: true,
get: function() {
return usercss;
},
set: function(_usercss) {
addStyle(_usercss, 'settingpanel-usercss');
usercss = _usercss;
}
});
SP.css = `.settingpanel-table {border-spacing: 0px; border-collapse: collapse; width: 100%; margin: 2em 0;} .settingpanel-block {border: 1px solid ${ASSETS.Color.Text}; text-align: center; vertical-align: middle; padding: 3px; text-align: left;} .settingpanel-header {font-weight: bold;}`
// Make alerity box
const box = SP.alertifyBox = alertify.setpanel({
onsave: function() {
alertify.notify(CONST.Text.Saved);
},
onreset: function() {
alertify.notify(CONST.Text.Reset);
},
buttons: details.hasOwnProperty('buttons') ? details.buttons : 'basic'
});
clearChildNodes(box.elements.content);
box.elements.content.appendChild(elm);
box.elements.content.style.overflow = 'auto';
box.setHeader(details.header);
box.setting({
maximizable: true,
overflow: true
});
!box.isOpen() && box.show();
// Create tables
if (details.tables) {
for (const table of details.tables) {
if (table instanceof PanelTable) {
appendTable(table);
} else {
appendTable(new PanelTable(table));
}
}
}
// Insert a Panel-Row
// Returns Panel object
function insertTable(table, index) {
// Insert table
!(table instanceof PanelTable) && (table = new PanelTable(table));
index < SP.length ? elm.insertBefore(table.element, elm.children[index]) : elm.appendChild(table.element);
insertItem(SP.tables, table, index);
table.id !== undefined && (SP.children[table.id] = table);
SP.length++;
// Set parent
table.parent = SP;
// Inherit elements
for (const [id, subelm] of Object.entries(table.elements)) {
SP.elements[id] = subelm;
}
// Inherit children
for (const [id, child] of Object.entries(table.children)) {
SP.children[id] = child;
}
return SP;
}
// Append a Panel-Row
// Returns Panel object
function appendTable(table) {
return insertTable(table, SP.length);
}
// Remove a Panel-Row
// Returns Panel object
function removeTable(index) {
const table = SP.tables[index];
SP.element.removeChild(table.element);
removeItem(SP.rows, index);
return SP;
}
// Remove itself from parentElement
// Returns Panel object
function remove() {
SP.element.parentElement && SP.parentElement.removeChild(SP.element);
return SP;
}
// Panel-Table object
// Use 'new' keyword
function PanelTable(details={}) {
const PT = this;
PT.insertRow = insertRow;
PT.appendRow = appendRow;
PT.removeRow = removeRow;
PT.remove = remove
// <table> element
const elm = $CrE('table');
copyProps(details, elm, ['id', 'name', 'className']);
elm.classList.add('settingpanel-table');
// Configure
PT.element = elm;
PT.elements = {};
PT.children = {};
PT.rows = [];
PT.length = 0;
details.id !== undefined && (PT.elements[details.id] = elm);
copyProps(details, PT, ['id', 'name']);
// Append rows
if (details.rows) {
for (const row of details.rows) {
if (row instanceof PanelRow) {
insertRow(row);
} else {
insertRow(new PanelRow(row));
}
}
}
// Insert a Panel-Row
// Returns Panel-Table object
function insertRow(row, index) {
// Insert row
!(row instanceof PanelRow) && (row = new PanelRow(row));
index < PT.length ? elm.insertBefore(row.element, elm.children[index]) : elm.appendChild(row.element);
insertItem(PT.rows, row, index);
row.id !== undefined && (PT.children[row.id] = row);
PT.length++;
// Set parent
row.parent = PT;
// Inherit elements
for (const [id, subelm] of Object.entries(row.elements)) {
PT.elements[id] = subelm;
}
// Inherit children
for (const [id, child] of Object.entries(row.children)) {
PT.children[id] = child;
}
return PT;
}
// Append a Panel-Row
// Returns Panel-Table object
function appendRow(row) {
return insertRow(row, PT.length);
}
// Remove a Panel-Row
// Returns Panel-Table object
function removeRow(index) {
const row = PT.rows[index];
PT.element.removeChild(row.element);
removeItem(PT.rows, index);
return PT;
}
// Remove itself from parentElement
// Returns Panel-Table object
function remove() {
PT.parent instanceof SettingPanel && PT.parent.removeTable(PT.tables.indexOf(PT));
return PT;
}
}
// Panel-Row object
// Use 'new' keyword
function PanelRow(details={}) {
const PR = this;
PR.insertBlock = insertBlock;
PR.appendBlock = appendBlock;
PR.removeBlock = removeBlock;
PR.remove = remove;
// <tr> element
const elm = $CrE('tr');
copyProps(details, elm, ['id', 'name', 'className']);
elm.classList.add('settingpanel-row');
// Configure object
PR.element = elm;
PR.elements = {};
PR.children = {};
PR.blocks = [];
PR.length = 0;
details.id !== undefined && (PR.elements[details.id] = elm);
copyProps(details, PR, ['id', 'name']);
// Append blocks
if (details.blocks) {
for (const block of details.blocks) {
if (block instanceof PanelBlock) {
appendBlock(block);
} else {
appendBlock(new PanelBlock(block));
}
}
}
// Insert a Panel-Block
// Returns Panel-Row object
function insertBlock(block, index) {
// Insert block
!(block instanceof PanelBlock) && (block = new PanelBlock(block));
index < PR.length ? elm.insertBefore(block.element, elm.children[index]) : elm.appendChild(block.element);
insertItem(PR.blocks, block, index);
block.id !== undefined && (PR.children[block.id] = block);
PR.length++;
// Set parent
block.parent = PR;
// Inherit elements
for (const [id, subelm] of Object.entries(block.elements)) {
PR.elements[id] = subelm;
}
// Inherit children
for (const [id, child] of Object.entries(block.children)) {
PR.children[id] = child;
}
return PR;
};
// Append a Panel-Block
// Returns Panel-Row object
function appendBlock(block) {
return insertBlock(block, PR.length);
}
// Remove a Panel-Block
// Returns Panel-Row object
function removeBlock(index) {
const block = PR.blocks[index];
PR.element.removeChild(block.element);
removeItem(PR.blocks, index);
return PR;
}
// Remove itself from parent
// Returns Panel-Row object
function remove() {
PR.parent instanceof PanelTable && PR.parent.removeRow(PR.parent.rows.indexOf(PR));
return PR;
}
}
// Panel-Block object
// Use 'new' keyword
function PanelBlock(details={}) {
const PB = this;
PB.remove = remove;
// <td> element
const elm = $CrE(details.isHeader ? 'th' : 'td');
copyProps(details, elm, ['innerText', 'innerHTML', 'colSpan', 'rowSpan', 'id', 'name', 'className']);
copyProps(details, elm.style, ['width', 'height']);
elm.classList.add('settingpanel-block');
details.isHeader && elm.classList.add('settingpanel-header');
// Configure object
PB.element = elm;
PB.elements = {};
PB.children = {};
details.id !== undefined && (PB.elements[details.id] = elm);
copyProps(details, PB, ['id', 'name']);
// Append to parent if need
details.parent instanceof PanelRow && (PB.parent = details.parent.appendBlock(PB));
// Append SettingOptions if exist
if (details.options) {
details.options.filter(storage ? () => (true) : isOption).map((o) => (isOption(o) ? o : new SettingOption(storage, o))).forEach(function(option) {
SP.alertifyBox.get('options').push(option);
elm.appendChild(option.element);
});
}
// Append child elements if exist
if (details.children) {
for (const child of details.children) {
elm.appendChild(child);
}
}
// Remove itself from parent
// Returns Panel-Block object
function remove() {
PB.parent instanceof PanelRow && PB.parent.removeBlock(PB.parent.blocks.indexOf(PB));
return PB;
}
}
function $R(e) {return $(e) && $(e).parentElement.removeChild($(e));}
function insertItem(arr, item, index) {
for (let i = arr.length; i > index ; i--) {
arr[i] = arr[i-1];
}
arr[index] = item;
return arr;
}
function removeItem(arr, index) {
for (let i = index; i < arr.length-1; i++) {
arr[i] = arr[i+1];
}
delete arr[arr.length-1];
return arr;
}
function MakeReadonlyObj(val) {
return isObject(val) ? new Proxy(val, {
get: function(target, property, receiver) {
return MakeReadonlyObj(target[property]);
},
set: function(target, property, value, receiver) {},
has: function(target, prop) {}
}) : val;
function isObject(value) {
return ['object', 'function'].includes(typeof value) && value !== null;
}
}
}
// details = {path='config path', type='config type', data='option data'}
function SettingOption(storage, details={}) {
const SO = this;
SO.save = save;
SO.reset = reset;
// Initialize ConfigManager
!storage && Err('SettingOption requires GM_storage functions');
const CM = new ConfigManager(CONST.Manager_Config_Ruleset, storage);
const CONFIG = CM.Config;
// Get args
const options = ['path', 'type', 'checker', 'data', 'autoSave'];
copyProps(details, SO, options);
// Get first available type if multiple types provided
Array.isArray(SO.type) && (SO.type = SO.type.find((t) => (optionAvailable(t))));
!optionAvailable(SO.type) && Err('Unsupported Panel-Option type: ' + details.type);
// Create element
const original_value = CM.getConfig(SO.path);
const SOE = {
create: SettingOptionElements[SO.type].createElement.bind(SO),
get: SettingOptionElements[SO.type].getValue.bind(SO),
set: SettingOptionElements[SO.type].setValue.bind(SO),
}
SO.element = SOE.create();
SOE.set(original_value);
// Bind change-checker-saver
SO.element.addEventListener('change', function(e) {
if (SO.checker) {
if (SO.checker(e, SOE.get())) {
SO.autoSave && save();
} else {
// Reset value
reset();
// Do some value-invalid reminding here
}
} else {
SO.autoSave && save();
}
});
function save() {
CM.setConfig(SO.path, SOE.get());
}
function reset(save=false) {
SOE.set(original_value);
save && CM.setConfig(SO.path, original_value);
}
}
// Check if an settingoption type available
function optionAvailable(type) {
return Object.keys(SettingOptionElements).includes(type);
}
// Register SettingOption element
function registerElement(name, obj) {
const formatOkay = typeof obj.createElement === 'function' && typeof obj.setValue === 'function' && typeof obj.getValue === 'function';
const noConflict = !SettingOptionElements.hasOwnProperty(name);
const okay = formatOkay && noConflict;
okay && (SettingOptionElements[name] = obj);
return okay;
}
function isOption(obj) {
return obj instanceof SettingOption;
}
// Deep copy an object
function deepClone(obj) {
let newObj = Array.isArray(obj) ? [] : {};
if (obj && typeof obj === "object") {
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
newObj[key] = (obj && typeof obj[key] === 'object') ? deepClone(obj[key]) : obj[key];
}
}
}
return newObj;
}
})();