diff --git a/_locales/en/messages.json b/_locales/en/messages.json index c31ae1a..ef8446a 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -175,5 +175,14 @@ }, "websites": { "message": "Websites" + }, + "global": { + "message": "Global" + }, + "current": { + "message": "Current" + }, + "textEditorMode": { + "message": "Text editor mode" } -} \ No newline at end of file +} diff --git a/content-scripts.js b/content-scripts.js index a668b60..6ccf011 100644 --- a/content-scripts.js +++ b/content-scripts.js @@ -1,4 +1,5 @@ -var settings = {}; +var settings = {}, + current_website; function getFilters(settings) { var string = '', @@ -12,7 +13,7 @@ function getFilters(settings) { bluelight.style.position = 'absolute'; bluelight.style.visibility = 'hidden'; bluelight.style.pointerEvents = 'none'; - bluelight.innerHTML = ''; + bluelight.innerHTML = ''; document.documentElement.appendChild(bluelight); @@ -22,7 +23,7 @@ function getFilters(settings) { } if (settings.invert_colors === true || settings.invert_colors === undefined) { - string += 'html,body{background:#000 0 0}'; + string += 'html,body{background:#000 0 0 !important}'; string += 'body > *,body [style*="url("],body [style*=background-position],body canvas,body iframe,body img:not([src*="/ic_"]):not([src*=_ic_]):not([class*=icon]),body pre,body video{-webkit-filter:invert(1)!important;filter:invert(1)!important}'; } @@ -87,6 +88,16 @@ function update() { } else if (schedule_time.to < schedule_time.from && current_time < schedule_time.to) { schedule_time.from = 0; } + + if (settings.websites) { + for (var key in settings.websites) { + try { + if (location.hostname.indexOf(key) !== -1 || new RegExp(key).test(location.href)) { + current_website = settings.websites[key]; + } + } catch (err) {} + } + } for (var key in settings.websites) { if (settings.websites[key].enabled === true) { @@ -97,8 +108,8 @@ function update() { var sett = {}; - if (settings.websites && settings.websites[location.hostname] && settings.websites[location.hostname].filters) { - sett = settings.websites[location.hostname].filters; + if (settings.websites && current_website && current_website.filters) { + sett = current_website.filters; } if (sett.invert_colors === undefined) { @@ -136,14 +147,20 @@ function update() { ) { injectStyle(getFilters(sett), 'night-mode-extension-filters', settings.schedule); - if (settings.websites && settings.websites[location.hostname] && settings.websites[location.hostname].styles) { - injectStyle(settings.websites[location.hostname].styles, 'night-mode-extension-styles', settings.schedule); + injectStyle(settings.styles, 'night-mode-extension-global-styles', settings.schedule); + + if (settings.websites && current_website && current_website.styles) { + injectStyle(current_website.styles, 'night-mode-extension-styles', settings.schedule); } } else { if (document.querySelector('#night-mode-extension-filters')) { document.querySelector('#night-mode-extension-filters').remove(); } + if (document.querySelector('#night-mode-extension-global-styles')) { + document.querySelector('#night-mode-extension-global-styles').remove(); + } + if (document.querySelector('#night-mode-extension-styles')) { document.querySelector('#night-mode-extension-styles').remove(); } @@ -161,6 +178,10 @@ chrome.storage.onChanged.addListener(function(changes) { document.querySelector('#night-mode-extension-filters').remove(); } + if (document.querySelector('#night-mode-extension-global-styles')) { + document.querySelector('#night-mode-extension-global-styles').remove(); + } + if (document.querySelector('#night-mode-extension-styles')) { document.querySelector('#night-mode-extension-styles').remove(); } diff --git a/manifest.json b/manifest.json index 3bac696..0336cc2 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "manifest_version": 2, "name": "Dark Mode", - "version": "1.25", + "version": "1.40", "description": "Dark Mode, read at night. Blue Light Filter for Every Website. Relax your eyes at night and day.", "default_locale": "en", diff --git a/popup.css b/popup.css index f5f9085..b26bd08 100644 --- a/popup.css +++ b/popup.css @@ -169,6 +169,7 @@ button 4.0 Title 5.0 Right section 6.0 Switch +7.0 Vertical menu ---------------------------------------------------------------*/ /*--------------------------------------------------------------- @@ -258,9 +259,15 @@ body[data-appearance='home'] .satus-text--title .satus-switch--night-mode { + display: none; padding: 0; } +body[data-appearance='home'] .satus-switch--night-mode +{ + display: flex; +} + .satus-switch--night-mode:hover { background-color: transparent; @@ -285,6 +292,21 @@ body[data-appearance='home'] .satus-text--title { background: #777; } + + +/*--------------------------------------------------------------- +7.0 VERTICAL MENU +---------------------------------------------------------------*/ + +.satus-dialog--vertical-menu-button +{ + display: none +} + +body[data-appearance='websites'] .satus-dialog--vertical-menu-button +{ + display: block +} /*--------------------------------------------------------------- >>> TABLE OF CONTENTS: @@ -310,6 +332,21 @@ body[data-appearance='home'] .satus-text--title flex: 1; } +.websites-textfield +{ + display: none +} + +body[data-website-text-editor="true"] .websites-list +{ + display: none +} + +body[data-website-text-editor="true"] .websites-textfield +{ + display: block +} + /*--------------------------------------------------------------- 2.0 SECTION diff --git a/popup.js b/popup.js index fa45e4d..bc53271 100644 --- a/popup.js +++ b/popup.js @@ -98,10 +98,29 @@ var Menu = { onrender: function() { this.dataset.value = this.querySelector('input').checked; } + }, + + button_vert: { + type: 'button', + class: 'satus-dialog--vertical-menu-button', + icon: '', + onClickRender: { + type: 'dialog', + class: 'satus-dialog--vertical-menu', + + websiteTextEditor: { + type: 'switch', + label: 'textEditorMode', + onclick: function() { + document.body.dataset.websiteTextEditor = this.querySelector('input').checked; + } + } + } } } } -}; +}; + Menu.main = { type: 'main', appearanceKey: 'home', @@ -218,21 +237,54 @@ Menu.main = { label: 'styles', before: '', - textfield: { - type: 'text-field', - placeholder: 'html, body { ... }', - style: { - margin: '16px', - height: 'calc(100vh - 96px)', - fontFamily: 'monospace' - }, - rows: 6, - onrender: function(object) { - this.dataset.storageKey = object.storage_key; - this.value = Satus.storage.get(object.storage_key) || ''; + tabs: { + type: 'tabs', + + global: { + type: 'tab', + label: 'Global', + + textfield: { + type: 'text-field', + placeholder: 'html, body { ... }', + style: { + margin: '16px', + height: 'calc(100vh - 96px)', + fontFamily: 'monospace' + }, + rows: 6, + onrender: function(object) { + object.storage_key = 'styles'; + this.dataset.storageKey = object.storage_key; + this.value = Satus.storage.get(object.storage_key) || ''; + }, + oninput: function() { + Satus.storage.set(this.dataset.storageKey, this.value); + } + } }, - oninput: function() { - Satus.storage.set(this.dataset.storageKey, this.value); + current: { + type: 'tab', + label: 'Current', + + textfield: { + type: 'text-field', + placeholder: 'html, body { ... }', + style: { + margin: '16px', + height: 'calc(100vh - 96px)', + fontFamily: 'monospace' + }, + rows: 6, + onrender: function(object) { + object.storage_key = 'websites/' + HOSTNAME + '/styles'; + this.dataset.storageKey = object.storage_key; + this.value = Satus.storage.get(object.storage_key) || ''; + }, + oninput: function() { + Satus.storage.set(this.dataset.storageKey, this.value); + } + } } } }, @@ -242,8 +294,39 @@ Menu.main = { appearanceKey: 'websites', before: '', - section: { - type: 'section' + section: {}, + + textfield: { + type: 'text-field', + class: 'websites-textfield', + style: { + margin: '16px', + height: 'calc(100vh - 96px)', + fontFamily: 'monospace' + }, + rows: 6, + spellcheck: false, + oninput: function() { + var websites = {}, + regex = /^\s*(\S+).*:\s*(\S+)[\s\n]*$/gm, + match, + url; + + while (match = regex.exec(this.value)) { + if (/invert_colors|bluelight|brightness|contrast|grayscale|sepia/.test(match[1]) === true) { + websites[url].filters[match[1]] = match[1] === 'invert_colors' ? match[2] === 'false' ? false : true : Number(match[2]); + } else { + url = match[1]; + + websites[url] = { + enabled: match[2] === 'false' ? false : true, + filters: {} + }; + } + } + + satus.storage.set('websites', websites); + } } }, schedule: { @@ -764,6 +847,148 @@ Menu.main = { 1.0 ---------------------------------------------------------------*/ +var HOSTNAME; + +function updateWebsites() { + Menu.main.section.filters.tabs.current.section.invert_colors.storage_key = 'websites/' + HOSTNAME + '/filters/invert_colors'; + Menu.main.section.filters.tabs.current.section.bluelight.storage_key = 'websites/' + HOSTNAME + '/filters/bluelight'; + Menu.main.section.filters.tabs.current.section.brightness.storage_key = 'websites/' + HOSTNAME + '/filters/brightness'; + Menu.main.section.filters.tabs.current.section.contrast.storage_key = 'websites/' + HOSTNAME + '/filters/contrast'; + Menu.main.section.filters.tabs.current.section.grayscale.storage_key = 'websites/' + HOSTNAME + '/filters/grayscale'; + Menu.main.section.filters.tabs.current.section.sepia.storage_key = 'websites/' + HOSTNAME + '/filters/sepia'; + + document.body.dataset.websiteTextEditor = satus.storage.get('websiteTextEditor'); + + var websites = Satus.storage.get('websites') || {}, + text = '', + count = 0; + + Menu.main.section.websites.section = { + type: 'section', + class: 'websites-list' + }; + + for (var key in websites) { + if (key !== '') { + count++; + + text += key + ': ' + (satus.storage.get('websites/' + key + '/enabled') || true) + + '\n invert_colors: ' + (satus.storage.get('websites/' + key + '/filters/invert_colors') || true) + + '\n bluelight: ' + (satus.storage.get('websites/' + key + '/filters/bluelight') || 0) + + '\n brightness: ' + (satus.storage.get('websites/' + key + '/filters/brightness') || 100) + + '\n contrast: ' + (satus.storage.get('websites/' + key + '/filters/contrast') || 100) + + '\n grayscale: ' + (satus.storage.get('websites/' + key + '/filters/grayscale') || 0) + + '\n sepia: ' + (satus.storage.get('websites/' + key + '/filters/sepia') || 0) + '\n\n'; + + Menu.main.section.websites.section[key] = { + type: 'section', + + folder: { + type: 'folder', + label: key, + + section: { + type: 'section', + + filters: { + type: 'folder', + label: 'filters', + before: '', + + section: { + type: 'section', + + invert_colors: { + label: 'invertColors', + type: 'switch', + value: true, + storage_key: 'websites/' + key + '/filters/invert_colors' + }, + bluelight: { + label: 'bluelight', + type: 'slider', + max: 90, + storage_key: 'websites/' + key + '/filters/bluelight' + }, + brightness: { + label: 'brightness', + type: 'slider', + max: 100, + value: 100, + storage_key: 'websites/' + key + '/filters/brightness' + }, + contrast: { + label: 'contrast', + type: 'slider', + max: 100, + value: 100, + storage_key: 'websites/' + key + '/filters/contrast' + }, + grayscale: { + label: 'grayscale', + type: 'slider', + max: 100, + storage_key: 'websites/' + key + '/filters/grayscale' + }, + sepia: { + label: 'sepia', + type: 'slider', + max: 100, + storage_key: 'websites/' + key + '/filters/sepia' + } + } + }, + styles: { + type: 'folder', + label: 'styles', + before: '', + + textfield: { + type: 'text-field', + placeholder: 'html, body { ... }', + style: { + margin: '16px', + height: 'calc(100vh - 96px)', + fontFamily: 'monospace' + }, + rows: 6, + storage_key: 'websites/' + key + '/styles', + onrender: function(object) { + this.dataset.storageKey = object.storage_key; + this.value = Satus.storage.get(object.storage_key) || ''; + }, + oninput: function() { + Satus.storage.set(this.dataset.storageKey, this.value); + } + } + } + } + }, + enabled: { + type: 'switch', + storage_key: 'websites/' + key + '/enabled' + } + }; + } + } + + if (count === 0) { + Menu.main.section.websites.section.message = { + type: 'text', + label: 'theListIsEmpty', + style: { + 'display': 'block', + 'text-align': 'center', + 'margin': '32px 0' + } + }; + } else { + Menu.main.section.websites.textfield.value = text; + } + + Satus.render(Menu, document.querySelector('.satus__wrapper')); +} + function init(response) { var TAB_URL = response ? new URL(response) : ''; @@ -789,127 +1014,7 @@ function init(response) { Menu.main.toolbar.enable.storage_key = 'websites/' + HOSTNAME + '/enabled'; } - Menu.main.section.filters.tabs.current.section.invert_colors.storage_key = 'websites/' + HOSTNAME + '/filters/invert_colors'; - Menu.main.section.filters.tabs.current.section.bluelight.storage_key = 'websites/' + HOSTNAME + '/filters/bluelight'; - Menu.main.section.filters.tabs.current.section.brightness.storage_key = 'websites/' + HOSTNAME + '/filters/brightness'; - Menu.main.section.filters.tabs.current.section.contrast.storage_key = 'websites/' + HOSTNAME + '/filters/contrast'; - Menu.main.section.filters.tabs.current.section.grayscale.storage_key = 'websites/' + HOSTNAME + '/filters/grayscale'; - Menu.main.section.filters.tabs.current.section.sepia.storage_key = 'websites/' + HOSTNAME + '/filters/sepia'; - - Menu.main.section.styles.textfield.storage_key = 'websites/' + HOSTNAME + '/styles'; - - var websites = Satus.storage.get('websites') || {}, - count = 0; - - for (var key in websites) { - if (key !== '') { - count++; - - Menu.main.section.websites.section[key] = { - type: 'section', - - folder: { - type: 'folder', - label: key, - - section: { - type: 'section', - - filters: { - type: 'folder', - label: 'filters', - before: '', - - section: { - type: 'section', - - invert_colors: { - label: 'invertColors', - type: 'switch', - value: true, - storage_key: 'websites/' + key + '/filters/invert_colors' - }, - bluelight: { - label: 'bluelight', - type: 'slider', - max: 90, - storage_key: 'websites/' + key + '/filters/bluelight' - }, - brightness: { - label: 'brightness', - type: 'slider', - max: 100, - value: 100, - storage_key: 'websites/' + key + '/filters/brightness' - }, - contrast: { - label: 'contrast', - type: 'slider', - max: 100, - value: 100, - storage_key: 'websites/' + key + '/filters/contrast' - }, - grayscale: { - label: 'grayscale', - type: 'slider', - max: 100, - storage_key: 'websites/' + key + '/filters/grayscale' - }, - sepia: { - label: 'sepia', - type: 'slider', - max: 100, - storage_key: 'websites/' + key + '/filters/sepia' - } - } - }, - styles: { - type: 'folder', - label: 'styles', - before: '', - - textfield: { - type: 'text-field', - placeholder: 'html, body { ... }', - style: { - margin: '16px', - height: 'calc(100vh - 96px)', - fontFamily: 'monospace' - }, - rows: 6, - storage_key: 'websites/' + key + '/styles', - onrender: function(object) { - this.dataset.storageKey = object.storage_key; - this.value = Satus.storage.get(object.storage_key) || ''; - }, - oninput: function() { - Satus.storage.set(this.dataset.storageKey, this.value); - } - } - } - } - }, - enabled: { - type: 'switch', - storage_key: 'websites/' + key + '/enabled' - } - }; - } - } - - if (count === 0) { - Menu.main.section.websites.section.message = { - type: 'text', - label: 'theListIsEmpty', - style: { - 'display': 'block', - 'text-align': 'center', - 'margin': '32px 0' - } - }; - } - - Satus.render(Menu, document.querySelector('.satus__wrapper')); + updateWebsites(); }); }); }); diff --git a/satus.css b/satus.css index 5e1083f..bf6648b 100644 --- a/satus.css +++ b/satus.css @@ -448,7 +448,7 @@ body[data-appearance='home'] .satus-text--title left: auto; min-width: 180px; - max-width: 180px; + max-width: 220px; transform-origin: right top; } @@ -696,7 +696,7 @@ body[data-appearance='home'] .satus-text--title box-sizing: border-box; width: calc(100% - 16px); - margin: 16px 8px; + margin: 16px 8px 4px; border: 1px solid var(--satus-theme-tabs-border); border-radius: 18px; @@ -751,6 +751,7 @@ body[data-appearance='home'] .satus-text--title { display: inline-block; width: 100%; + min-height: 100%; } .satus-tabs__main > .old @@ -759,216 +760,10 @@ body[data-appearance='home'] .satus-text--title left: 0; top: 0; } - -.satus-shortcut2 -{ - position: relative; - - display: flex; - - box-sizing: border-box; - width: 100%; - height: 48px; - min-height: 48px; - padding: 0 16px; - - cursor: pointer; - - justify-content: space-between; - align-items: center; - - overflow: hidden -} - -.satus-shortcut2:hover -{ - background-color: var(--satus-theme-ripple); -} - -.satus-shortcut2__value -{ - display: flex; - - box-sizing: border-box; - width: 100%; - height: 68px; - - align-items: center; -} - -.satus-shortcut2 > .label -{ - margin: 0 0 4px 0; -} - -.satus-shortcut2 > .value -{ - font-size: 13px; - - opacity: .5; -} -.satus-shortcut2-dialog-label +.satus-tabs__tab.satus-animation--fade-out-left:not(.old) { - font-size: 16px; - font-weight: 500; - - box-sizing: border-box; - width: 100%; - margin: 4px 0 10px; - padding: 0 16px; -} - -.satus-shortcut2__canvas -{ - display: flex; - - box-sizing: border-box; - width: 100%; - height: 68px; - padding: 16px; - - background: #dedede; - - align-items: center; -} - -.satus-shortcut2__key -{ - font-size: 12px; - line-height: 12px; - - display: flex; - - box-sizing: border-box; - min-width: 32px; - height: 32px; - padding: 4px 8px; - - border: 1px solid rgba(0,0,0,.1); - border-radius: 4px; - background: #fff; - box-shadow: 0 1px 1px rgba(0,0,0,.1), inset 0 -1px 0 rgba(0,0,0,.1); - - align-items: center; - justify-content: center; -} - -.satus-shortcut2__plus -{ -position: relative; - width: 10px; - height: 10px; - margin: 8px; -} - -.satus-shortcut2__plus::before -{ - position: absolute; - top: 0; - left: 4px; - width: 2px; - height: 10px; - content: ''; - background-color: #ccc; -} - -.satus-shortcut2__plus::after -{ - position: absolute; - top: 4px; - left: 0; - width: 10px; - height: 2px; - content: ''; - background-color: #ccc; -} - -.satus-shortcut2__mouse -{ - position: relative; - display: flex; - width: 24px; - height: 32px; - border-radius: 50%; - border-top-left-radius: 12px; - border-top-right-radius: 12px; - background: #fff; - box-shadow: 0 1px 3px rgba(0,0,0,.15), inset 0 -3px 0 rgba(0,0,0,.1); - -} - -.satus-shortcut2__mouse > div -{ - position: absolute; - top: 0; - left: 11px; - width: 2px; - height: 10px; - border-radius: 2px; - background: #ccc; -} - -.satus-shortcut2__mouse::before -{ - position: absolute; - top: 0px; - left: 18px; - width: 2px; - height: 14px; - content: ''; - background: #f96754; -} - -.satus-shortcut2__mouse.false::after -{ -position: absolute; - top: -5px; - left: 15px; - width: 0; - height: 0; - content: ''; - border-right: 4px solid transparent; - border-bottom: 6px solid #f96754; - border-left: 4px solid transparent; -} - -.satus-shortcut2__mouse.true::after -{ -position: absolute; - top: 13px; - left: 15px; - width: 0; - height: 0; - content: ''; - border-top: 6px solid #f96754; - border-right: 4px solid transparent; - border-left: 4px solid transparent; -} - -.satus-section_shortcut -{ - width: 100%; - margin: 8px 0 0; - - justify-content: flex-end; -} - -.satus-button_shortcut -{ - font-weight: 500; - - overflow: hidden; - - height: 28px; - min-height: 28px; - margin-right: 2px; - padding: 4px 8px; - - text-transform: uppercase; - - color: #f96754; - border-radius: 4px; + z-index: 1 } /*-------------------------------------------------------------- @@ -1256,6 +1051,11 @@ position: absolute; height: 100%; } +.satus-scrollbar__content +{ + min-height: 100%; +} + .satus-scrollbar__thumb { position: absolute; @@ -1534,6 +1334,15 @@ position: absolute; { background-color: var(--satus-theme-section); } + +.satus-section--label +{ + font-size: 17px; + display: block; + width: calc(100% - 16px); + max-width: 900px; + margin: 16px auto 8px; +} /*-------------------------------------------------------------- >>> COLOR PICKER @@ -1613,11 +1422,19 @@ position: absolute; margin: 0 0 16px; } +/*--------------------------------------------------------------- +>>> SHORTCUT +----------------------------------------------------------------- +# Canvas +# Popup +---------------------------------------------------------------*/ + .satus-shortcut { position: relative; display: flex; + overflow: hidden; box-sizing: border-box; width: 100%; @@ -1636,55 +1453,50 @@ position: absolute; background-color: var(--satus-theme-ripple); } -.satus-shortcut > .label +.satus-shortcut .satus-shortcut__label, +.satus-shortcut .satus-shortcut__value { - margin: 0 0 4px 0; + flex: 1 } -.satus-shortcut > .value +.satus-shortcut .satus-shortcut__label + .satus-shortcut__value { - font-size: 13px; - - opacity: .5; + justify-content: flex-end } -.satus-shortcut-dialog-label -{ - font-size: 16px; - font-weight: 500; - box-sizing: border-box; - width: 100%; - margin: 4px 0 10px; - padding: 0 16px; -} +/*--------------------------------------------------------------- +# CANVAS +---------------------------------------------------------------*/ -.satus-shortcut__canvas +.satus-shortcut__value { display: flex; box-sizing: border-box; width: 100%; - height: 68px; - padding: 16px; - - background: #dedede; + height: 48px; align-items: center; } + .satus-shortcut__key { + font-size: 12px; + line-height: 12px; + display: flex; box-sizing: border-box; - min-width: 32px; - height: 32px; + min-width: 28px; + height: 28px; padding: 4px 8px; + border: 1px solid rgba(0,0,0,.1); border-radius: 4px; background: #fff; - box-shadow: 0 1px 3px rgba(0,0,0,.15), inset 0 -3px 0 rgba(0,0,0,.1); + box-shadow: 0 1px 1px rgba(0,0,0,.1), inset 0 -1px 0 rgba(0,0,0,.1); align-items: center; justify-content: center; @@ -1694,37 +1506,37 @@ position: absolute; { position: relative; - width: 12px; - height: 12px; - margin: 8px; + width: 10px; + height: 10px; + margin: 8px 6px; } .satus-shortcut__plus::before { position: absolute; top: 0; - left: 5px; + left: 4px; width: 2px; - height: 12px; + height: 10px; content: ''; - background-color: #aaa; + background-color: #ccc; } .satus-shortcut__plus::after { position: absolute; - top: 5px; + top: 4px; left: 0; - width: 12px; + width: 10px; height: 2px; content: ''; - background-color: #aaa; + background-color: #ccc; } .satus-shortcut__mouse @@ -1733,8 +1545,8 @@ position: absolute; display: flex; - width: 28px; - height: 36px; + width: 24px; + height: 32px; border-radius: 50%; border-top-left-radius: 12px; @@ -1747,10 +1559,10 @@ position: absolute; { position: absolute; top: 0; - left: 13px; + left: 11px; width: 2px; - height: 11px; + height: 10px; border-radius: 2px; background: #ccc; @@ -1759,11 +1571,11 @@ position: absolute; .satus-shortcut__mouse::before { position: absolute; - top: -4px; - left: 21px; + top: 0; + left: 18px; width: 2px; - height: 18px; + height: 14px; content: ''; @@ -1773,33 +1585,85 @@ position: absolute; .satus-shortcut__mouse.false::after { position: absolute; - top: -12px; - left: 17px; + top: -5px; + left: 15px; width: 0; height: 0; content: ''; - border-right: 5px solid transparent; - border-bottom: 8px solid #f96754; - border-left: 5px solid transparent; + border-right: 4px solid transparent; + border-bottom: 6px solid #f96754; + border-left: 4px solid transparent; } .satus-shortcut__mouse.true::after { position: absolute; - top: 14px; - left: 17px; + top: 13px; + left: 15px; width: 0; height: 0; content: ''; - border-top: 8px solid #f96754; - border-right: 5px solid transparent; - border-left: 5px solid transparent; + border-top: 6px solid #f96754; + border-right: 4px solid transparent; + border-left: 4px solid transparent; +} + +.satus-shortcut__mouse.click::before { + position: absolute; + top: 0px; + left: -1px; + width: 10px; + height: 10px; + content: ''; + background: #f96754; + border-radius: 50%; +} + +.satus-shortcut__mouse.context::before { + position: absolute; + top: 0px; + left: 15px; + width: 10px; + height: 10px; + content: ''; + background: #f96754; + border-radius: 50%; +} + + +/*--------------------------------------------------------------- +# POPUP +---------------------------------------------------------------*/ + +.satus-shortcut-dialog-label +{ + font-size: 16px; + font-weight: 500; + + box-sizing: border-box; + width: 100%; + margin: 4px 0 10px; + padding: 0 16px; +} + +.satus-shortcut__canvas +{ + display: flex; + + box-sizing: border-box; + width: 100%; + height: 68px; + padding: 16px; + + background: #dedede; + + align-items: center; } .satus-section_shortcut diff --git a/satus.js b/satus.js index 0af8497..9590690 100644 --- a/satus.js +++ b/satus.js @@ -135,18 +135,6 @@ Satus.locale.import = function(src, callback) { xhr.open('GET', src, true); xhr.send(); }; -/*--------------------------------------------------------------- ->>> STORAGE ------------------------------------------------------------------ -# ----------------------------------------------------------------*/ - -/*--------------------------------------------------------------- -# ----------------------------------------------------------------*/ - -Satus - /*-------------------------------------------------------------- # CLONE NODE STYLES --------------------------------------------------------------*/ @@ -555,21 +543,23 @@ Satus.storage = { --------------------------------------------------------------*/ Satus.storage.get = function(name) { - var target = Satus.storage; + if (satus.isset(name)) { + var target = Satus.storage; - name = name.split('/').filter(function(value) { - return value != ''; - }); + name = name.split('/').filter(function(value) { + return value != ''; + }); - for (var i = 0, l = name.length; i < l; i++) { - if (Satus.isset(target[name[i]])) { - target = target[name[i]]; - } else { - return undefined; + for (var i = 0, l = name.length; i < l; i++) { + if (Satus.isset(target[name[i]])) { + target = target[name[i]]; + } else { + return undefined; + } } - } - return target; + return target; + } }; @@ -719,6 +709,8 @@ Satus.render = function(element, container, callback) { } applyProperties(object, component); + + component.skelet = object; component.classList.add('satus-' + object.type); @@ -781,7 +773,8 @@ Satus.render = function(element, container, callback) { convert(element[key]); } } -}; +}; + /*-------------------------------------------------------------- >>> STORAGE KEYS --------------------------------------------------------------*/ @@ -1282,19 +1275,21 @@ Satus.components.tabs = function(object) { satus.render(this.menu, container); - main.appendChild(container); - - if (main.children.length > 1) { - container.classList.add(index > prev_index ? 'satus-animation--fade-out-left' : 'satus-animation--fade-out-right'); + if (main.children.length >= 1) { + container.classList.add(index > prev_index ? 'satus-animation--fade-in-right' : 'satus-animation--fade-in-left'); main.children[0].classList.add('old'); - main.children[0].classList.add(index > prev_index ? 'satus-animation--fade-in-right' : 'satus-animation--fade-in-left'); + main.children[0].classList.add(index > prev_index ? 'satus-animation--fade-out-left' : 'satus-animation--fade-out-right'); + main.appendChild(container); + setTimeout(function() { main.children[0].remove(); - container.classList.remove(index > prev_index ? 'satus-animation--fade-out-left' : 'satus-animation--fade-out-right'); + container.classList.remove(index > prev_index ? 'satus-animation--fade-in-right' : 'satus-animation--fade-in-left'); }, 250); + } else { + main.appendChild(container); } } @@ -1302,7 +1297,7 @@ Satus.components.tabs = function(object) { if (object[key].type === 'tab') { var tab = document.createElement('div'); - tab.innerText = object[key].label; + tab.innerText = satus.locale.getMessage(object[key].label); tab.dataset.key = i; tab.onclick = update; tab.menu = Object.assign({}, object[key]); @@ -1323,211 +1318,6 @@ Satus.components.tabs = function(object) { return component; }; -/*------------------------------------------------------------------------------ ->>> SHORTCUT -------------------------------------------------------------------------------*/ - -Satus.components.shortcut2 = function(element) { - console.log(Satus.storage.get(element.storage_key)); - var self = this, - value = (Satus.storage.get(element.storage_key) ? JSON.parse(Satus.storage.get(element.storage_key)) : false) || element.value || {}, - component = document.createElement('div'), - component_label = document.createElement('span'), - component_value = document.createElement('span'), - mousewheel_timeout = false, - mousewheel_only = false; - - component_label.className = 'satus-shortcut2__label'; - component_value.className = 'satus-shortcut2__value'; - - function update(canvas) { - let text_value = [], - keys_value = []; - - if (value.altKey === true) { - text_value.push('Alt'); - keys_value.push('
Alt
'); - } - - if (value.ctrlKey === true) { - text_value.push('Ctrl'); - keys_value.push('
Ctrl
'); - } - - if (value.shiftKey === true) { - text_value.push('Shift'); - keys_value.push('
Shift
'); - } - - if (value.key === ' ') { - text_value.push('Space bar'); - keys_value.push('
Space bar
'); - - } else if (typeof value.key === 'string' && ['Shift', 'Control', 'Alt'].indexOf(value.key) === -1) { - if (value.key === 'ArrowUp') { - text_value.push('↑'); - keys_value.push('
↑
'); - } else if (value.key === 'ArrowRight') { - text_value.push('→'); - keys_value.push('
→
'); - } else if (value.key === 'ArrowDown') { - text_value.push('↓'); - keys_value.push('
↓
'); - } else if (value.key === 'ArrowLeft') { - text_value.push('←'); - keys_value.push('
←
'); - } else { - let key = value.key.toUpperCase(); - - text_value.push(key); - keys_value.push('
' + key + '
'); - } - } - - if (value.wheel) { - keys_value.push('
'); - } - - component_value.innerHTML = keys_value.join('
'); - - if (canvas) { - if (keys_value.length > 0) { - canvas.innerHTML = keys_value.join('
'); - } else { - canvas.innerText = Satus.locale.getMessage('pressAnyKeyOrUseMouseWheel'); - } - } - } - - update(); - - component_value.dataset.value = component_value.innerText; - - component_label.innerText = Satus.locale.getMessage(element.label); - - component.addEventListener('click', function() { - let component_dialog = document.createElement('div'), - component_dialog_label = document.createElement('span'), - component_scrim = document.createElement('div'), - component_surface = document.createElement('div'), - component_canvas = document.createElement('div'), - component_section = document.createElement('section'), - component_button_reset = document.createElement('div'), - component_button_cancel = document.createElement('div'), - component_button_save = document.createElement('div'); - - component_dialog.className = 'satus-dialog satus-dialog_open'; - component_dialog_label.className = 'satus-shortcut2-dialog-label'; - component_scrim.className = 'satus-dialog__scrim'; - component_surface.className = 'satus-dialog__surface satus-dialog__surface_shortcut'; - component_canvas.className = 'satus-shortcut2__canvas'; - component_section.className = 'satus-section satus-section--align-end satus-section_shortcut'; - component_button_reset.className = 'satus-button satus-button_shortcut'; - component_button_cancel.className = 'satus-button satus-button_shortcut'; - component_button_save.className = 'satus-button satus-button_shortcut'; - - component_dialog_label.innerText = component_label.innerText; - component_button_reset.innerText = Satus.locale.getMessage('reset'); - component_button_cancel.innerText = Satus.locale.getMessage('cancel'); - component_button_save.innerText = Satus.locale.getMessage('save'); - - update(component_canvas); - - function keydown(event) { - event.preventDefault(); - event.stopPropagation(); - - mousewheel_only = false; - clearTimeout(mousewheel_timeout); - - value = { - key: event.key, - keyCode: event.keyCode, - shiftKey: event.shiftKey, - ctrlKey: event.ctrlKey, - altKey: event.altKey - }; - - update(component_canvas); - - return false; - } - - function mousewheel(event) { - event.stopPropagation(); - - if (mousewheel_only === true) { - delete value.shiftKey; - delete value.altKey; - delete value.ctrlKey; - delete value.keyCode; - delete value.key; - } - - clearTimeout(mousewheel_timeout); - - mousewheel_timeout = setTimeout(function() { - mousewheel_only = true; - }, 300); - - value.wheel = event.deltaY; - - update(component_canvas); - - return false; - } - - window.addEventListener('keydown', keydown); - window.addEventListener('mousewheel', mousewheel); - - function close(clear = true) { - window.removeEventListener('keydown', keydown); - window.removeEventListener('mousewheel', mousewheel); - - if (clear === true) { - component_value.innerText = component_value.dataset.value; - } - - component_dialog.classList.remove('satus-dialog_open'); - - setTimeout(function() { - component_dialog.remove(); - }, Number(document.defaultView.getComputedStyle(component_dialog, '').getPropertyValue('animation-duration').replace(/[^0-9.]/g, '') * 1000)); - } - - component_scrim.addEventListener('click', close); - component_button_reset.addEventListener('click', function() { - Satus.storage.set(element.storage_key, null); - close(); - value = (Satus.storage.get(element.storage_key) ? JSON.parse(Satus.storage.get(element.storage_key)) : false) || object.value || {}; - update(); - }); - component_button_cancel.addEventListener('click', close); - component_button_save.addEventListener('click', function() { - Satus.storage.set(element.storage_key, JSON.stringify(value)); - close(false); - }); - - component_section.appendChild(component_button_reset); - component_section.appendChild(component_button_cancel); - component_section.appendChild(component_button_save); - - component_surface.appendChild(component_dialog_label); - component_surface.appendChild(component_canvas); - component_surface.appendChild(component_section); - - component_dialog.appendChild(component_scrim); - component_dialog.appendChild(component_surface); - - document.body.appendChild(component_dialog); - }); - - component.appendChild(component_label); - component.appendChild(component_value); - - return component; -}; - /*-------------------------------------------------------------- >>> FOLDER --------------------------------------------------------------*/ @@ -2278,63 +2068,52 @@ Satus.components.colorPicker = function(element) { return component; }; -/*------------------------------------------------------------------------------ +/*--------------------------------------------------------------- >>> SHORTCUT -------------------------------------------------------------------------------*/ +---------------------------------------------------------------*/ -Satus.components.shortcut = function(element) { - var self = this, - value = (Satus.storage.get(element.storage_key) ? JSON.parse(Satus.storage.get(element.storage_key)) : false) || element.value || {}, - component = document.createElement('div'), - component_label = document.createElement('span'), - component_value = document.createElement('span'), +satus.components.shortcut = function(object) { + var component = document.createElement('div'), + value, + options = object.options || {}, mousewheel_timeout = false, mousewheel_only = false; + + try { + value = JSON.parse(Satus.storage.get(object.storage_key)); + } catch (err) { + value = object.value || {}; + } - component_label.className = 'satus-shortcut__label'; - component_value.className = 'satus-shortcut__value'; - - function update(canvas) { - let text_value = [], - keys_value = []; + function renderValue() { + var keys_value = []; if (value.altKey === true) { - text_value.push('Alt'); keys_value.push('
Alt
'); } if (value.ctrlKey === true) { - text_value.push('Ctrl'); keys_value.push('
Ctrl
'); } if (value.shiftKey === true) { - text_value.push('Shift'); keys_value.push('
Shift
'); } if (value.key === ' ') { - text_value.push('Space bar'); keys_value.push('
Space bar
'); } else if (typeof value.key === 'string' && ['Shift', 'Control', 'Alt'].indexOf(value.key) === -1) { if (value.key === 'ArrowUp') { - text_value.push('↑'); keys_value.push('
↑
'); } else if (value.key === 'ArrowRight') { - text_value.push('→'); keys_value.push('
→
'); } else if (value.key === 'ArrowDown') { - text_value.push('↓'); keys_value.push('
↓
'); } else if (value.key === 'ArrowLeft') { - text_value.push('←'); keys_value.push('
←
'); } else { - let key = value.key.toUpperCase(); - - text_value.push(key); - keys_value.push('
' + key + '
'); + keys_value.push('
' + value.key.toUpperCase() + '
'); } } @@ -2342,26 +2121,39 @@ Satus.components.shortcut = function(element) { keys_value.push('
'); } - component_value.innerText = text_value.join('+'); + if (value.click) { + keys_value.push('
'); + } - if (canvas) { - if (keys_value.length > 0) { - canvas.innerHTML = keys_value.join('
'); - } else { - canvas.innerText = Satus.locale.getMessage('pressAnyKeyOrUseMouseWheel'); - } + if (value.context) { + keys_value.push('
'); } + + return keys_value.join('
'); } - update(); - - component_value.dataset.value = component_value.innerText; - - component_label.innerText = Satus.locale.getMessage(element.label); + if (satus.isset(object.label)) { + var label = document.createElement('div'); + + label.className = 'satus-shortcut__label'; + + label.innerText = satus.locale.getMessage(object.label); + + component.appendChild(label); + } + if (options.hide_value !== true) { + var component_value = document.createElement('div'); + + component_value.className = 'satus-shortcut__value'; + + component_value.innerHTML = renderValue(); + + component.appendChild(component_value); + } + component.addEventListener('click', function() { - let component_dialog = document.createElement('div'), - component_dialog_label = document.createElement('span'), + var component_dialog = document.createElement('div'), component_scrim = document.createElement('div'), component_surface = document.createElement('div'), component_canvas = document.createElement('div'), @@ -2371,7 +2163,6 @@ Satus.components.shortcut = function(element) { component_button_save = document.createElement('div'); component_dialog.className = 'satus-dialog satus-dialog_open'; - component_dialog_label.className = 'satus-shortcut-dialog-label'; component_scrim.className = 'satus-dialog__scrim'; component_surface.className = 'satus-dialog__surface satus-dialog__surface_shortcut'; component_canvas.className = 'satus-shortcut__canvas'; @@ -2380,12 +2171,11 @@ Satus.components.shortcut = function(element) { component_button_cancel.className = 'satus-button satus-button_shortcut'; component_button_save.className = 'satus-button satus-button_shortcut'; - component_dialog_label.innerText = component_label.innerText; component_button_reset.innerText = Satus.locale.getMessage('reset'); component_button_cancel.innerText = Satus.locale.getMessage('cancel'); component_button_save.innerText = Satus.locale.getMessage('save'); - update(component_canvas); + component_canvas.innerHTML = renderValue(); function keydown(event) { event.preventDefault(); @@ -2399,10 +2189,13 @@ Satus.components.shortcut = function(element) { keyCode: event.keyCode, shiftKey: event.shiftKey, ctrlKey: event.ctrlKey, - altKey: event.altKey + altKey: event.altKey, + click: false, + context: false, + wheel: false }; - update(component_canvas); + component_canvas.innerHTML = renderValue(); return false; } @@ -2417,6 +2210,9 @@ Satus.components.shortcut = function(element) { delete value.keyCode; delete value.key; } + + value.click = false; + value.context = false; clearTimeout(mousewheel_timeout); @@ -2426,23 +2222,77 @@ Satus.components.shortcut = function(element) { value.wheel = event.deltaY; - update(component_canvas); + component_canvas.innerHTML = renderValue(); return false; } + + component_canvas.addEventListener('click', function(event) { + event.stopPropagation(); + + if (mousewheel_only === true) { + delete value.shiftKey; + delete value.altKey; + delete value.ctrlKey; + delete value.keyCode; + delete value.key; + } + + value.wheel = false; + value.context = false; + + clearTimeout(mousewheel_timeout); + + mousewheel_timeout = setTimeout(function() { + mousewheel_only = true; + }, 300); + + value.click = true; + + component_canvas.innerHTML = renderValue(); + + return false; + }); + + component_canvas.addEventListener('contextmenu', function(event) { + event.stopPropagation(); + event.preventDefault(); + + if (mousewheel_only === true) { + delete value.shiftKey; + delete value.altKey; + delete value.ctrlKey; + delete value.keyCode; + delete value.key; + } + + value.wheel = false; + value.click = false; + + clearTimeout(mousewheel_timeout); + + mousewheel_timeout = setTimeout(function() { + mousewheel_only = true; + }, 300); + + value.context = true; + + component_canvas.innerHTML = renderValue(); + + return false; + }); window.addEventListener('keydown', keydown); window.addEventListener('mousewheel', mousewheel); - function close(clear = true) { + function close() { window.removeEventListener('keydown', keydown); window.removeEventListener('mousewheel', mousewheel); - if (clear === true) { - component_value.innerText = component_value.dataset.value; - } - component_dialog.classList.remove('satus-dialog_open'); + + mousewheel_timeout = false; + mousewheel_only = false; setTimeout(function() { component_dialog.remove(); @@ -2450,23 +2300,28 @@ Satus.components.shortcut = function(element) { } component_scrim.addEventListener('click', close); + component_button_reset.addEventListener('click', function() { - Satus.storage.set(element.storage_key, null); + Satus.storage.set(object.storage_key, null); + value = (Satus.storage.get(object.storage_key) ? JSON.parse(Satus.storage.get(object.storage_key)) : false) || object.value || {}; + component_value.innerHTML = renderValue(); + close(); + }); + + component_button_cancel.addEventListener('click', function() { + value = (Satus.storage.get(object.storage_key) ? JSON.parse(Satus.storage.get(object.storage_key)) : false) || object.value || {}; close(); - value = (Satus.storage.get(element.storage_key) ? JSON.parse(Satus.storage.get(element.storage_key)) : false) || object.value || {}; - update(); }); - component_button_cancel.addEventListener('click', close); + component_button_save.addEventListener('click', function() { - Satus.storage.set(element.storage_key, JSON.stringify(value)); - close(false); + Satus.storage.set(object.storage_key, JSON.stringify(value)); + close(); }); component_section.appendChild(component_button_reset); component_section.appendChild(component_button_cancel); component_section.appendChild(component_button_save); - component_surface.appendChild(component_dialog_label); component_surface.appendChild(component_canvas); component_surface.appendChild(component_section); @@ -2475,9 +2330,6 @@ Satus.components.shortcut = function(element) { document.body.appendChild(component_dialog); }); - - component.appendChild(component_label); - component.appendChild(component_value); - + return component; -}; \ No newline at end of file +}; diff --git a/src/css/header.css b/src/css/header.css index d7e4843..e80f7aa 100644 --- a/src/css/header.css +++ b/src/css/header.css @@ -7,6 +7,7 @@ 4.0 Title 5.0 Right section 6.0 Switch +7.0 Vertical menu ---------------------------------------------------------------*/ /*--------------------------------------------------------------- @@ -96,9 +97,15 @@ body[data-appearance='home'] .satus-text--title .satus-switch--night-mode { + display: none; padding: 0; } +body[data-appearance='home'] .satus-switch--night-mode +{ + display: flex; +} + .satus-switch--night-mode:hover { background-color: transparent; @@ -123,3 +130,18 @@ body[data-appearance='home'] .satus-text--title { background: #777; } + + +/*--------------------------------------------------------------- +7.0 VERTICAL MENU +---------------------------------------------------------------*/ + +.satus-dialog--vertical-menu-button +{ + display: none +} + +body[data-appearance='websites'] .satus-dialog--vertical-menu-button +{ + display: block +} diff --git a/src/css/main.css b/src/css/main.css index f26264b..d01e47a 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -22,6 +22,21 @@ flex: 1; } +.websites-textfield +{ + display: none +} + +body[data-website-text-editor="true"] .websites-list +{ + display: none +} + +body[data-website-text-editor="true"] .websites-textfield +{ + display: block +} + /*--------------------------------------------------------------- 2.0 SECTION diff --git a/src/js/header.js b/src/js/header.js index 91ce737..856ee0a 100644 --- a/src/js/header.js +++ b/src/js/header.js @@ -82,7 +82,25 @@ var Menu = { onrender: function() { this.dataset.value = this.querySelector('input').checked; } + }, + + button_vert: { + type: 'button', + class: 'satus-dialog--vertical-menu-button', + icon: '', + onClickRender: { + type: 'dialog', + class: 'satus-dialog--vertical-menu', + + websiteTextEditor: { + type: 'switch', + label: 'textEditorMode', + onclick: function() { + document.body.dataset.websiteTextEditor = this.querySelector('input').checked; + } + } + } } } } -}; \ No newline at end of file +}; diff --git a/src/js/index.js b/src/js/index.js index 0e2c15c..0c9c22e 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -8,6 +8,148 @@ 1.0 ---------------------------------------------------------------*/ +var HOSTNAME; + +function updateWebsites() { + Menu.main.section.filters.tabs.current.section.invert_colors.storage_key = 'websites/' + HOSTNAME + '/filters/invert_colors'; + Menu.main.section.filters.tabs.current.section.bluelight.storage_key = 'websites/' + HOSTNAME + '/filters/bluelight'; + Menu.main.section.filters.tabs.current.section.brightness.storage_key = 'websites/' + HOSTNAME + '/filters/brightness'; + Menu.main.section.filters.tabs.current.section.contrast.storage_key = 'websites/' + HOSTNAME + '/filters/contrast'; + Menu.main.section.filters.tabs.current.section.grayscale.storage_key = 'websites/' + HOSTNAME + '/filters/grayscale'; + Menu.main.section.filters.tabs.current.section.sepia.storage_key = 'websites/' + HOSTNAME + '/filters/sepia'; + + document.body.dataset.websiteTextEditor = satus.storage.get('websiteTextEditor'); + + var websites = Satus.storage.get('websites') || {}, + text = '', + count = 0; + + Menu.main.section.websites.section = { + type: 'section', + class: 'websites-list' + }; + + for (var key in websites) { + if (key !== '') { + count++; + + text += key + ': ' + (satus.storage.get('websites/' + key + '/enabled') || true) + + '\n invert_colors: ' + (satus.storage.get('websites/' + key + '/filters/invert_colors') || true) + + '\n bluelight: ' + (satus.storage.get('websites/' + key + '/filters/bluelight') || 0) + + '\n brightness: ' + (satus.storage.get('websites/' + key + '/filters/brightness') || 100) + + '\n contrast: ' + (satus.storage.get('websites/' + key + '/filters/contrast') || 100) + + '\n grayscale: ' + (satus.storage.get('websites/' + key + '/filters/grayscale') || 0) + + '\n sepia: ' + (satus.storage.get('websites/' + key + '/filters/sepia') || 0) + '\n\n'; + + Menu.main.section.websites.section[key] = { + type: 'section', + + folder: { + type: 'folder', + label: key, + + section: { + type: 'section', + + filters: { + type: 'folder', + label: 'filters', + before: '', + + section: { + type: 'section', + + invert_colors: { + label: 'invertColors', + type: 'switch', + value: true, + storage_key: 'websites/' + key + '/filters/invert_colors' + }, + bluelight: { + label: 'bluelight', + type: 'slider', + max: 90, + storage_key: 'websites/' + key + '/filters/bluelight' + }, + brightness: { + label: 'brightness', + type: 'slider', + max: 100, + value: 100, + storage_key: 'websites/' + key + '/filters/brightness' + }, + contrast: { + label: 'contrast', + type: 'slider', + max: 100, + value: 100, + storage_key: 'websites/' + key + '/filters/contrast' + }, + grayscale: { + label: 'grayscale', + type: 'slider', + max: 100, + storage_key: 'websites/' + key + '/filters/grayscale' + }, + sepia: { + label: 'sepia', + type: 'slider', + max: 100, + storage_key: 'websites/' + key + '/filters/sepia' + } + } + }, + styles: { + type: 'folder', + label: 'styles', + before: '', + + textfield: { + type: 'text-field', + placeholder: 'html, body { ... }', + style: { + margin: '16px', + height: 'calc(100vh - 96px)', + fontFamily: 'monospace' + }, + rows: 6, + storage_key: 'websites/' + key + '/styles', + onrender: function(object) { + this.dataset.storageKey = object.storage_key; + this.value = Satus.storage.get(object.storage_key) || ''; + }, + oninput: function() { + Satus.storage.set(this.dataset.storageKey, this.value); + } + } + } + } + }, + enabled: { + type: 'switch', + storage_key: 'websites/' + key + '/enabled' + } + }; + } + } + + if (count === 0) { + Menu.main.section.websites.section.message = { + type: 'text', + label: 'theListIsEmpty', + style: { + 'display': 'block', + 'text-align': 'center', + 'margin': '32px 0' + } + }; + } else { + Menu.main.section.websites.textfield.value = text; + } + + Satus.render(Menu, document.querySelector('.satus__wrapper')); +} + function init(response) { var TAB_URL = response ? new URL(response) : ''; @@ -33,127 +175,7 @@ function init(response) { Menu.main.toolbar.enable.storage_key = 'websites/' + HOSTNAME + '/enabled'; } - Menu.main.section.filters.tabs.current.section.invert_colors.storage_key = 'websites/' + HOSTNAME + '/filters/invert_colors'; - Menu.main.section.filters.tabs.current.section.bluelight.storage_key = 'websites/' + HOSTNAME + '/filters/bluelight'; - Menu.main.section.filters.tabs.current.section.brightness.storage_key = 'websites/' + HOSTNAME + '/filters/brightness'; - Menu.main.section.filters.tabs.current.section.contrast.storage_key = 'websites/' + HOSTNAME + '/filters/contrast'; - Menu.main.section.filters.tabs.current.section.grayscale.storage_key = 'websites/' + HOSTNAME + '/filters/grayscale'; - Menu.main.section.filters.tabs.current.section.sepia.storage_key = 'websites/' + HOSTNAME + '/filters/sepia'; - - Menu.main.section.styles.textfield.storage_key = 'websites/' + HOSTNAME + '/styles'; - - var websites = Satus.storage.get('websites') || {}, - count = 0; - - for (var key in websites) { - if (key !== '') { - count++; - - Menu.main.section.websites.section[key] = { - type: 'section', - - folder: { - type: 'folder', - label: key, - - section: { - type: 'section', - - filters: { - type: 'folder', - label: 'filters', - before: '', - - section: { - type: 'section', - - invert_colors: { - label: 'invertColors', - type: 'switch', - value: true, - storage_key: 'websites/' + key + '/filters/invert_colors' - }, - bluelight: { - label: 'bluelight', - type: 'slider', - max: 90, - storage_key: 'websites/' + key + '/filters/bluelight' - }, - brightness: { - label: 'brightness', - type: 'slider', - max: 100, - value: 100, - storage_key: 'websites/' + key + '/filters/brightness' - }, - contrast: { - label: 'contrast', - type: 'slider', - max: 100, - value: 100, - storage_key: 'websites/' + key + '/filters/contrast' - }, - grayscale: { - label: 'grayscale', - type: 'slider', - max: 100, - storage_key: 'websites/' + key + '/filters/grayscale' - }, - sepia: { - label: 'sepia', - type: 'slider', - max: 100, - storage_key: 'websites/' + key + '/filters/sepia' - } - } - }, - styles: { - type: 'folder', - label: 'styles', - before: '', - - textfield: { - type: 'text-field', - placeholder: 'html, body { ... }', - style: { - margin: '16px', - height: 'calc(100vh - 96px)', - fontFamily: 'monospace' - }, - rows: 6, - storage_key: 'websites/' + key + '/styles', - onrender: function(object) { - this.dataset.storageKey = object.storage_key; - this.value = Satus.storage.get(object.storage_key) || ''; - }, - oninput: function() { - Satus.storage.set(this.dataset.storageKey, this.value); - } - } - } - } - }, - enabled: { - type: 'switch', - storage_key: 'websites/' + key + '/enabled' - } - }; - } - } - - if (count === 0) { - Menu.main.section.websites.section.message = { - type: 'text', - label: 'theListIsEmpty', - style: { - 'display': 'block', - 'text-align': 'center', - 'margin': '32px 0' - } - }; - } - - Satus.render(Menu, document.querySelector('.satus__wrapper')); + updateWebsites(); }); }); }); diff --git a/src/js/main.js b/src/js/main.js index 39fc007..491e9c2 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -114,21 +114,54 @@ Menu.main = { label: 'styles', before: '', - textfield: { - type: 'text-field', - placeholder: 'html, body { ... }', - style: { - margin: '16px', - height: 'calc(100vh - 96px)', - fontFamily: 'monospace' - }, - rows: 6, - onrender: function(object) { - this.dataset.storageKey = object.storage_key; - this.value = Satus.storage.get(object.storage_key) || ''; + tabs: { + type: 'tabs', + + global: { + type: 'tab', + label: 'Global', + + textfield: { + type: 'text-field', + placeholder: 'html, body { ... }', + style: { + margin: '16px', + height: 'calc(100vh - 96px)', + fontFamily: 'monospace' + }, + rows: 6, + onrender: function(object) { + object.storage_key = 'styles'; + this.dataset.storageKey = object.storage_key; + this.value = Satus.storage.get(object.storage_key) || ''; + }, + oninput: function() { + Satus.storage.set(this.dataset.storageKey, this.value); + } + } }, - oninput: function() { - Satus.storage.set(this.dataset.storageKey, this.value); + current: { + type: 'tab', + label: 'Current', + + textfield: { + type: 'text-field', + placeholder: 'html, body { ... }', + style: { + margin: '16px', + height: 'calc(100vh - 96px)', + fontFamily: 'monospace' + }, + rows: 6, + onrender: function(object) { + object.storage_key = 'websites/' + HOSTNAME + '/styles'; + this.dataset.storageKey = object.storage_key; + this.value = Satus.storage.get(object.storage_key) || ''; + }, + oninput: function() { + Satus.storage.set(this.dataset.storageKey, this.value); + } + } } } }, @@ -138,8 +171,39 @@ Menu.main = { appearanceKey: 'websites', before: '', - section: { - type: 'section' + section: {}, + + textfield: { + type: 'text-field', + class: 'websites-textfield', + style: { + margin: '16px', + height: 'calc(100vh - 96px)', + fontFamily: 'monospace' + }, + rows: 6, + spellcheck: false, + oninput: function() { + var websites = {}, + regex = /^\s*(\S+).*:\s*(\S+)[\s\n]*$/gm, + match, + url; + + while (match = regex.exec(this.value)) { + if (/invert_colors|bluelight|brightness|contrast|grayscale|sepia/.test(match[1]) === true) { + websites[url].filters[match[1]] = match[1] === 'invert_colors' ? match[2] === 'false' ? false : true : Number(match[2]); + } else { + url = match[1]; + + websites[url] = { + enabled: match[2] === 'false' ? false : true, + filters: {} + }; + } + } + + satus.storage.set('websites', websites); + } } }, schedule: {