[feature] adding control for link item grow on hover

Author: zombieFox

css/link.css

@@ -49,15 +49,15 @@
 z-index:1;
 }
 
-.link-item:focus-within,
-.link-item:focus,
-.link-item:hover{
+.is-link-item-hover-scale .link-item:focus-within,
+.is-link-item-hover-scale .link-item:focus,
+.is-link-item-hover-scale .link-item:hover{
 transform:scale(1.05);
 z-index:2;
 outline:0;
 }
 
-.link-item:active{
+.is-link-item-hover-scale .link-item:active{
 transform:scale(1.04);
 transition: none;
 }
@@ -75,7 +75,7 @@
 transition: background-color var(--animation-speed-fast) ease-in-out, height var(--animation-speed-fast) ease-in-out, box-shadow var(--animation-speed-fast) ease-in-out;
 }
 
-.is-link-item-line-show .link-panel-front{
+.is-link-item-line .link-panel-front{
 height:calc(100%-var(--line-width));
 }
 
@@ -175,14 +175,14 @@
 transition: height var(--animation-speed-fast) ease-in-out, top var(--animation-speed-fast) ease-in-out;
 }
 
-.is-link-item-line-show .link-panel-back{
+.is-link-item-line .link-panel-back{
 height:calc(100%-var(--line-width));
 }
 
 .is-link-edit .link-panel-back,
-.is-link-url-show:not(.is-link-item-line-show) .link-item:focus .link-panel-back,
-.is-link-url-show:not(.is-link-item-line-show) .link-item:focus-within .link-panel-back,
-.is-link-url-show:not(.is-link-item-line-show) .link-item:hover .link-panel-back{
+.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%;
 }

index.html

@@ -803,8 +803,13 @@ <h1 class="menu-item-header-text">Bookmarks</h1>
 </div>
 <hr>
 <divclass="input-wrap">
-<inputid="control-link-item-line-show" class="control-link-item-line-show" type="checkbox" tabindex="1">
-<labelfor="control-link-item-line-show">Tile line</label>
+<inputid="control-link-item-line" class="control-link-item-line" type="checkbox" tabindex="1">
+<labelfor="control-link-item-line">Tile line</label>
+</div>
+<hr>
+<divclass="input-wrap">
+<inputid="control-link-item-hover-scale" class="control-link-item-hover-scale" type="checkbox" tabindex="1">
+<labelfor="control-link-item-hover-scale">Grow on hover</label>
 </div>
 <hr>
 <labelclass="control-link-item-display-alignment-horizontal-label">Content Horizontal Alignment</label>

js/control.js

@@ -1841,8 +1841,15 @@ var control = (function(){
 render();
 }
 },{
-element: helper.e(".control-link-item-line-show"),
-path: "link.item.line.show",
+element: helper.e(".control-link-item-line"),
+path: "link.item.line",
+type: "checkbox",
+func: function(){
+render();
+}
+},{
+element: helper.e(".control-link-item-hover-scale"),
+path: "link.item.hoverScale",
 type: "checkbox",
 func: function(){
 render();
@@ -2312,7 +2319,8 @@ var control = (function(){
 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-show");
+helper.removeClass(html,"is-link-item-line");
+helper.removeClass(html,"is-link-item-hover-scale");
 helper.removeClass(html,"is-link-item-alignment-horizontal-left");
 helper.removeClass(html,"is-link-item-alignment-horizontal-center");
 helper.removeClass(html,"is-link-item-alignment-horizontal-right");
@@ -2336,8 +2344,11 @@ var control = (function(){
 if(state.get().link.item.url.show){
 helper.addClass(html,"is-link-url-show");
 };
-if(state.get().link.item.line.show){
-helper.addClass(html,"is-link-item-line-show");
+if(state.get().link.item.line){
+helper.addClass(html,"is-link-item-line");
+};
+if(state.get().link.item.hoverScale){
+helper.addClass(html,"is-link-item-hover-scale");
 };
 if(state.get().link.edit){
 helper.addClass(html,"is-link-edit");
@@ -2688,7 +2699,8 @@ var control = (function(){
 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-show").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","");
 helper.e(".control-link-item-display-alignment-horizontal-left").disabled=true;
 helper.e(".control-link-item-display-alignment-horizontal-center").disabled=true;
@@ -2718,7 +2730,8 @@ var control = (function(){
 helper.e(".control-link-item-display-show").disabled=false;
 helper.e(".control-link-item-name-show").disabled=false;
 helper.e(".control-link-item-url-show").disabled=false;
-helper.e(".control-link-item-line-show").disabled=false;
+helper.e(".control-link-item-line").disabled=false;
+helper.e(".control-link-item-hover-scale").disabled=false;
 helper.e(".control-link-new-tab").disabled=false;
 helper.e(".control-link-style-block").disabled=false;
 helper.e(".control-link-style-list").disabled=false;

js/state.js

@@ -138,7 +138,6 @@ var state = (function(){
 }
 },
 item: {
-size: 1,
 display: {
 show: true,
 size: 2,
@@ -161,9 +160,9 @@ var state = (function(){
 show: true,
 style: "dark"
 },
-line: {
-show: true
-}
+size: 1,
+line: true,
+hoverScale: true
 },
 show: true,
 newTab: false,

js/update.js

@@ -471,6 +471,13 @@ var update = (function(){
 returndata;
 };
 
+var_update_3110=function(data){
+data.version="3.11.0";
+data.state.link.item.line=data.state.link.item.line.show;
+data.state.link.item.hoverScale=true;
+returndata;
+};
+
 // var _update_300 = function(data){
 // data.version = 3.00;
 // return data;
@@ -597,6 +604,10 @@ var update = (function(){
 console.log("\t= running update 3.10.0");
 data=_update_3100(data);
 };
+if(version.compare(data.version,"3.11.0")==-1){
+console.log("\t= running update 3.11.0");
+data=_update_3110(data);
+};
 };
 // if no update is needed
 // version bump

js/version.js

@@ -1,7 +1,7 @@
 varversion=(function(){
 
 // version is normally bumped when the state needs changing or any new functionality is added
-varcurrent="3.10.3";
+varcurrent="3.11.0";
 
 varcompare=function(a,b){
 varpa=a.split(".");