[feature] add drag and drop link sort

css/link.css

@@ -67,6 +67,19 @@
   transition: none;
 }
 
+.link-item-placeholder {
+  background-color: rgba(var(--theme-accent), 0.2);
+  border-radius: var(--theme-radius);
+  width:  100%;
+  height:  100%;
+  position: relative;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  box-shadow: inset 0 0 0 var(--line-width) rgb(var(--theme-accent)), inset 0 0 0 calc(var(--line-width) * 4) rgba(var(--theme-accent), 0.1), inset 0 0 0 calc(var(--line-width) * 8) rgba(var(--theme-accent), 0.1);
+  pointer-events: none;
+}
+
 .link-panel-front {
   background-color: rgb(var(--gray-02));
   border-radius: var(--theme-radius);
@@ -206,6 +219,7 @@
 
 .link-control-item {
   background-color: transparent;
+  border-radius: 0;
   margin-bottom: 0;
   border: 0;
   padding: 0;
@@ -260,9 +274,9 @@
   justify-content: flex-end;
 }
 
-.link-item:focus-within .link-url,
+.is-link-url-show .link-item:focus-within .link-url,
-.link-item:focus .link-url,
+.is-link-url-show .link-item:focus .link-url,
-.link-item:hover .link-url {
+.is-link-url-show .link-item:hover .link-url {
   height: var(--link-item-url-height);
 }
 

index.html

@@ -875,21 +875,14 @@
               <h1 class="menu-item-header-text">Sort</h1>
             </div>
             <div class="menu-item-form">
-              <div class="input-wrap">
+              <div class="button-wrap">
-                <input id="control-link-sort-none" class="control-link-sort-none" type="radio" name="control-link-sort" value="none" tabindex="1">
+                <button class="control-link-sort-letter button mb-0" tabindex="1">By Letter</button>
-                <label for="control-link-sort-none">None (as added)</label>
               </div>
-              <div class="input-wrap">
+              <div class="button-wrap">
-                <input id="control-link-sort-letter" class="control-link-sort-letter" type="radio" name="control-link-sort" value="letter" tabindex="1">
+                <button class="control-link-sort-icon button mb-0" tabindex="1">By Icon</button>
-                <label for="control-link-sort-letter">Letter</label>
               </div>
-              <div class="input-wrap">
+              <div class="button-wrap">
-                <input id="control-link-sort-icon" class="control-link-sort-icon" type="radio" name="control-link-sort" value="icon" tabindex="1">
+                <button class="control-link-sort-name button mb-0" tabindex="1">By Name</button>
-                <label for="control-link-sort-icon">Icon</label>
-              </div>
-              <div class="input-wrap">
-                <input id="control-link-sort-name" class="control-link-sort-name" type="radio" name="control-link-sort" value="name" tabindex="1">
-                <label for="control-link-sort-name">Name</label>
               </div>
             </div>
           </div>
@@ -1010,6 +1003,9 @@
 
 </body>
 
+<!-- vendor -->
+<script src="js/vendor/html5sortable.min.js"></script>
+<!-- nightTab -->
 <script src="js/helper.js"></script>
 <script src="js/data.js"></script>
 <script src="js/fontawesome.js"></script>

js/bookmarks.js

@@ -183,27 +183,10 @@ var bookmarks = (function() {
       };
       return found;
     };
-    var _allBookmarks = function() {
-      var action = {
-        none: function(array) {
-          return helper.sortObject(array, "timeStamp");
-        },
-        name: function(array) {
-          return helper.sortObject(array, "name");
-        },
-        letter: function(array) {
-          return helper.sortObject(array, "letter");
-        },
-        icon: function(array) {
-          return helper.sortObject(array, "icon.name");
-        }
-      };
-      return action[state.get().link.sort](all);
-    };
     if (data && typeof data.timeStamp == "number") {
       return _singleBookmark();
     } else {
-      return _allBookmarks();
+      return all;
     };
   };
 
@@ -233,6 +216,25 @@ var bookmarks = (function() {
     };
   };
 
+  var sort = function(by) {
+    var action = {
+      name: function(array) {
+        return helper.sortObject(array, "name");
+      },
+      letter: function(array) {
+        return helper.sortObject(array, "letter");
+      },
+      icon: function(array) {
+        return helper.sortObject(array, "icon.name");
+      }
+    };
+    all = action[by](all);
+  };
+
+  var move = function(origin, destination) {
+    all = helper.moveArrayItem(all, origin, destination);
+  };
+
   var init = function() {
     if (data.load()) {
       restore(data.load());
@@ -246,6 +248,8 @@ var bookmarks = (function() {
     get: get,
     add: add,
     edit: edit,
+    sort: sort,
+    move: move,
     remove: remove,
     restore: restore
   };

js/control.js

@@ -1918,35 +1918,27 @@ var control = (function() {
     func: function() {
       render();
     }
-  }, {
-    element: helper.e(".control-link-sort-none"),
-    path: "link.sort",
-    type: "radio",
-    func: function() {
-      link.clear();
-      link.render.item.all();
-    }
   }, {
     element: helper.e(".control-link-sort-letter"),
-    path: "link.sort",
+    type: "button",
-    type: "radio",
     func: function() {
+      bookmarks.sort("letter");
       link.clear();
       link.render.item.all();
     }
   }, {
     element: helper.e(".control-link-sort-icon"),
-    path: "link.sort",
+    type: "button",
-    type: "radio",
     func: function() {
+      bookmarks.sort("icon");
       link.clear();
       link.render.item.all();
     }
   }, {
     element: helper.e(".control-link-sort-name"),
-    path: "link.sort",
+    type: "button",
-    type: "radio",
     func: function() {
+      bookmarks.sort("name");
       link.clear();
       link.render.item.all();
     }
@@ -2712,7 +2704,6 @@ var control = (function() {
       helper.e(".control-link-new-tab").disabled = true;
       helper.e(".control-link-style-block").disabled = true;
       helper.e(".control-link-style-list").disabled = true;
-      helper.e(".control-link-sort-none").disabled = true;
       helper.e(".control-link-sort-name").disabled = true;
       helper.e(".control-link-sort-letter").disabled = true;
       helper.e(".control-link-sort-icon").disabled = true;
@@ -2735,7 +2726,6 @@ var control = (function() {
         helper.e(".control-link-new-tab").disabled = false;
         helper.e(".control-link-style-block").disabled = false;
         helper.e(".control-link-style-list").disabled = false;
-        helper.e(".control-link-sort-none").disabled = false;
         helper.e(".control-link-sort-name").disabled = false;
         helper.e(".control-link-sort-letter").disabled = false;
         helper.e(".control-link-sort-icon").disabled = false;

js/helper.js

@@ -267,7 +267,7 @@ var helper = (function() {
     return element;
   };
 
-  function _makeAddress(path) {
+  var _makeAddress = function(path) {
     var array;
     if (path.indexOf("[") != -1 && path.indexOf("]") != -1) {
       array = path.split(".").join(",").split("[").join(",").split("]").join(",").split(",");
@@ -285,7 +285,7 @@ var helper = (function() {
     return array;
   };
 
-  function setObject(override) {
+  var setObject = function(override) {
     var options = {
       path: null,
       object: null,
@@ -321,7 +321,7 @@ var helper = (function() {
     };
   };
 
-  function getObject(override) {
+  var getObject = function(override) {
     var options = {
       object: null,
       path: null
@@ -360,7 +360,7 @@ var helper = (function() {
     };
   };
 
-  function makeObject(string) {
+  var makeObject = function(string) {
     var _stringOrBooleanOrNumber = function(stringToTest) {
       if (stringToTest == "true") {
         return true;
@@ -419,6 +419,17 @@ var helper = (function() {
     };
   };
 
+  var moveArrayItem = function(array, oldIndex, newIndex) {
+    if (newIndex >= array.length) {
+      var k = newIndex - array.length + 1;
+      while (k--) {
+        array.push(undefined);
+      };
+    };
+    array.splice(newIndex, 0, array.splice(oldIndex, 1)[0]);
+    return array;
+  };
+
   var allEqual = function(array) {
     return array.every(function(arrayItem) {
       return arrayItem === array[0];
@@ -564,6 +575,7 @@ var helper = (function() {
     setObject: setObject,
     getObject: getObject,
     makeObject: makeObject,
+    moveArrayItem: moveArrayItem,
     randomNumber: randomNumber,
     toWords: toWords,
     ordinalWords: ordinalWords,

js/init.js

@@ -12,7 +12,6 @@ transitional.init();
 date.init();
 clock.init();
 keyboard.init();
-tip.init();
 layout.init();
 background.init();
 search.init();

js/link.js

@@ -1,5 +1,16 @@
 var link = (function() {
 
+  var bind = function() {
+    sortable(".link-area", {
+      items: ".link-item",
+      placeholder: helper.node("div|class:link-item-placeholder")
+    });
+    sortable(".link-area")[0].addEventListener("sortupdate", function(event) {
+      bookmarks.move(event.detail.origin.index, event.detail.destination.index);
+      data.save();
+    });
+  };
+
   var _previousFocusLink = null;
 
   var _returnToPreviousFocusLink = function() {
@@ -658,6 +669,7 @@ var link = (function() {
     render.item.display.letter();
     render.item.display.icon();
     render.item.name();
+    bind();
   };
 
   // exposed methods

js/state.js

@@ -167,8 +167,7 @@ var state = (function() {
       show: true,
       newTab: false,
       edit: false,
-      style: "block",
+      style: "block"
-      sort: "none"
     },
     layout: {
       alignment: {

js/update.js

@@ -478,6 +478,12 @@ var update = (function() {
     return data;
   };
 
+  var _update_3150 = function(data) {
+    data.version = "3.15.0";
+    delete data.state.link.sort;
+    return data;
+  };
+
   // var _update_300 = function(data) {
   //   data.version = 3.00;
   //   return data;
@@ -608,6 +614,10 @@ var update = (function() {
         console.log("\t= running update 3.11.0");
         data = _update_3110(data);
       };
+      if (version.compare(data.version, "3.15.0") == -1) {
+        console.log("\t= running update 3.15.0");
+        data = _update_3150(data);
+      };
     };
     // if no update is needed
     // version bump

js/version.js

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

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