[feature] add link item background video

2025-06-29 22:09:11 +02:00 · 2020-07-29 23:21:01 +01:00
parent 016a58df48
commit c83f01f72e
18 changed files with 1029 additions and 662 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -1,6 +1,6 @@
 {
  "name": "nightTab",
-  "version": "5.73.0",
+  "version": "5.74.0",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "nightTab",
-  "version": "5.73.0",
+  "version": "5.74.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": {
--- a/src.zip
+++ b/src.zip
--- a/src/css/link.css
+++ b/src/css/link.css
@ -225,12 +225,12 @@
  transition: background-color var(--layout-transition-extra-fast), height var(--layout-transition-extra-fast), box-shadow var(--layout-transition-extra-fast), border-radius var(--layout-transition-extra-fast);
 }

-.link-image {
-  background-image: var(--link-item-image-url);
+.link-background-image {
+  background-image: var(--link-item-background-image-url);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
-  opacity: var(--link-item-image-opacity);
+  opacity: var(--link-item-background-opacity);
  position: absolute;
  top: 0;
  left: 0;
@ -240,6 +240,28 @@
  pointer-events: none;
 }

+.link-background-video {
+  opacity: var(--link-item-background-opacity);
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.link-background-video video {
+  opacity: var(--link-item-background-opacity);
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  pointer-events: none;
+}
+
 .is-link-style-block .link-panel-front {
  padding: calc(1em * var(--link-item-padding));
 }
@ -1143,7 +1165,7 @@

 /* link form */
 .link-form {
-  margin-bottom: 2em;
+  margin-bottom: calc(var(--form-wrap-space) * 4);
 }

 .link-form-area {
@ -1153,7 +1175,7 @@
@media (min-width: 900px) {
  .link-form-area {
    display: grid;
-    grid-template-columns: 2fr 1fr;
+    grid-template-columns: 5fr 2fr;
    grid-gap: calc(var(--form-wrap-space) * 2);
    align-items: stretch;
  }
--- a/src/css/modal.css
+++ b/src/css/modal.css
@ -3,7 +3,7 @@
  top: 50%;
  left: 50%;
  font-size: 1em;
-  width: 50em;
+  width: var(--modal-size);
  max-width: calc(100% - 2em);
  min-width: 10em;
  transform: translate(-50%, -50%);
@ -13,15 +13,6 @@
  z-index: var(--z-index-modal);
 }

-.modal-large {
-  width: 70em;
-  max-width: calc(100% - 2em);
-}
-
-.modal-small {
-  width: 30em;
-}
-
 .modal-wrapper {
  background-color: rgb(var(--theme-color-01));
  border-radius: var(--theme-radius);
@ -50,7 +41,7 @@
 }

 .modal-body-spacer {
-  margin: 2em;
+  margin: calc(var(--form-wrap-space) * 2) calc(var(--form-wrap-space) * 2.5);
 }

 .modal-heading:focus {
--- a/src/css/variables.css
+++ b/src/css/variables.css
@ -116,7 +116,7 @@
  --link-item-visual-element-color-focus-hover:         var(--theme-style-text);
  --link-item-name-color:                               var(--theme-color-14);
  --link-item-name-color-focus-hover:                   var(--theme-style-text);
-  --link-item-image-opacity:                            1;
+  --link-item-background-opacity:                       1;
  --link-item-size:                                     1em;
  --link-item-display-space:                            0.25em;
  --link-item-border:                                   0;
@ -274,6 +274,11 @@
  --edge-shadow:                                        inset 0 0 0 var(--layout-line-width) rgb(var(--theme-accent)),
                                                        inset 0 0 0 calc(var(--layout-line-width) * 4) rgba(var(--theme-accent), 0.1),
                                                        inset 0 0 0 calc(var(--layout-line-width) * 8) rgba(var(--theme-accent), 0.1);
+  /* modal */
+  --modal-small:                                        30em;
+  --modal-medium:                                       50em;
+  --modal-large:                                        70em;
+  --modal-size:                                         var(--modal-medium);
  /* z index */
  --z-index-background:                                 1000;
  --z-index-link:                                       2000;
--- a/src/html/menu/content/bookmarks.html
+++ b/src/html/menu/content/bookmarks.html
@ -18,7 +18,7 @@

  @@include("./bookmarks/accent.html")

-  @@include("./bookmarks/image.html")
+  @@include("./bookmarks/background.html")

  @@include("./bookmarks/border.html")

--- a/src/html/menu/content/bookmarks/background.html
+++ b/src/html/menu/content/bookmarks/background.html
@ -0,0 +1,29 @@
+<div id="menu-content-bookmarks-background" class="menu-content-item">
+  <div class="menu-item-header">
+    <h1 class="menu-item-header-text">Background</h1>
+  </div>
+  <div class="menu-item-form">
+    <div class="form-wrap">
+      <div class="form-inline">
+        <button class="control-link-item-background-show button button-line" tabindex="-1">Show all</button>
+        <button class="control-link-item-background-hide button button-line" tabindex="-1">Hide all</button>
+      </div>
+    </div>
+    <div class="form-wrap">
+      <p class="control-link-item-background-helper form-helper-item">Show or hide all Bookmark Background images or videos.</p>
+      <p class="control-link-item-background-helper form-helper-item">This can also be changed by editing individual Bookmarks.</p>
+    </div>
+    <hr>
+    <div class="form-wrap">
+      <label for="control-link-item-background-opacity-range">Opacity</label>
+      <div class="form-group form-group-block">
+        <input id="control-link-item-background-opacity-range" class="control-link-item-background-opacity-range mr-3" type="range" value="0" tabindex="-1">
+        <input class="control-link-item-background-opacity-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
+        <button class="control-link-item-background-opacity-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
+      </div>
+    </div>
+    <div class="form-wrap">
+      <button class="control-link-item-background-opacity-apply button button-line" tabindex="-1">Apply to all</button>
+    </div>
+  </div>
+</div>
--- a/src/html/menu/content/bookmarks/image.html
+++ b/src/html/menu/content/bookmarks/image.html
@ -1,18 +0,0 @@
-<div id="menu-content-bookmarks-image" class="menu-content-item">
-  <div class="menu-item-header">
-    <h1 class="menu-item-header-text">Background image</h1>
-  </div>
-  <div class="menu-item-form">
-    <div class="form-wrap">
-      <label for="control-link-item-image-opacity-range">Opacity</label>
-      <div class="form-group form-group-block">
-        <input id="control-link-item-image-opacity-range" class="control-link-item-image-opacity-range mr-3" type="range" value="0" tabindex="-1">
-        <input class="control-link-item-image-opacity-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
-        <button class="control-link-item-image-opacity-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
-      </div>
-    </div>
-    <div class="form-wrap">
-      <button class="control-link-item-image-opacity-apply button button-line" tabindex="-1">Apply to all</button>
-    </div>
-  </div>
-</div>
--- a/src/html/menu/nav.html
+++ b/src/html/menu/nav.html
@ -41,7 +41,7 @@
      <a href="#menu-content-bookmarks-style" class="menu-nav-sub button button-small" tabindex="-1">Style</a>
      <a href="#menu-content-bookmarks-color" class="menu-nav-sub button button-small" tabindex="-1">Colour override</a>
      <a href="#menu-content-bookmarks-accent" class="menu-nav-sub button button-small" tabindex="-1">Accent override</a>
-      <a href="#menu-content-bookmarks-image" class="menu-nav-sub button button-small" tabindex="-1">Background image</a>
+      <a href="#menu-content-bookmarks-background" class="menu-nav-sub button button-small" tabindex="-1">Background</a>
      <a href="#menu-content-bookmarks-border" class="menu-nav-sub button button-small" tabindex="-1">Border</a>
      <a href="#menu-content-bookmarks-orientation" class="menu-nav-sub button button-small" tabindex="-1">Orientation</a>
      <a href="#menu-content-bookmarks-sort" class="menu-nav-sub button button-small" tabindex="-1">Sort</a>
--- a/src/js/bookmarks.js
+++ b/src/js/bookmarks.js
@ -76,9 +76,16 @@ var bookmarks = (function() {
        },
        opacity: 1
      },
-      image: {
-        url: "",
-        opacity: 1
+      background: {
+        show: false,
+        type: "image",
+        opacity: 1,
+        image: {
+          url: ""
+        },
+        video: {
+          url: ""
+        }
      },
      wide: false,
      tall: false,
@ -150,9 +157,16 @@ var bookmarks = (function() {
        },
        opacity: 1
      },
-      image: {
-        url: "",
-        opacity: 1
+      background: {
+        show: false,
+        type: "image",
+        opacity: 1,
+        image: {
+          url: ""
+        },
+        video: {
+          url: ""
+        }
      },
      wide: false,
      tall: false,
@ -224,9 +238,16 @@ var bookmarks = (function() {
        },
        opacity: 1
      },
-      image: {
-        url: "",
-        opacity: 1
+      background: {
+        show: false,
+        type: "image",
+        opacity: 1,
+        image: {
+          url: ""
+        },
+        video: {
+          url: ""
+        }
      },
      wide: false,
      tall: false,
@ -298,9 +319,16 @@ var bookmarks = (function() {
        },
        opacity: 1
      },
-      image: {
-        url: "",
-        opacity: 1
+      background: {
+        show: false,
+        type: "image",
+        opacity: 1,
+        image: {
+          url: ""
+        },
+        video: {
+          url: ""
+        }
      },
      wide: false,
      tall: false,
@ -372,9 +400,16 @@ var bookmarks = (function() {
        },
        opacity: 1
      },
-      image: {
-        url: "",
-        opacity: 1
+      background: {
+        show: false,
+        type: "image",
+        opacity: 1,
+        image: {
+          url: ""
+        },
+        video: {
+          url: ""
+        }
      },
      wide: false,
      tall: false,
@ -446,9 +481,16 @@ var bookmarks = (function() {
        },
        opacity: 1
      },
-      image: {
-        url: "",
-        opacity: 1
+      background: {
+        show: false,
+        type: "image",
+        opacity: 1,
+        image: {
+          url: ""
+        },
+        video: {
+          url: ""
+        }
      },
      wide: false,
      tall: false,
@ -529,9 +571,16 @@ var bookmarks = (function() {
        },
        opacity: 1
      },
-      image: {
-        url: "",
-        opacity: 1
+      background: {
+        show: false,
+        type: "image",
+        opacity: 1,
+        image: {
+          url: ""
+        },
+        video: {
+          url: ""
+        }
      },
      wide: false,
      tall: false,
@ -603,9 +652,16 @@ var bookmarks = (function() {
        },
        opacity: 1
      },
-      image: {
-        url: "",
-        opacity: 1
+      background: {
+        show: false,
+        type: "image",
+        opacity: 1,
+        image: {
+          url: ""
+        },
+        video: {
+          url: ""
+        }
      },
      wide: false,
      tall: false,
--- a/src/js/control.js
+++ b/src/js/control.js
@ -6182,9 +6182,23 @@ var control = (function() {
            link.groupAndItems();
          }
        }],
-        image: [{
-          element: ".control-link-item-image-opacity-range",
-          path: "link.item.image.opacity",
+        background: [{
+          element: ".control-link-item-background-show",
+          type: "button",
+          func: function() {
+            link.mod.item.background.show();
+            link.groupAndItems();
+          }
+        }, {
+          element: ".control-link-item-background-hide",
+          type: "button",
+          func: function() {
+            link.mod.item.background.hide();
+            link.groupAndItems();
+          }
+        }, {
+          element: ".control-link-item-background-opacity-range",
+          path: "link.item.background.opacity",
          type: "range",
          valueConvert: ["float"],
          valueModify: {
@ -6192,14 +6206,14 @@ var control = (function() {
            max: 100
          },
          mirrorElement: [{
-            element: ".control-link-item-image-opacity-number",
-            path: "link.item.image.opacity",
+            element: ".control-link-item-background-opacity-number",
+            path: "link.item.background.opacity",
            type: "number",
            valueConvert: ["float"]
          }]
        }, {
-          element: ".control-link-item-image-opacity-number",
-          path: "link.item.image.opacity",
+          element: ".control-link-item-background-opacity-number",
+          path: "link.item.background.opacity",
          type: "number",
          valueConvert: ["float"],
          valueModify: {
@ -6207,23 +6221,23 @@ var control = (function() {
            max: 100
          },
          mirrorElement: [{
-            element: ".control-link-item-image-opacity-range",
-            path: "link.item.image.opacity",
+            element: ".control-link-item-background-opacity-range",
+            path: "link.item.background.opacity",
            type: "number",
            valueConvert: ["float"]
          }]
        }, {
-          element: ".control-link-item-image-opacity-default",
+          element: ".control-link-item-background-opacity-default",
          type: "button",
          func: function() {
-            mod.default("link.item.image.opacity");
+            mod.default("link.item.background.opacity");
            render.update.control.menu();
          }
        }, {
-          element: ".control-link-item-image-opacity-apply",
+          element: ".control-link-item-background-opacity-apply",
          type: "button",
          func: function() {
-            link.mod.item.image.opacity();
+            link.mod.item.background.opacity();
            link.groupAndItems();
          }
        }],
@ -11448,6 +11462,14 @@ var control = (function() {
            ".control-link-item-accent-by-custom",
            ".control-link-item-accent-apply",
            ".control-link-item-accent-rainbow",
+            ".control-link-item-background-show",
+            ".control-link-item-background-hide",
+            ".control-link-item-background-helper",
+            "[for=control-link-item-background-opacity-range]",
+            ".control-link-item-background-opacity-range",
+            ".control-link-item-background-opacity-number",
+            ".control-link-item-background-opacity-default",
+            ".control-link-item-background-opacity-apply",
            "[for=control-link-item-border-range]",
            ".control-link-item-border-range",
            ".control-link-item-border-number",
--- a/src/js/link.js
+++ b/src/js/link.js
--- a/src/js/modal.js
+++ b/src/js/modal.js
@ -77,21 +77,24 @@ var modal = (function() {
      cancelAction: null,
      actionText: "OK",
      cancelText: "Cancel",
-      size: "medium"
+      size: "medium",
+      width: null
    };
    if (override) {
      options = helper.applyOptions(options, override);
    };
    var _makeModal = function() {
      var body = helper.e("body");
-      var modal = helper.node("div");
+      var modal = helper.node("div|class:modal");
      var modalWrapper = helper.node("div|class:modal-wrapper");
-      if (options.size == "large") {
-        modal.setAttribute("class", "modal modal-large");
+      if (options.width && typeof options.width == "number") {
+        modal.setAttribute("style", "--modal-size: " + options.width + "em;");
      } else if (options.size == "small") {
-        modal.setAttribute("class", "modal modal-small");
-      } else {
-        modal.setAttribute("class", "modal");
+        modal.setAttribute("style", "--modal-size: var(--modal-small);");
+      } else if (options.size == "medium") {
+        modal.setAttribute("style", "--modal-size: var(--modal-medium);");
+      } else if (options.size == "large") {
+        modal.setAttribute("style", "--modal-size: var(--modal-large);");
      };
      modal.close = function() {
        if (modal.classList.contains("is-opaque")) {
--- a/src/js/state.js
+++ b/src/js/state.js
@ -205,7 +205,7 @@ var state = (function() {
            b: 0
          }
        },
-        image: {
+        background: {
          opacity: 1
        },
        display: {
@ -455,7 +455,7 @@ var state = (function() {
        color: {
          opacity: 1
        },
-        image: {
+        background: {
          opacity: 1
        },
        display: {
--- a/src/js/update.js
+++ b/src/js/update.js
@ -1326,6 +1326,30 @@ var update = (function() {
      data.state.link.item.accent.by = "theme";
      delete data.state.link.item.display.visual.show;
      return data;
+    },
+    "5.74.0": function(data) {
+      data.bookmarks.forEach(function(group, index) {
+        group.items.forEach(function(item, index) {
+          item.background = {
+            show: false,
+            type: "image",
+            opacity: item.image.opacity,
+            image: {
+              url: item.image.url
+            },
+            video: {
+              url: ""
+            }
+          };
+          if (item.image.url != "") {
+            item.background.show = true;
+          };
+          delete item.image;
+        });
+      });
+      data.state.link.item.background = data.state.link.item.image;
+      delete data.state.link.item.image;
+      return data;
    }
  };

--- a/src/js/version.js
+++ b/src/js/version.js
@ -1,6 +1,6 @@
 var version = (function() {

-  var current = "5.73.0";
+  var current = "5.74.0";

  var name = "Jaded Raven";

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