mirror of
https://github.com/zombieFox/nightTab.git
synced 2025-02-26 07:01:06 +01:00
[feature] add background video controls
This commit is contained in:
zombieFox
parent
a63116ef0d
commit
112bf07edc
2
package-lock.json
generated
2
package-lock.json
generated
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "nightTab",
|
||||
"version": "5.77.0",
|
||||
"version": "5.78.0",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
|
||||
@ -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": {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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,6 +2,6 @@
|
||||
|
||||
@@include("./background/color.html")
|
||||
|
||||
@@include("./background/image.html")
|
||||
@@include("./background/visual.html")
|
||||
|
||||
</div>
|
||||
|
||||
@ -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
159
src/html/menu/content/background/visual.html
Normal 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>
|
||||
@ -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>
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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();
|
||||
};
|
||||
|
||||
|
||||
@ -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"
|
||||
];
|
||||
}
|
||||
}]
|
||||
|
||||
@ -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");
|
||||
|
||||
@ -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(
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
var version = (function() {
|
||||
|
||||
var current = "5.77.0";
|
||||
var current = "5.78.0";
|
||||
|
||||
var name = "Jaded Raven";
|
||||
|
||||
|
||||
@ -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"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user