diff --git a/manifest.json b/manifest.json index 0121921fa..64112cba0 100644 --- a/manifest.json +++ b/manifest.json @@ -2,7 +2,7 @@ "manifest_version": 2, "short_name" : "ImprovedTube", "name": "Improve YouTube! (Open-Source for YouTube)", - "version": "3.100", + "version": "3.110", "icons": { "16": "assets/icons/16.png", "32": "assets/icons/32.png", diff --git a/popup.css b/popup.css index 7ed22a7b6..809d53629 100644 --- a/popup.css +++ b/popup.css @@ -307,6 +307,7 @@ button .satus-dialog--confirm .satus-section { display: flex; + background-color: transparent; } @@ -356,52 +357,74 @@ button -.satus-section--footer +.satus-main .satus-button.satus-button--ad { position: fixed; z-index: 99; - bottom: 10px; + bottom: 16px; left: 16px; + display: flex; + box-sizing: border-box; - box-shadow: 0 0 3px rgba(0,0,0,.1); width: 268px; height: 38px; + height: 80px; padding: 8px 16px; + color: var(--satus-theme-main-text); + border-radius: 8px; border-radius: 4px; background: var(--satus-theme-section); + background: #242424; + box-shadow: 0 0 3px rgba(0,0,0,.1); + align-items: center; justify-content: space-between; } -html[it-improvedtube-home='list'] .satus-section--footer +.satus-button--ad .satus-button__label { - position: relative; - left: 0; - top: 0; - margin: 50px 16px 16px; + font-size: 16px; + font-weight: 700; + + letter-spacing: 1px; + + color: rgba(255,255,255,.9); + text-shadow: 2px 1px 2px rgba(0,0,0,.6); } -.satus-main .satus-section--footer .satus-button +.satus-button--ad::after { - font-family: 'Open Sans', sans-serif; - font-weight: 700; - font-size: 13px; - text-decoration: none; - color: var(--satus-theme-main-text); - text-align: center; - height: 32px; - justify-content: center; - border-radius: 4px; - overflow: hidden; + position: absolute; + top: 0; + left: 0; + + width: 100%; + height: 100%; + + content: ''; + animation-name: satus-switch--dark; + animation-duration: 4s; + animation-timing-function: ease-in-out; + animation-iteration-count: infinite; + pointer-events: none; + + background: radial-gradient(rgba(255, 255, 255, .2), rgba(255, 255, 255, .2), transparent 60%), radial-gradient(rgba(255, 255, 255, .2), rgba(255, 255, 255, .2), transparent 60%), radial-gradient(rgba(255, 255, 255, .2), rgba(255, 255, 255, .2), transparent 60%), radial-gradient(rgba(255, 255, 255, .2), rgba(255, 255, 255, .2), transparent 60%) !important; + background-repeat: no-repeat !important; + background-position: -10px 40px, 200px 0, -30px -20px, 130px 30px !important; + background-size: 50px 50px, 50px 50px, 100px 100px, 75px 75px !important; + + filter: blur(8px); } -.satus-main .satus-section--footer .satus-button--found-a-bug { - width: 128px; - position: absolute; - bottom: 48px; - left: 70px; +html[it-improvedtube-home='list'] .satus-main .satus-button.satus-button--ad +{ + position: relative; + top: 0; + left: 0; + + margin: 50px 16px 16px; } .satus-dialog--setup diff --git a/popup.js b/popup.js index 5ad669c1d..2a71d6b1b 100644 --- a/popup.js +++ b/popup.js @@ -10,7 +10,7 @@ var Menu = { button_back: { type: 'button', class: 'satus-button--back', - before: '', + before: '', onclick: function() { if (document.querySelector('.satus-dialog__scrim')) { document.querySelector('.satus-dialog__scrim').click(); @@ -37,7 +37,7 @@ var Menu = { icon: '', onclick: function() { document.querySelector('.satus-main').open({ - appearanceId: 'search' + appearanceKey: 'search' }, function() { Satus.render({ type: 'dialog', @@ -53,12 +53,12 @@ var Menu = { if (this.value.length > 0) { Satus.search(this.value, Menu, function(results) { var sorted_results = []; - + document.querySelector('.satus-main__container').innerHTML = ''; - + for (var key in results) { results[key].type = 'section'; - + sorted_results.push({ type: 'text', label: key, @@ -66,8 +66,6 @@ var Menu = { }); sorted_results.push(results[key]); } - - console.log(results); var scroll = Satus.components.scrollbar(document.querySelector('.satus-main__container')); @@ -89,7 +87,35 @@ var Menu = { icon: '', onClickRender: { type: 'dialog', - class: 'satus-dialog--vertical-menu' + class: 'satus-dialog--vertical-menu', + + email: { + type: 'button', + label: 'Email', + title: 'bugs@improvedtube.com', + before: '', + onclick: function() { + window.open('mailto:bugs@improvedtube.com', '_blank'); + } + }, + github: { + type: 'button', + label: 'GitHub', + title: '/ImprovedTube/ImprovedTube', + before: '', + onclick: function() { + window.open('https://github.com/ImprovedTube/ImprovedTube/', '_blank'); + } + }, + website: { + type: 'button', + label: 'Website', + title: 'improvedtube.com', + before: '', + onclick: function() { + window.open('http://www.improvedtube.com/', '_blank'); + } + } } } } @@ -98,66 +124,29 @@ var Menu = { Menu.main = { type: 'main', - appearanceId: 'home', - on: { - change: function(container) { - var item = this.history[this.history.length - 1], - id = item.appearanceId; - - document.body.dataset.appearance = id; - container.dataset.appearance = id; - - document.querySelector('.satus-text--title').innerText = Satus.locale.getMessage(item.label) || 'ImprovedTube'; - } + appearanceKey: 'home', + onchange: function() { + document.querySelector('.satus-text--title').innerText = satus.locale.getMessage(this.history[this.history.length - 1].label) || 'ImprovedTube'; }, section: { type: 'section' }, - + footer: { - type: 'section', - class: 'satus-section--footer', - - found_a_bug: { - type: 'button', - class: 'satus-button--found-a-bug', - label: 'found a bug?', - title: '/ImprovedTube/ImprovedTube', - onclick: function(){ - window.open('https://github.com/ImprovedTube/ImprovedTube/issues/new', '_blank'); - } - }, - email: { - type: 'button', - label: 'Email', - title: 'bugs@improvedtube.com', - onclick: function(){ - window.open('mailto:bugs@improvedtube.com', '_blank'); - } - }, - github: { - type: 'button', - label: 'GitHub', - title: '/ImprovedTube/ImprovedTube', - onclick: function(){ - window.open('https://github.com/ImprovedTube/ImprovedTube/', '_blank'); - } - }, - website: { - type: 'button', - label: 'Website', - title: 'improvedtube.com', - onclick: function(){ - window.open('http://www.improvedtube.com/', '_blank'); - } + type: 'button', + class: 'satus-button--ad', + label: 'DARK MODE', + title: 'Dark Mode', + onclick: function() { + window.open('https://chrome.google.com/webstore/detail/dark-mode/declgfomkjdohhjbcfemjklfebflhefl', '_blank'); } } }; Menu.header.section_end.button_vert.onClickRender.active_features = { type: 'folder', - before: '', + before: '', label: 'activeFeatures', onclick: function() { document.querySelector('.satus-dialog__scrim').click(); @@ -214,13 +203,14 @@ Menu.header.section_end.button_vert.onClickRender.active_features = { }); } } -}; +}; + Menu.header.section_end.button_vert.onClickRender.mixer = { type: 'folder', - before: '', + before: '', label: 'mixer', class: 'satus-folder--mixer', - appearanceId: 'mixer', + appearanceKey: 'mixer', onopen: function() { var self = this; @@ -332,7 +322,7 @@ Menu.header.section_end.button_vert.onClickRender.mixer = { Menu.header.section_end.button_vert.onClickRender.settings = { type: 'folder', - before: '', + before: '', label: 'settings', parent: '.satus-main__container', onclick: function() { @@ -1072,7 +1062,7 @@ Menu.header.section_end.button_vert.onClickRender.settings = { type: 'folder', before: '', label: 'about', - appearanceId: 'about', + appearanceKey: 'about', section: { type: 'section', @@ -1207,7 +1197,7 @@ Menu.main.section.general = { before: '', label: 'general', class: 'satus-folder--general', - appearanceId: 'general', + appearanceKey: 'general', section: { type: 'section', @@ -1301,7 +1291,7 @@ Menu.main.section.appearance = { before: '', label: 'appearance', class: 'satus-folder--appearance', - appearanceId: 'appearance', + appearanceKey: 'appearance', header: { type: 'folder', @@ -1718,7 +1708,7 @@ Menu.main.section.themes = { before: '', label: 'themes', class: 'satus-folder--themes', - appearanceId: 'themes', + appearanceKey: 'themes', section: { type: 'section', @@ -2094,7 +2084,7 @@ Menu.main.section.player = { before: '', label: 'player', class: 'satus-folder--player', - appearanceId: 'player', + appearanceKey: 'player', general: { type: 'section', @@ -2372,7 +2362,7 @@ Menu.main.section.playlist = { before: '', label: 'playlist', class: 'satus-folder--playlist', - appearanceId: 'playlist', + appearanceKey: 'playlist', section: { type: 'section', @@ -2405,13 +2395,14 @@ Menu.main.section.playlist = { label: 'shuffle' } } -}; +}; + Menu.main.section.channel = { type: 'folder', before: '', label: 'channel', class: 'satus-folder--channel', - appearanceId: 'channel', + appearanceKey: 'channel', section: { type: 'section', @@ -2440,13 +2431,14 @@ Menu.main.section.channel = { label: 'hideFeaturedContent' } } -}; +}; + Menu.main.section.shortcuts = { type: 'folder', before: '', label: 'shortcuts', class: 'satus-folder--shortcut', - appearanceId: 'shortcuts', + appearanceKey: 'shortcuts', player_section_label: { type: 'text', @@ -2671,7 +2663,7 @@ Menu.main.section.blacklist = { before: '', label: 'blacklist', class: 'satus-folder--blacklist', - appearanceId: 'blacklist', + appearanceKey: 'blacklist', section_activate: { type: 'section', @@ -2833,7 +2825,7 @@ Menu.main.section.analyzer = { before: '', label: 'analyzer', class: 'satus-folder--analyzer', - appearanceId: 'analyzer', + appearanceKey: 'analyzer', activ_section: { type: 'section', diff --git a/satus.js b/satus.js index 959069050..82370120b 100644 --- a/satus.js +++ b/satus.js @@ -525,26 +525,26 @@ Satus.modules.user = function() { return data; }; -/*-------------------------------------------------------------- +/*--------------------------------------------------------------- >>> CHROMIUM STORAGE ----------------------------------------------------------------- +----------------------------------------------------------------- 1.0 Get 2.0 Set 3.0 Import 4.0 Clear ---------------------------------------------------------------*/ +---------------------------------------------------------------*/ -Satus.storage = { +satus.storage = { data: {} }; -/*-------------------------------------------------------------- -# GET ---------------------------------------------------------------*/ +/*--------------------------------------------------------------- +1.0 GET +---------------------------------------------------------------*/ -Satus.storage.get = function(name) { +satus.storage.get = function(name) { if (satus.isset(name)) { - var target = Satus.storage; + var target = satus.storage.data; name = name.split('/').filter(function(value) { return value != ''; @@ -563,15 +563,15 @@ Satus.storage.get = function(name) { }; -/*-------------------------------------------------------------- -# SET ---------------------------------------------------------------*/ +/*--------------------------------------------------------------- +2.0 SET +---------------------------------------------------------------*/ -Satus.storage.set = function(name, value) { +satus.storage.set = function(name, value) { var items = {}, - target = Satus.storage; + target = Satus.storage.data; - if (!Satus.isset(name)) { + if (!satus.isset(name)) { return false; } @@ -596,25 +596,21 @@ Satus.storage.set = function(name, value) { } } - for (var key in Satus.storage) { - if (typeof Satus.storage[key] !== 'function') { - items[key] = Satus.storage[key]; - } + for (var key in satus.storage.data) { + items[key] = satus.storage.data[key]; } chrome.storage.local.set(items); }; -/*-------------------------------------------------------------- -# IMPORT ---------------------------------------------------------------*/ +/*--------------------------------------------------------------- +3.0 IMPORT +---------------------------------------------------------------*/ -Satus.storage.import = function(callback) { +satus.storage.import = function(callback) { chrome.storage.local.get(function(items) { - for (var key in items) { - Satus.storage[key] = items[key]; - } + satus.storage.data = items; if (callback) { callback(); @@ -623,18 +619,14 @@ Satus.storage.import = function(callback) { }; -/*-------------------------------------------------------------- -# CLEAR ---------------------------------------------------------------*/ +/*--------------------------------------------------------------- +4.0 CLEAR +---------------------------------------------------------------*/ -Satus.storage.clear = function() { +satus.storage.clear = function() { chrome.storage.local.clear(); - for (var key in Satus.storage) { - if (typeof Satus.storage[key] !== 'function') { - delete Satus.storage[key]; - } - } + delete satus.storage.data; }; /*----------------------------------------------------------------------------- @@ -868,25 +860,27 @@ Satus.components.table = function(item) { } function sortArray(array, index, mode) { - if (mode === 'asc') { - if (typeof array[0][index].text === 'number') { - sorted = array.sort(function(a, b) { - return a[index].text - b[index].text; - }); - } else { - sorted = array.sort(function(a, b) { - return a[index].text.localeCompare(b[index].text); - }); - } - } else { - if (typeof array[0][index].text === 'number') { - sorted = array.sort(function(a, b) { - return b[index].text - a[index].text; - }); + if (array[0]) { + if (mode === 'asc') { + if (typeof array[0][index].text === 'number') { + sorted = array.sort(function(a, b) { + return a[index].text - b[index].text; + }); + } else { + sorted = array.sort(function(a, b) { + return a[index].text.localeCompare(b[index].text); + }); + } } else { - sorted = array.sort(function(a, b) { - return b[index].text.localeCompare(a[index].text); - }); + if (typeof array[0][index].text === 'number') { + sorted = array.sort(function(a, b) { + return b[index].text - a[index].text; + }); + } else { + sorted = array.sort(function(a, b) { + return b[index].text.localeCompare(a[index].text); + }); + } } } @@ -940,7 +934,7 @@ Satus.components.table = function(item) { component.data = item.data; component.paging = item.paging; - component.pagingIndex = 0; + component.pagingIndex = 1; component.update = function(data, index, mode) { if (Satus.isset(data)) { @@ -971,35 +965,54 @@ Satus.components.table = function(item) { // PAGING + function pagingButton(i, c) { + var button = document.createElement('button'); + + if (i === component.pagingIndex) { + button.className = 'active'; + } - function pagingUpdate() { - if (typeof this.paging === 'number') { - var pages = Math.ceil(this.data.length / this.paging); - - this.querySelector('.satus-table__paging').innerHTML = ''; - - for (var i = 1; i <= pages; i++) { - var button = document.createElement('button'); - - if (i === (this.pagingIndex || 1)) { - button.className = 'active'; - } + button.innerText = i; + button.parentComponent = component; + button.addEventListener('click', function() { + this.parentComponent.pagingIndex = Number(this.innerText); + this.parentComponent.update(this.parentComponent.data); + this.parentComponent.pagingUpdate(); + }); - button.innerText = i; - button.parentComponent = this; - button.addEventListener('click', function() { - if (this.parentNode.querySelector('button.active')) { - this.parentNode.querySelector('button.active').classList.remove('active'); - } + c.appendChild(button); + } - this.classList.add('active'); + function pagingUpdate() { + if (typeof this.paging === 'number') { + var pages = Math.ceil(this.data.length / this.paging), + c = this.querySelector('.satus-table__paging'); - this.parentComponent.pagingIndex = Number(this.innerText); - this.parentComponent.update(this.parentComponent.data); - }); + c.innerHTML = ''; + + pagingButton(1, c); + + if (component.pagingIndex - 2 > 2) { + var span = document.createElement('span'); + + span.innerText = '...'; + + c.appendChild(span); + } - this.querySelector('.satus-table__paging').appendChild(button); + for (var i = component.pagingIndex - 2 < 2 ? 2 : component.pagingIndex - 2, l = component.pagingIndex + 2 > pages - 1 ? pages - 1 : component.pagingIndex + 2; i <= l; i++) { + pagingButton(i, c); } + + if (component.pagingIndex + 2 < pages - 1) { + var span = document.createElement('span'); + + span.innerText = '...'; + + c.appendChild(span); + } + + pagingButton(pages, c); } resize(); @@ -1368,104 +1381,74 @@ Satus.components.textField = function(element) { --------------------------------------------------------------*/ Satus.components.main = function(object) { - var component = document.createElement('main'), - component_container = document.createElement('div'), - component_scrollbar = Satus.components.scrollbar(component_container, object.scrollbar); + var component = document.createElement('main'); component.history = [object]; - - component.back = function() { - var container = this.querySelector('.satus-main__container'), + + function create(self, animation, callback) { + var container = self.querySelector('.satus-main__container'), component_container = document.createElement('div'), - component_scrollbar = Satus.components.scrollbar(component_container); - - container.classList.add('satus-animation--fade-out-right'); - component_container.className = 'satus-main__container satus-animation--fade-in-left'; - - this.history.pop(); - - for (var key in this.history[this.history.length - 1]) { - Satus.render(this.history[this.history.length - 1][key], component_scrollbar); - } - - this.appendChild(component_container); - - if (this.historyListener) { - this.historyListener(component_container); - } - - if (this.history[this.history.length - 1].onopen) { - component_scrollbar.onopen = this.history[this.history.length - 1].onopen; - - component_scrollbar.onopen(); - } + component_scrollbar = Satus.components.scrollbar(component_container), + object = self.history[self.history.length - 1]; - var id = this.history[this.history.length - 1].appearanceKey; + component_container.className = 'satus-main__container'; - document.body.dataset.appearance = id; - this.dataset.appearance = id; - - setTimeout(function() { - container.remove(); - }, Satus.getAnimationDuration(container)); - }; - - component.open = function(element, callback, animated) { - var container = this.querySelector('.satus-main__container'), - component_container = document.createElement('div'), - component_scrollbar = Satus.components.scrollbar(component_container); - - if (animated !== false) { + if (animation === 2) { container.classList.add('satus-animation--fade-out-left'); component_container.className = 'satus-main__container satus-animation--fade-in-right'; - } else { - component_container.className = 'satus-main__container'; + } else if (animation === 1) { + self.history.pop(); + + object = self.history[self.history.length - 1]; + + container.classList.add('satus-animation--fade-out-right'); + component_container.className = 'satus-main__container satus-animation--fade-in-left'; } + + document.body.dataset.appearance = object.appearanceKey; + component_container.dataset.appearance = object.appearanceKey; - this.history.push(element); - - for (var key in this.history[this.history.length - 1]) { - Satus.render(this.history[this.history.length - 1][key], component_scrollbar); + for (var key in object) { + Satus.render(object[key], component_scrollbar); } - this.appendChild(component_container); - - if (this.historyListener) { - this.historyListener(component_container); + self.appendChild(component_container); + + if (self.historyListener) { + self.historyListener(component_container); } - if (callback) { - component_scrollbar.onopen = callback; + if (object.onopen || callback) { + component_scrollbar.onopen = object.onopen || callback; component_scrollbar.onopen(); } - var id = this.history[this.history.length - 1].appearanceKey; - - document.body.dataset.appearance = id; - this.dataset.appearance = id; - - setTimeout(function() { - container.remove(); - }, Satus.getAnimationDuration(container)); - }; - - component_container.className = 'satus-main__container'; - - if (object.on && object.on.change) { - component.historyListener = object.on.change; - } - - if (component.historyListener) { - component.historyListener(component_container); + if (container) { + setTimeout(function() { + container.remove(); + }, Satus.getAnimationDuration(container)); + } } - for (var key in object) { - Satus.render(object[key], component_scrollbar); + create(component, 0); + + component.back = function() { + create(this, 1); + }; + + component.open = function(element, callback) { + this.history.push(element); + + create(this, 2, callback); + }; + + if (object.on && object.on.change || object.onchange) { + component.historyListener = object.on && object.on.change || object.onchange; + + component.historyListener(component.querySelector('.satus-main__container')); } - component.appendChild(component_container); - return component; }; @@ -2315,6 +2298,11 @@ satus.components.shortcut = function(object) { component_button_save.addEventListener('click', function() { Satus.storage.set(object.storage_key, JSON.stringify(value)); + + if (typeof object.onchange === 'function') { + object.onchange(object, value); + } + close(); }); diff --git a/src/template/css/index.css b/src/template/css/index.css index 3c7076d6d..5f08ed036 100644 --- a/src/template/css/index.css +++ b/src/template/css/index.css @@ -64,6 +64,7 @@ button .satus-dialog--confirm .satus-section { display: flex; + background-color: transparent; } @@ -113,50 +114,72 @@ button -.satus-section--footer +.satus-main .satus-button.satus-button--ad { position: fixed; z-index: 99; - bottom: 10px; + bottom: 16px; left: 16px; + display: flex; + box-sizing: border-box; - box-shadow: 0 0 3px rgba(0,0,0,.1); width: 268px; height: 38px; + height: 80px; padding: 8px 16px; + color: var(--satus-theme-main-text); + border-radius: 8px; border-radius: 4px; background: var(--satus-theme-section); + background: #242424; + box-shadow: 0 0 3px rgba(0,0,0,.1); + align-items: center; justify-content: space-between; } -html[it-improvedtube-home='list'] .satus-section--footer +.satus-button--ad .satus-button__label { - position: relative; - left: 0; - top: 0; - margin: 50px 16px 16px; + font-size: 16px; + font-weight: 700; + + letter-spacing: 1px; + + color: rgba(255,255,255,.9); + text-shadow: 2px 1px 2px rgba(0,0,0,.6); } -.satus-main .satus-section--footer .satus-button +.satus-button--ad::after { - font-family: 'Open Sans', sans-serif; - font-weight: 700; - font-size: 13px; - text-decoration: none; - color: var(--satus-theme-main-text); - text-align: center; - height: 32px; - justify-content: center; - border-radius: 4px; - overflow: hidden; + position: absolute; + top: 0; + left: 0; + + width: 100%; + height: 100%; + + content: ''; + animation-name: satus-switch--dark; + animation-duration: 4s; + animation-timing-function: ease-in-out; + animation-iteration-count: infinite; + pointer-events: none; + + background: radial-gradient(rgba(255, 255, 255, .2), rgba(255, 255, 255, .2), transparent 60%), radial-gradient(rgba(255, 255, 255, .2), rgba(255, 255, 255, .2), transparent 60%), radial-gradient(rgba(255, 255, 255, .2), rgba(255, 255, 255, .2), transparent 60%), radial-gradient(rgba(255, 255, 255, .2), rgba(255, 255, 255, .2), transparent 60%) !important; + background-repeat: no-repeat !important; + background-position: -10px 40px, 200px 0, -30px -20px, 130px 30px !important; + background-size: 50px 50px, 50px 50px, 100px 100px, 75px 75px !important; + + filter: blur(8px); } -.satus-main .satus-section--footer .satus-button--found-a-bug { - width: 128px; - position: absolute; - bottom: 48px; - left: 70px; +html[it-improvedtube-home='list'] .satus-main .satus-button.satus-button--ad +{ + position: relative; + top: 0; + left: 0; + + margin: 50px 16px 16px; } diff --git a/src/template/js/header.js b/src/template/js/header.js index 981bc95b9..342ebf084 100644 --- a/src/template/js/header.js +++ b/src/template/js/header.js @@ -9,7 +9,7 @@ var Menu = { button_back: { type: 'button', class: 'satus-button--back', - before: '', + before: '', onclick: function() { if (document.querySelector('.satus-dialog__scrim')) { document.querySelector('.satus-dialog__scrim').click(); @@ -36,7 +36,7 @@ var Menu = { icon: '', onclick: function() { document.querySelector('.satus-main').open({ - appearanceId: 'search' + appearanceKey: 'search' }, function() { Satus.render({ type: 'dialog', @@ -52,12 +52,12 @@ var Menu = { if (this.value.length > 0) { Satus.search(this.value, Menu, function(results) { var sorted_results = []; - + document.querySelector('.satus-main__container').innerHTML = ''; - + for (var key in results) { results[key].type = 'section'; - + sorted_results.push({ type: 'text', label: key, @@ -65,8 +65,6 @@ var Menu = { }); sorted_results.push(results[key]); } - - console.log(results); var scroll = Satus.components.scrollbar(document.querySelector('.satus-main__container')); @@ -88,7 +86,35 @@ var Menu = { icon: '', onClickRender: { type: 'dialog', - class: 'satus-dialog--vertical-menu' + class: 'satus-dialog--vertical-menu', + + email: { + type: 'button', + label: 'Email', + title: 'bugs@improvedtube.com', + before: '', + onclick: function() { + window.open('mailto:bugs@improvedtube.com', '_blank'); + } + }, + github: { + type: 'button', + label: 'GitHub', + title: '/ImprovedTube/ImprovedTube', + before: '', + onclick: function() { + window.open('https://github.com/ImprovedTube/ImprovedTube/', '_blank'); + } + }, + website: { + type: 'button', + label: 'Website', + title: 'improvedtube.com', + before: '', + onclick: function() { + window.open('http://www.improvedtube.com/', '_blank'); + } + } } } } diff --git a/src/template/js/main.js b/src/template/js/main.js index 2a8212044..ddbc1f6d7 100644 --- a/src/template/js/main.js +++ b/src/template/js/main.js @@ -1,58 +1,21 @@ Menu.main = { type: 'main', - appearanceId: 'home', - on: { - change: function(container) { - var item = this.history[this.history.length - 1], - id = item.appearanceId; - - document.body.dataset.appearance = id; - container.dataset.appearance = id; - - document.querySelector('.satus-text--title').innerText = Satus.locale.getMessage(item.label) || 'ImprovedTube'; - } + appearanceKey: 'home', + onchange: function() { + document.querySelector('.satus-text--title').innerText = satus.locale.getMessage(this.history[this.history.length - 1].label) || 'ImprovedTube'; }, section: { type: 'section' }, - + footer: { - type: 'section', - class: 'satus-section--footer', - - found_a_bug: { - type: 'button', - class: 'satus-button--found-a-bug', - label: 'found a bug?', - title: '/ImprovedTube/ImprovedTube', - onclick: function(){ - window.open('https://github.com/ImprovedTube/ImprovedTube/issues/new', '_blank'); - } - }, - email: { - type: 'button', - label: 'Email', - title: 'bugs@improvedtube.com', - onclick: function(){ - window.open('mailto:bugs@improvedtube.com', '_blank'); - } - }, - github: { - type: 'button', - label: 'GitHub', - title: '/ImprovedTube/ImprovedTube', - onclick: function(){ - window.open('https://github.com/ImprovedTube/ImprovedTube/', '_blank'); - } - }, - website: { - type: 'button', - label: 'Website', - title: 'improvedtube.com', - onclick: function(){ - window.open('http://www.improvedtube.com/', '_blank'); - } + type: 'button', + class: 'satus-button--ad', + label: 'DARK MODE', + title: 'Dark Mode', + onclick: function() { + window.open('https://chrome.google.com/webstore/detail/dark-mode/declgfomkjdohhjbcfemjklfebflhefl', '_blank'); } } }; diff --git a/src/template/js/template-parts/analyzer.js b/src/template/js/template-parts/analyzer.js index 2e9151926..13d3b961b 100644 --- a/src/template/js/template-parts/analyzer.js +++ b/src/template/js/template-parts/analyzer.js @@ -3,7 +3,7 @@ Menu.main.section.analyzer = { before: '', label: 'analyzer', class: 'satus-folder--analyzer', - appearanceId: 'analyzer', + appearanceKey: 'analyzer', activ_section: { type: 'section', diff --git a/src/template/js/template-parts/appearance.js b/src/template/js/template-parts/appearance.js index f3061fe08..c72559b3c 100644 --- a/src/template/js/template-parts/appearance.js +++ b/src/template/js/template-parts/appearance.js @@ -3,7 +3,7 @@ Menu.main.section.appearance = { before: '', label: 'appearance', class: 'satus-folder--appearance', - appearanceId: 'appearance', + appearanceKey: 'appearance', header: { type: 'folder', diff --git a/src/template/js/template-parts/blacklist.js b/src/template/js/template-parts/blacklist.js index 6f2ba3a8a..753f99fb3 100644 --- a/src/template/js/template-parts/blacklist.js +++ b/src/template/js/template-parts/blacklist.js @@ -3,7 +3,7 @@ Menu.main.section.blacklist = { before: '', label: 'blacklist', class: 'satus-folder--blacklist', - appearanceId: 'blacklist', + appearanceKey: 'blacklist', section_activate: { type: 'section', diff --git a/src/template/js/template-parts/channel.js b/src/template/js/template-parts/channel.js index d4bb2ecd2..a75e0475b 100644 --- a/src/template/js/template-parts/channel.js +++ b/src/template/js/template-parts/channel.js @@ -3,7 +3,7 @@ Menu.main.section.channel = { before: '', label: 'channel', class: 'satus-folder--channel', - appearanceId: 'channel', + appearanceKey: 'channel', section: { type: 'section', @@ -32,4 +32,4 @@ Menu.main.section.channel = { label: 'hideFeaturedContent' } } -}; \ No newline at end of file +}; diff --git a/src/template/js/template-parts/general.js b/src/template/js/template-parts/general.js index b0275fad4..9657b6af7 100644 --- a/src/template/js/template-parts/general.js +++ b/src/template/js/template-parts/general.js @@ -3,7 +3,7 @@ Menu.main.section.general = { before: '', label: 'general', class: 'satus-folder--general', - appearanceId: 'general', + appearanceKey: 'general', section: { type: 'section', diff --git a/src/template/js/template-parts/header/active-features.js b/src/template/js/template-parts/header/active-features.js index 3b8e0510f..f5ab27166 100644 --- a/src/template/js/template-parts/header/active-features.js +++ b/src/template/js/template-parts/header/active-features.js @@ -1,6 +1,6 @@ Menu.header.section_end.button_vert.onClickRender.active_features = { type: 'folder', - before: '', + before: '', label: 'activeFeatures', onclick: function() { document.querySelector('.satus-dialog__scrim').click(); @@ -57,4 +57,4 @@ Menu.header.section_end.button_vert.onClickRender.active_features = { }); } } -}; \ No newline at end of file +}; diff --git a/src/template/js/template-parts/header/mixer.js b/src/template/js/template-parts/header/mixer.js index 640ee396f..32615456b 100644 --- a/src/template/js/template-parts/header/mixer.js +++ b/src/template/js/template-parts/header/mixer.js @@ -1,9 +1,9 @@ Menu.header.section_end.button_vert.onClickRender.mixer = { type: 'folder', - before: '', + before: '', label: 'mixer', class: 'satus-folder--mixer', - appearanceId: 'mixer', + appearanceKey: 'mixer', onopen: function() { var self = this; diff --git a/src/template/js/template-parts/header/settings.js b/src/template/js/template-parts/header/settings.js index 9305077bd..3841cad22 100644 --- a/src/template/js/template-parts/header/settings.js +++ b/src/template/js/template-parts/header/settings.js @@ -1,6 +1,6 @@ Menu.header.section_end.button_vert.onClickRender.settings = { type: 'folder', - before: '', + before: '', label: 'settings', parent: '.satus-main__container', onclick: function() { @@ -740,7 +740,7 @@ Menu.header.section_end.button_vert.onClickRender.settings = { type: 'folder', before: '', label: 'about', - appearanceId: 'about', + appearanceKey: 'about', section: { type: 'section', diff --git a/src/template/js/template-parts/player.js b/src/template/js/template-parts/player.js index 5b66fc7f0..54fddf5ae 100644 --- a/src/template/js/template-parts/player.js +++ b/src/template/js/template-parts/player.js @@ -3,7 +3,7 @@ Menu.main.section.player = { before: '', label: 'player', class: 'satus-folder--player', - appearanceId: 'player', + appearanceKey: 'player', general: { type: 'section', diff --git a/src/template/js/template-parts/playlist.js b/src/template/js/template-parts/playlist.js index 5e1cfaf2a..82711fd7c 100644 --- a/src/template/js/template-parts/playlist.js +++ b/src/template/js/template-parts/playlist.js @@ -3,7 +3,7 @@ Menu.main.section.playlist = { before: '', label: 'playlist', class: 'satus-folder--playlist', - appearanceId: 'playlist', + appearanceKey: 'playlist', section: { type: 'section', @@ -36,4 +36,4 @@ Menu.main.section.playlist = { label: 'shuffle' } } -}; \ No newline at end of file +}; diff --git a/src/template/js/template-parts/shortcuts.js b/src/template/js/template-parts/shortcuts.js index 451c06c49..30b5ed426 100644 --- a/src/template/js/template-parts/shortcuts.js +++ b/src/template/js/template-parts/shortcuts.js @@ -3,7 +3,7 @@ Menu.main.section.shortcuts = { before: '', label: 'shortcuts', class: 'satus-folder--shortcut', - appearanceId: 'shortcuts', + appearanceKey: 'shortcuts', player_section_label: { type: 'text', diff --git a/src/template/js/template-parts/themes.js b/src/template/js/template-parts/themes.js index 33e51b2bd..de5d4766b 100644 --- a/src/template/js/template-parts/themes.js +++ b/src/template/js/template-parts/themes.js @@ -42,7 +42,7 @@ Menu.main.section.themes = { before: '', label: 'themes', class: 'satus-folder--themes', - appearanceId: 'themes', + appearanceKey: 'themes', section: { type: 'section',