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

Author: zombieFox

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(0var(--layout-line-width),100%var(--layout-line-width),100%100%,0100%);
 }
 
 .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:000var(--theme-radius);
 }
@@ -236,16 +245,26 @@
 border-radius:00var(--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 @@ <h1 class="menu-item-header-text">Bookmarks</h1>
 <inputid="control-link-item-url-show" class="control-link-item-url-show" type="checkbox" tabindex="1">
 <labelfor="control-link-item-url-show">URL on hover</label>
 </div>
-<divclass="form-indent">
-<divclass="input-wrap">
-<inputid="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">
-<labelfor="control-link-item-url-style-dark">Dark text</label>
-</div>
-<divclass="input-wrap">
-<inputid="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">
-<labelfor="control-link-item-url-style-light">Light text</label>
-</div>
-</div>
 <hr>
 <divclass="input-wrap">
 <inputid="control-link-item-line" class="control-link-item-line" type="checkbox" tabindex="1">
@@ -1046,6 +1036,7 @@ <h1 class="menu-item-header-text">Clear</h1>
 
 <!-- vendor -->
 <scriptsrc="js/vendor/html5sortable.min.js"></script>
+<scriptsrc="js/vendor/invert.min.js"></script>
 <!-- nightTab -->
 <scriptsrc="js/helper.js"></script>
 <scriptsrc="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";
+}elseif(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";
+}elseif(invert(state.get().theme.accent.current,true)=="#ffffff"){
+linkItemOptions.attr[0].value=linkItemOptions.attr[0].value+" link-url-text-light";
+};
 };
 varlinkItem=helper.makeNode(linkItemOptions);
 varlinkPanelFrontOptions={

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(){
 returndata;
 };
 
+var_update_3200=function(data){
+data.version="3.20.0";
+data.state.link.item.url=data.state.link.item.url.show;
+returndata;
+};
+
 // 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

@@ -1,6 +1,6 @@
 varversion=(function(){
 
-varcurrent="3.19.0";
+varcurrent="3.20.0";
 
 varcompare=function(a,b){
 varpa=a.split(".");

src/js/version.js

@@ -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"