`);
document.body.appendChild(this.modal);
this.content = $('.dmfl-sm-content', this.modal);
this.closeButton = $('.dmfl-sm-close', this.modal);
this.saveButton = $('.dmfl-sm-save', this.modal);
this.restoreButton = $('.dmfl-sm-restore', this.modal);
this.body = $('.dmfl-sm-body', this.modal);
this.dummyTarget = $('.dmfl-sm-dummy-target', this.modal);
this.dropdown = new Dropdown({
node: this.dummyTarget,
photoId: 30891517230,
photoPageURL: 'https://flickr.com/photos/giftsoftheuniverse/30891517230/',
author: 'giftsoftheuniverse',
});
this.dropdown.container.classList.add('dmfl-sm-mode');
this.dropdown.button.classList.add('dmfl-sm-mode', 'dmfl-thumbnail');
this.dropdown.content.classList.add('dmfl-thumbnail');
this.modal.onanimationend = (e) => {
if (e.target.classList.contains('opening')) {
e.target.classList.add('open');
e.target.classList.remove('opening');
} else if (e.target.classList.contains('closing')) {
e.target.classList.remove('closing');
e.target.classList.remove('open');
}
}
this.content.onanimationend = (e) => {
if (e.target.classList.contains('opening')) {
console.log('opened');
e.target.classList.remove('opening');
Dropdown.active = this.dropdown;
this.dropdown.show();
window.addEventListener('resize', this.onResize);
} else if (e.target.classList.contains('closing')) {
console.log('closed');
e.target.classList.remove('closing');
this.clearEntries();
this.shown = false;
setStyle(Object.assign(o, this.currentOpts));
Dropdown.active = this.lastActiveDropdown?.container.isConnected
? this.lastActiveDropdown : null;
window.removeEventListener('resize', this.onResize);
MouseHandler.init();
}
}
this.closeButton.onclick = () => {
this.cancelKeyWait();
this.dropdown?.hide();
this.content.classList.add('closing');
this.modal.classList.add('closing');
$(':root').classList.remove('dmfl-sm-open');
}
this.restoreButton.onclick = () => {
this.cancelKeyWait();
this.clearEntries();
this.tempSettings = {};
this.fill(Settings.defaults);
setStyle(Object.assign(o, Settings.getOpts({})));
this.saveButton.disabled = false;
this.restoreButton.disabled = true;
}
this.content.onsubmit = (e) => {
if (e.submitter != this.saveButton) return;
const kbEntries = Object.entries(this.tempSettings)
.filter(([k, v]) => k.endsWith('_KB') && Boolean(v));
while (kbEntries.length) {
const kbEntry = kbEntries.shift();
if (kbEntries.find(entry => entry[1] === kbEntry[1])) {
Messages.show(`Key '${kbEntry[1]}' assigned more than once.`, 4000, 'bottom');
return;
}
}
this.saveButton.disabled = true;
this.restoreButton.disabled = true;
this.cancelKeyWait();
GM_setValue('settings', this.tempSettings);
this.dropdown?.hide();
this.content.style.setProperty('transition', 'scale 1s ease-in');
this.content.style.setProperty('transition-delay', '0.1s');
this.content.style.setProperty('scale', 0);
setTimeout(() => {
this.modal.appendChild(loader);
location.reload();
}, 1000);
}
},
onValueChanged(key, value) {
this.saveButton.disabled = false;
this.restoreButton.disabled = false;
console.debug(`${key} value changed:`, value);
this.tempSettings[key] = value;
Object.assign(o, Settings.getOpts(this.tempSettings));
if (Settings.defaults[key]?.section == 'appearance') {
requestAnimationFrame(() => {
setStyle(o);
});
}
},
cancelKeyWait() {
if (!this.shown) return;
if (this.onKeyDown) {
document.removeEventListener('keydown', this.onKeyDown, true);
this.onKeyDown = null;
}
this.waitingForKey = false;
if (this.changeKeyButtonPressed) {
this.changeKeyButtonPressed.textContent = 'Change';
this.changeKeyButtonPressed.disabled = false;
}
},
clearEntries() {
$$('.dmfl-sm-entry', this.modal).forEach(entry => entry.remove());
},
fill(settings) {
for (const [settingName, settingData] of Object.entries(Settings.defaults)) {
const entryChildren = [];
const entry = $new('div', 'dmfl-sm-entry');
let valueDesc = settingData.value;
// Initialize temporary settings with either saved or default settings
const settingValue = Settings.getValue(settingName, settings);
this.tempSettings[settingName] = settingValue;
const label = $new('label', 'dmfl-sm-label', settingData.name);
entryChildren.push(label);
if (/^(text|number|checkbox)$/.test(settingData.type)) {
const inputElem = $new('input', 'dmfl-sm-input');
inputElem.setAttribute('type', settingData.type);
let propertyToGet, propertyToSet;
if (typeof settingData.value === 'boolean') {
propertyToGet = propertyToSet = 'checked';
} else if (typeof settingData.value === 'number') {
inputElem.setAttribute('min', settingData.min);
inputElem.setAttribute('max', settingData.max);
inputElem.setAttribute('step', settingData.step);
inputElem.required = true;
propertyToGet = 'valueAsNumber';
propertyToSet = 'value';
} else {
propertyToGet = propertyToSet = 'value';
}
inputElem[propertyToSet] = settingValue;
inputElem.addEventListener('input', () => {
this.onValueChanged(settingName, inputElem[propertyToGet]);
});
entryChildren.push(inputElem);
if (settingName.indexOf('_COLOR') >= 0) {
const colorPicker = $new('input', 'dmfl-sm-color-picker');
colorPicker.setAttribute('type', 'color');
colorPicker.value = inputElem.value;
colorPicker.addEventListener('input', () => {
inputElem.value = colorPicker.value;
inputElem.dispatchEvent(new Event('input'));
})
entryChildren.push(colorPicker);
}
} else if (settingData.type == "kbd") {
const inputElem = $new('input');
inputElem.setAttribute('type', 'checkbox');
inputElem.checked = Boolean(settingValue);
const kbdElem = $new('kbd', 'dmfl-sm-kbd');
kbdElem.textContent = settingValue;
const changeKeyButton = $new('button', 'dmfl-sm-change-key-button');
changeKeyButton.textContent = 'Change';
if (!inputElem.checked) {
kbdElem.style.visibility = 'hidden';
changeKeyButton.style.visibility = 'hidden';
}
changeKeyButton.onclick = (e) => {
e.preventDefault();
if (this.waitingForKey) return;
this.onKeyDown = (e) => {
if (/^(Shift|Alt|Control|Meta)$/.test(e.key)) return;
e.preventDefault();
e.stopPropagation();
document.addEventListener('keyup', (e) => {
e.preventDefault();
e.stopPropagation();
}, { capture: true, once: true });
let keyUnavailable;
for (const [k, v] of Object.entries(this.tempSettings)) {
if (/_KB$/.test(k) && k != settingName && v === e.key) {
const msg = `Key '${e.key}' already assigned to setting '${Settings.defaults[k].name}'.`;
console.log(msg);
Messages.show(msg, 4000, 'bottom');
keyUnavailable = true;
}
}
if (!keyUnavailable) {
kbdElem.textContent = e.key;
this.onValueChanged(settingName, e.key);
}
this.cancelKeyWait();
}
changeKeyButton.disabled = true;
changeKeyButton.textContent = 'Press any key';
document.addEventListener('keydown', this.onKeyDown, true);
this.changeKeyButtonPressed = changeKeyButton;
this.waitingForKey = true;
}
inputElem.addEventListener('input', ({target: {checked: keyEnabled}}) => {
if (this.waitingForKey) this.cancelKeyWait();
kbdElem.textContent = keyEnabled ? getOr(kbdElem.textContent, settingData.value) : '';
this.onValueChanged(settingName, kbdElem.textContent);
kbdElem.style.visibility = changeKeyButton.style.visibility =
keyEnabled ? 'visible' : 'hidden';
});
entryChildren.push(inputElem, kbdElem, changeKeyButton);
} else if (settingData.type == "select") {
const selectElem = $new('select', 'dmfl-sm-select');
const dataVal = settingData.value;
const dataOpts = settingData.options;
const isOptionsArray = Array.isArray(dataOpts);
for (const [k, v] of Object.entries(dataOpts)) {
const opt = $new('option');
opt.value = v;
opt.textContent = isOptionsArray ? v : k;
selectElem.appendChild(opt);
if (v == dataVal) { valueDesc = isOptionsArray ? v : k };
}
selectElem.value = settingValue;
selectElem.addEventListener('change', ({target: {value: v}}) => {
const parsedValue = (typeof dataVal === 'number' ? parseFloat(v) : v);
this.onValueChanged(settingName, parsedValue);
});
entryChildren.push(selectElem);
}
label.title = `${settingData.desc.replace(/\s+/g, ' ')}\n\nDefault: ${String(valueDesc)
.replace(/^true$/, 'On').replace(/^false$/, 'Off')}`;
entry.append(...entryChildren);
$(`.dmfl-sm-section.${settingData.section}`, this.modal)
.appendChild(entry);
}
},
show() {
if (this.shown) return;
this.lastActiveDropdown = Dropdown.active;
Dropdown.active?.hide();
if (PreviewMode.active)
PreviewMode.clear({ reason: 'opening settings modal' });
MouseHandler.destroy();
this.currentOpts = Object.assign(Object.create(null), o);
this.tempSettings = GM_getValue('settings', {});
this.modal.classList.add('opening');
this.content.classList.add('opening');
$(':root').classList.add('dmfl-sm-open');
this.shown = true;
this.saveButton.disabled = true;
this.restoreButton.disabled = false;
this.fill(this.tempSettings);
}
}
const PreviewMode = {
SCALE_FACTOR: 1.1,
SCALE_MIN: 0.01,
SCALE_MAX: 5,
init() {
this.container = $new('div', 'dmfl-pv');
this.container.style.display = 'none';
document.body.appendChild(this.container);
this.photoInfoWrapper = $new('div', 'dmfl-pv-photo-info-wrapper');
this.downloadButton = $new('span', 'dmfl-pv-download', ICONS.default.pm_dl_but);
this.closeButton = $new('span', 'dmfl-pv-close', ICONS.default.pm_close_but);
this.controls = $new('div', 'dmfl-pv-controls', `