[feature] change link url and control colour based on accent

src/css/link.css

@@ -201,8 +201,9 @@
 .is-link-url-show:not(.is-link-item-line) .link-item:focus .link-panel-back,
 .is-link-url-show:not(.is-link-item-line) .link-item:focus-within .link-panel-back,
 .is-link-url-show:not(.is-link-item-line) .link-item:hover .link-panel-back {
-  top: 0;
   height: 100%;
+  top: 0;
+  clip-path: polygon(0 var(--layout-line-width), 100% var(--layout-line-width), 100% 100%, 0 100%);
 }
 
 .link-control {
@@ -228,6 +229,14 @@
   flex-basis: 50%;
 }
 
+.link-url-text-dark .link-control-item {
+  color: rgb(var(--theme-black));
+}
+
+.link-url-text-light .link-control-item {
+  color: rgb(var(--theme-white));
+}
+
 .link-control-item:first-child {
   border-radius: 0 0 0 var(--theme-radius);
 }
@@ -236,16 +245,26 @@
   border-radius: 0 0 var(--theme-radius) 0
 }
 
-.link-control-item:focus,
-.link-control-item:hover {
-  color: rgb(var(--theme-style-text));
+.link-url-text-dark .link-control-item:focus,
+.link-url-text-dark .link-control-item:hover {
+  color: rgb(var(--theme-black));
   background-color: rgba(0, 0, 0, 0.2);
 }
 
-.link-control-item:active {
-  color: rgb(var(--theme-style-text));
-  background-color: rgba(0, 0, 0, 0.3);
-  transition: none;
+.link-url-text-light .link-control-item:focus,
+.link-url-text-light .link-control-item:hover {
+  color: rgb(var(--theme-white));
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
+.link-url-text-dark .link-control-item:active {
+  color: rgb(var(--theme-black));
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.link-url-text-light .link-control-item:active {
+  color: rgb(var(--theme-white));
+  background-color: rgba(255, 255, 255, 0.1);
 }
 
 .link-url {
@@ -289,11 +308,11 @@
   text-overflow: ellipsis;
 }
 
-.is-link-url-style-dark .link-url-text {
+.link-url-text-dark .link-url-text {
   color: rgb(var(--theme-black));
 }
 
-.is-link-url-style-light .link-url-text {
+.link-url-text-light .link-url-text {
   color: rgb(var(--theme-white));
 }
 

src/index.html

@@ -793,16 +793,6 @@
                   <input id="control-link-item-url-show" class="control-link-item-url-show" type="checkbox" tabindex="1">
                   <label for="control-link-item-url-show">URL on hover</label>
                 </div>
-                <div class="form-indent">
-                  <div class="input-wrap">
-                    <input id="control-link-item-url-style-dark" class="control-link-item-url-style-dark" type="radio" name="control-link-item-url-style" value="dark" tabindex="1">
-                    <label for="control-link-item-url-style-dark">Dark text</label>
-                  </div>
-                  <div class="input-wrap">
-                    <input id="control-link-item-url-style-light" class="control-link-item-url-style-light" type="radio" name="control-link-item-url-style" value="light" tabindex="1">
-                    <label for="control-link-item-url-style-light">Light text</label>
-                  </div>
-                </div>
                 <hr>
                 <div class="input-wrap">
                   <input id="control-link-item-line" class="control-link-item-line" type="checkbox" tabindex="1">
@@ -1046,6 +1036,7 @@
 
 <!-- vendor -->
 <script src="js/vendor/html5sortable.min.js"></script>
+<script src="js/vendor/invert.min.js"></script>
 <!-- nightTab -->
 <script src="js/helper.js"></script>
 <script src="js/data.js"></script>

src/js/control.js

@@ -26,6 +26,9 @@ var control = (function() {
     type: "color",
     func: function() {
       accent.render();
+      link.clear();
+      link.render.item.all();
+      sortable(".link-area");
     }
   }, {
     element: helper.e(".control-layout-width"),
@@ -1820,26 +1823,12 @@ var control = (function() {
     }
   }, {
     element: helper.e(".control-link-item-url-show"),
-    path: "link.item.url.show",
+    path: "link.item.url",
     type: "checkbox",
     func: function() {
       render();
       dependents();
     }
-  }, {
-    element: helper.e(".control-link-item-url-style-dark"),
-    path: "link.item.url.style",
-    type: "radio",
-    func: function() {
-      render();
-    }
-  }, {
-    element: helper.e(".control-link-item-url-style-light"),
-    path: "link.item.url.style",
-    type: "radio",
-    func: function() {
-      render();
-    }
   }, {
     element: helper.e(".control-link-item-line"),
     path: "link.item.line",
@@ -2027,6 +2016,9 @@ var control = (function() {
     func: function() {
       accent.random();
       accent.render();
+      link.clear();
+      link.render.item.all();
+      sortable(".link-area");
     }
   }, {
     element: helper.e(".control-background-image-show"),
@@ -2339,8 +2331,6 @@ var control = (function() {
       helper.removeClass(html, "is-link-display-alignment-vertical-center");
       helper.removeClass(html, "is-link-display-alignment-vertical-bottom");
       helper.removeClass(html, "is-link-url-show");
-      helper.removeClass(html, "is-link-url-style-light");
-      helper.removeClass(html, "is-link-url-style-dark");
       helper.removeClass(html, "is-link-item-line");
       helper.removeClass(html, "is-link-item-hover-scale");
       helper.removeClass(html, "is-link-item-alignment-horizontal-left");
@@ -2356,14 +2346,13 @@ var control = (function() {
         helper.addClass(html, "is-link-display-alignment-horizontal-" + state.get().link.item.display.alignment.horizontal);
         helper.addClass(html, "is-link-display-alignment-vertical-" + state.get().link.item.display.alignment.vertical);
         helper.addClass(html, "is-link-style-" + state.get().link.style);
-        helper.addClass(html, "is-link-url-style-" + state.get().link.item.url.style);
         if (state.get().link.item.name.show) {
           helper.addClass(html, "is-link-name-show");
         };
         if (state.get().link.item.display.show) {
           helper.addClass(html, "is-link-display-show");
         };
-        if (state.get().link.item.url.show) {
+        if (state.get().link.item.url) {
           helper.addClass(html, "is-link-url-show");
         };
         if (state.get().link.item.line) {
@@ -2719,8 +2708,6 @@ var control = (function() {
       helper.e(".control-link-item-name-size").disabled = true;
       helper.e(".control-link-item-name-size-default").disabled = true;
       helper.e(".control-link-item-url-show").disabled = true;
-      helper.e(".control-link-item-url-style-dark").disabled = true;
-      helper.e(".control-link-item-url-style-light").disabled = true;
       helper.e(".control-link-item-line").disabled = true;
       helper.e(".control-link-item-hover-scale").disabled = true;
       helper.e(".control-link-item-display-alignment-horizontal-label").setAttribute("disabled", "");
@@ -2772,7 +2759,7 @@ var control = (function() {
           helper.e(".control-link-item-name-size").disabled = false;
           helper.e(".control-link-item-name-size-default").disabled = false;
         };
-        if (state.get().link.item.display.show || state.get().link.item.name.show || state.get().link.item.url.show) {
+        if (state.get().link.item.display.show || state.get().link.item.name.show || state.get().link.item.url) {
           helper.e(".control-link-item-display-alignment-horizontal-label").removeAttribute("disabled");
           helper.e(".control-link-item-display-alignment-horizontal-left").disabled = false;
           helper.e(".control-link-item-display-alignment-horizontal-center").disabled = false;
@@ -2782,10 +2769,6 @@ var control = (function() {
           helper.e(".control-link-item-display-alignment-vertical-center").disabled = false;
           helper.e(".control-link-item-display-alignment-vertical-bottom").disabled = false;
         };
-        if (state.get().link.item.url.show) {
-          helper.e(".control-link-item-url-style-dark").disabled = false;
-          helper.e(".control-link-item-url-style-light").disabled = false;
-        };
       };
     };
     var _theme = function() {

src/js/keyboard.js

@@ -70,6 +70,9 @@ var keyboard = (function() {
       if (event.ctrlKey && event.altKey && event.keyCode == 82) {
         accent.random();
         accent.render();
+        link.clear();
+        link.render.item.all();
+        sortable(".link-area");
         data.save();
       };
     }, false);

src/js/link.js

@@ -328,6 +328,17 @@ var link = (function() {
         key: "style",
         value: "--theme-accent: " + data.accent.color.r + ", " + data.accent.color.g + ", " + data.accent.color.b
       });
+      if (invert(data.accent.color, true) == "#000000") {
+        linkItemOptions.attr[0].value = linkItemOptions.attr[0].value + " link-url-text-dark";
+      } else if (invert(data.accent.color, true) == "#ffffff") {
+        linkItemOptions.attr[0].value = linkItemOptions.attr[0].value + " link-url-text-light";
+      };
+    } else {
+      if (invert(state.get().theme.accent.current, true) == "#000000") {
+        linkItemOptions.attr[0].value = linkItemOptions.attr[0].value + " link-url-text-dark";
+      } else if (invert(state.get().theme.accent.current, true) == "#ffffff") {
+        linkItemOptions.attr[0].value = linkItemOptions.attr[0].value + " link-url-text-light";
+      };
     };
     var linkItem = helper.makeNode(linkItemOptions);
     var linkPanelFrontOptions = {

src/js/state.js

@@ -156,10 +156,7 @@ var state = (function() {
           show: true,
           size: 0.9,
         },
-        url: {
-          show: true,
-          style: "dark"
-        },
+        url: true,
         size: 1,
         line: true,
         hoverScale: true

src/js/update.js

@@ -560,6 +560,12 @@ var update = (function() {
     return data;
   };
 
+  var _update_3200 = function(data) {
+    data.version = "3.20.0";
+    data.state.link.item.url = data.state.link.item.url.show;
+    return data;
+  };
+
   // var _update_300 = function(data) {
   //   data.version = 3.00;
   //   return data;
@@ -698,6 +704,10 @@ var update = (function() {
         console.log("\t= running update 3.18.0");
         data = _update_3180(data);
       };
+      if (version.compare(data.version, "3.20.0") == -1) {
+        console.log("\t= running update 3.20.0");
+        data = _update_3200(data);
+      };
     };
     // if no update is needed
     // version bump

src/js/vendor/invert.min.js

@@ -0,0 +1,2 @@
+/*! @license https://github.com/onury/invert-color */
+!function(r,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):r.invert=n()}(this,function(){"use strict";var t=Math.sqrt(1.05*.05)-.05,n=/^(?:[0-9a-f]{3}){1,2}$/i,i={black:"#000000",white:"#ffffff",threshold:t};function o(r){if("#"===r.slice(0,1)&&(r=r.slice(1)),!n.test(r))throw new Error('Invalid HEX color: "'+r+'"');return 3===r.length&&(r=r[0]+r[0]+r[1]+r[1]+r[2]+r[2]),[parseInt(r.slice(0,2),16),parseInt(r.slice(2,4),16),parseInt(r.slice(4,6),16)]}function f(r){if(!r)throw new Error("Invalid color value");return Array.isArray(r)?r:"string"==typeof r?o(r):[r.r,r.g,r.b]}function u(r,n,t){var e=!0===n?i:Object.assign({},i,n);return function(r){var n,t,e=[];for(n=0;n<r.length;n++)t=r[n]/255,e[n]=t<=.03928?t/12.92:Math.pow((t+.055)/1.055,2.4);return.2126*e[0]+.7152*e[1]+.0722*e[2]}(r)>e.threshold?t?o(e.black):e.black:t?o(e.white):e.white}function r(r,n){return void 0===n&&(n=!1),r=f(r),n?u(r,n):"#"+r.map(function(r){return n=(255-r).toString(16),void 0===t&&(t=2),(new Array(t).join("0")+n).slice(-t);var n,t}).join("")}return function(r){function n(r,n){r=f(r);var t,e=n?u(r,n,!0):r.map(function(r){return 255-r});return{r:(t=e)[0],g:t[1],b:t[2]}}r.asRGB=n,r.asRgbArray=function(r,n){return r=f(r),n?u(r,n,!0):r.map(function(r){return 255-r})},r.defaultThreshold=t,r.asRgbObject=n}(r||(r={})),r});

src/js/version.js

@@ -1,6 +1,6 @@
 var version = (function() {
 
-  var current = "3.19.0";
+  var current = "3.20.0";
 
   var compare = function(a, b) {
     var pa = a.split(".");

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