[refactor] improve link binding, search matching and feedback when no bookmarks

Author: zombieFox

css/button.css

@@ -40,7 +40,7 @@ input[type="reset"]:focus,
 input[type="submit"]:hover,
 input[type="submit"]:focus{
 background-color:var(--gray-03);
-border-bottom-color:rgb(var(--accent));
+border-bottom-color:var(--gray-08);
 color:var(--white);
 outline:0;
 }
@@ -51,6 +51,7 @@ input[type="button"]:active,
 input[type="reset"]:active,
 input[type="submit"]:active{
 background-color:var(--gray-04);
+border-bottom-color:rgb(var(--accent));
 color:var(--white);
 transition: none;
 }

css/form.css

@@ -72,7 +72,7 @@ input[type="search"]:hover,
 input[type="tel"]:hover,
 input[type="text"]:hover{
 background-color:var(--gray-16);
-border-color:rgb(var(--accent));
+border-color:var(--gray-10);
 color:var(--black);
 outline:0;
 }
@@ -300,17 +300,32 @@ input[type="checkbox"]:focus+.input-label-button,
 input[type="radio"]:hover+.input-label-button,
 input[type="radio"]:focus+.input-label-button{
 background-color:var(--gray-03);
-border-bottom-color:rgb(var(--accent));
+border-bottom-color:var(--gray-10);
 color:var(--white);
 outline:0;
 }
 
+input[type="color"]:active+.input-label-button,
+input[type="checkbox"]:active+.input-label-button,
+input[type="radio"]:active+.input-label-button{
+border-bottom-color:rgb(var(--accent));
+}
+
 input[type="color"]:checked+.input-label-button,
 input[type="checkbox"]:checked+.input-label-button,
 input[type="radio"]:checked+.input-label-button{
 border-bottom-color:rgb(var(--accent));
 }
 
+input[type="color"][disabled]+.input-label-button,
+input[type="checkbox"][disabled]+.input-label-button,
+input[type="radio"][disabled]+.input-label-button{
+background-color:var(--gray-02);
+border-color: transparent;
+color:var(--gray-04);
+cursor: default;
+}
+
 input[type="checkbox"][disabled]+label,
 input[type="radio"][disabled]+label{
 color:var(--gray-04);

css/header.css

@@ -19,9 +19,6 @@
 }
 
 .header-item{
-margin-left:var(--gutter);
-margin-right:var(--gutter);
-margin-bottom:1em;
 margin:var(--gutter);
 display: flex;
 flex-wrap: nowrap;

css/link.css

@@ -230,6 +230,16 @@
 text-overflow: ellipsis;
 }
 
+.link-empty{
+grid-column-start:1;
+grid-column-end:-1;
+text-align: center;
+}
+
+.link-empty-heading{
+color:var(--gray-04);
+}
+
 .is-link-block .link-name{
 text-align: center;
 }

index.html

@@ -70,7 +70,7 @@
 </label>
 </div>
 </div>
-<divclass="header-item">
+<divclass="header-item header-menu">
 <buttonclass="button mb-0 control-menu" tabindex="1">
 <spanclass="button-text"><spanclass="icon-settings"></span></span>
 </button>
@@ -252,13 +252,6 @@ <h1 class="menu-header">Sort</h1>
 <labelfor="control-link-sort-letter"><spanclass="label-icon"></span>Letter</label>
 </div>
 </div>
-<divclass="menu-item">
-<h1class="menu-header">Theme</h1>
-<divclass="checkbox-wrap">
-<inputid="control-layout-theme-random" class="control-layout-theme-random" type="checkbox" tabindex="1">
-<labelfor="control-layout-theme-random"><spanclass="label-icon"></span>Random Accent colour on load/refresh</label>
-</div>
-</div>
 </div>
 <divclass="menu-content-area menu-content-area-layout is-hidden">
 <divclass="menu-item">
@@ -283,6 +276,13 @@ <h1 class="menu-header">Page</h1>
 <labelfor="control-layout-scroll-past-end"><spanclass="label-icon"></span>Scroll past end</label>
 </div>
 </div>
+<divclass="menu-item">
+<h1class="menu-header">Theme</h1>
+<divclass="checkbox-wrap">
+<inputid="control-layout-theme-random" class="control-layout-theme-random" type="checkbox" tabindex="1">
+<labelfor="control-layout-theme-random"><spanclass="label-icon"></span>Random Accent colour on load/refresh</label>
+</div>
+</div>
 </div>
 </div>
 

js/bookmarks.js

