diff --git a/package-lock.json b/package-lock.json index 4d6568a9..076d5b1f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "nightTab", - "version": "5.77.0", + "version": "5.78.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 45258856..644634da 100644 --- a/package.json +++ b/package.json @@ -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": { diff --git a/src.zip b/src.zip deleted file mode 100644 index c402e203..00000000 Binary files a/src.zip and /dev/null differ diff --git a/src/css/background.css b/src/css/background.css index c557d9c8..e34d6ae5 100755 --- a/src/css/background.css +++ b/src/css/background.css @@ -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; } diff --git a/src/css/form.css b/src/css/form.css index a7a265d7..87a793e3 100755 --- a/src/css/form.css +++ b/src/css/form.css @@ -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 { diff --git a/src/css/shade.css b/src/css/shade.css index 4f67046d..7ab977b4 100755 --- a/src/css/shade.css +++ b/src/css/shade.css @@ -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); } diff --git a/src/css/variables.css b/src/css/variables.css index e9464427..f7c3b108 100644 --- a/src/css/variables.css +++ b/src/css/variables.css @@ -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); diff --git a/src/html/background.html b/src/html/background.html index 90007b42..b8bed395 100644 --- a/src/html/background.html +++ b/src/html/background.html @@ -1,5 +1,6 @@
-
-
-
+
+
+
+
diff --git a/src/html/menu/content/background.html b/src/html/menu/content/background.html index 60311eea..9456db89 100644 --- a/src/html/menu/content/background.html +++ b/src/html/menu/content/background.html @@ -2,6 +2,6 @@ @@include("./background/color.html") - @@include("./background/image.html") + @@include("./background/visual.html") diff --git a/src/html/menu/content/background/image.html b/src/html/menu/content/background/image.html deleted file mode 100644 index 85be2e05..00000000 --- a/src/html/menu/content/background/image.html +++ /dev/null @@ -1,133 +0,0 @@ -
-
-

Image

-
-
-
- - -
-
-
-
- - -
-
-
-
-
- - -
- -
-
-

Max image size 5MB, (due to browser local storage limits).

-
-
-

Take care with large files, they may impact performance.

-
-
- -
-
-
-
- - -
-
-
-
- -
-
-

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.

-
-
-
-

Unsplash can be used for random images, eg:

-

https://source.unsplash.com/random/1920x1080/?night,day,sky

-

Change parameters after .../random/ for more options. Loading times may vary.

-
-
-
-
-
- -
- - - -
-
-
-
- -
- - - -
-
-
-
- -
- - - -
-
-
-
- -
- - - -
-
-
-
- -
- - - -
-
-
-
- -
- - - -
-
-
-
-
- -
- - - -
-
-
- -
- - - -
-
-
-
-
-
-
-
diff --git a/src/html/menu/content/background/visual.html b/src/html/menu/content/background/visual.html new file mode 100644 index 00000000..fd649d30 --- /dev/null +++ b/src/html/menu/content/background/visual.html @@ -0,0 +1,159 @@ +
+
+

Visual

+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+

Supports MP4 and WebM format.

+
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+
+ + +
+ +
+
+

Max image size 5MB, (due to browser local storage limits).

+
+
+

Take care with large files, they may impact performance.

+
+
+ +
+
+
+
+ + +
+
+
+
+ +
+
+

Add more than one URL separated by spaces or on new lines for a random background image on load.

+
+
+

Unsplash can be used for random images, eg:

+

https://source.unsplash.com/random/1920x1080/?night,day,sky

+

Change parameters after .../random/ for more options. Loading times may vary.

+
+
+
+
+
+
+
+
+
+
+
+ +
+ + + +
+
+
+
+ +
+ + + +
+
+
+
+ +
+ + + +
+
+
+
+ +
+ + + +
+
+
+
+ +
+ + + +
+
+
+
+ +
+ + + +
+
+
+
+
+ +
+ + + +
+
+
+ +
+ + + +
+
+
+
+
+
+
+
diff --git a/src/html/menu/content/theme/style.html b/src/html/menu/content/theme/style.html index 36e125f2..487afb12 100644 --- a/src/html/menu/content/theme/style.html +++ b/src/html/menu/content/theme/style.html @@ -22,7 +22,7 @@
-

Flip the colour shades defined by the primary Colour.

+

Flip the colour shades defined by the Primary Colour.

Accent Colour and Background Image may need to be changed to best fit the Theme Style.

diff --git a/src/html/menu/nav.html b/src/html/menu/nav.html index d5863ec8..37041e44 100644 --- a/src/html/menu/nav.html +++ b/src/html/menu/nav.html @@ -75,7 +75,7 @@
Colour - Image + Visual
diff --git a/src/js/background.js b/src/js/background.js index e6c20ca4..3f95486c 100644 --- a/src/js/background.js +++ b/src/js/background.js @@ -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(); }; diff --git a/src/js/control.js b/src/js/control.js index 6cfa9c54..d4a69155 100644 --- a/src/js/control.js +++ b/src/js/control.js @@ -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" ]; } }] diff --git a/src/js/data.js b/src/js/data.js index 7b13fa2a..3403144c 100644 --- a/src/js/data.js +++ b/src/js/data.js @@ -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"); diff --git a/src/js/link.js b/src/js/link.js index 02c151a6..d0273788 100644 --- a/src/js/link.js +++ b/src/js/link.js @@ -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( diff --git a/src/js/state.js b/src/js/state.js index d6318f40..eb80f2ab 100644 --- a/src/js/state.js +++ b/src/js/state.js @@ -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, diff --git a/src/js/update.js b/src/js/update.js index 4f946b47..c3928052 100644 --- a/src/js/update.js +++ b/src/js/update.js @@ -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; } }; diff --git a/src/js/version.js b/src/js/version.js index 25db62b7..8a7f3b63 100644 --- a/src/js/version.js +++ b/src/js/version.js @@ -1,6 +1,6 @@ var version = (function() { - var current = "5.77.0"; + var current = "5.78.0"; var name = "Jaded Raven"; diff --git a/src/manifest.json b/src/manifest.json index cb6c2837..fe6c05e2 100644 --- a/src/manifest.json +++ b/src/manifest.json @@ -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"