extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2025-02-26 07:01:06 +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",
"version": "5.77.0",
"version": "5.78.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {

2
package.json
View File

@ -1,6 +1,6 @@
{
"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.",
"main": "index.js",
"scripts": {

BIN
src.zip
View File

Binary file not shown.

53
src/css/background.css
View File

@ -9,12 +9,12 @@
display: none;
}
.is-background-image-show .background {
.is-background-visual-show .background {
display: block;
}
.background-image {
background-image: var(--background-image);
.background-visual-image {
background-image: var(--background-visual-image);
background-attachment: fixed;
background-size: cover;
background-position: center;
@ -25,13 +25,38 @@
height: 100%;
pointer-events: none;
display: block;
opacity: var(--background-opacity);
transform: scale(var(--background-scale));
filter: blur(var(--background-blur)) grayscale(var(--background-grayscale));
opacity: var(--background-visual-opacity);
transform: scale(var(--background-visual-scale));
filter: blur(var(--background-visual-blur)) grayscale(var(--background-visual-grayscale));
z-index: 1;
}
.background-accent {
background-color: rgba(var(--theme-accent), var(--background-accent));
.background-visual-video {
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;
top: -1em;
left: -1em;
@ -39,18 +64,18 @@
height: calc(100% + 2em);
pointer-events: none;
display: block;
z-index: 2;
}
.background-vignette {
.background-visual-vignette {
position: absolute;
top: -1em;
left: -1em;
width: calc(100% + 2em);
height: calc(100% + 2em);
pointer-events: none;
background-image: radial-gradient(
circle,
transparent var(--background-vignette-end),
rgba(0, 0, 0, var(--background-vignette-opacity)) var(--background-vignette-start)
);
background-image: radial-gradient(circle,
transparent var(--background-visual-vignette-end),
rgba(0, 0, 0, var(--background-visual-vignette-opacity)) var(--background-visual-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-bottom-right-radius: var(--theme-radius);
width: 100%;
transition: background-color var(--layout-transition-extra-fast), border-color var(--layout-transition-extra-fast);
}
.form-feedback p {

2
src/css/shade.css
View File

@ -14,6 +14,6 @@
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);
}

16
src/css/variables.css
View File

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

7
src/html/background.html
View File

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

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

@ -2,6 +2,6 @@
@@include("./background/color.html")
@@include("./background/image.html")
@@include("./background/visual.html")
</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>
</div>
<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>
</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>
<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-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 class="menu-nav-item">

272
src/js/background.js
View File

@ -2,46 +2,6 @@ var background = (function() {
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 = {
hsl: function() {
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 = {};
bind.feedback = {
animation: {
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);
var animationEndAction = function() {
if (action) {
@ -85,7 +84,7 @@ var background = (function() {
controlBackgroundImageFileFeedback.addEventListener("animationend", animationEndAction, false);
},
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-pop");
helper.removeClass(controlBackgroundImageFileFeedback, "is-jello");
@ -99,99 +98,132 @@ var background = (function() {
render.color = {
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);
},
clearHTML: function() {
helper.e("html").style.backgroundColor = "";
}
};
render.image = function() {
var html = helper.e("html");
if (state.get.current().background.image.show) {
if (state.get.current().background.image.from == "file") {
html.style.setProperty("--background-image", "url(" + state.get.current().background.image.file.data + ")");
} else if (state.get.current().background.image.from == "url") {
if (/\s+/g.test(state.get.current().background.image.url)) {
var allUrls = state.get.current().background.image.url.split(/\s+/);
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 = {
render.visual = {
blur: function() {
var html = helper.e("html");
html.style.setProperty("--background-visual-blur", state.get.current().background.visual.blur + "px");
},
grayscale: function() {
var html = helper.e("html");
html.style.setProperty("--background-visual-grayscale", state.get.current().background.visual.grayscale);
},
opacity: function() {
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");
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");
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() {
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 = {
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();
} else {
render.feedback.empty();
};
},
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");
controlBackgroundImageFileFeedback.appendChild(para1);
},
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 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(para2);
},
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 para2 = helper.node("p:" + name);
controlBackgroundImageFileFeedback.appendChild(para1);
@ -207,7 +239,7 @@ var background = (function() {
if (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) {
controlBackgroundImageFileFeedback.removeChild(controlBackgroundImageFileFeedback.lastChild);
};
@ -217,7 +249,7 @@ var background = (function() {
},
fail: {
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 para2 = helper.node("p:" + name);
controlBackgroundImageFileFeedback.appendChild(para1);
@ -225,7 +257,7 @@ var background = (function() {
bind.feedback.animation.set("is-shake");
},
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 para2 = helper.node("p:" + name);
controlBackgroundImageFileFeedback.appendChild(para1);
@ -242,22 +274,22 @@ var background = (function() {
reader.onload = function(event) {
if (fileList.item(0).size <= 5000000) {
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();
render.feedback.clear();
render.feedback.success(fileList[0].name, render.image);
render.input.clear();
render.feedback.success(fileList[0].name, render.visual.image.set);
render.visual.image.clear();
} else {
// not an image file
render.feedback.clear();
render.feedback.fail.filetype(fileList[0].name);
render.input.clear();
render.visual.image.clear();
};
} else {
// file size too big
render.feedback.clear();
render.feedback.fail.size(fileList[0].name);
render.input.clear();
render.visual.image.clear();
};
};
// invoke the reader
@ -265,17 +297,17 @@ var background = (function() {
};
var init = function() {
render.color.clearHTML();
render.color.custom();
render.image();
render.blur();
render.grayscale();
render.opacity();
render.scale();
render.accent();
render.vignette.opacity();
render.vignette.start();
render.vignette.end();
render.visual.image.set();
render.visual.video.set();
render.visual.blur();
render.visual.grayscale();
render.visual.opacity();
render.visual.scale();
render.visual.accent();
render.visual.vignette.opacity();
render.visual.vignette.start();
render.visual.vignette.end();
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: {
color: [{
element: ".control-background-color-by-theme",
@ -9667,59 +9691,87 @@ var control = (function() {
background.render.color.custom();
}
}],
image: [{
element: ".control-background-image-show",
path: "background.image.show",
visual: [{
element: ".control-background-visual-show",
path: "background.visual.show",
type: "checkbox",
func: function() {
render.class();
render.dependents();
background.render.image();
background.render.visual.video.set();
background.render.visual.image.set();
}
}, {
element: ".control-background-image-from-file",
path: "background.image.from",
element: ".control-background-visual-type-video",
path: "background.visual.type",
type: "radio",
func: function() {
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",
func: function() {
background.mod.import();
background.render.visual.image.set();
}
}, {
element: ".control-background-image-file-clear",
element: ".control-background-visual-image-clear",
type: "button",
func: function() {
background.mod.clear.file();
background.render.input.clear();
background.render.image();
background.mod.visual.image.clear();
background.render.visual.image.clear();
background.render.feedback.clear({
animate: true
});
background.render.feedback.empty();
}
}, {
element: ".control-background-image-from-url",
path: "background.image.from",
type: "radio",
func: function() {
render.dependents();
background.render.image();
}
}, {
element: ".control-background-image-url",
path: "background.image.url",
element: ".control-background-visual-image-url",
path: "background.visual.image.url",
type: "textarea",
func: function() {
background.render.image();
background.render.visual.image.clear();
background.render.visual.image.set();
}
}, {
element: ".control-background-image-opacity-range",
path: "background.image.opacity",
element: ".control-background-visual-video-url",
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",
valueConvert: ["float"],
valueModify: {
@ -9727,17 +9779,17 @@ var control = (function() {
max: 100
},
mirrorElement: [{
element: ".control-background-image-opacity-number",
path: "background.image.opacity",
element: ".control-background-visual-opacity-number",
path: "background.visual.opacity",
type: "number",
valueConvert: ["float"]
}],
func: function() {
background.render.opacity();
background.render.visual.opacity();
}
}, {
element: ".control-background-image-opacity-number",
path: "background.image.opacity",
element: ".control-background-visual-opacity-number",
path: "background.visual.opacity",
type: "number",
valueConvert: ["float"],
valueModify: {
@ -9745,25 +9797,25 @@ var control = (function() {
max: 100
},
mirrorElement: [{
element: ".control-background-image-opacity-range",
path: "background.image.opacity",
element: ".control-background-visual-opacity-range",
path: "background.visual.opacity",
type: "range",
valueConvert: ["float"]
}],
func: function() {
background.render.opacity();
background.render.visual.opacity();
}
}, {
element: ".control-background-image-opacity-default",
element: ".control-background-visual-opacity-default",
type: "button",
func: function() {
mod.default("background.image.opacity");
background.render.opacity();
mod.default("background.visual.opacity");
background.render.visual.opacity();
render.update.control.menu();
}
}, {
element: ".control-background-image-grayscale-range",
path: "background.image.grayscale",
element: ".control-background-visual-grayscale-range",
path: "background.visual.grayscale",
type: "range",
valueConvert: ["float"],
valueModify: {
@ -9771,17 +9823,17 @@ var control = (function() {
max: 100
},
mirrorElement: [{
element: ".control-background-image-grayscale-number",
path: "background.image.grayscale",
element: ".control-background-visual-grayscale-number",
path: "background.visual.grayscale",
type: "number",
valueConvert: ["float"]
}],
func: function() {
background.render.grayscale();
background.render.visual.grayscale();
}
}, {
element: ".control-background-image-grayscale-number",
path: "background.image.grayscale",
element: ".control-background-visual-grayscale-number",
path: "background.visual.grayscale",
type: "number",
valueConvert: ["float"],
valueModify: {
@ -9789,65 +9841,65 @@ var control = (function() {
max: 100
},
mirrorElement: [{
element: ".control-background-image-grayscale-range",
path: "background.image.grayscale",
element: ".control-background-visual-grayscale-range",
path: "background.visual.grayscale",
type: "range",
valueConvert: ["float"]
}],
func: function() {
background.render.grayscale();
background.render.visual.grayscale();
}
}, {
element: ".control-background-image-grayscale-default",
element: ".control-background-visual-grayscale-default",
type: "button",
func: function() {
mod.default("background.image.grayscale");
background.render.grayscale();
mod.default("background.visual.grayscale");
background.render.visual.grayscale();
render.update.control.menu();
}
}, {
element: ".control-background-image-blur-range",
path: "background.image.blur",
element: ".control-background-visual-blur-range",
path: "background.visual.blur",
type: "range",
valueModify: {
min: 0,
max: 100
},
mirrorElement: [{
element: ".control-background-image-blur-number",
path: "background.image.blur",
element: ".control-background-visual-blur-number",
path: "background.visual.blur",
type: "number"
}],
func: function() {
background.render.blur();
background.render.visual.blur();
}
}, {
element: ".control-background-image-blur-number",
path: "background.image.blur",
element: ".control-background-visual-blur-number",
path: "background.visual.blur",
type: "number",
valueModify: {
min: 0,
max: 100
},
mirrorElement: [{
element: ".control-background-image-blur-range",
path: "background.image.blur",
element: ".control-background-visual-blur-range",
path: "background.visual.blur",
type: "range"
}],
func: function() {
background.render.blur();
background.render.visual.blur();
}
}, {
element: ".control-background-image-blur-default",
element: ".control-background-visual-blur-default",
type: "button",
func: function() {
mod.default("background.image.blur");
background.render.blur();
mod.default("background.visual.blur");
background.render.visual.blur();
render.update.control.menu();
}
}, {
element: ".control-background-image-accent-range",
path: "background.image.accent",
element: ".control-background-visual-accent-range",
path: "background.visual.accent",
type: "range",
valueConvert: ["float"],
valueModify: {
@ -9855,17 +9907,17 @@ var control = (function() {
max: 100
},
mirrorElement: [{
element: ".control-background-image-accent-number",
path: "background.image.accent",
element: ".control-background-visual-accent-number",
path: "background.visual.accent",
type: "number",
valueConvert: ["float"]
}],
func: function() {
background.render.accent();
background.render.visual.accent();
}
}, {
element: ".control-background-image-accent-number",
path: "background.image.accent",
element: ".control-background-visual-accent-number",
path: "background.visual.accent",
type: "number",
valueConvert: ["float"],
valueModify: {
@ -9873,25 +9925,25 @@ var control = (function() {
max: 100
},
mirrorElement: [{
element: ".control-background-image-accent-range",
path: "background.image.accent",
element: ".control-background-visual-accent-range",
path: "background.visual.accent",
type: "range",
valueConvert: ["float"]
}],
func: function() {
background.render.accent();
background.render.visual.accent();
}
}, {
element: ".control-background-image-accent-default",
element: ".control-background-visual-accent-default",
type: "button",
func: function() {
mod.default("background.image.accent");
background.render.accent();
mod.default("background.visual.accent");
background.render.visual.accent();
render.update.control.menu();
}
}, {
element: ".control-background-image-scale-range",
path: "background.image.scale",
element: ".control-background-visual-scale-range",
path: "background.visual.scale",
type: "range",
valueConvert: ["float"],
valueModify: {
@ -9899,17 +9951,17 @@ var control = (function() {
max: 1000
},
mirrorElement: [{
element: ".control-background-image-scale-number",
path: "background.image.scale",
element: ".control-background-visual-scale-number",
path: "background.visual.scale",
type: "number",
valueConvert: ["float"]
}],
func: function() {
background.render.scale();
background.render.visual.scale();
}
}, {
element: ".control-background-image-scale-number",
path: "background.image.scale",
element: ".control-background-visual-scale-number",
path: "background.visual.scale",
type: "number",
valueConvert: ["float"],
valueModify: {
@ -9917,207 +9969,183 @@ var control = (function() {
max: 1000
},
mirrorElement: [{
element: ".control-background-image-scale-range",
path: "background.image.scale",
element: ".control-background-visual-scale-range",
path: "background.visual.scale",
type: "range",
valueConvert: ["float"]
}],
func: function() {
background.render.scale();
background.render.visual.scale();
}
}, {
element: ".control-background-image-scale-default",
element: ".control-background-visual-scale-default",
type: "button",
func: function() {
mod.default("background.image.scale");
background.render.scale();
mod.default("background.visual.scale");
background.render.visual.scale();
render.update.control.menu();
}
}, {
element: ".control-background-image-vignette-opacity-range",
path: "background.image.vignette.opacity",
element: ".control-background-vignette-opacity-range",
path: "background.visual.vignette.opacity",
type: "range",
valueModify: {
min: 0,
max: 100
},
mirrorElement: [{
element: ".control-background-image-vignette-opacity-number",
path: "background.image.vignette.opacity",
element: ".control-background-vignette-opacity-number",
path: "background.visual.vignette.opacity",
type: "number"
}],
func: function() {
background.render.vignette.opacity();
background.render.vignette.start();
background.render.vignette.end();
background.render.visual.vignette.opacity();
background.render.visual.vignette.start();
background.render.visual.vignette.end();
}
}, {
element: ".control-background-image-vignette-opacity-number",
path: "background.image.vignette.opacity",
element: ".control-background-vignette-opacity-number",
path: "background.visual.vignette.opacity",
type: "number",
valueModify: {
min: 0,
max: 100
},
mirrorElement: [{
element: ".control-background-image-vignette-opacity-range",
path: "background.image.vignette.opacity",
element: ".control-background-vignette-opacity-range",
path: "background.visual.vignette.opacity",
type: "range"
}],
func: function() {
background.render.vignette.opacity();
background.render.vignette.start();
background.render.vignette.end();
background.render.visual.vignette.opacity();
background.render.visual.vignette.start();
background.render.visual.vignette.end();
}
}, {
element: ".control-background-image-vignette-opacity-default",
element: ".control-background-vignette-opacity-default",
type: "button",
func: function() {
mod.default("background.image.vignette.opacity");
background.render.vignette.opacity();
background.render.vignette.start();
background.render.vignette.end();
mod.default("background.visual.vignette.opacity");
background.render.visual.vignette.opacity();
background.render.visual.vignette.start();
background.render.visual.vignette.end();
render.update.control.menu();
}
}, {
element: ".control-background-image-vignette-start-range",
path: "background.image.vignette.start",
element: ".control-background-vignette-start-range",
path: "background.visual.vignette.start",
type: "range",
valueModify: {
min: 0,
max: 100
},
mirrorElement: [{
element: ".control-background-image-vignette-start-number",
path: "background.image.vignette.start",
element: ".control-background-vignette-start-number",
path: "background.visual.vignette.start",
type: "number"
}],
limitElement: [{
element: ".control-background-image-vignette-end-range",
path: "background.image.vignette.end",
element: ".control-background-vignette-end-range",
path: "background.visual.vignette.end",
type: "range",
limit: "max"
}, {
element: ".control-background-image-vignette-end-number",
path: "background.image.vignette.end",
element: ".control-background-vignette-end-number",
path: "background.visual.vignette.end",
type: "number",
limit: "max"
}],
func: function() {
background.render.vignette.opacity();
background.render.vignette.start();
background.render.vignette.end();
background.render.visual.vignette.opacity();
background.render.visual.vignette.start();
background.render.visual.vignette.end();
}
}, {
element: ".control-background-image-vignette-start-number",
path: "background.image.vignette.start",
element: ".control-background-vignette-start-number",
path: "background.visual.vignette.start",
type: "number",
valueModify: {
min: 0,
max: 100
},
mirrorElement: [{
element: ".control-background-image-vignette-start-range",
path: "background.image.vignette.start",
element: ".control-background-vignette-start-range",
path: "background.visual.vignette.start",
type: "range"
}],
func: function() {
background.render.vignette.opacity();
background.render.vignette.start();
background.render.vignette.end();
background.render.visual.vignette.opacity();
background.render.visual.vignette.start();
background.render.visual.vignette.end();
}
}, {
element: ".control-background-image-vignette-start-default",
element: ".control-background-vignette-start-default",
type: "button",
func: function() {
mod.default("background.image.vignette.start");
background.render.vignette.opacity();
background.render.vignette.start();
background.render.vignette.end();
mod.default("background.visual.vignette.start");
background.render.visual.vignette.opacity();
background.render.visual.vignette.start();
background.render.visual.vignette.end();
render.update.control.menu();
}
}, {
element: ".control-background-image-vignette-end-range",
path: "background.image.vignette.end",
element: ".control-background-vignette-end-range",
path: "background.visual.vignette.end",
type: "range",
valueModify: {
min: 0,
max: 100
},
mirrorElement: [{
element: ".control-background-image-vignette-end-number",
path: "background.image.vignette.end",
element: ".control-background-vignette-end-number",
path: "background.visual.vignette.end",
type: "number"
}],
limitElement: [{
element: ".control-background-image-vignette-start-range",
path: "background.image.vignette.start",
element: ".control-background-vignette-start-range",
path: "background.visual.vignette.start",
type: "range",
limit: "min"
}, {
element: ".control-background-image-vignette-start-number",
path: "background.image.vignette.start",
element: ".control-background-vignette-start-number",
path: "background.visual.vignette.start",
type: "number",
limit: "min"
}],
func: function() {
background.render.vignette.opacity();
background.render.vignette.start();
background.render.vignette.end();
background.render.visual.vignette.opacity();
background.render.visual.vignette.start();
background.render.visual.vignette.end();
}
}, {
element: ".control-background-image-vignette-end-number",
path: "background.image.vignette.end",
element: ".control-background-vignette-end-number",
path: "background.visual.vignette.end",
type: "number",
valueModify: {
min: 0,
max: 100
},
mirrorElement: [{
element: ".control-background-image-vignette-end-range",
path: "background.image.vignette.end",
element: ".control-background-vignette-end-range",
path: "background.visual.vignette.end",
type: "range"
}],
func: function() {
background.render.vignette.opacity();
background.render.vignette.start();
background.render.vignette.end();
background.render.visual.vignette.opacity();
background.render.visual.vignette.start();
background.render.visual.vignette.end();
}
}, {
element: ".control-background-image-vignette-end-default",
element: ".control-background-vignette-end-default",
type: "button",
func: function() {
mod.default("background.image.vignette.end");
background.render.vignette.opacity();
background.render.vignette.start();
background.render.vignette.end();
mod.default("background.visual.vignette.end");
background.render.visual.vignette.opacity();
background.render.visual.vignette.start();
background.render.visual.vignette.end();
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() {
@ -10767,12 +10795,12 @@ var control = (function() {
}],
background: [{
remove: [
"is-background-image-show"
"is-background-visual-show"
],
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: [
"is-background-color-by-theme",
@ -11643,66 +11671,87 @@ var control = (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() {
return [
".control-background-image-file-feedback",
".control-background-image-file",
".control-background-image-file-clear",
".control-background-image-file-helper"
".control-background-visual-type-video",
".control-background-visual-type-image",
"[for=control-background-visual-opacity-range]",
".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() {
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() {
return [
".control-background-image-url",
".control-background-image-url-helper"
"[for=control-background-visual-video-url]",
".control-background-visual-video-url",
".control-background-visual-video-url-helper"
];
}
}, {
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() {
return [
".control-background-image-from-file",
".control-background-image-from-url",
"[for=control-background-image-opacity-range]",
".control-background-image-opacity-range",
".control-background-image-opacity-number",
".control-background-image-opacity-default",
"[for=control-background-image-blur-range]",
".control-background-image-blur-range",
".control-background-image-blur-number",
".control-background-image-blur-default",
"[for=control-background-image-grayscale-range]",
".control-background-image-grayscale-range",
".control-background-image-grayscale-number",
".control-background-image-grayscale-default",
"[for=control-background-image-accent-range]",
".control-background-image-accent-range",
".control-background-image-accent-number",
".control-background-image-accent-default",
"[for=control-background-image-scale-range]",
".control-background-image-scale-range",
".control-background-image-scale-number",
".control-background-image-scale-default",
"[for=control-background-image-vignette-opacity-range]",
".control-background-image-vignette-opacity-range",
".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"
".control-background-visual-image-type-file",
".control-background-visual-image-type-url"
];
}
}, {
condition: function() {
return (state.get.current().background.visual.show && state.get.current().background.visual.type == "image" && state.get.current().background.visual.image.type == "file");
},
dependents: function() {
return [
".control-background-visual-image-file",
".control-background-visual-image-clear",
".control-background-visual-image-file-helper",
".control-background-visual-image-file-feedback"
];
}
}, {
condition: function() {
return (state.get.current().background.visual.show && state.get.current().background.visual.type == "image" && state.get.current().background.visual.image.type == "url");
},
dependents: function() {
return [
".control-background-visual-image-url",
".control-background-visual-image-url-helper"
];
}
}]

18
src/js/data.js
View File

@ -59,10 +59,20 @@ var data = (function() {
mod.backup = function(data) {
if (data) {
var dataBackup = JSON.parse(JSON.stringify(data));
if (dataBackup.state.background.image.file) {
if (helper.checkIfValidString(dataBackup.state.background.image.file.data)) {
dataBackup.state.background.image.file.name = "";
dataBackup.state.background.image.file.data = "";
if (dataBackup.state.background.image) {
if (dataBackup.state.background.image.file) {
if (helper.checkIfValidString(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");

2
src/js/link.js
View File

@ -1805,7 +1805,7 @@ var link = (function() {
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 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.");
form.appendChild(

20
src/js/state.js
View File

@ -366,14 +366,20 @@ var state = (function() {
b: 0
}
},
image: {
visual: {
show: false,
from: "file",
file: {
name: "",
data: ""
type: "video",
image: {
type: "file",
file: {
name: "",
data: ""
},
url: "",
},
video: {
url: ""
},
url: "",
blur: 0,
scale: 1,
opacity: 1,
@ -557,7 +563,7 @@ var state = (function() {
}
},
background: {
image: {
visual: {
blur: 0,
scale: 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;
delete data.state.link.item.image;
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 current = "5.77.0";
var current = "5.78.0";
var name = "Jaded Raven";

2
src/manifest.json
View File

@ -2,7 +2,7 @@
"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.",
"version": "5.77.0",
"version": "5.78.0",
"manifest_version": 2,
"chrome_url_overrides": {
"newtab": "index.html"