diff --git a/README.md b/README.md index 3a4063e..e99e5db 100644 --- a/README.md +++ b/README.md @@ -93,9 +93,7 @@ We use some third-party scripts in our add-on. The authors and licenses are list Copyright JS Foundation and other contributors | [MIT](https://jquery.org/license/) - [DataTables v1.10.20](https://github.com/DataTables/DataTables/tree/master) | Copyright (c) 2008-2015 SpryMedia Limited | [MIT](https://datatables.net/license/) -- [Popper.js v1.16.0](https://github.com/popperjs/popper.js/tree/v1.16.0) | Copyright (c) 2016 Federico Zivolo and contributors | - [MIT](https://github.com/popperjs/popper.js/blob/master/LICENSE.md) -- [Bootstrap Colorpicker v3.2.0](https://github.com/itsjavi/bootstrap-colorpicker/tree/3.2.0) | Copyright (c) 2017 Javi Aguilar | - [MIT](https://github.com/itsjavi/bootstrap-colorpicker/blob/master/LICENSE) +- [Pickr v1.7.0](https://github.com/Simonwep/pickr/tree/1.7.0) | Copyright (c) 2018 - 2020 Simon Reinisch | + [MIT](https://github.com/Simonwep/pickr/blob/master/LICENSE) - [Font Awesome v5.12.0](https://github.com/FortAwesome/Font-Awesome/tree/5.12.0) | Copyright (c) @fontawesome | [Font Awesome Free License](https://github.com/FortAwesome/Font-Awesome/blob/master/LICENSE.txt) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 994561b..19ee3be 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -370,5 +370,9 @@ "popup_html_configs_head_title": { "message": "", "description": "not needed, only to prevent exceptions" + }, + "context_menu_enabled_title": { + "message": "", + "description": "not needed, only to prevent exceptions" } } \ No newline at end of file diff --git a/core_js/log.js b/core_js/log.js index 59c48b7..429ec92 100644 --- a/core_js/log.js +++ b/core_js/log.js @@ -52,21 +52,32 @@ function getLog() return b.timestamp - a.timestamp; }); - const length = Object.keys(log.log).length; - let row; - if(length !== 0) - { - for(let i=0; i"+log.log[i].before+"" + - ""+log.log[i].after+"" + - ""+log.log[i].rule+"" + - ""+toDate(log.log[i].timestamp)+""; - $('#tbody').append(row); - } - } $('#logTable').DataTable({ + "data": log.log, + "columns": [ + { + "data": "before", + "type": "string" + }, + { + "data": "after", + "type": "string" + }, + { + "data": "rule", + "type": "string" + }, + { + "data": "timestamp", + "type": "date" + } + ], + "columnDefs": [ + { + targets: 3, + render: toDate + } + ], "pageLength": 10, "language": { "url": getDataTableTranslation() @@ -132,13 +143,13 @@ function importGlobalLog(evt) { /** * Load only when document is ready */ -$(document).ready(function(){ +(function () { setText(); getLog(); - $('#reset_log_btn').on("click", resetGlobalLog); - $('#export_log_btn').on("click", exportGlobalLog); - $('#importLog').on("change", importGlobalLog); -}); + document.getElementById('reset_log_btn').onclick = resetGlobalLog; + document.getElementById('export_log_btn').onclick = exportGlobalLog; + document.getElementById('importLog').onchange = importGlobalLog; +})(); /** * Translate a string with the i18n API. @@ -156,17 +167,17 @@ function translate(string) function setText() { document.title = translate('log_html_page_title'); - $('#page_title').text(translate('log_html_page_title')); - $('#reset_log_btn').text(translate('log_html_reset_button')) - .prop('title', translate('log_html_reset_button_title')); - $('#head_1').text(translate('log_html_table_head_1')); - $('#head_2').text(translate('log_html_table_head_2')); - $('#head_3').text(translate('log_html_table_head_3')); - $('#head_4').text(translate('log_html_table_head_4')); - $('#export_log_btn_text').text(translate('log_html_export_button')); - $('#export_log_btn').prop('title', translate('log_html_export_button_title')); - $('#import_log_btn_text').text(translate('log_html_import_button')); - $('#importLog').prop('title', translate('log_html_import_button_title')); + document.getElementById('page_title').textContent = translate('log_html_page_title'); + document.getElementById('reset_log_btn').textContent = translate('log_html_reset_button'); + document.getElementById('reset_log_btn').setAttribute('title', translate('log_html_reset_button_title')); + document.getElementById('head_1').textContent = translate('log_html_table_head_1'); + document.getElementById('head_2').textContent = translate('log_html_table_head_2'); + document.getElementById('head_3').textContent = translate('log_html_table_head_3'); + document.getElementById('head_4').textContent = translate('log_html_table_head_4'); + document.getElementById('export_log_btn_text').textContent = translate('log_html_export_button'); + document.getElementById('export_log_btn').setAttribute('title', translate('log_html_export_button_title')); + document.getElementById('import_log_btn_text').textContent = translate('log_html_import_button'); + document.getElementById('importLog').setAttribute('title', translate('log_html_import_button_title')); } function handleError(error) { diff --git a/core_js/settings.js b/core_js/settings.js index 332a003..67f1299 100644 --- a/core_js/settings.js +++ b/core_js/settings.js @@ -18,28 +18,47 @@ var settings = []; -getData(); - -/** -* Load only when document is ready -*/ -$(document).ready(function(){ - setText(); - $("#badged-color-picker").colorpicker({ - format: "hex" - }); - $('#reset_settings_btn').on("click", reset); - $('#export_settings_btn').on("click", exportSettings); - $('#importSettings').on("change", importSettings); - $('#save_settings_btn').on("click", save); +const pickr = Pickr.create({ + el: '#badged-color-picker', + theme: 'nano', + components: { + preview: true, + opacity: true, + hue: true, + default: '#FFA500', + comparison: false, + interaction: { + hex: true, + rgba: false, + hsla: false, + hsva: false, + cmyk: false, + input: true, + clear: false, + save: true + } + } }); /** -* Reset everything. -* Set everthing to the default values. -*/ -function reset() -{ + * Load only when document is ready + */ +(function () { + pickr.on('init', () => { + getData(); + setText(); + document.getElementById('reset_settings_btn').onclick = reset; + document.getElementById('export_settings_btn').onclick = exportSettings; + document.getElementById('importSettings').onchange = importSettings; + document.getElementById('save_settings_btn').onclick = save; + }); +})(); + +/** + * Reset everything. + * Set everthing to the default values. + */ +function reset() { browser.runtime.sendMessage({ function: "initSettings", params: [] @@ -57,15 +76,14 @@ function reset() } /** -* Saves the settings. -*/ -function save() -{ - saveData("badged_color", $('input[name=badged_color]').val()) - .then(() => saveData("ruleURL", $('input[name=ruleURL]').val())) - .then(() => saveData("hashURL", $('input[name=hashURL]').val())) - .then(() => saveData("types", $('input[name=types]').val())) - .then(() => saveData("logLimit", Math.max(0, Math.min(5000, $('input[name=logLimit]').val())))) + * Saves the settings. + */ +function save() { + saveData("badged_color", pickr.getColor().toHEXA().toString()) + .then(() => saveData("ruleURL", document.querySelector('input[name=ruleURL]').value)) + .then(() => saveData("hashURL", document.querySelector('input[name=hashURL]').value)) + .then(() => saveData("types", document.querySelector('input[name=types]').value)) + .then(() => saveData("logLimit", Math.max(0, Math.min(5000, document.querySelector('input[name=logLimit]').value)))) .then(() => browser.runtime.sendMessage({ function: "setBadgedStatus", params: [] @@ -85,27 +103,32 @@ function save() * * @param {string} string Name of the attribute used for localization * @param {string[]} placeholders Array of placeholders -*/ -function translate(string, ...placeholders) -{ + */ +function translate(string, ...placeholders) { return browser.i18n.getMessage(string, placeholders); } /** -* Get the data. -*/ -function getData() -{ - loadData("badged_color") - .then(() => loadData("ruleURL")) + * Get the data. + */ +function getData() { + browser.runtime.sendMessage({ + function: "getData", + params: ["badged_color"] + }).then(data => { + settings["badged_color"] = data.response; + pickr.setColor(data.response, false); + }).catch(handleError); + + loadData("ruleURL") .then(() => loadData("hashURL")) .then(() => loadData("types")) .then(() => loadData("logLimit")) .then(logData => { - if(logData.response === undefined || logData.response === -1) { - $('#logLimit_label').text(translate('setting_log_limit_label', "∞")); + if (logData.response === undefined) { + document.getElementById('logLimit_label').textContent = translate('setting_log_limit_label', "0"); } else { - $('#logLimit_label').text(translate('setting_log_limit_label', logData.response)); + document.getElementById('logLimit_label').textContent = translate('setting_log_limit_label', logData.response); } }).catch(handleError); @@ -140,7 +163,10 @@ async function loadData(name) { params: [name] }).then(data => { settings[name] = data.response; - $('input[name='+name+']').val(data.response); + if (document.querySelector('input[id=' + name + ']') == null) { + console.debug(name) + } + document.querySelector('input[id=' + name + ']').value = data.response; resolve(data); }, handleError); }); @@ -166,33 +192,32 @@ async function saveData(key, data) { } /** -* Set the text for the UI. -*/ -function setText() -{ + * Set the text for the UI. + */ +function setText() { document.title = translate('settings_html_page_title'); - $('#page_title').text(translate('settings_html_page_title')); - $('#badged_color_label').text(translate('badged_color_label')); - $('#reset_settings_btn').text(translate('setting_html_reset_button')) - .prop('title', translate('setting_html_reset_button_title')); - $('#rule_url_label').text(translate('setting_rule_url_label')); - $('#hash_url_label').text(translate('setting_hash_url_label')); - $('#types_label').html(translate('setting_types_label')); - $('#save_settings_btn').text(translate('settings_html_save_button')) - .prop('title', translate('settings_html_save_button_title')); + document.getElementById('page_title').textContent = translate('settings_html_page_title'); + document.getElementById('badged_color_label').textContent = translate('badged_color_label'); + document.getElementById('reset_settings_btn').textContent = translate('setting_html_reset_button'); + document.getElementById('reset_settings_btn').setAttribute('title', translate('setting_html_reset_button_title')); + document.getElementById('rule_url_label').textContent = translate('setting_rule_url_label'); + document.getElementById('hash_url_label').textContent = translate('setting_hash_url_label'); + document.getElementById('types_label').innerHTML = translate('setting_types_label'); + document.getElementById('save_settings_btn').textContent = translate('settings_html_save_button'); + document.getElementById('save_settings_btn').setAttribute('title', translate('settings_html_save_button_title')); injectText("context_menu_enabled", "context_menu_enabled"); - $('#history_listener_enabled').html(translate('history_listener_enabled')); + document.getElementById('history_listener_enabled').innerHTML = translate('history_listener_enabled'); injectText("local_hosts_skipping", "local_hosts_skipping"); - $('#export_settings_btn_text').text(translate('setting_html_export_button')); - $('#export_settings_btn').prop('title', translate('setting_html_export_button_title')); - $('#import_settings_btn_text').text(translate('setting_html_import_button')); - $('#importSettings').prop('title', translate('setting_html_import_button_title')); + document.getElementById('export_settings_btn_text').textContent = translate('setting_html_export_button'); + document.getElementById('export_settings_btn').setAttribute('title', translate('setting_html_export_button_title')); + document.getElementById('import_settings_btn_text').textContent = translate('setting_html_import_button'); + document.getElementById('importSettings').setAttribute('title', translate('setting_html_import_button_title')); injectText("referral_marketing_enabled", "referral_marketing_enabled"); injectText("domain_blocking_enabled", "domain_blocking_enabled"); - $('#ping_blocking_enabled').html(translate('ping_blocking_enabled')) - .prop('title', translate('ping_blocking_enabled_title')); - $('#eTag_filtering_enabled').html(translate('eTag_filtering_enabled')) - .prop('title', translate('eTag_filtering_enabled_title')) + document.getElementById('ping_blocking_enabled').innerHTML = translate('ping_blocking_enabled'); + document.getElementById('ping_blocking_enabled').setAttribute('title', translate('ping_blocking_enabled_title')); + document.getElementById('eTag_filtering_enabled').innerHTML = translate('eTag_filtering_enabled'); + document.getElementById('eTag_filtering_enabled').setAttribute('title', translate('eTag_filtering_enabled_title')); } /** @@ -220,10 +245,10 @@ function importSettings(evt) { let file = evt.target.files[0]; let fileReader = new FileReader(); - fileReader.onload = function(e) { + fileReader.onload = function (e) { let data = JSON.parse(e.target.result); const length = Object.keys(data).length; - let i=0; + let i = 0; Object.entries(data).forEach(([key, value]) => { browser.runtime.sendMessage({ @@ -231,7 +256,7 @@ function importSettings(evt) { params: [key, value] }).then(() => { i++; - if(i === length) { + if (i === length) { location.reload(); } }, handleError); @@ -249,20 +274,19 @@ function handleError(error) { } /** -* Change the value of a switch button. -* @param {string} id HTML id -* @param {string} storageID storage internal id -*/ -function changeSwitchButton(id, storageID) -{ - let element = $('#'+id); + * Change the value of a switch button. + * @param {string} id HTML id + * @param {string} storageID storage internal id + */ +function changeSwitchButton(id, storageID) { + let element = document.getElementById(id); - element.on('change', function(){ + element.onchange = function () { browser.runtime.sendMessage({ function: "setData", - params: [storageID, element.is(':checked')] - }).then((data) => { - if(storageID === "globalStatus"){ + params: [storageID, element.checked] + }).then(() => { + if (storageID === "globalStatus") { browser.runtime.sendMessage({ function: "changeIcon", params: [] @@ -274,41 +298,38 @@ function changeSwitchButton(id, storageID) params: [] }).catch(handleError); }).catch(handleError); - }); + }; setSwitchButton(id, storageID); } /** -* Helper function to inject the translated text and tooltip. -* -* @param {string} id ID of the HTML element -* @param {string} attribute Name of the attribute used for localization -* @param {string} tooltip -*/ -function injectText(id, attribute, tooltip = "") -{ - let object = $('#'+id); - object.text(translate(attribute)); + * Helper function to inject the translated text and tooltip. + * + * @param {string} id ID of the HTML element + * @param {string} attribute Name of the attribute used for localization + * @param {string} tooltip + */ +function injectText(id, attribute, tooltip = "") { + let object = document.getElementById(id); + object.textContent = translate(attribute); /* This function will throw an error if no translation is found for the tooltip. This is a planned error. */ - tooltip = translate(attribute+"_title"); + tooltip = translate(attribute + "_title"); - if(tooltip !== "") - { - object.prop('title', tooltip); + if (tooltip !== "") { + object.setAttribute('title', tooltip); } } /** -* Set the value of a switch button. -* @param {string} id HTML id -* @param {string} varname js internal variable name -*/ -function setSwitchButton(id, varname) -{ - let element = $('#'+id); - element.prop('checked', settings[varname]); + * Set the value of a switch button. + * @param {string} id HTML id + * @param {string} varname js internal variable name + */ +function setSwitchButton(id, varname) { + let element = document.getElementById(id); + element.checked = settings[varname]; } diff --git a/css/bootstrap-colorpicker.min.css b/css/bootstrap-colorpicker.min.css deleted file mode 100644 index 1b93194..0000000 --- a/css/bootstrap-colorpicker.min.css +++ /dev/null @@ -1,10 +0,0 @@ -/*! - * Bootstrap Colorpicker - Bootstrap Colorpicker is a modular color picker plugin for Bootstrap 4. - * @package bootstrap-colorpicker - * @version v3.2.0 - * @license MIT - * @link https://itsjavi.com/bootstrap-colorpicker/ - * @link https://github.com/itsjavi/bootstrap-colorpicker.git - */ -.colorpicker{position:relative;display:none;font-size:inherit;color:inherit;text-align:left;list-style:none;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.2);padding:.75rem .75rem;width:148px;border-radius:4px;-webkit-box-sizing:content-box;box-sizing:content-box}.colorpicker.colorpicker-disabled,.colorpicker.colorpicker-disabled *{cursor:default!important}.colorpicker div{position:relative}.colorpicker-popup{position:absolute;top:100%;left:0;float:left;margin-top:1px;z-index:1060}.colorpicker-popup.colorpicker-bs-popover-content{position:relative;top:auto;left:auto;float:none;margin:0;z-index:initial;border:none;padding:.25rem 0;border-radius:0;background:0 0;-webkit-box-shadow:none;box-shadow:none}.colorpicker:after,.colorpicker:before{content:"";display:table;clear:both;line-height:0}.colorpicker-clear{clear:both;display:block}.colorpicker:before{content:'';display:inline-block;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid #ccc;border-bottom-color:rgba(0,0,0,.2);position:absolute;top:-7px;left:auto;right:6px}.colorpicker:after{content:'';display:inline-block;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #fff;position:absolute;top:-6px;left:auto;right:7px}.colorpicker.colorpicker-with-alpha{width:170px}.colorpicker.colorpicker-with-alpha .colorpicker-alpha{display:block}.colorpicker-saturation{position:relative;width:126px;height:126px;background:-webkit-gradient(linear,left top,left bottom,from(transparent),to(black)),-webkit-gradient(linear,left top,right top,from(white),to(rgba(255,255,255,0)));background:linear-gradient(to bottom,transparent 0,#000 100%),linear-gradient(to right,#fff 0,rgba(255,255,255,0) 100%);cursor:crosshair;float:left;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.2);box-shadow:0 0 0 1px rgba(0,0,0,.2);margin-bottom:6px}.colorpicker-saturation .colorpicker-guide{display:block;height:6px;width:6px;border-radius:6px;border:1px solid #000;-webkit-box-shadow:0 0 0 1px rgba(255,255,255,.8);box-shadow:0 0 0 1px rgba(255,255,255,.8);position:absolute;top:0;left:0;margin:-3px 0 0 -3px}.colorpicker-alpha,.colorpicker-hue{position:relative;width:16px;height:126px;float:left;cursor:row-resize;margin-left:6px;margin-bottom:6px}.colorpicker-alpha-color{position:absolute;top:0;left:0;width:100%;height:100%}.colorpicker-alpha-color,.colorpicker-hue{-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.2);box-shadow:0 0 0 1px rgba(0,0,0,.2)}.colorpicker-alpha .colorpicker-guide,.colorpicker-hue .colorpicker-guide{display:block;height:4px;background:rgba(255,255,255,.8);border:1px solid rgba(0,0,0,.4);position:absolute;top:0;left:0;margin-left:-2px;margin-top:-2px;right:-2px;z-index:1}.colorpicker-hue{background:-webkit-gradient(linear,left bottom,left top,from(red),color-stop(8%,#ff8000),color-stop(17%,#ff0),color-stop(25%,#80ff00),color-stop(33%,#0f0),color-stop(42%,#00ff80),color-stop(50%,#0ff),color-stop(58%,#0080ff),color-stop(67%,#00f),color-stop(75%,#8000ff),color-stop(83%,#ff00ff),color-stop(92%,#ff0080),to(red));background:linear-gradient(to top,red 0,#ff8000 8%,#ff0 17%,#80ff00 25%,#0f0 33%,#00ff80 42%,#0ff 50%,#0080ff 58%,#00f 67%,#8000ff 75%,#ff00ff 83%,#ff0080 92%,red 100%)}.colorpicker-alpha{background:linear-gradient(45deg,rgba(0,0,0,.1) 25%,transparent 25%,transparent 75%,rgba(0,0,0,.1) 75%,rgba(0,0,0,.1) 0),linear-gradient(45deg,rgba(0,0,0,.1) 25%,transparent 25%,transparent 75%,rgba(0,0,0,.1) 75%,rgba(0,0,0,.1) 0),#fff;background-size:10px 10px;background-position:0 0,5px 5px;display:none}.colorpicker-bar{min-height:16px;margin:6px 0 0 0;clear:both;text-align:center;font-size:10px;line-height:normal;max-width:100%;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.2);box-shadow:0 0 0 1px rgba(0,0,0,.2)}.colorpicker-bar:before{content:"";display:table;clear:both}.colorpicker-bar.colorpicker-bar-horizontal{height:126px;width:16px;margin:0 0 6px 0;float:left}.colorpicker-input-addon{position:relative}.colorpicker-input-addon i{display:inline-block;cursor:pointer;vertical-align:text-top;height:16px;width:16px;position:relative}.colorpicker-input-addon:before{content:"";position:absolute;width:16px;height:16px;display:inline-block;vertical-align:text-top;background:linear-gradient(45deg,rgba(0,0,0,.1) 25%,transparent 25%,transparent 75%,rgba(0,0,0,.1) 75%,rgba(0,0,0,.1) 0),linear-gradient(45deg,rgba(0,0,0,.1) 25%,transparent 25%,transparent 75%,rgba(0,0,0,.1) 75%,rgba(0,0,0,.1) 0),#fff;background-size:10px 10px;background-position:0 0,5px 5px}.colorpicker.colorpicker-inline{position:relative;display:inline-block;float:none;z-index:auto;vertical-align:text-bottom}.colorpicker.colorpicker-horizontal{width:126px;height:auto}.colorpicker.colorpicker-horizontal .colorpicker-bar{width:126px}.colorpicker.colorpicker-horizontal .colorpicker-saturation{float:none;margin-bottom:0}.colorpicker.colorpicker-horizontal .colorpicker-alpha,.colorpicker.colorpicker-horizontal .colorpicker-hue{float:none;width:126px;height:16px;cursor:col-resize;margin-left:0;margin-top:6px;margin-bottom:0}.colorpicker.colorpicker-horizontal .colorpicker-alpha .colorpicker-guide,.colorpicker.colorpicker-horizontal .colorpicker-hue .colorpicker-guide{position:absolute;display:block;bottom:-2px;left:0;right:auto;height:auto;width:4px}.colorpicker.colorpicker-horizontal .colorpicker-hue{background:-webkit-gradient(linear,right top,left top,from(red),color-stop(8%,#ff8000),color-stop(17%,#ff0),color-stop(25%,#80ff00),color-stop(33%,#0f0),color-stop(42%,#00ff80),color-stop(50%,#0ff),color-stop(58%,#0080ff),color-stop(67%,#00f),color-stop(75%,#8000ff),color-stop(83%,#ff00ff),color-stop(92%,#ff0080),to(red));background:linear-gradient(to left,red 0,#ff8000 8%,#ff0 17%,#80ff00 25%,#0f0 33%,#00ff80 42%,#0ff 50%,#0080ff 58%,#00f 67%,#8000ff 75%,#ff00ff 83%,#ff0080 92%,red 100%)}.colorpicker.colorpicker-horizontal .colorpicker-alpha{background:linear-gradient(45deg,rgba(0,0,0,.1) 25%,transparent 25%,transparent 75%,rgba(0,0,0,.1) 75%,rgba(0,0,0,.1) 0),linear-gradient(45deg,rgba(0,0,0,.1) 25%,transparent 25%,transparent 75%,rgba(0,0,0,.1) 75%,rgba(0,0,0,.1) 0),#fff;background-size:10px 10px;background-position:0 0,5px 5px}.colorpicker-inline:before,.colorpicker-no-arrow:before,.colorpicker-popup.colorpicker-bs-popover-content:before{content:none;display:none}.colorpicker-inline:after,.colorpicker-no-arrow:after,.colorpicker-popup.colorpicker-bs-popover-content:after{content:none;display:none}.colorpicker-alpha,.colorpicker-hue,.colorpicker-saturation{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.colorpicker-alpha.colorpicker-visible,.colorpicker-bar.colorpicker-visible,.colorpicker-hue.colorpicker-visible,.colorpicker-saturation.colorpicker-visible,.colorpicker.colorpicker-visible{display:block}.colorpicker-alpha.colorpicker-hidden,.colorpicker-bar.colorpicker-hidden,.colorpicker-hue.colorpicker-hidden,.colorpicker-saturation.colorpicker-hidden,.colorpicker.colorpicker-hidden{display:none}.colorpicker-inline.colorpicker-visible{display:inline-block}.colorpicker.colorpicker-disabled:after{border:none;content:'';display:block;width:100%;height:100%;background:rgba(233,236,239,.33);top:0;left:0;right:auto;z-index:2;position:absolute}.colorpicker.colorpicker-disabled .colorpicker-guide{display:none}.colorpicker-preview{background:linear-gradient(45deg,rgba(0,0,0,.1) 25%,transparent 25%,transparent 75%,rgba(0,0,0,.1) 75%,rgba(0,0,0,.1) 0),linear-gradient(45deg,rgba(0,0,0,.1) 25%,transparent 25%,transparent 75%,rgba(0,0,0,.1) 75%,rgba(0,0,0,.1) 0),#fff;background-size:10px 10px;background-position:0 0,5px 5px}.colorpicker-preview>div{position:absolute;left:0;top:0;width:100%;height:100%}.colorpicker-bar.colorpicker-swatches{-webkit-box-shadow:none;box-shadow:none;height:auto}.colorpicker-swatches--inner{clear:both;margin-top:-6px}.colorpicker-swatch{position:relative;cursor:pointer;float:left;height:16px;width:16px;margin-right:6px;margin-top:6px;margin-left:0;display:block;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.2);box-shadow:0 0 0 1px rgba(0,0,0,.2);background:linear-gradient(45deg,rgba(0,0,0,.1) 25%,transparent 25%,transparent 75%,rgba(0,0,0,.1) 75%,rgba(0,0,0,.1) 0),linear-gradient(45deg,rgba(0,0,0,.1) 25%,transparent 25%,transparent 75%,rgba(0,0,0,.1) 75%,rgba(0,0,0,.1) 0),#fff;background-size:10px 10px;background-position:0 0,5px 5px}.colorpicker-swatch--inner{position:absolute;top:0;left:0;width:100%;height:100%}.colorpicker-swatch:nth-of-type(7n+0){margin-right:0}.colorpicker-with-alpha .colorpicker-swatch:nth-of-type(7n+0){margin-right:6px}.colorpicker-with-alpha .colorpicker-swatch:nth-of-type(8n+0){margin-right:0}.colorpicker-horizontal .colorpicker-swatch:nth-of-type(6n+0){margin-right:0}.colorpicker-horizontal .colorpicker-swatch:nth-of-type(7n+0){margin-right:6px}.colorpicker-horizontal .colorpicker-swatch:nth-of-type(8n+0){margin-right:6px}.colorpicker-swatch:last-of-type:after{content:"";display:table;clear:both}.colorpicker-element input[dir=rtl],.colorpicker-element[dir=rtl] input,[dir=rtl] .colorpicker-element input{direction:ltr;text-align:right} -/*# sourceMappingURL=bootstrap-colorpicker.min.css.map */ diff --git a/css/pickr.nano.min.css b/css/pickr.nano.min.css new file mode 100644 index 0000000..b42c972 --- /dev/null +++ b/css/pickr.nano.min.css @@ -0,0 +1 @@ +/*! Pickr 1.7.0 MIT | https://github.com/Simonwep/pickr */.pickr{position:relative;overflow:visible;transform:translateY(0)}.pickr *{box-sizing:border-box;outline:none;border:none;-webkit-appearance:none}.pickr .pcr-button{position:relative;height:2em;width:2em;padding:.5em;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;border-radius:.15em;background:url('data:image/svg+xml;utf8, ') no-repeat 50%;background-size:0;transition:all .3s}.pickr .pcr-button:before{background:url('data:image/svg+xml;utf8, ');background-size:.5em;z-index:-1;z-index:auto}.pickr .pcr-button:after,.pickr .pcr-button:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;border-radius:.15em}.pickr .pcr-button:after{transition:background .3s;background:currentColor}.pickr .pcr-button.clear{background-size:70%}.pickr .pcr-button.clear:before{opacity:0}.pickr .pcr-button.clear:focus{box-shadow:0 0 0 1px hsla(0,0%,100%,.85),0 0 0 3px currentColor}.pickr .pcr-button.disabled{cursor:not-allowed}.pcr-app *,.pickr *{box-sizing:border-box;outline:none;border:none;-webkit-appearance:none}.pcr-app button.pcr-active,.pcr-app button:focus,.pcr-app input.pcr-active,.pcr-app input:focus,.pickr button.pcr-active,.pickr button:focus,.pickr input.pcr-active,.pickr input:focus{box-shadow:0 0 0 1px hsla(0,0%,100%,.85),0 0 0 3px currentColor}.pcr-app .pcr-palette,.pcr-app .pcr-slider,.pickr .pcr-palette,.pickr .pcr-slider{transition:box-shadow .3s}.pcr-app .pcr-palette:focus,.pcr-app .pcr-slider:focus,.pickr .pcr-palette:focus,.pickr .pcr-slider:focus{box-shadow:0 0 0 1px hsla(0,0%,100%,.85),0 0 0 3px rgba(0,0,0,.25)}.pcr-app{position:fixed;display:flex;flex-direction:column;z-index:10000;border-radius:.1em;background:#fff;opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;box-shadow:0 .15em 1.5em 0 rgba(0,0,0,.1),0 0 1em 0 rgba(0,0,0,.03);left:0;top:0}.pcr-app.visible{transition:opacity .3s;visibility:visible;opacity:1}.pcr-app .pcr-swatches{display:flex;flex-wrap:wrap;margin-top:.75em}.pcr-app .pcr-swatches.pcr-last{margin:0}@supports (display:grid){.pcr-app .pcr-swatches{display:grid;align-items:center;grid-template-columns:repeat(auto-fit,1.75em)}}.pcr-app .pcr-swatches>button{font-size:1em;position:relative;width:calc(1.75em - 5px);height:calc(1.75em - 5px);border-radius:.15em;cursor:pointer;margin:2.5px;flex-shrink:0;justify-self:center;transition:all .15s;overflow:hidden;background:transparent;z-index:1}.pcr-app .pcr-swatches>button:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8, ');background-size:6px;border-radius:.15em;z-index:-1}.pcr-app .pcr-swatches>button:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:currentColor;border:1px solid rgba(0,0,0,.05);border-radius:.15em;box-sizing:border-box}.pcr-app .pcr-swatches>button:hover{-webkit-filter:brightness(1.05);filter:brightness(1.05)}.pcr-app .pcr-swatches>button:not(.pcr-active){box-shadow:none}.pcr-app .pcr-interaction{display:flex;flex-wrap:wrap;align-items:center;margin:0 -.2em}.pcr-app .pcr-interaction>*{margin:0 .2em}.pcr-app .pcr-interaction input{letter-spacing:.07em;font-size:.75em;text-align:center;cursor:pointer;color:#75797e;background:#f1f3f4;border-radius:.15em;transition:all .15s;padding:.45em .5em;margin-top:.75em}.pcr-app .pcr-interaction input:hover{-webkit-filter:brightness(.975);filter:brightness(.975)}.pcr-app .pcr-interaction input:focus{box-shadow:0 0 0 1px hsla(0,0%,100%,.85),0 0 0 3px rgba(66,133,244,.75)}.pcr-app .pcr-interaction .pcr-result{color:#75797e;text-align:left;flex:1 1 8em;min-width:8em;transition:all .2s;border-radius:.15em;background:#f1f3f4;cursor:text}.pcr-app .pcr-interaction .pcr-result::-moz-selection{background:#4285f4;color:#fff}.pcr-app .pcr-interaction .pcr-result::selection{background:#4285f4;color:#fff}.pcr-app .pcr-interaction .pcr-type.active{color:#fff;background:#4285f4}.pcr-app .pcr-interaction .pcr-cancel,.pcr-app .pcr-interaction .pcr-clear,.pcr-app .pcr-interaction .pcr-save{width:auto;color:#fff}.pcr-app .pcr-interaction .pcr-cancel:hover,.pcr-app .pcr-interaction .pcr-clear:hover,.pcr-app .pcr-interaction .pcr-save:hover{-webkit-filter:brightness(.925);filter:brightness(.925)}.pcr-app .pcr-interaction .pcr-save{background:#4285f4}.pcr-app .pcr-interaction .pcr-cancel,.pcr-app .pcr-interaction .pcr-clear{background:#f44250}.pcr-app .pcr-interaction .pcr-cancel:focus,.pcr-app .pcr-interaction .pcr-clear:focus{box-shadow:0 0 0 1px hsla(0,0%,100%,.85),0 0 0 3px rgba(244,66,80,.75)}.pcr-app .pcr-selection .pcr-picker{position:absolute;height:18px;width:18px;border:2px solid #fff;border-radius:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.pcr-app .pcr-selection .pcr-color-chooser,.pcr-app .pcr-selection .pcr-color-opacity,.pcr-app .pcr-selection .pcr-color-palette{position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;flex-direction:column;cursor:grab;cursor:-webkit-grab}.pcr-app .pcr-selection .pcr-color-chooser:active,.pcr-app .pcr-selection .pcr-color-opacity:active,.pcr-app .pcr-selection .pcr-color-palette:active{cursor:grabbing;cursor:-webkit-grabbing}.pcr-app[data-theme=nano]{width:14.25em;max-width:95vw}.pcr-app[data-theme=nano] .pcr-swatches{margin-top:.6em;padding:0 .6em}.pcr-app[data-theme=nano] .pcr-interaction{padding:0 .6em .6em}.pcr-app[data-theme=nano] .pcr-selection{display:grid;grid-gap:.6em;grid-template-columns:1fr 4fr;grid-template-rows:5fr auto auto;align-items:center;height:10.5em;width:100%;align-self:flex-start}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-preview{grid-area:2/1/4/1;height:100%;width:100%;display:flex;flex-direction:row;justify-content:center;margin-left:.6em}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-preview .pcr-last-color{display:none}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-preview .pcr-current-color{position:relative;background:currentColor;width:2em;height:2em;border-radius:50em;overflow:hidden}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-preview .pcr-current-color:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8, ');background-size:.5em;border-radius:.15em;z-index:-1}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-palette{grid-area:1/1/2/3;width:100%;height:100%;z-index:1}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-palette .pcr-palette{border-radius:.15em;width:100%;height:100%}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-palette .pcr-palette:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8, ');background-size:.5em;border-radius:.15em;z-index:-1}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser{grid-area:2/2/2/2}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity{grid-area:3/2/3/2}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser,.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity{height:.5em;margin:0 .6em}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser .pcr-picker,.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity .pcr-picker{top:50%;transform:translateY(-50%)}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser .pcr-slider,.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity .pcr-slider{flex-grow:1;border-radius:50em}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser .pcr-slider{background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity .pcr-slider{background:linear-gradient(90deg,transparent,#000),url('data:image/svg+xml;utf8, ');background-size:100%,.25em} \ No newline at end of file diff --git a/external_js/pickr.min.js b/external_js/pickr.min.js new file mode 100644 index 0000000..f227164 --- /dev/null +++ b/external_js/pickr.min.js @@ -0,0 +1,3 @@ +/*! Pickr 1.7.0 MIT | https://github.com/Simonwep/pickr */ +!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.Pickr=e():t.Pickr=e()}(window,(function(){return function(t){var e={};function o(n){if(e[n])return e[n].exports;var r=e[n]={i:n,l:!1,exports:{}};return t[n].call(r.exports,r,r.exports,o),r.l=!0,r.exports}return o.m=t,o.c=e,o.d=function(t,e,n){o.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},o.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},o.t=function(t,e){if(1&e&&(t=o(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)o.d(n,r,function(e){return t[e]}.bind(null,r));return n},o.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return o.d(e,"a",e),e},o.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},o.p="",o(o.s=1)}([function(t){t.exports=JSON.parse('{"a":"1.7.0"}')},function(t,e,o){"use strict";o.r(e);var n={};function r(t,e){var o=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);e&&(n=n.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),o.push.apply(o,n)}return o}function i(t){for(var e=1;e{const o=t.getAttribute(e);return t.removeAttribute(e),o},o=(t,n={})=>{const r=e(t,":obj"),i=e(t,":ref"),s=r?n[r]={}:n;i&&(n[i]=t);for(const n of Array.from(t.children)){const t=e(n,":arr"),r=o(n,t?{}:s);t&&(s[t]||(s[t]=[])).push(Object.keys(r).length?r:n)}return n};return o(p(t))}function h(t){let e=t.path||t.composedPath&&t.composedPath();if(e)return e;let o=t.target.parentElement;for(e=[t.target,o];o=o.parentElement;)e.push(o);return e.push(document,window),e}function d(t){return t instanceof Element?t:"string"==typeof t?t.split(/>>/g).reduce((t,e,o,n)=>(t=t.querySelector(e),ot)){function o(o){const n=[.001,.01,.1][Number(o.shiftKey||2*o.ctrlKey)]*(o.deltaY<0?1:-1);let r=0,i=t.selectionStart;t.value=t.value.replace(/[\d.]+/g,(t,o)=>o<=i&&o+t.length>=i?(i=o,e(Number(t),n,r)):(r++,t)),t.focus(),t.setSelectionRange(i,i),o.preventDefault(),t.dispatchEvent(new Event("input"))}a(t,"focus",()=>a(window,"wheel",o,{passive:!1})),a(t,"blur",()=>l(window,"wheel",o))}var b=o(0);const{min:m,max:v,floor:y,round:g}=Math;function _(t,e,o){e/=100,o/=100;const n=y(t=t/360*6),r=t-n,i=o*(1-e),s=o*(1-r*e),c=o*(1-(1-r)*e),a=n%6;return[255*[o,s,i,i,c,o][a],255*[c,o,o,s,i,i][a],255*[i,i,c,o,o,s][a]]}function w(t,e,o){const n=(2-(e/=100))*(o/=100)/2;return 0!==n&&(e=1===n?0:n<.5?e*o/(2*n):e*o/(2-2*n)),[t,100*e,100*n]}function O(t,e,o){const n=m(t/=255,e/=255,o/=255),r=v(t,e,o),i=r-n;let s,c;if(0===i)s=c=0;else{c=i/r;const n=((r-t)/6+i/2)/i,a=((r-e)/6+i/2)/i,l=((r-o)/6+i/2)/i;t===r?s=l-a:e===r?s=1/3+n-l:o===r&&(s=2/3+a-n),s<0?s+=1:s>1&&(s-=1)}return[360*s,100*c,100*r]}function A(t,e,o,n){return e/=100,o/=100,[...O(255*(1-m(1,(t/=100)*(1-(n/=100))+n)),255*(1-m(1,e*(1-n)+n)),255*(1-m(1,o*(1-n)+n)))]}function k(t,e,o){e/=100;const n=2*(e*=(o/=100)<.5?o:1-o)/(o+e)*100,r=100*(o+e);return[t,isNaN(n)?0:n,r]}function C(t){return O(...t.match(/.{2}/g).map(t=>parseInt(t,16)))}function j(t){t=t.match(/^[a-zA-Z]+$/)?function(t){if("black"===t.toLowerCase())return"#000";const e=document.createElement("canvas").getContext("2d");return e.fillStyle=t,"#000"===e.fillStyle?null:e.fillStyle}(t):t;const e={cmyk:/^cmyk[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)/i,rgba:/^((rgba)|rgb)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i,hsla:/^((hsla)|hsl)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i,hsva:/^((hsva)|hsv)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i,hexa:/^#?(([\dA-Fa-f]{3,4})|([\dA-Fa-f]{6})|([\dA-Fa-f]{8}))$/i},o=t=>t.map(t=>/^(|\d+)\.\d+|\d+$/.test(t)?Number(t):void 0);let n;t:for(const r in e){if(!(n=e[r].exec(t)))continue;const i=t=>!!n[2]==("number"==typeof t);switch(r){case"cmyk":{const[,t,e,i,s]=o(n);if(t>100||e>100||i>100||s>100)break t;return{values:A(t,e,i,s),type:r}}case"rgba":{const[,,,t,e,s,c]=o(n);if(t>255||e>255||s>255||c<0||c>1||!i(c))break t;return{values:[...O(t,e,s),c],a:c,type:r}}case"hexa":{let[,t]=n;4!==t.length&&3!==t.length||(t=t.split("").map(t=>t+t).join(""));const e=t.substring(0,6);let o=t.substring(6);return o=o?parseInt(o,16)/255:void 0,{values:[...C(e),o],a:o,type:r}}case"hsla":{const[,,,t,e,s,c]=o(n);if(t>360||e>100||s>100||c<0||c>1||!i(c))break t;return{values:[...k(t,e,s),c],a:c,type:r}}case"hsva":{const[,,,t,e,s,c]=o(n);if(t>360||e>100||s>100||c<0||c>1||!i(c))break t;return{values:[t,e,s,c],a:c,type:r}}}}return{values:null,type:null}}function S(t=0,e=0,o=0,n=1){const r=(t,e)=>(o=-1)=>e(~o?t.map(t=>Number(t.toFixed(o))):t),i={h:t,s:e,v:o,a:n,toHSVA(){const t=[i.h,i.s,i.v,i.a];return t.toString=r(t,t=>"hsva(".concat(t[0],", ").concat(t[1],"%, ").concat(t[2],"%, ").concat(i.a,")")),t},toHSLA(){const t=[...w(i.h,i.s,i.v),i.a];return t.toString=r(t,t=>"hsla(".concat(t[0],", ").concat(t[1],"%, ").concat(t[2],"%, ").concat(i.a,")")),t},toRGBA(){const t=[..._(i.h,i.s,i.v),i.a];return t.toString=r(t,t=>"rgba(".concat(t[0],", ").concat(t[1],", ").concat(t[2],", ").concat(i.a,")")),t},toCMYK(){const t=function(t,e,o){const n=_(t,e,o),r=n[0]/255,i=n[1]/255,s=n[2]/255,c=m(1-r,1-i,1-s);return[100*(1===c?0:(1-r-c)/(1-c)),100*(1===c?0:(1-i-c)/(1-c)),100*(1===c?0:(1-s-c)/(1-c)),100*c]}(i.h,i.s,i.v);return t.toString=r(t,t=>"cmyk(".concat(t[0],"%, ").concat(t[1],"%, ").concat(t[2],"%, ").concat(t[3],"%)")),t},toHEXA(){const t=function(t,e,o){return _(t,e,o).map(t=>g(t).toString(16).padStart(2,"0"))}(i.h,i.s,i.v),e=i.a>=1?"":Number((255*i.a).toFixed(0)).toString(16).toUpperCase().padStart(2,"0");return e&&t.push(e),t.toString=()=>"#".concat(t.join("").toUpperCase()),t},clone:()=>S(i.h,i.s,i.v,i.a)};return i}const P=t=>Math.max(Math.min(t,1),0);function E(t){const e={options:Object.assign({lock:null,onchange:()=>0,onstop:()=>0},t),_keyboard(t){const{options:o}=e,{type:n,key:r}=t;if(document.activeElement===o.wrapper){const{lock:o}=e.options,i="ArrowUp"===r,s="ArrowRight"===r,c="ArrowDown"===r,a="ArrowLeft"===r;if("keydown"===n&&(i||s||c||a)){let n=0,r=0;"v"===o?n=i||s?1:-1:"h"===o?n=i||s?-1:1:(r=i?-1:c?1:0,n=a?-1:s?1:0),e.update(P(e.cache.x+.01*n),P(e.cache.y+.01*r)),t.preventDefault()}else r.startsWith("Arrow")&&(e.options.onstop(),t.preventDefault())}},_tapstart(t){a(document,["mouseup","touchend","touchcancel"],e._tapstop),a(document,["mousemove","touchmove"],e._tapmove),t.preventDefault(),e._tapmove(t)},_tapmove(t){const{options:o,cache:n}=e,{lock:r,element:i,wrapper:s}=o,c=s.getBoundingClientRect();let a=0,l=0;if(t){const e=t&&t.touches&&t.touches[0];a=t?(e||t).clientX:0,l=t?(e||t).clientY:0,ac.left+c.width&&(a=c.left+c.width),lc.top+c.height&&(l=c.top+c.height),a-=c.left,l-=c.top}else n&&(a=n.x*c.width,l=n.y*c.height);"h"!==r&&(i.style.left="calc(".concat(a/c.width*100,"% - ").concat(i.offsetWidth/2,"px)")),"v"!==r&&(i.style.top="calc(".concat(l/c.height*100,"% - ").concat(i.offsetHeight/2,"px)")),e.cache={x:a/c.width,y:l/c.height};const p=P(a/c.width),u=P(l/c.height);switch(r){case"v":return o.onchange(p);case"h":return o.onchange(u);default:return o.onchange(p,u)}},_tapstop(){e.options.onstop(),l(document,["mouseup","touchend","touchcancel"],e._tapstop),l(document,["mousemove","touchmove"],e._tapmove)},trigger(){e._tapmove()},update(t=0,o=0){const{left:n,top:r,width:i,height:s}=e.options.wrapper.getBoundingClientRect();"h"===e.options.lock&&(o=t),e._tapmove({clientX:n+i*t,clientY:r+s*o})},destroy(){const{options:t,_tapstart:o,_keyboard:n}=e;l(document,["keydown","keyup"],n),l([t.wrapper,t.element],"mousedown",o),l([t.wrapper,t.element],"touchstart",o,{passive:!1})}},{options:o,_tapstart:n,_keyboard:r}=e;return a([o.wrapper,o.element],"mousedown",n),a([o.wrapper,o.element],"touchstart",n,{passive:!1}),a(document,["keydown","keyup"],r),e}function D(t={}){t=Object.assign({onchange:()=>0,className:"",elements:[]},t);const e=a(t.elements,"click",e=>{t.elements.forEach(o=>o.classList[e.target===o?"add":"remove"](t.className)),t.onchange(e)});return{destroy:()=>l(...e)}}function x(t,e){var o=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);e&&(n=n.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),o.push.apply(o,n)}return o}function L(t){for(var e=1;e{class t{constructor(e,o,{positionFlipOrder:n=t.defaultPositionFlipOrder,variantFlipOrder:r=t.defaultVariantFlipOrder,container:i=document.documentElement.getBoundingClientRect(),forceApplyOnFailure:s=!1,margin:c=8,position:a="bottom-start"}={}){this.o={positionFlipOrder:n,variantFlipOrder:r,reference:e,popper:o,position:a,container:i,forceApplyOnFailure:s,margin:c}}update(t=this.o,e=!1){const{container:o,reference:n,popper:r,margin:i,position:s,forceApplyOnFailure:c,variantFlipOrder:a,positionFlipOrder:l}=this.o=L(L({},this.o),t);r.style.left="0",r.style.top="0";const p=n.getBoundingClientRect(),u=r.getBoundingClientRect(),h={t:p.top-u.height-i,b:p.bottom+i,r:p.right+i,l:p.left-u.width-i},d={vm:-u.width/2+(p.left+p.width/2),vs:p.left,ve:p.left+p.width-u.width,hs:p.bottom-p.height,he:p.bottom-u.height,hm:p.bottom-p.height/2-u.height/2},[f,b="middle"]=s.split("-"),m=l[f],v=a[b],{top:y,left:g,bottom:_,right:w}=o;for(const t of m){const o="t"===t||"b"===t,n=h[t],[i,s]=o?["top","left"]:["left","top"],[c,a]=o?[u.height,u.width]:[u.width,u.height],[l,p]=o?[_,w]:[w,_],[f,b]=o?[y,g]:[g,y];if(e||!(nl))for(const c of v){const l=d[(o?"v":"h")+c];if(e||!(lp))return r.style[s]=l-u[s]+"px",r.style[i]=n-u[i]+"px",t+c}}return c?this.update(void 0,!0):null}}return t.version="1.3.0",t.defaultVariantFlipOrder={start:"sme",middle:"mse",end:"ems"},t.defaultPositionFlipOrder={top:"tbrl",right:"rltb",bottom:"btrl",left:"lrbt"},t})();function R(t,e){var o=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);e&&(n=n.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),o.push.apply(o,n)}return o}function H(t,e,o){return e in t?Object.defineProperty(t,e,{value:o,enumerable:!0,configurable:!0,writable:!0}):t[e]=o,t}class N{constructor(t){H(this,"_initializingActive",!0),H(this,"_recalc",!0),H(this,"_nanopop",null),H(this,"_root",null),H(this,"_color",S()),H(this,"_lastColor",S()),H(this,"_swatchColors",[]),H(this,"_eventListener",{init:[],save:[],hide:[],show:[],clear:[],change:[],changestop:[],cancel:[],swatchselect:[]}),this.options=t=Object.assign(function(t){for(var e=1;ethis.addSwatch(t));const{button:u,app:h}=this._root;this._nanopop=new F(u,h,{margin:s}),u.setAttribute("role","button"),u.setAttribute("aria-label",this._t("btn:toggle"));const d=this;requestAnimationFrame((function e(){if(!h.offsetWidth&&h.parentElement!==t.container)return requestAnimationFrame(e);d.setColor(t.default),d._rePositioningPicker(),t.defaultRepresentation&&(d._representation=t.defaultRepresentation,d.setColorRepresentation(d._representation)),t.showAlways&&d.show(),d._initializingActive=!1,d._emit("init")}))}_preBuild(){const{options:t}=this;for(const e of["el","container"])t[e]=d(t[e]);this._root=(t=>{const{components:e,useAsButton:o,inline:n,appClass:r,theme:i,lockOpacity:s}=t.options,c=t=>t?"":'style="display:none" hidden',a=e=>t._t(e),l=u('\n
\n\n '.concat(o?"":'','\n\n
\n
\n
\n \n
\n
\n\n
\n
\n
\n
\n\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n\n
\n \n\n \n \n \n \n \n\n \n \n \n
\n
\n
\n ')),p=l.interaction;return p.options.find(t=>!t.hidden&&!t.classList.add("active")),p.type=()=>p.options.find(t=>t.classList.contains("active")),l})(this),t.useAsButton&&(this._root.button=t.el),t.container.appendChild(this._root.root)}_finalBuild(){const t=this.options,e=this._root;if(t.container.removeChild(e.root),t.inline){const o=t.el.parentElement;t.el.nextSibling?o.insertBefore(e.app,t.el.nextSibling):o.appendChild(e.app)}else t.container.appendChild(e.app);t.useAsButton?t.inline&&t.el.remove():t.el.parentNode.replaceChild(e.root,t.el),t.disabled&&this.disable(),t.comparison||(e.button.style.transition="none",t.useAsButton||(e.preview.lastColor.style.transition="none")),this.hide()}_buildComponents(){const t=this,e=this.options.components,o=(t.options.sliders||"v").repeat(2),[n,r]=o.match(/^[vh]+$/g)?o:[],i=()=>this._color||(this._color=this._lastColor.clone()),s={palette:E({element:t._root.palette.picker,wrapper:t._root.palette.palette,onstop:()=>t._emit("changestop",t),onchange(o,n){if(!e.palette)return;const r=i(),{_root:s,options:c}=t,{lastColor:a,currentColor:l}=s.preview;t._recalc&&(r.s=100*o,r.v=100-100*n,r.v<0&&(r.v=0),t._updateOutput());const p=r.toRGBA().toString(0);this.element.style.background=p,this.wrapper.style.background="\n linear-gradient(to top, rgba(0, 0, 0, ".concat(r.a,"), transparent),\n linear-gradient(to left, hsla(").concat(r.h,", 100%, 50%, ").concat(r.a,"), rgba(255, 255, 255, ").concat(r.a,"))\n "),c.comparison?c.useAsButton||t._lastColor||(a.style.color=p):(s.button.style.color=p,s.button.classList.remove("clear"));const u=r.toHEXA().toString();for(const{el:e,color:o}of t._swatchColors)e.classList[u===o.toHEXA().toString()?"add":"remove"]("pcr-active");l.style.color=p}}),hue:E({lock:"v"===r?"h":"v",element:t._root.hue.picker,wrapper:t._root.hue.slider,onstop:()=>t._emit("changestop",t),onchange(o){if(!e.hue||!e.palette)return;const n=i();t._recalc&&(n.h=360*o),this.element.style.backgroundColor="hsl(".concat(n.h,", 100%, 50%)"),s.palette.trigger()}}),opacity:E({lock:"v"===n?"h":"v",element:t._root.opacity.picker,wrapper:t._root.opacity.slider,onstop:()=>t._emit("changestop",t),onchange(o){if(!e.opacity||!e.palette)return;const n=i();t._recalc&&(n.a=Math.round(100*o)/100),this.element.style.background="rgba(0, 0, 0, ".concat(n.a,")"),s.palette.trigger()}}),selectable:D({elements:t._root.interaction.options,className:"active",onchange(e){t._representation=e.target.getAttribute("data-type").toUpperCase(),t._recalc&&t._updateOutput()}})};this._components=s}_bindEvents(){const{_root:t,options:e}=this,o=[a(t.interaction.clear,"click",()=>this._clearColor()),a([t.interaction.cancel,t.preview.lastColor],"click",()=>{this._emit("cancel",this),this.setHSVA(...(this._lastColor||this._color).toHSVA(),!0)}),a(t.interaction.save,"click",()=>{!this.applyColor()&&!e.showAlways&&this.hide()}),a(t.interaction.result,["keyup","input"],t=>{this.setColor(t.target.value,!0)&&!this._initializingActive&&this._emit("change",this._color),t.stopImmediatePropagation()}),a(t.interaction.result,["focus","blur"],t=>{this._recalc="blur"===t.type,this._recalc&&this._updateOutput()}),a([t.palette.palette,t.palette.picker,t.hue.slider,t.hue.picker,t.opacity.slider,t.opacity.picker],["mousedown","touchstart"],()=>this._recalc=!0)];if(!e.showAlways){const n=e.closeWithKey;o.push(a(t.button,"click",()=>this.isOpen()?this.hide():this.show()),a(document,"keyup",t=>this.isOpen()&&(t.key===n||t.code===n)&&this.hide()),a(document,["touchstart","mousedown"],e=>{this.isOpen()&&!h(e).some(e=>e===t.app||e===t.button)&&this.hide()},{capture:!0}))}if(e.adjustableNumbers){const e={rgba:[255,255,255,1],hsva:[360,100,100,1],hsla:[360,100,100,1],cmyk:[100,100,100,100]};f(t.interaction.result,(t,o,n)=>{const r=e[this.getColorRepresentation().toLowerCase()];if(r){const e=r[n],i=t+(e>=100?1e3*o:o);return i<=0?0:Number((i{n.isOpen()&&(e.closeOnScroll&&n.hide(),null===t?(t=setTimeout(()=>t=null,100),requestAnimationFrame((function e(){n._rePositioningPicker(),null!==t&&requestAnimationFrame(e)}))):(clearTimeout(t),t=setTimeout(()=>t=null,100)))},{capture:!0}))}this._eventBindings=o}_rePositioningPicker(){const{options:t}=this;if(!t.inline){if(!this._nanopop.update({position:t.position,forceApplyOnFailure:!this._recalc})){const t=this._root.app,e=t.getBoundingClientRect();t.style.top="".concat((window.innerHeight-e.height)/2,"px"),t.style.left="".concat((window.innerWidth-e.width)/2,"px")}}}_updateOutput(){const{_root:t,_color:e,options:o}=this;if(t.interaction.type()){const n="to".concat(t.interaction.type().getAttribute("data-type"));t.interaction.result.value="function"==typeof e[n]?e[n]().toString(o.outputPrecision):""}!this._initializingActive&&this._recalc&&this._emit("change",e)}_clearColor(t=!1){const{_root:e,options:o}=this;o.useAsButton||(e.button.style.color="rgba(0, 0, 0, 0.15)"),e.button.classList.add("clear"),o.showAlways||this.hide(),this._lastColor=null,this._initializingActive||t||(this._emit("save",null),this._emit("clear",this))}_parseLocalColor(t){const{values:e,type:o,a:n}=j(t),{lockOpacity:r}=this.options,i=void 0!==n&&1!==n;return e&&3===e.length&&(e[3]=void 0),{values:!e||r&&i?null:e,type:o}}_t(t){return this.options.i18n[t]||N.I18N_DEFAULTS[t]}_emit(t,...e){this._eventListener[t].forEach(t=>t(...e,this))}on(t,e){return this._eventListener[t].push(e),this}off(t,e){const o=this._eventListener[t]||[],n=o.indexOf(e);return~n&&o.splice(n,1),this}addSwatch(t){const{values:e}=this._parseLocalColor(t);if(e){const{_swatchColors:t,_root:o}=this,n=S(...e),r=p('