extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2025-02-26 15:11:00 +01:00
Code Issues Packages Projects Releases Wiki Activity

[feature] add background video controls

Browse Source
This commit is contained in:
zombieFox 2020-08-03 16:18:06 +01:00
parent a63116ef0d
commit 112bf07edc
21 changed files with 704 additions and 521 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package-lock.json generated
View File

@ -1,6 +1,6 @@
{ {
"name": "nightTab", "name": "nightTab",
"version": "5.77.0", "version": "5.78.0",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
"dependencies": { "dependencies": {

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "nightTab", "name": "nightTab",
"version": "5.77.0", "version": "5.78.0",
"description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.", "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {

BIN
src.zip
View File

Binary file not shown.

53
src/css/background.css
View File

@ -9,12 +9,12 @@
display: none; display: none;
} }
.is-background-image-show .background { .is-background-visual-show .background {
display: block; display: block;
} }
.background-image { .background-visual-image {
background-image: var(--background-image); background-image: var(--background-visual-image);
background-attachment: fixed; background-attachment: fixed;
background-size: cover; background-size: cover;
background-position: center; background-position: center;
@ -25,13 +25,38 @@
height: 100%; height: 100%;
pointer-events: none; pointer-events: none;
display: block; display: block;
opacity: var(--background-opacity); opacity: var(--background-visual-opacity);
transform: scale(var(--background-scale)); transform: scale(var(--background-visual-scale));
filter: blur(var(--background-blur)) grayscale(var(--background-grayscale)); filter: blur(var(--background-visual-blur)) grayscale(var(--background-visual-grayscale));
z-index: 1;
} }
.background-accent { .background-visual-video {
background-color: rgba(var(--theme-accent), var(--background-accent)); opacity: var(--link-item-background-opacity);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none;
z-index: 1;
}
.background-visual-video video {
opacity: var(--background-visual-opacity);
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
transform: scale(var(--background-visual-scale));
filter: blur(var(--background-visual-blur)) grayscale(var(--background-visual-grayscale));
}
.background-visual-accent {
background-color: rgba(var(--theme-accent), var(--background-visual-accent));
position: absolute; position: absolute;
top: -1em; top: -1em;
left: -1em; left: -1em;
@ -39,18 +64,18 @@
height: calc(100% + 2em); height: calc(100% + 2em);
pointer-events: none; pointer-events: none;
display: block; display: block;
z-index: 2;
} }
.background-vignette { .background-visual-vignette {
position: absolute; position: absolute;
top: -1em; top: -1em;
left: -1em; left: -1em;
width: calc(100% + 2em); width: calc(100% + 2em);
height: calc(100% + 2em); height: calc(100% + 2em);
pointer-events: none; pointer-events: none;
background-image: radial-gradient( background-image: radial-gradient(circle,
circle, transparent var(--background-visual-vignette-end),
transparent var(--background-vignette-end), rgba(0, 0, 0, var(--background-visual-vignette-opacity)) var(--background-visual-vignette-start));
rgba(0, 0, 0, var(--background-vignette-opacity)) var(--background-vignette-start) z-index: 3;
);
} }

1
src/css/form.css
View File

@ -1963,6 +1963,7 @@ input[type="range"]:disabled::-moz-range-progress {
border-top-right-radius: var(--theme-radius); border-top-right-radius: var(--theme-radius);
border-bottom-right-radius: var(--theme-radius); border-bottom-right-radius: var(--theme-radius);
width: 100%; width: 100%;
transition: background-color var(--layout-transition-extra-fast), border-color var(--layout-transition-extra-fast);
} }
.form-feedback p { .form-feedback p {

2
src/css/shade.css
View File

@ -14,6 +14,6 @@
transition: opacity var(--layout-transition-extra-fast); transition: opacity var(--layout-transition-extra-fast);
} }
.is-edge:not(.is-background-image-show) .shade { .is-edge:not(.is-background-visual-show) .shade {
background-color: rgba(var(--theme-accent), 0.05); background-color: rgba(var(--theme-accent), 0.05);
} }

16
src/css/variables.css
View File

@ -160,14 +160,14 @@
/* background */ /* background */
--background-color-theme: var(--theme-color-01); --background-color-theme: var(--theme-color-01);
--background-color-custom: rgb(0, 0, 0); --background-color-custom: rgb(0, 0, 0);
--background-image: none; --background-visual-image: none;
--background-opacity: 1; --background-visual-opacity: 1;
--background-scale: 1; --background-visual-scale: 1;
--background-accent: 0; --background-visual-accent: 0;
--background-blur: 0; --background-visual-blur: 0;
--background-vignette-opacity: 0%; --background-visual-vignette-opacity: 0%;
--background-vignette-start: 90%; --background-visual-vignette-start: 90%;
--background-vignette-end: 70%; --background-visual-vignette-end: 70%;
/* form */ /* form */
--form-label: var(--theme-color-16); --form-label: var(--theme-color-16);
--form-label-hover: var(--theme-color-20); --form-label-hover: var(--theme-color-20);

7
src/html/background.html
View File

@ -1,5 +1,6 @@
<div class="background"> <div class="background">
<div class="background-image"></div> <div class="background-visual-image"></div>
<div class="background-accent"></div> <div class="background-visual-video"></div>
<div class="background-vignette"></div> <div class="background-visual-accent"></div>
<div class="background-visual-vignette"></div>
</div> </div>

2
src/html/menu/content/background.html
View File

@ -2,6 +2,6 @@
@@include("./background/color.html") @@include("./background/color.html")
@@include("./background/image.html") @@include("./background/visual.html")
</div> </div>

133
src/html/menu/content/background/image.html
View File

@ -1,133 +0,0 @@
<div id="menu-content-background-image" class="menu-content-item">
<div class="menu-item-header">
<h1 class="menu-item-header-text">Image</h1>
</div>
<div class="menu-item-form">
<div class="form-wrap">
<input id="control-background-image-show" class="control-background-image-show" type="checkbox" tabindex="-1">
<label for="control-background-image-show"><span class="label-icon"></span> Show</label>
</div>
<div class="form-wrap">
<div class="form-indent">
<div class="form-wrap">
<input id="control-background-image-from-file" class="control-background-image-from-file" type="radio" name="control-background-image-from" value="file" tabindex="-1">
<label for="control-background-image-from-file"><span class="label-icon"></span> Use local file</label>
</div>
<div class="form-wrap">
<div class="form-indent">
<div class="form-inline">
<div class="form-input-button form-input-button-line form-input-hide">
<input id="control-background-image-file" class="control-background-image-file" type="file">
<label for="control-background-image-file">Select image</label>
</div>
<button class="control-background-image-file-clear button button-line">Clear image</button>
</div>
<div class="form-wrap">
<p class="control-background-image-file-helper form-helper-item">Max image size 5MB, (due to browser local storage limits).</p>
</div>
<div class="form-wrap">
<p class="control-background-image-file-helper form-helper-item">Take care with large files, they may impact performance.</p>
</div>
<div class="form-wrap">
<div class="control-background-image-file-feedback form-feedback"></div>
</div>
</div>
</div>
<div class="form-wrap">
<input id="control-background-image-from-url" class="control-background-image-from-url" type="radio" name="control-background-image-from" value="url" tabindex="-1">
<label for="control-background-image-from-url"><span class="label-icon"></span> Use URL</label>
</div>
<div class="form-wrap">
<div class="form-indent">
<div class="form-wrap">
<textarea id="control-background-image-url" class="control-background-image-url" spellcheck="false" placeholder="https://..." tabindex="-1"></textarea>
</div>
<div class="form-wrap">
<p class="control-background-image-url-helper form-helper-item">If adding more than one URL separate them by spaces or on new lines. If more than one is entered a random background image will be used on load.</p>
</div>
<hr>
<div class="form-wrap">
<p class="control-background-image-url-helper form-helper-item">Unsplash can be used for random images, eg:</p>
<p class="control-background-image-url-helper form-helper-item"><i>https://source.unsplash.com/random/1920x1080/?night,day,sky</i></p>
<p class="control-background-image-url-helper form-helper-item">Change parameters after <i>.../random/</i> for more options. Loading times may vary.</p>
</div>
</div>
</div>
<hr>
<div class="form-wrap">
<label for="control-background-image-opacity-range">Opacity</label>
<div class="form-group form-group-block">
<input id="control-background-image-opacity-range" class="control-background-image-opacity-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-background-image-opacity-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<button class="control-background-image-opacity-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>
<hr>
<div class="form-wrap">
<label for="control-background-image-grayscale-range">Greyscale</label>
<div class="form-group form-group-block">
<input id="control-background-image-grayscale-range" class="control-background-image-grayscale-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-background-image-grayscale-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<button class="control-background-image-grayscale-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>
<hr>
<div class="form-wrap">
<label for="control-background-image-blur-range">Blur</label>
<div class="form-group form-group-block">
<input id="control-background-image-blur-range" class="control-background-image-blur-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-background-image-blur-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<button class="control-background-image-blur-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>
<hr>
<div class="form-wrap">
<label for="control-background-image-accent-range">Accent overlay</label>
<div class="form-group form-group-block">
<input id="control-background-image-accent-range" class="control-background-image-accent-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-background-image-accent-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<button class="control-background-image-accent-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>
<hr>
<div class="form-wrap">
<label for="control-background-image-scale-range">Size</label>
<div class="form-group form-group-block">
<input id="control-background-image-scale-range" class="control-background-image-scale-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-background-image-scale-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<button class="control-background-image-scale-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>
<hr>
<div class="form-wrap">
<label for="control-background-image-vignette-opacity-range">Vignette</label>
<div class="form-group form-group-block">
<input id="control-background-image-vignette-opacity-range" class="control-background-image-vignette-opacity-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-background-image-vignette-opacity-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<button class="control-background-image-vignette-opacity-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>
<div class="form-wrap">
<div class="form-indent">
<div class="form-wrap">
<label for="control-background-image-vignette-start-range">Start</label>
<div class="form-group form-group-block">
<input id="control-background-image-vignette-start-range" class="control-background-image-vignette-start-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-background-image-vignette-start-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<button class="control-background-image-vignette-start-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>
<div class="form-wrap">
<label for="control-background-image-vignette-end-range">End</label>
<div class="form-group form-group-block">
<input id="control-background-image-vignette-end-range" class="control-background-image-vignette-end-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-background-image-vignette-end-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<button class="control-background-image-vignette-end-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

159
src/html/menu/content/background/visual.html Normal file
View File

@ -0,0 +1,159 @@
<div id="menu-content-background-visual" class="menu-content-item">
<div class="menu-item-header">
<h1 class="menu-item-header-text">Visual</h1>
</div>
<div class="menu-item-form">
<div class="form-wrap">
<input id="control-background-visual-show" class="control-background-visual-show" type="checkbox" tabindex="-1">
<label for="control-background-visual-show"><span class="label-icon"></span> Show</label>
</div>
<div class="form-wrap">
<div class="form-indent">
<div class="form-wrap">
<input id="control-background-visual-type-video" class="control-background-visual-type-video" type="radio" name="control-background-visual-type" value="video" tabindex="-1">
<label for="control-background-visual-type-video"><span class="label-icon"></span> Video</label>
</div>
<div class="form-wrap">
<div class="form-indent">
<div class="form-wrap">
<label for="control-background-visual-video-url">URL</label>
<input id="control-background-visual-video-url" class="control-background-visual-video-url" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="https://www.example.com/video.mp4" tabindex="-1">
</div>
<div class="form-wrap">
<p class="control-background-visual-video-url-helper form-helper-item">Supports MP4 and WebM format.</p>
</div>
</div>
</div>
<div class="form-wrap">
<input id="control-background-visual-type-image" class="control-background-visual-type-image" type="radio" name="control-background-visual-type" value="image" tabindex="-1">
<label for="control-background-visual-type-image"><span class="label-icon"></span> Image</label>
</div>
<div class="form-wrap">
<div class="form-indent">
<div class="form-wrap">
<input id="control-background-visual-image-type-file" class="control-background-visual-image-type-file" type="radio" name="control-background-visual-image-type" value="file" tabindex="-1">
<label for="control-background-visual-image-type-file"><span class="label-icon"></span> Local file</label>
</div>
<div class="form-wrap">
<div class="form-indent">
<div class="form-inline">
<div class="form-input-button form-input-button-line form-input-hide">
<input id="control-background-visual-image-file" class="control-background-visual-image-file" type="file">
<label for="control-background-visual-image-file">Select image</label>
</div>
<button class="control-background-visual-image-clear button button-line">Clear image</button>
</div>
<div class="form-wrap">
<p class="control-background-visual-image-file-helper form-helper-item">Max image size 5MB, (due to browser local storage limits).</p>
</div>
<div class="form-wrap">
<p class="control-background-visual-image-file-helper form-helper-item">Take care with large files, they may impact performance.</p>
</div>
<div class="form-wrap">
<div class="control-background-visual-image-file-feedback form-feedback"></div>
</div>
</div>
</div>
<div class="form-wrap">
<input id="control-background-visual-image-type-url" class="control-background-visual-image-type-url" type="radio" name="control-background-visual-image-type" value="url" tabindex="-1">
<label for="control-background-visual-image-type-url"><span class="label-icon"></span> URL</label>
</div>
<div class="form-wrap">
<div class="form-indent">
<div class="form-wrap">
<textarea id="control-background-visual-image-url" class="control-background-visual-image-url" spellcheck="false" placeholder="https://www.example.com/image.jpg" tabindex="-1"></textarea>
</div>
<div class="form-wrap">
<p class="control-background-visual-image-url-helper form-helper-item">Add more than one URL separated by spaces or on new lines for a random background image on load.</p>
</div>
<div class="form-wrap">
<p class="control-background-visual-image-url-helper form-helper-item">Unsplash can be used for random images, eg:</p>
<p class="control-background-visual-image-url-helper form-helper-item"><i>https://source.unsplash.com/random/1920x1080/?night,day,sky</i></p>
<p class="control-background-visual-image-url-helper form-helper-item">Change parameters after <i>.../random/</i> for more options. Loading times may vary.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="form-wrap">
<div class="form-indent">
<hr>
<div class="form-wrap">
<label for="control-background-visual-opacity-range">Opacity</label>
<div class="form-group form-group-block">
<input id="control-background-visual-opacity-range" class="control-background-visual-opacity-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-background-visual-opacity-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<button class="control-background-visual-opacity-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>
<hr>
<div class="form-wrap">
<label for="control-background-visual-grayscale-range">Greyscale</label>
<div class="form-group form-group-block">
<input id="control-background-visual-grayscale-range" class="control-background-visual-grayscale-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-background-visual-grayscale-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<button class="control-background-visual-grayscale-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>
<hr>
<div class="form-wrap">
<label for="control-background-visual-blur-range">Blur</label>
<div class="form-group form-group-block">
<input id="control-background-visual-blur-range" class="control-background-visual-blur-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-background-visual-blur-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<button class="control-background-visual-blur-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>
<hr>
<div class="form-wrap">
<label for="control-background-visual-accent-range">Accent overlay</label>
<div class="form-group form-group-block">
<input id="control-background-visual-accent-range" class="control-background-visual-accent-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-background-visual-accent-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<button class="control-background-visual-accent-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>
<hr>
<div class="form-wrap">
<label for="control-background-visual-scale-range">Size</label>
<div class="form-group form-group-block">
<input id="control-background-visual-scale-range" class="control-background-visual-scale-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-background-visual-scale-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<button class="control-background-visual-scale-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>
<hr>
<div class="form-wrap">
<label for="control-background-vignette-opacity-range">Vignette</label>
<div class="form-group form-group-block">
<input id="control-background-vignette-opacity-range" class="control-background-vignette-opacity-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-background-vignette-opacity-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<button class="control-background-vignette-opacity-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>
<div class="form-wrap">
<div class="form-indent">
<div class="form-wrap">
<label for="control-background-vignette-start-range">Start</label>
<div class="form-group form-group-block">
<input id="control-background-vignette-start-range" class="control-background-vignette-start-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-background-vignette-start-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<button class="control-background-vignette-start-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>
<div class="form-wrap">
<label for="control-background-vignette-end-range">End</label>
<div class="form-group form-group-block">
<input id="control-background-vignette-end-range" class="control-background-vignette-end-range mr-3" type="range" value="0" tabindex="-1">
<input class="control-background-vignette-end-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
<button class="control-background-vignette-end-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

2
src/html/menu/content/theme/style.html
View File

@ -22,7 +22,7 @@
</label> </label>
</div> </div>
<div class="form-wrap"> <div class="form-wrap">
<p class="control-theme-style-helper form-helper-item">Flip the colour shades defined by the primary Colour.</p> <p class="control-theme-style-helper form-helper-item">Flip the colour shades defined by the Primary Colour.</p>
<p class="control-theme-style-helper form-helper-item">Accent Colour and Background Image may need to be changed to best fit the Theme Style.</p> <p class="control-theme-style-helper form-helper-item">Accent Colour and Background Image may need to be changed to best fit the Theme Style.</p>
</div> </div>
</div> </div>

2
src/html/menu/nav.html
View File

@ -75,7 +75,7 @@
<button class="control-menu-background menu-nav-tab button button-line" tabindex="-1">Background</button> <button class="control-menu-background menu-nav-tab button button-line" tabindex="-1">Background</button>
<div class="menu-subnav menu-subnav-background"> <div class="menu-subnav menu-subnav-background">
<a href="#menu-content-background-color" class="menu-nav-sub button button-small" tabindex="-1">Colour</a> <a href="#menu-content-background-color" class="menu-nav-sub button button-small" tabindex="-1">Colour</a>
<a href="#menu-content-background-image" class="menu-nav-sub button button-small" tabindex="-1">Image</a> <a href="#menu-content-background-visual" class="menu-nav-sub button button-small" tabindex="-1">Visual</a>
</div> </div>
</div> </div>
<div class="menu-nav-item"> <div class="menu-nav-item">

272
src/js/background.js
View File

@ -2,46 +2,6 @@ var background = (function() {
var mod = {}; var mod = {};
mod.import = function() {
// get files from input
var fileList = helper.e(".control-background-image-file").files;
// if file was added
if (fileList.length > 0) {
// validate the file
_validateImageFile(fileList);
};
};
mod.clear = {
file: function() {
helper.setObject({
object: state.get.current(),
path: "background.image.file.name",
newValue: ""
});
helper.setObject({
object: state.get.current(),
path: "background.image.file.data",
newValue: ""
});
}
};
mod.image = {
file: function(name, data) {
helper.setObject({
object: state.get.current(),
path: "background.image.file.name",
newValue: name
});
helper.setObject({
object: state.get.current(),
path: "background.image.file.data",
newValue: data
});
}
};
mod.color = { mod.color = {
hsl: function() { hsl: function() {
var hsl = helper.convertColor.rgb.hsl(state.get.current().background.color.rgb); var hsl = helper.convertColor.rgb.hsl(state.get.current().background.color.rgb);
@ -69,12 +29,51 @@ var background = (function() {
} }
}; };
mod.import = function() {
// get files from input
var fileList = helper.e(".control-background-visual-image-file").files;
// if file was added
if (fileList.length > 0) {
// validate the file
_validateImageFile(fileList);
};
};
mod.visual = {};
mod.visual.image = {
file: function(name, data) {
helper.setObject({
object: state.get.current(),
path: "background.visual.image.file.name",
newValue: name
});
helper.setObject({
object: state.get.current(),
path: "background.visual.image.file.data",
newValue: data
});
},
clear: function() {
helper.setObject({
object: state.get.current(),
path: "background.visual.image.file.name",
newValue: ""
});
helper.setObject({
object: state.get.current(),
path: "background.visual.image.file.data",
newValue: ""
});
}
};
var bind = {}; var bind = {};
bind.feedback = { bind.feedback = {
animation: { animation: {
set: function(animationClass, action) { set: function(animationClass, action) {
var controlBackgroundImageFileFeedback = helper.e(".control-background-image-file-feedback"); var controlBackgroundImageFileFeedback = helper.e(".control-background-visual-image-file-feedback");
helper.addClass(controlBackgroundImageFileFeedback, animationClass); helper.addClass(controlBackgroundImageFileFeedback, animationClass);
var animationEndAction = function() { var animationEndAction = function() {
if (action) { if (action) {
@ -85,7 +84,7 @@ var background = (function() {
controlBackgroundImageFileFeedback.addEventListener("animationend", animationEndAction, false); controlBackgroundImageFileFeedback.addEventListener("animationend", animationEndAction, false);
}, },
reset: function() { reset: function() {
var controlBackgroundImageFileFeedback = helper.e(".control-background-image-file-feedback"); var controlBackgroundImageFileFeedback = helper.e(".control-background-visual-image-file-feedback");
helper.removeClass(controlBackgroundImageFileFeedback, "is-shake"); helper.removeClass(controlBackgroundImageFileFeedback, "is-shake");
helper.removeClass(controlBackgroundImageFileFeedback, "is-pop"); helper.removeClass(controlBackgroundImageFileFeedback, "is-pop");
helper.removeClass(controlBackgroundImageFileFeedback, "is-jello"); helper.removeClass(controlBackgroundImageFileFeedback, "is-jello");
@ -99,99 +98,132 @@ var background = (function() {
render.color = { render.color = {
custom: function() { custom: function() {
helper.e("html").style.setProperty("--background-color-custom", state.get.current().background.color.rgb.r + ", " + state.get.current().background.color.rgb.g + ", " + state.get.current().background.color.rgb.b); helper.e("html").style.setProperty("--background-color-custom", state.get.current().background.color.rgb.r + ", " + state.get.current().background.color.rgb.g + ", " + state.get.current().background.color.rgb.b);
},
clearHTML: function() {
helper.e("html").style.backgroundColor = "";
} }
}; };
render.image = function() { render.visual = {
var html = helper.e("html"); blur: function() {
if (state.get.current().background.image.show) { var html = helper.e("html");
if (state.get.current().background.image.from == "file") { html.style.setProperty("--background-visual-blur", state.get.current().background.visual.blur + "px");
html.style.setProperty("--background-image", "url(" + state.get.current().background.image.file.data + ")"); },
} else if (state.get.current().background.image.from == "url") { grayscale: function() {
if (/\s+/g.test(state.get.current().background.image.url)) { var html = helper.e("html");
var allUrls = state.get.current().background.image.url.split(/\s+/); html.style.setProperty("--background-visual-grayscale", state.get.current().background.visual.grayscale);
var randomUrl = allUrls[Math.floor(Math.random() * allUrls.length)]; },
html.style.setProperty("--background-image", "url(" + randomUrl + ")");
} else {
html.style.setProperty("--background-image", "url(" + state.get.current().background.image.url + ")");
};
};
} else {
html.style.setProperty("--background-image", "url()");
};
};
render.blur = function() {
var html = helper.e("html");
html.style.setProperty("--background-blur", state.get.current().background.image.blur + "px");
};
render.grayscale = function() {
var html = helper.e("html");
html.style.setProperty("--background-grayscale", state.get.current().background.image.grayscale);
};
render.opacity = function() {
var html = helper.e("html");
html.style.setProperty("--background-opacity", state.get.current().background.image.opacity);
};
render.scale = function() {
var html = helper.e("html");
html.style.setProperty("--background-scale", state.get.current().background.image.scale);
};
render.accent = function() {
var html = helper.e("html");
html.style.setProperty("--background-accent", state.get.current().background.image.accent);
};
render.vignette = {
opacity: function() { opacity: function() {
var html = helper.e("html"); var html = helper.e("html");
html.style.setProperty("--background-vignette-opacity", state.get.current().background.image.vignette.opacity + "%"); html.style.setProperty("--background-visual-opacity", state.get.current().background.visual.opacity);
}, },
start: function() { scale: function() {
var html = helper.e("html"); var html = helper.e("html");
html.style.setProperty("--background-vignette-start", state.get.current().background.image.vignette.start + "%"); html.style.setProperty("--background-visual-scale", state.get.current().background.visual.scale);
}, },
end: function() { accent: function() {
var html = helper.e("html"); var html = helper.e("html");
html.style.setProperty("--background-vignette-end", state.get.current().background.image.vignette.end + "%"); html.style.setProperty("--background-visual-accent", state.get.current().background.visual.accent);
},
vignette: {
opacity: function() {
var html = helper.e("html");
html.style.setProperty("--background-visual-vignette-opacity", state.get.current().background.visual.vignette.opacity + "%");
},
start: function() {
var html = helper.e("html");
html.style.setProperty("--background-visual-vignette-start", state.get.current().background.visual.vignette.start + "%");
},
end: function() {
var html = helper.e("html");
html.style.setProperty("--background-visual-vignette-end", state.get.current().background.visual.vignette.end + "%");
}
} }
}; };
render.input = { render.visual.image = {
set: function() {
var html = helper.e("html");
if (state.get.current().background.visual.show && state.get.current().background.visual.type == "image") {
if (state.get.current().background.visual.image.type == "file") {
html.style.setProperty("--background-visual-image", "url(" + state.get.current().background.visual.image.file.data + ")");
} else if (state.get.current().background.visual.image.type == "url") {
if (helper.checkIfValidString(state.get.current().background.visual.image.url)) {
var allUrls = state.get.current().background.visual.image.url.split(/\s+/);
allUrls = allUrls.filter(function(arrayItem) {
return arrayItem.length > 0 && arrayItem != "";
});
var randomUrl = allUrls[Math.floor(Math.random() * allUrls.length)];
html.style.setProperty("--background-visual-image", "url(" + randomUrl + ")");
} else {
html.style.setProperty("--background-visual-image", "url(" + state.get.current().background.visual.image.url + ")");
};
};
} else {
render.visual.image.clear();
};
},
clear: function() { clear: function() {
helper.e(".control-background-image-file").value = ""; var html = helper.e("html");
html.style.setProperty("--background-visual-image", "none");
helper.e(".control-background-visual-image-file").value = "";
}
};
render.visual.video = {
set: function() {
if (state.get.current().background.visual.show && state.get.current().background.visual.type == "video") {
if (helper.checkIfValidString(state.get.current().background.visual.video.url)) {
var backgroundVisualVideo = helper.e(".background-visual-video");
if (state.get.current().background.visual.video.url.includes("mp4") || state.get.current().background.visual.video.url.endsWith("mp4")) {
var video = helper.node("video|autoplay,loop,muted,type:video/mp4")
var source = helper.node("source|src:" + state.get.current().background.visual.video.url);
video.muted = true;
video.loop = true;
video.autoplay = true;
video.appendChild(source);
backgroundVisualVideo.appendChild(video);
} else if (state.get.current().background.visual.video.url.includes("webm") || state.get.current().background.visual.video.url.endsWith("webm")) {
var video = helper.node("video|autoplay,loop,muted,type:video/webm")
var source = helper.node("source|src:" + state.get.current().background.visual.video.url);
video.muted = true;
video.loop = true;
video.autoplay = true;
video.appendChild(source);
backgroundVisualVideo.appendChild(video);
};
} else {
render.visual.video.clear();
};
};
},
clear: function() {
var backgroundVisualVideo = helper.e(".background-visual-video");
while (backgroundVisualVideo.lastChild) {
backgroundVisualVideo.removeChild(backgroundVisualVideo.lastChild);
};
} }
}; };
render.feedback = { render.feedback = {
init: function() { init: function() {
if (helper.checkIfValidString(state.get.current().background.image.file.name)) { if (helper.checkIfValidString(state.get.current().background.visual.image.file.name)) {
render.feedback.current(); render.feedback.current();
} else { } else {
render.feedback.empty(); render.feedback.empty();
}; };
}, },
empty: function() { empty: function() {
var controlBackgroundImageFileFeedback = helper.e(".control-background-image-file-feedback"); var controlBackgroundImageFileFeedback = helper.e(".control-background-visual-image-file-feedback");
var para1 = helper.node("p:No image selected.|class:muted small"); var para1 = helper.node("p:No image selected.|class:muted small");
controlBackgroundImageFileFeedback.appendChild(para1); controlBackgroundImageFileFeedback.appendChild(para1);
}, },
current: function() { current: function() {
var controlBackgroundImageFileFeedback = helper.e(".control-background-image-file-feedback"); var controlBackgroundImageFileFeedback = helper.e(".control-background-visual-image-file-feedback");
var para1 = helper.node("p:Image loaded.|class:muted small"); var para1 = helper.node("p:Image loaded.|class:muted small");
var para2 = helper.node("p:" + state.get.current().background.image.file.name); var para2 = helper.node("p:" + state.get.current().background.visual.image.file.name);
controlBackgroundImageFileFeedback.appendChild(para1); controlBackgroundImageFileFeedback.appendChild(para1);
controlBackgroundImageFileFeedback.appendChild(para2); controlBackgroundImageFileFeedback.appendChild(para2);
}, },
success: function(name, action) { success: function(name, action) {
var controlBackgroundImageFileFeedback = helper.e(".control-background-image-file-feedback"); var controlBackgroundImageFileFeedback = helper.e(".control-background-visual-image-file-feedback");
var para1 = helper.node("p:Success! Setting Background image.|class:muted small"); var para1 = helper.node("p:Success! Setting Background image.|class:muted small");
var para2 = helper.node("p:" + name); var para2 = helper.node("p:" + name);
controlBackgroundImageFileFeedback.appendChild(para1); controlBackgroundImageFileFeedback.appendChild(para1);
@ -207,7 +239,7 @@ var background = (function() {
if (override) { if (override) {
options = helper.applyOptions(options, override); options = helper.applyOptions(options, override);
}; };
var controlBackgroundImageFileFeedback = helper.e(".control-background-image-file-feedback"); var controlBackgroundImageFileFeedback = helper.e(".control-background-visual-image-file-feedback");
while (controlBackgroundImageFileFeedback.lastChild) { while (controlBackgroundImageFileFeedback.lastChild) {
controlBackgroundImageFileFeedback.removeChild(controlBackgroundImageFileFeedback.lastChild); controlBackgroundImageFileFeedback.removeChild(controlBackgroundImageFileFeedback.lastChild);
}; };
@ -217,7 +249,7 @@ var background = (function() {
}, },
fail: { fail: {
filetype: function(name) { filetype: function(name) {
var controlBackgroundImageFileFeedback = helper.e(".control-background-image-file-feedback"); var controlBackgroundImageFileFeedback = helper.e(".control-background-visual-image-file-feedback");
var para1 = helper.node("p:Not the right kind of file. Make sure the selected file is an image.|class:small muted"); var para1 = helper.node("p:Not the right kind of file. Make sure the selected file is an image.|class:small muted");
var para2 = helper.node("p:" + name); var para2 = helper.node("p:" + name);
controlBackgroundImageFileFeedback.appendChild(para1); controlBackgroundImageFileFeedback.appendChild(para1);
@ -225,7 +257,7 @@ var background = (function() {
bind.feedback.animation.set("is-shake"); bind.feedback.animation.set("is-shake");
}, },
size: function(name) { size: function(name) {
var controlBackgroundImageFileFeedback = helper.e(".control-background-image-file-feedback"); var controlBackgroundImageFileFeedback = helper.e(".control-background-visual-image-file-feedback");
var para1 = helper.node("p:File size is too big. Max file size of 5MB.|class:small muted"); var para1 = helper.node("p:File size is too big. Max file size of 5MB.|class:small muted");
var para2 = helper.node("p:" + name); var para2 = helper.node("p:" + name);
controlBackgroundImageFileFeedback.appendChild(para1); controlBackgroundImageFileFeedback.appendChild(para1);
@ -242,22 +274,22 @@ var background = (function() {
reader.onload = function(event) { reader.onload = function(event) {
if (fileList.item(0).size <= 5000000) { if (fileList.item(0).size <= 5000000) {
if (fileList.item(0).type.split("/")[0] == "image") { if (fileList.item(0).type.split("/")[0] == "image") {
mod.image.file(fileList[0].name, event.target.result); mod.visual.image.file(fileList[0].name, event.target.result);
data.save(); data.save();
render.feedback.clear(); render.feedback.clear();
render.feedback.success(fileList[0].name, render.image); render.feedback.success(fileList[0].name, render.visual.image.set);
render.input.clear(); render.visual.image.clear();
} else { } else {
// not an image file // not an image file
render.feedback.clear(); render.feedback.clear();
render.feedback.fail.filetype(fileList[0].name); render.feedback.fail.filetype(fileList[0].name);
render.input.clear(); render.visual.image.clear();
}; };
} else { } else {
// file size too big // file size too big
render.feedback.clear(); render.feedback.clear();
render.feedback.fail.size(fileList[0].name); render.feedback.fail.size(fileList[0].name);
render.input.clear(); render.visual.image.clear();
}; };
}; };
// invoke the reader // invoke the reader
@ -265,17 +297,17 @@ var background = (function() {
}; };
var init = function() { var init = function() {
render.color.clearHTML();
render.color.custom(); render.color.custom();
render.image(); render.visual.image.set();
render.blur(); render.visual.video.set();
render.grayscale(); render.visual.blur();
render.opacity(); render.visual.grayscale();
render.scale(); render.visual.opacity();
render.accent(); render.visual.scale();
render.vignette.opacity(); render.visual.accent();
render.vignette.start(); render.visual.vignette.opacity();
render.vignette.end(); render.visual.vignette.start();
render.visual.vignette.end();
render.feedback.init(); render.feedback.init();
}; };

495
src/js/control.js
View File

@ -8925,6 +8925,30 @@ var control = (function() {
} }
}] }]
}, },
data: {
restore: [{
element: ".control-data-import",
type: "file",
func: function() {
data.mod.import();
}
}],
backup: [{
element: ".control-data-export",
type: "a",
func: function() {
data.mod.export();
}
}],
clear: [{
element: ".control-data-clear",
type: "a",
func: function() {
menu.close();
data.render.clear();
}
}]
},
background: { background: {
color: [{ color: [{
element: ".control-background-color-by-theme", element: ".control-background-color-by-theme",
@ -9667,59 +9691,87 @@ var control = (function() {
background.render.color.custom(); background.render.color.custom();
} }
}], }],
image: [{ visual: [{
element: ".control-background-image-show", element: ".control-background-visual-show",
path: "background.image.show", path: "background.visual.show",
type: "checkbox", type: "checkbox",
func: function() { func: function() {
render.class(); render.class();
render.dependents(); render.dependents();
background.render.image(); background.render.visual.video.set();
background.render.visual.image.set();
} }
}, { }, {
element: ".control-background-image-from-file", element: ".control-background-visual-type-video",
path: "background.image.from", path: "background.visual.type",
type: "radio", type: "radio",
func: function() { func: function() {
render.dependents(); render.dependents();
background.render.image(); background.render.visual.video.set();
background.render.visual.image.clear();
} }
}, { }, {
element: ".control-background-image-file", element: ".control-background-visual-type-image",
path: "background.visual.type",
type: "radio",
func: function() {
render.dependents();
background.render.visual.video.clear();
background.render.visual.image.set();
}
}, {
element: ".control-background-visual-image-type-file",
path: "background.visual.image.type",
type: "radio",
func: function() {
render.dependents();
background.render.visual.image.set();
}
}, {
element: ".control-background-visual-image-type-url",
path: "background.visual.image.type",
type: "radio",
func: function() {
render.dependents();
background.render.visual.image.set();
}
}, {
element: ".control-background-visual-image-file",
type: "file", type: "file",
func: function() { func: function() {
background.mod.import(); background.mod.import();
background.render.visual.image.set();
} }
}, { }, {
element: ".control-background-image-file-clear", element: ".control-background-visual-image-clear",
type: "button", type: "button",
func: function() { func: function() {
background.mod.clear.file(); background.mod.visual.image.clear();
background.render.input.clear(); background.render.visual.image.clear();
background.render.image();
background.render.feedback.clear({ background.render.feedback.clear({
animate: true animate: true
}); });
background.render.feedback.empty(); background.render.feedback.empty();
} }
}, { }, {
element: ".control-background-image-from-url", element: ".control-background-visual-image-url",
path: "background.image.from", path: "background.visual.image.url",
type: "radio",
func: function() {
render.dependents();
background.render.image();
}
}, {
element: ".control-background-image-url",
path: "background.image.url",
type: "textarea", type: "textarea",
func: function() { func: function() {
background.render.image(); background.render.visual.image.clear();
background.render.visual.image.set();
} }
}, { }, {
element: ".control-background-image-opacity-range", element: ".control-background-visual-video-url",
path: "background.image.opacity", path: "background.visual.video.url",
type: "textarea",
func: function() {
background.render.visual.video.clear();
background.render.visual.video.set();
}
}, {
element: ".control-background-visual-opacity-range",
path: "background.visual.opacity",
type: "range", type: "range",
valueConvert: ["float"], valueConvert: ["float"],
valueModify: { valueModify: {
@ -9727,17 +9779,17 @@ var control = (function() {
max: 100 max: 100
}, },
mirrorElement: [{ mirrorElement: [{
element: ".control-background-image-opacity-number", element: ".control-background-visual-opacity-number",
path: "background.image.opacity", path: "background.visual.opacity",
type: "number", type: "number",
valueConvert: ["float"] valueConvert: ["float"]
}], }],
func: function() { func: function() {
background.render.opacity(); background.render.visual.opacity();
} }
}, { }, {
element: ".control-background-image-opacity-number", element: ".control-background-visual-opacity-number",
path: "background.image.opacity", path: "background.visual.opacity",
type: "number", type: "number",
valueConvert: ["float"], valueConvert: ["float"],
valueModify: { valueModify: {
@ -9745,25 +9797,25 @@ var control = (function() {
max: 100 max: 100
}, },
mirrorElement: [{ mirrorElement: [{
element: ".control-background-image-opacity-range", element: ".control-background-visual-opacity-range",
path: "background.image.opacity", path: "background.visual.opacity",
type: "range", type: "range",
valueConvert: ["float"] valueConvert: ["float"]
}], }],
func: function() { func: function() {
background.render.opacity(); background.render.visual.opacity();
} }
}, { }, {
element: ".control-background-image-opacity-default", element: ".control-background-visual-opacity-default",
type: "button", type: "button",
func: function() { func: function() {
mod.default("background.image.opacity"); mod.default("background.visual.opacity");
background.render.opacity(); background.render.visual.opacity();
render.update.control.menu(); render.update.control.menu();
} }
}, { }, {
element: ".control-background-image-grayscale-range", element: ".control-background-visual-grayscale-range",
path: "background.image.grayscale", path: "background.visual.grayscale",
type: "range", type: "range",
valueConvert: ["float"], valueConvert: ["float"],
valueModify: { valueModify: {
@ -9771,17 +9823,17 @@ var control = (function() {
max: 100 max: 100
}, },
mirrorElement: [{ mirrorElement: [{
element: ".control-background-image-grayscale-number", element: ".control-background-visual-grayscale-number",
path: "background.image.grayscale", path: "background.visual.grayscale",
type: "number", type: "number",
valueConvert: ["float"] valueConvert: ["float"]
}], }],
func: function() { func: function() {
background.render.grayscale(); background.render.visual.grayscale();
} }
}, { }, {
element: ".control-background-image-grayscale-number", element: ".control-background-visual-grayscale-number",
path: "background.image.grayscale", path: "background.visual.grayscale",
type: "number", type: "number",
valueConvert: ["float"], valueConvert: ["float"],
valueModify: { valueModify: {
@ -9789,65 +9841,65 @@ var control = (function() {
max: 100 max: 100
}, },
mirrorElement: [{ mirrorElement: [{
element: ".control-background-image-grayscale-range", element: ".control-background-visual-grayscale-range",
path: "background.image.grayscale", path: "background.visual.grayscale",
type: "range", type: "range",
valueConvert: ["float"] valueConvert: ["float"]
}], }],
func: function() { func: function() {
background.render.grayscale(); background.render.visual.grayscale();
} }
}, { }, {
element: ".control-background-image-grayscale-default", element: ".control-background-visual-grayscale-default",
type: "button", type: "button",
func: function() { func: function() {
mod.default("background.image.grayscale"); mod.default("background.visual.grayscale");
background.render.grayscale(); background.render.visual.grayscale();
render.update.control.menu(); render.update.control.menu();
} }
}, { }, {
element: ".control-background-image-blur-range", element: ".control-background-visual-blur-range",
path: "background.image.blur", path: "background.visual.blur",
type: "range", type: "range",
valueModify: { valueModify: {
min: 0, min: 0,
max: 100 max: 100
}, },
mirrorElement: [{ mirrorElement: [{
element: ".control-background-image-blur-number", element: ".control-background-visual-blur-number",
path: "background.image.blur", path: "background.visual.blur",
type: "number" type: "number"
}], }],
func: function() { func: function() {
background.render.blur(); background.render.visual.blur();
} }
}, { }, {
element: ".control-background-image-blur-number", element: ".control-background-visual-blur-number",
path: "background.image.blur", path: "background.visual.blur",
type: "number", type: "number",
valueModify: { valueModify: {
min: 0, min: 0,
max: 100 max: 100
}, },
mirrorElement: [{ mirrorElement: [{
element: ".control-background-image-blur-range", element: ".control-background-visual-blur-range",
path: "background.image.blur", path: "background.visual.blur",
type: "range" type: "range"
}], }],
func: function() { func: function() {
background.render.blur(); background.render.visual.blur();
} }
}, { }, {
element: ".control-background-image-blur-default", element: ".control-background-visual-blur-default",
type: "button", type: "button",
func: function() { func: function() {
mod.default("background.image.blur"); mod.default("background.visual.blur");
background.render.blur(); background.render.visual.blur();
render.update.control.menu(); render.update.control.menu();
} }
}, { }, {
element: ".control-background-image-accent-range", element: ".control-background-visual-accent-range",
path: "background.image.accent", path: "background.visual.accent",
type: "range", type: "range",
valueConvert: ["float"], valueConvert: ["float"],
valueModify: { valueModify: {
@ -9855,17 +9907,17 @@ var control = (function() {
max: 100 max: 100
}, },
mirrorElement: [{ mirrorElement: [{
element: ".control-background-image-accent-number", element: ".control-background-visual-accent-number",
path: "background.image.accent", path: "background.visual.accent",
type: "number", type: "number",
valueConvert: ["float"] valueConvert: ["float"]
}], }],
func: function() { func: function() {
background.render.accent(); background.render.visual.accent();
} }
}, { }, {
element: ".control-background-image-accent-number", element: ".control-background-visual-accent-number",
path: "background.image.accent", path: "background.visual.accent",
type: "number", type: "number",
valueConvert: ["float"], valueConvert: ["float"],
valueModify: { valueModify: {
@ -9873,25 +9925,25 @@ var control = (function() {
max: 100 max: 100
}, },
mirrorElement: [{ mirrorElement: [{
element: ".control-background-image-accent-range", element: ".control-background-visual-accent-range",
path: "background.image.accent", path: "background.visual.accent",
type: "range", type: "range",
valueConvert: ["float"] valueConvert: ["float"]
}], }],
func: function() { func: function() {
background.render.accent(); background.render.visual.accent();
} }
}, { }, {
element: ".control-background-image-accent-default", element: ".control-background-visual-accent-default",
type: "button", type: "button",
func: function() { func: function() {
mod.default("background.image.accent"); mod.default("background.visual.accent");
background.render.accent(); background.render.visual.accent();
render.update.control.menu(); render.update.control.menu();
} }
}, { }, {
element: ".control-background-image-scale-range", element: ".control-background-visual-scale-range",
path: "background.image.scale", path: "background.visual.scale",
type: "range", type: "range",
valueConvert: ["float"], valueConvert: ["float"],
valueModify: { valueModify: {
@ -9899,17 +9951,17 @@ var control = (function() {
max: 1000 max: 1000
}, },
mirrorElement: [{ mirrorElement: [{
element: ".control-background-image-scale-number", element: ".control-background-visual-scale-number",
path: "background.image.scale", path: "background.visual.scale",
type: "number", type: "number",
valueConvert: ["float"] valueConvert: ["float"]
}], }],
func: function() { func: function() {
background.render.scale(); background.render.visual.scale();
} }
}, { }, {
element: ".control-background-image-scale-number", element: ".control-background-visual-scale-number",
path: "background.image.scale", path: "background.visual.scale",
type: "number", type: "number",
valueConvert: ["float"], valueConvert: ["float"],
valueModify: { valueModify: {
@ -9917,207 +9969,183 @@ var control = (function() {
max: 1000 max: 1000
}, },
mirrorElement: [{ mirrorElement: [{
element: ".control-background-image-scale-range", element: ".control-background-visual-scale-range",
path: "background.image.scale", path: "background.visual.scale",
type: "range", type: "range",
valueConvert: ["float"] valueConvert: ["float"]
}], }],
func: function() { func: function() {
background.render.scale(); background.render.visual.scale();
} }
}, { }, {
element: ".control-background-image-scale-default", element: ".control-background-visual-scale-default",
type: "button", type: "button",
func: function() { func: function() {
mod.default("background.image.scale"); mod.default("background.visual.scale");
background.render.scale(); background.render.visual.scale();
render.update.control.menu(); render.update.control.menu();
} }
}, { }, {
element: ".control-background-image-vignette-opacity-range", element: ".control-background-vignette-opacity-range",
path: "background.image.vignette.opacity", path: "background.visual.vignette.opacity",
type: "range", type: "range",
valueModify: { valueModify: {
min: 0, min: 0,
max: 100 max: 100
}, },
mirrorElement: [{ mirrorElement: [{
element: ".control-background-image-vignette-opacity-number", element: ".control-background-vignette-opacity-number",
path: "background.image.vignette.opacity", path: "background.visual.vignette.opacity",
type: "number" type: "number"
}], }],
func: function() { func: function() {
background.render.vignette.opacity(); background.render.visual.vignette.opacity();
background.render.vignette.start(); background.render.visual.vignette.start();
background.render.vignette.end(); background.render.visual.vignette.end();
} }
}, { }, {
element: ".control-background-image-vignette-opacity-number", element: ".control-background-vignette-opacity-number",
path: "background.image.vignette.opacity", path: "background.visual.vignette.opacity",
type: "number", type: "number",
valueModify: { valueModify: {
min: 0, min: 0,
max: 100 max: 100
}, },
mirrorElement: [{ mirrorElement: [{
element: ".control-background-image-vignette-opacity-range", element: ".control-background-vignette-opacity-range",
path: "background.image.vignette.opacity", path: "background.visual.vignette.opacity",
type: "range" type: "range"
}], }],
func: function() { func: function() {
background.render.vignette.opacity(); background.render.visual.vignette.opacity();
background.render.vignette.start(); background.render.visual.vignette.start();
background.render.vignette.end(); background.render.visual.vignette.end();
} }
}, { }, {
element: ".control-background-image-vignette-opacity-default", element: ".control-background-vignette-opacity-default",
type: "button", type: "button",
func: function() { func: function() {
mod.default("background.image.vignette.opacity"); mod.default("background.visual.vignette.opacity");
background.render.vignette.opacity(); background.render.visual.vignette.opacity();
background.render.vignette.start(); background.render.visual.vignette.start();
background.render.vignette.end(); background.render.visual.vignette.end();
render.update.control.menu(); render.update.control.menu();
} }
}, { }, {
element: ".control-background-image-vignette-start-range", element: ".control-background-vignette-start-range",
path: "background.image.vignette.start", path: "background.visual.vignette.start",
type: "range", type: "range",
valueModify: { valueModify: {
min: 0, min: 0,
max: 100 max: 100
}, },
mirrorElement: [{ mirrorElement: [{
element: ".control-background-image-vignette-start-number", element: ".control-background-vignette-start-number",
path: "background.image.vignette.start", path: "background.visual.vignette.start",
type: "number" type: "number"
}], }],
limitElement: [{ limitElement: [{
element: ".control-background-image-vignette-end-range", element: ".control-background-vignette-end-range",
path: "background.image.vignette.end", path: "background.visual.vignette.end",
type: "range", type: "range",
limit: "max" limit: "max"
}, { }, {
element: ".control-background-image-vignette-end-number", element: ".control-background-vignette-end-number",
path: "background.image.vignette.end", path: "background.visual.vignette.end",
type: "number", type: "number",
limit: "max" limit: "max"
}], }],
func: function() { func: function() {
background.render.vignette.opacity(); background.render.visual.vignette.opacity();
background.render.vignette.start(); background.render.visual.vignette.start();
background.render.vignette.end(); background.render.visual.vignette.end();
} }
}, { }, {
element: ".control-background-image-vignette-start-number", element: ".control-background-vignette-start-number",
path: "background.image.vignette.start", path: "background.visual.vignette.start",
type: "number", type: "number",
valueModify: { valueModify: {
min: 0, min: 0,
max: 100 max: 100
}, },
mirrorElement: [{ mirrorElement: [{
element: ".control-background-image-vignette-start-range", element: ".control-background-vignette-start-range",
path: "background.image.vignette.start", path: "background.visual.vignette.start",
type: "range" type: "range"
}], }],
func: function() { func: function() {
background.render.vignette.opacity(); background.render.visual.vignette.opacity();
background.render.vignette.start(); background.render.visual.vignette.start();
background.render.vignette.end(); background.render.visual.vignette.end();
} }
}, { }, {
element: ".control-background-image-vignette-start-default", element: ".control-background-vignette-start-default",
type: "button", type: "button",
func: function() { func: function() {
mod.default("background.image.vignette.start"); mod.default("background.visual.vignette.start");
background.render.vignette.opacity(); background.render.visual.vignette.opacity();
background.render.vignette.start(); background.render.visual.vignette.start();
background.render.vignette.end(); background.render.visual.vignette.end();
render.update.control.menu(); render.update.control.menu();
} }
}, { }, {
element: ".control-background-image-vignette-end-range", element: ".control-background-vignette-end-range",
path: "background.image.vignette.end", path: "background.visual.vignette.end",
type: "range", type: "range",
valueModify: { valueModify: {
min: 0, min: 0,
max: 100 max: 100
}, },
mirrorElement: [{ mirrorElement: [{
element: ".control-background-image-vignette-end-number", element: ".control-background-vignette-end-number",
path: "background.image.vignette.end", path: "background.visual.vignette.end",
type: "number" type: "number"
}], }],
limitElement: [{ limitElement: [{
element: ".control-background-image-vignette-start-range", element: ".control-background-vignette-start-range",
path: "background.image.vignette.start", path: "background.visual.vignette.start",
type: "range", type: "range",
limit: "min" limit: "min"
}, { }, {
element: ".control-background-image-vignette-start-number", element: ".control-background-vignette-start-number",
path: "background.image.vignette.start", path: "background.visual.vignette.start",
type: "number", type: "number",
limit: "min" limit: "min"
}], }],
func: function() { func: function() {
background.render.vignette.opacity(); background.render.visual.vignette.opacity();
background.render.vignette.start(); background.render.visual.vignette.start();
background.render.vignette.end(); background.render.visual.vignette.end();
} }
}, { }, {
element: ".control-background-image-vignette-end-number", element: ".control-background-vignette-end-number",
path: "background.image.vignette.end", path: "background.visual.vignette.end",
type: "number", type: "number",
valueModify: { valueModify: {
min: 0, min: 0,
max: 100 max: 100
}, },
mirrorElement: [{ mirrorElement: [{
element: ".control-background-image-vignette-end-range", element: ".control-background-vignette-end-range",
path: "background.image.vignette.end", path: "background.visual.vignette.end",
type: "range" type: "range"
}], }],
func: function() { func: function() {
background.render.vignette.opacity(); background.render.visual.vignette.opacity();
background.render.vignette.start(); background.render.visual.vignette.start();
background.render.vignette.end(); background.render.visual.vignette.end();
} }
}, { }, {
element: ".control-background-image-vignette-end-default", element: ".control-background-vignette-end-default",
type: "button", type: "button",
func: function() { func: function() {
mod.default("background.image.vignette.end"); mod.default("background.visual.vignette.end");
background.render.vignette.opacity(); background.render.visual.vignette.opacity();
background.render.vignette.start(); background.render.visual.vignette.start();
background.render.vignette.end(); background.render.visual.vignette.end();
render.update.control.menu(); render.update.control.menu();
} }
}] }]
},
data: {
restore: [{
element: ".control-data-import",
type: "file",
func: function() {
data.mod.import();
}
}],
backup: [{
element: ".control-data-export",
type: "a",
func: function() {
data.mod.export();
}
}],
clear: [{
element: ".control-data-clear",
type: "a",
func: function() {
menu.close();
data.render.clear();
}
}]
} }
}, },
all: function() { all: function() {
@ -10767,12 +10795,12 @@ var control = (function() {
}], }],
background: [{ background: [{
remove: [ remove: [
"is-background-image-show" "is-background-visual-show"
], ],
condition: function() { condition: function() {
return state.get.current().background.image.show; return state.get.current().background.visual.show;
}, },
name: "is-background-image-show" name: "is-background-visual-show"
}, { }, {
remove: [ remove: [
"is-background-color-by-theme", "is-background-color-by-theme",
@ -11643,66 +11671,87 @@ var control = (function() {
} }
}, { }, {
condition: function() { condition: function() {
return (state.get.current().background.image.show && state.get.current().background.image.from == "file"); return (state.get.current().background.visual.show);
}, },
dependents: function() { dependents: function() {
return [ return [
".control-background-image-file-feedback", ".control-background-visual-type-video",
".control-background-image-file", ".control-background-visual-type-image",
".control-background-image-file-clear", "[for=control-background-visual-opacity-range]",
".control-background-image-file-helper" ".control-background-visual-opacity-range",
".control-background-visual-opacity-number",
".control-background-visual-opacity-default",
"[for=control-background-visual-blur-range]",
".control-background-visual-blur-range",
".control-background-visual-blur-number",
".control-background-visual-blur-default",
"[for=control-background-visual-grayscale-range]",
".control-background-visual-grayscale-range",
".control-background-visual-grayscale-number",
".control-background-visual-grayscale-default",
"[for=control-background-visual-accent-range]",
".control-background-visual-accent-range",
".control-background-visual-accent-number",
".control-background-visual-accent-default",
"[for=control-background-visual-scale-range]",
".control-background-visual-scale-range",
".control-background-visual-scale-number",
".control-background-visual-scale-default",
"[for=control-background-vignette-opacity-range]",
".control-background-vignette-opacity-range",
".control-background-vignette-opacity-number",
".control-background-vignette-opacity-default",
"[for=control-background-vignette-start-range]",
".control-background-vignette-start-range",
".control-background-vignette-start-number",
".control-background-vignette-start-default",
"[for=control-background-vignette-end-range]",
".control-background-vignette-end-range",
".control-background-vignette-end-number",
".control-background-vignette-end-default"
]; ];
} }
}, { }, {
condition: function() { condition: function() {
return (state.get.current().background.image.show && state.get.current().background.image.from == "url"); return (state.get.current().background.visual.show && state.get.current().background.visual.type == "video");
}, },
dependents: function() { dependents: function() {
return [ return [
".control-background-image-url", "[for=control-background-visual-video-url]",
".control-background-image-url-helper" ".control-background-visual-video-url",
".control-background-visual-video-url-helper"
]; ];
} }
}, { }, {
condition: function() { condition: function() {
return state.get.current().background.image.show; return (state.get.current().background.visual.show && state.get.current().background.visual.type == "image");
}, },
dependents: function() { dependents: function() {
return [ return [
".control-background-image-from-file", ".control-background-visual-image-type-file",
".control-background-image-from-url", ".control-background-visual-image-type-url"
"[for=control-background-image-opacity-range]", ];
".control-background-image-opacity-range", }
".control-background-image-opacity-number", }, {
".control-background-image-opacity-default", condition: function() {
"[for=control-background-image-blur-range]", return (state.get.current().background.visual.show && state.get.current().background.visual.type == "image" && state.get.current().background.visual.image.type == "file");
".control-background-image-blur-range", },
".control-background-image-blur-number", dependents: function() {
".control-background-image-blur-default", return [
"[for=control-background-image-grayscale-range]", ".control-background-visual-image-file",
".control-background-image-grayscale-range", ".control-background-visual-image-clear",
".control-background-image-grayscale-number", ".control-background-visual-image-file-helper",
".control-background-image-grayscale-default", ".control-background-visual-image-file-feedback"
"[for=control-background-image-accent-range]", ];
".control-background-image-accent-range", }
".control-background-image-accent-number", }, {
".control-background-image-accent-default", condition: function() {
"[for=control-background-image-scale-range]", return (state.get.current().background.visual.show && state.get.current().background.visual.type == "image" && state.get.current().background.visual.image.type == "url");
".control-background-image-scale-range", },
".control-background-image-scale-number", dependents: function() {
".control-background-image-scale-default", return [
"[for=control-background-image-vignette-opacity-range]", ".control-background-visual-image-url",
".control-background-image-vignette-opacity-range", ".control-background-visual-image-url-helper"
".control-background-image-vignette-opacity-number",
".control-background-image-vignette-opacity-default",
"[for=control-background-image-vignette-start-range]",
".control-background-image-vignette-start-range",
".control-background-image-vignette-start-number",
".control-background-image-vignette-start-default",
"[for=control-background-image-vignette-end-range]",
".control-background-image-vignette-end-range",
".control-background-image-vignette-end-number",
".control-background-image-vignette-end-default"
]; ];
} }
}] }]

18
src/js/data.js
View File

@ -59,10 +59,20 @@ var data = (function() {
mod.backup = function(data) { mod.backup = function(data) {
if (data) { if (data) {
var dataBackup = JSON.parse(JSON.stringify(data)); var dataBackup = JSON.parse(JSON.stringify(data));
if (dataBackup.state.background.image.file) { if (dataBackup.state.background.image) {
if (helper.checkIfValidString(dataBackup.state.background.image.file.data)) { if (dataBackup.state.background.image.file) {
dataBackup.state.background.image.file.name = ""; if (helper.checkIfValidString(dataBackup.state.background.image.file.data)) {
dataBackup.state.background.image.file.data = ""; dataBackup.state.background.image.file.name = "";
dataBackup.state.background.image.file.data = "";
};
};
};
if (dataBackup.state.background.visual) {
if (dataBackup.state.background.visual.image.file) {
if (helper.checkIfValidString(dataBackup.state.background.visual.image.file.data)) {
dataBackup.state.background.visual.image.file.name = "";
dataBackup.state.background.visual.image.file.data = "";
};
}; };
}; };
console.log("data version " + dataBackup.version + " backed up"); console.log("data version " + dataBackup.version + " backed up");

2
src/js/link.js
View File

@ -1805,7 +1805,7 @@ var link = (function() {
icon: true icon: true
}); });
var displayImageRadio = helper.node("input|class:link-form-input-display-visual-image,id:link-form-input-display-visual-image,type:radio,name:link-form-input-display-visual,tabindex:1,value:image"); var displayImageRadio = helper.node("input|class:link-form-input-display-visual-image,id:link-form-input-display-visual-image,type:radio,name:link-form-input-display-visual,tabindex:1,value:image");
var displayImageInput = helper.node("input|type:text,class:link-form-input-image,placeholder:https://...,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false"); var displayImageInput = helper.node("input|type:text,class:link-form-input-image,placeholder:https://www.example.com/image.jpg,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false");
var displayImageHelper = render.form.helper("link-form-input-display-visual-image-helper", "Display an image in place of a letter or icon."); var displayImageHelper = render.form.helper("link-form-input-display-visual-image-helper", "Display an image in place of a letter or icon.");
form.appendChild( form.appendChild(

20
src/js/state.js
View File

@ -366,14 +366,20 @@ var state = (function() {
b: 0 b: 0
} }
}, },
image: { visual: {
show: false, show: false,
from: "file", type: "video",
file: { image: {
name: "", type: "file",
data: "" file: {
name: "",
data: ""
},
url: "",
},
video: {
url: ""
}, },
url: "",
blur: 0, blur: 0,
scale: 1, scale: 1,
opacity: 1, opacity: 1,
@ -557,7 +563,7 @@ var state = (function() {
} }
}, },
background: { background: {
image: { visual: {
blur: 0, blur: 0,
scale: 1, scale: 1,
opacity: 1, opacity: 1,

33
src/js/update.js
View File

@ -1350,6 +1350,39 @@ var update = (function() {
data.state.link.item.background = data.state.link.item.image; data.state.link.item.background = data.state.link.item.image;
delete data.state.link.item.image; delete data.state.link.item.image;
return data; return data;
},
"5.78.0": function(data) {
var backgroundData = {
show: data.state.background.image.show,
type: "video",
image: {
type: data.state.background.image.from,
file: {
name: data.state.background.image.file.name,
data: data.state.background.image.file.data
},
url: data.state.background.image.url,
},
video: {
url: ""
},
blur: data.state.background.image.blur,
scale: data.state.background.image.scale,
opacity: data.state.background.image.opacity,
grayscale: data.state.background.image.grayscale,
accent: data.state.background.image.accent,
vignette: {
opacity: data.state.background.image.vignette.opacity,
start: data.state.background.image.vignette.start,
end: data.state.background.image.vignette.end
}
};
if (data.state.background.image.show) {
backgroundData.type = "image";
};
data.state.background.visual = backgroundData;
delete data.state.background.image;
return data;
} }
}; };

2
src/js/version.js
View File

@ -1,6 +1,6 @@
var version = (function() { var version = (function() {
var current = "5.77.0"; var current = "5.78.0";
var name = "Jaded Raven"; var name = "Jaded Raven";

2
src/manifest.json
View File

@ -2,7 +2,7 @@
"name": "nightTab", "name": "nightTab",
"short_name": "nightTab", "short_name": "nightTab",
"description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.", "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
"version": "5.77.0", "version": "5.78.0",
"manifest_version": 2, "manifest_version": 2,
"chrome_url_overrides": { "chrome_url_overrides": {
"newtab": "index.html" "newtab": "index.html"