Modal and settings framework, designed with Idle Pixel in mind but expanded beyond that scope.
此腳本不應該直接安裝，它是一個供其他腳本使用的函式庫。欲使用本函式庫，請在腳本 metadata 寫上： // @require https://update.cn-greasyfork.org/scripts/538225/1603175/Zlef%27s%20modal%20and%20settings.js
The testing I originally used, documentation requires refinement:
class ModalTesting {
constructor() {
const pluginName = 'ModalTesting'
this.modal = new Modal(pluginName);
this.defaultSettings = {
'testNumInput': {type: 'numinput', value: 10, minValue: 0, maxValue: 20},
'section1': {
type: 'section',
name: "Section 1",
settings: {
'testCheckbox': {type: 'checkbox', value: true},
'testInput': {type: "text", value: "Hello", placeholder: "Hello message!"},
'testCheckboxes': {type: 'multicheckbox', name: 'Test Checkboxes', values: {'apple': true, 'pear': false, 'banana': true, 'cooked_chicken': false, 'cooked_bird_meat': false, 'cooked_meat': false, 'honey': false, 'cheese': false,}},
}
},
'section2': {
type: 'section',
name: "Section 2",
settings: {
'testRadio': {type: 'radio', options: ["item1", "item2", "item3"], value: "item1"},
'testCombo': {type: 'combobox', options: ['apple', 'banana', 'pear'], value: "apple"}
}
},
'testInputNoSection': {type: "text", value: "Free from sections", placeholder: "Hello message!"},
'testInputNoSection1': {type: "text", value: "Free from sections", placeholder: "Hello message!"}
};
// Plugin name for prefix, sets storage key etc, needs to be unique.
this.settingsManager = new SettingsManager(pluginName, this.defaultSettings);
this.settings = this.settingsManager.getSettings();
this.settingsModal = this.settingsManager.createSettingsContent(this.modal, 'auto', 'auto', this.onSettingsModalClose)
this.testButtons();
}
onSettingsModalClose() {
console.log('Settings modal closed');
}
testButtons() {
console.log("Adding buttons");
const container = document.createElement('div');
container.style.position = 'fixed';
container.style.top = '0';
container.style.left = '0';
container.style.zIndex = '9999';
container.style.background = 'rgba(255,255,255,0.9)';
container.style.padding = '5px';
container.style.borderBottom = '1px solid #ccc';
const testButton = this.createButton('Test Modal', () => this.settingsModal());
const resetButton = this.createButton('Reset settings', () => this.settingsManager.resetSettings());
const deleteButton = this.createButton('Delete from local', () => this.settingsManager.deleteSettings());
const logButton = this.createButton('Log this.settings', () => console.log(this.settings));
const differentModalButton = this.createButton('Open a different modal', () => this.differentModal());
const floatingModalButton = this.createButton('Open a floating modal', () => this.floatingModal());
[testButton, resetButton, deleteButton, logButton, differentModalButton, floatingModalButton].forEach(button => container.appendChild(button));
document.body.appendChild(container);
}
createButton(text, onClick) {
const button = document.createElement('button');
button.textContent = text;
button.addEventListener('click', onClick);
return button;
}
differentModal() {
const content = document.createElement('div');
this.modal.addTitle(content, "Example Item", 3, 'center');
const container = this.modal.addContainer(content);
const rowDiv = this.modal.addRow(container);
const depositColDiv = this.modal.addCol(rowDiv, undefined, 'centre');
this.modal.addVDivider(rowDiv);
const withdrawColDiv = this.modal.addCol(rowDiv, undefined, 'centre');
this.modal.addTitle(depositColDiv, 'Deposit Amount', 5, 'center');
this.modal.addInput(depositColDiv, 'number', 100, undefined, undefined, undefined, (value) => {
console.log('Deposit amount changed:', value);
});
const depositButton = this.modal.addButton(depositColDiv, 'DEPOSIT', () => {
console.log("Pressed deposit button");
}, 'btn btn-secondary deposit-button');
depositButton.style.backgroundColor = "red";
depositButton.style.color = "white";
this.modal.addTitle(withdrawColDiv, 'Withdraw Amount', 5, 'center');
this.modal.addInput(withdrawColDiv, 'number', 200, undefined, undefined, undefined, (value) => {
console.log('Withdraw amount changed:', value);
});
const withdrawButton = this.modal.addButton(withdrawColDiv, 'WITHDRAW', () => {
const take_amount = document.getElementById('withdrawAmount').value;
console.log("Pressed withdraw button");
}, 'btn btn-secondary withdraw-button');
withdrawButton.style.backgroundColor = "green";
withdrawButton.style.color = "white";
const rowDiv2 = this.modal.addRow(container);
rowDiv2.style.marginTop = "10px";
const section = this.modal.addSection(rowDiv2, "testing")
this.modal.addTitle(section, "Spam to add scroll", 3, 'center');
this.modal.addModal(content, 'Withdraw Modal', 500, 'auto', () => {
console.log('Modal closed');
});
}
floatingModal() {
const content = document.createElement('div');
this.modal.addTitle(content, "Example Item", 3, 'center');
const container = this.modal.addContainer(content);
const rowDiv = this.modal.addRow(container);
const depositColDiv = this.modal.addCol(rowDiv, undefined, 'centre');
this.modal.addVDivider(rowDiv);
const withdrawColDiv = this.modal.addCol(rowDiv, undefined, 'centre');
this.modal.addTitle(depositColDiv, 'Deposit Amount', 5, 'center');
this.modal.addInput(depositColDiv, 'number', 100, undefined, undefined, undefined, (value) => {
console.log('Deposit amount changed:', value);
});
const depositButton = this.modal.addButton(depositColDiv, 'DEPOSIT', () => {
console.log("Pressed deposit button");
}, 'btn btn-secondary deposit-button');
depositButton.style.backgroundColor = "red";
depositButton.style.color = "white";
this.modal.addTitle(withdrawColDiv, 'Withdraw Amount', 5, 'center');
this.modal.addInput(withdrawColDiv, 'number', 200, undefined, undefined, undefined, (value) => {
console.log('Withdraw amount changed:', value);
});
const withdrawButton = this.modal.addButton(withdrawColDiv, 'WITHDRAW', () => {
const take_amount = document.getElementById('withdrawAmount').value;
console.log("Pressed withdraw button");
}, 'btn btn-secondary withdraw-button');
withdrawButton.style.backgroundColor = "green";
withdrawButton.style.color = "white";
const rowDiv2 = this.modal.addRow(container);
rowDiv2.style.marginTop = "10px";
const section = this.modal.addSection(rowDiv2, "testing")
this.modal.addTitle(section, "Spam to add scroll", 3, 'center');
this.modal.addFloatingModal(content, 'Withdraw Modal', 500, 'auto', () => {
console.log('Modal closed');
});
}
}
