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',