mirror of
https://codeberg.org/nobody/LocalCDN.git
synced 2024-12-14 20:34:25 +01:00
199 lines
8.5 KiB
JavaScript
199 lines
8.5 KiB
JavaScript
/**
|
|
* Options Page (Other)
|
|
* Belongs to LocalCDN
|
|
*
|
|
* @author nobody
|
|
* @since 2021-02-19
|
|
*
|
|
* @license MPL 2.0
|
|
*
|
|
* This Source Code Form is subject to the terms of the Mozilla Public
|
|
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
|
|
* You can obtain one at http://mozilla.org/MPL/2.0/.
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
|
|
/**
|
|
* Options (Other)
|
|
*/
|
|
|
|
var optionsOther = {};
|
|
|
|
|
|
/**
|
|
* Private Methods
|
|
*/
|
|
|
|
optionsOther._renderIconSection = function (opt) {
|
|
let url, bgColor, txtColor;
|
|
|
|
if (!chrome.browserAction.setIcon) {
|
|
document.getElementById('icon-style-div').style.display = 'none';
|
|
} else {
|
|
let selectedIcon = opt.selectedIcon;
|
|
|
|
if (selectedIcon === 'Default') {
|
|
document.getElementById('icon-default').checked = true;
|
|
} else if (selectedIcon === 'Grey') {
|
|
document.getElementById('icon-grey').checked = true;
|
|
} else if (selectedIcon === 'Light') {
|
|
document.getElementById('icon-light').checked = true;
|
|
}
|
|
url = chrome.runtime.getURL(`icons/action/${selectedIcon.toLowerCase()}/icon38-default.png`);
|
|
document.getElementById('icon-badge-preview').src = url;
|
|
|
|
bgColor = opt.badgeColor || '#4A826C';
|
|
txtColor = opt.badgeTextColor || '#FFFFFF';
|
|
|
|
document.getElementById('counter-preview-badge').style.backgroundColor = bgColor;
|
|
document.getElementById('pre-badged-background-color').style.backgroundColor = bgColor;
|
|
document.getElementById('badged-background-color').value = bgColor;
|
|
|
|
document.getElementById('counter-preview-badge').style.color = txtColor;
|
|
document.getElementById('pre-badged-text-color').style.backgroundColor = txtColor;
|
|
document.getElementById('badged-text-color').value = txtColor;
|
|
|
|
document.getElementById('badged-background-color').addEventListener('keyup', optionsOther._onChangedHexColor);
|
|
document.getElementById('badged-text-color').addEventListener('keyup', optionsOther._onChangedHexColor);
|
|
document.getElementById('restore-background-color').addEventListener('click', optionsOther._setDefaultColor);
|
|
document.getElementById('restore-text-color').addEventListener('click', optionsOther._setDefaultColor);
|
|
|
|
optionsOther._colorPicker();
|
|
}
|
|
};
|
|
|
|
optionsOther._renderStorageSection = function (opt) {
|
|
document.getElementById('sync-help').addEventListener('click', function () { options._onLinkClick(`${Links.FAQ}#sync`); });
|
|
document.getElementById('storage-type-local').addEventListener('change', optionsOther._onStorageOptionChanged);
|
|
document.getElementById('storage-type-sync').addEventListener('change', optionsOther._onStorageOptionChanged);
|
|
document.getElementById('export-data').addEventListener('click', storageManager.export);
|
|
document.getElementById('import-data').addEventListener('click', storageManager.startImportFilePicker);
|
|
document.getElementById('import-file-picker').addEventListener('change', storageManager.handleImportFilePicker);
|
|
|
|
optionsOther._preSelectStorage(opt.storageType);
|
|
};
|
|
|
|
optionsOther._setIcon = function (optionValue) {
|
|
wrappers.setIcon({'path': optionValue}, 'Enabled');
|
|
let url = chrome.runtime.getURL(`icons/action/${optionValue.toLowerCase()}/icon38-default.png`);
|
|
document.getElementById('icon-badge-preview').src = url;
|
|
};
|
|
|
|
optionsOther._preSelectStorage = function (type) {
|
|
if (type === 'local') {
|
|
document.getElementById('storage-type-local').checked = true;
|
|
optionsOther._storageSize(chrome.storage.local);
|
|
} else {
|
|
document.getElementById('storage-type-sync').checked = true;
|
|
optionsOther._storageSize(chrome.storage.sync);
|
|
}
|
|
};
|
|
|
|
optionsOther._onStorageOptionChanged = function ({target}) {
|
|
chrome.storage.local.set({
|
|
[Setting.STORAGE_TYPE]: target.value,
|
|
});
|
|
if (target.value === 'local') {
|
|
storageManager.migrateData('local');
|
|
optionsOther._storageSize(chrome.storage.local);
|
|
} else {
|
|
storageManager.migrateData('sync');
|
|
optionsOther._storageSize(chrome.storage.sync);
|
|
}
|
|
};
|
|
|
|
optionsOther._storageSize = function (type) {
|
|
|
|
return new Promise((resolve) => {
|
|
type.get(null, function (items) {
|
|
let value = new TextEncoder().encode(Object.entries(items)
|
|
.map(([key, value]) => key + JSON.stringify(value))
|
|
.join('')).length;
|
|
value /= 1000;
|
|
// document.getElementById('storage-size').textContent = `${value.toLocaleString()} KB`;
|
|
console.log(`${value.toLocaleString()} KB`);
|
|
resolve();
|
|
});
|
|
});
|
|
};
|
|
|
|
optionsOther._colorPicker = function () {
|
|
/* eslint-disable no-undef, no-invalid-this */
|
|
const badgeBackgroundColor = new CP(document.getElementById('badged-background-color'));
|
|
badgeBackgroundColor.on('change', function (r, g, b) {
|
|
this.source.value = this.color(r, g, b);
|
|
});
|
|
badgeBackgroundColor.on('drag', function (r, g, b) {
|
|
options._backgroundColor = this.color(r, g, b);
|
|
this.source.value = options._backgroundColor;
|
|
wrappers.setBadgeBackgroundColor({'color': options._backgroundColor});
|
|
document.getElementById('counter-preview-badge').style.backgroundColor = options._backgroundColor;
|
|
document.getElementById('pre-badged-background-color').style.backgroundColor = options._backgroundColor;
|
|
});
|
|
|
|
const badgeTextColor = new CP(document.getElementById('badged-text-color'));
|
|
badgeTextColor.on('change', function (r, g, b) {
|
|
this.source.value = this.color(r, g, b);
|
|
});
|
|
badgeTextColor.on('drag', function (r, g, b) {
|
|
options._textColor = this.color(r, g, b);
|
|
this.source.value = options._textColor;
|
|
wrappers.setBadgeTextColor({'color': options._textColor});
|
|
document.getElementById('counter-preview-badge').style.color = options._textColor;
|
|
document.getElementById('pre-badged-text-color').style.backgroundColor = options._textColor;
|
|
});
|
|
/* eslint-enable no-undef, no-invalid-this */
|
|
};
|
|
|
|
optionsOther._setDefaultColor = function ({target}) {
|
|
if (target.id === 'restore-text-color') {
|
|
options._textColor = '#FFFFFF';
|
|
wrappers.setBadgeTextColor({'color': options._textColor});
|
|
document.getElementById('counter-preview-badge').style.color = options._textColor;
|
|
document.getElementById('pre-badged-text-color').style.backgroundColor = options._textColor;
|
|
document.getElementById('badged-text-color').value = options._textColor;
|
|
} else if (target.id === 'restore-background-color') {
|
|
options._backgroundColor = '#4A826C';
|
|
wrappers.setBadgeBackgroundColor({'color': options._backgroundColor});
|
|
document.getElementById('counter-preview-badge').style.backgroundColor = options._backgroundColor;
|
|
document.getElementById('pre-badged-background-color').style.backgroundColor = options._backgroundColor;
|
|
document.getElementById('badged-background-color').value = options._backgroundColor;
|
|
}
|
|
};
|
|
|
|
optionsOther._onChangedHexColor = function ({target}) {
|
|
if (/#([a-f0-9]{3}){1,2}\b/i.test(target.value)) {
|
|
target.classList.remove('color-error');
|
|
if (target.id === 'badged-text-color') {
|
|
options._textColor = target.value;
|
|
wrappers.setBadgeTextColor({'color': options._textColor});
|
|
document.getElementById('counter-preview-badge').style.color = options._textColor;
|
|
document.getElementById('pre-badged-text-color').style.backgroundColor = options._textColor;
|
|
} else {
|
|
options._backgroundColor = target.value;
|
|
wrappers.setBadgeBackgroundColor({'color': options._backgroundColor});
|
|
document.getElementById('counter-preview-badge').style.backgroundColor = options._backgroundColor;
|
|
document.getElementById('pre-badged-background-color').style.backgroundColor = options._backgroundColor;
|
|
}
|
|
} else {
|
|
target.classList.add('color-error');
|
|
}
|
|
};
|
|
|
|
optionsOther.init = function (opt) {
|
|
if (BrowserType.CHROMIUM) {
|
|
document.getElementById('div-badged-text-color').style.display = 'none';
|
|
}
|
|
|
|
document.getElementById('icon-default').addEventListener('change', options.onOptionChanged);
|
|
document.getElementById('icon-grey').addEventListener('change', options.onOptionChanged);
|
|
document.getElementById('icon-light').addEventListener('change', options.onOptionChanged);
|
|
|
|
optionsOther._renderIconSection(opt);
|
|
optionsOther._renderStorageSection(opt);
|
|
};
|
|
|
|
optionsOther._platformSupportIcons = true;
|