@@ -134,14 +134,16 @@ var bookmarks = (function(){
 
 varget=function(timeStamp){
 var_singleBookmark=function(){
+varfound=false;
 for(vari=0;i<all.length;i++){
 if(all[i].timeStamp===timeStamp){
-returnall[i];
+found=all[i];
 };
 };
+returnfound;
 };
 var_allBookmarks=function(){
-varby={
+varaction={
 none: function(array){
 returnhelper.sortObject(array,"timeStamp");
 },
@@ -152,9 +154,9 @@ var bookmarks = (function(){
 returnhelper.sortObject(array,"letter");
 }
 };
-returnby[state.get().link.sort](all);
+returnaction[state.get().link.sort](all);
 };
-if(timeStamp){
+if(timeStamp&&typeoftimeStamp=="number"){
 return_singleBookmark(timeStamp);
 }else{
 return_allBookmarks();

js/control.js

@@ -108,7 +108,19 @@ var control = (function(){
 _layout();
 };
 
-var_dependents=function(){
+vardependents=function(){
+var_edit=function(){
+if(bookmarks.get().length>0){
+helper.e(".control-edit").disabled=false;
+}else{
+helper.e(".control-edit").disabled=true;
+helper.e(".control-edit").checked=false;
+state.change({
+path: "edit.active",
+value: false
+});
+};
+};
 var_date=function(){
 varactiveCount=0;
 vartoCheck=[state.get().header.date.show.date,state.get().header.date.show.day,state.get().header.date.show.month,state.get().header.date.show.year];
@@ -180,6 +192,7 @@ var control = (function(){
 helper.e(".control-header-search-engine-custom-url").disabled=true;
 };
 };
+_edit();
 _date();
 _clock();
 _search();
@@ -198,6 +211,7 @@ var control = (function(){
 value: this.checked
 });
 render();
+dependents();
 data.save();
 },false);
 helper.e(".control-layout-theme").addEventListener("change",function(){
@@ -252,7 +266,7 @@ var control = (function(){
 value: this.checked
 });
 render();
-_dependents();
+dependents();
 header.render();
 data.save();
 },false);
@@ -262,7 +276,7 @@ var control = (function(){
 value: this.checked
 });
 render();
-_dependents();
+dependents();
 header.render();
 data.save();
 },false);
@@ -273,7 +287,7 @@ var control = (function(){
 value: this.value
 });
 render();
-_dependents();
+dependents();
 search.update();
 data.save();
 },false);
@@ -292,7 +306,7 @@ var control = (function(){
 value: this.checked
 });
 render();
-_dependents();
+dependents();
 date.clear();
 date.render();
 header.render();
@@ -304,7 +318,7 @@ var control = (function(){
 value: this.checked
 });
 render();
-_dependents();
+dependents();
 date.clear();
 date.render();
 header.render();
@@ -316,7 +330,7 @@ var control = (function(){
 value: this.checked
 });
 render();
-_dependents();
+dependents();
 date.clear();
 date.render();
 header.render();
@@ -328,7 +342,7 @@ var control = (function(){
 value: this.checked
 });
 render();
-_dependents();
+dependents();
 date.clear();
 date.render();
 header.render();
@@ -340,7 +354,7 @@ var control = (function(){
 value: this.checked
 });
 render();
-_dependents();
+dependents();
 date.clear();
 date.render();
 header.render();
@@ -365,7 +379,7 @@ var control = (function(){
 value: this.checked
 });
 render();
-_dependents();
+dependents();
 clock.clear();
 clock.render();
 header.render();
@@ -377,7 +391,7 @@ var control = (function(){
 value: this.checked
 });
 render();
-_dependents();
+dependents();
 clock.clear();
 clock.render();
 header.render();
@@ -389,7 +403,7 @@ var control = (function(){
 value: this.checked
 });
 render();
-_dependents();
+dependents();
 clock.clear();
 clock.render();
 header.render();
@@ -410,7 +424,7 @@ var control = (function(){
 path: "header.clock.hour24",
 value: this.checked
 });
-_dependents();
+dependents();
 clock.clear();
 clock.render();
 header.render();
@@ -508,15 +522,16 @@ var control = (function(){
 varinit=function(){
 _bind();
 update();
-_dependents();
+dependents();
 render();
 };
 
 // exposed methods
 return{
 init: init,
-update: update,
-render: render
+render: render,
+dependents: dependents,
+update: update
 };
 
 })();

js/data.js

@@ -10,7 +10,7 @@ var data = (function(){
 returnlocalStorage.getItem(key);
 };
 
-varclear=function(key){
+varremove=function(key){
 localStorage.removeItem(key);
 };
 
@@ -24,6 +24,10 @@ var data = (function(){
 console.log("data saved");
 };
 
+varwipe=function(){
+remove(saveName);
+};
+
 varload=function(){
 vardata=JSON.parse(get(saveName));
 returndata;
@@ -48,14 +52,10 @@ var data = (function(){
 _checkForSavedData(load());
 };
 
-varwipe=function(){
-clear(saveName);
-};
-
 return{
 init: init,
 save: save,
-clear: clear,
+remove: remove,
 set: set,
 get: get,
 load: load,

js/helper.js

@@ -113,10 +113,7 @@ var helper = (function(){
 varmakeNode=function(override){
 varoptions={
 tag: null,
-classes: null,
 text: null,
-url: null,
-index: null,
 attr: null
 };
 if(override){