drag and drop columns, enter key

diff --git a/admin.js b/admin.js
index 55bbf1728e9c6ba4c80af3fb887d4ea1d6bb9fec..157c99091aa716c9d3093eb3da6a9ee42e29728a 100644 (file)
--- a/admin.js
+++ b/admin.js
@@ -48,10 +48,20 @@ var userListsCallback = function(lists) {
   for(var i=0;i<lists["lists"].length;i++) {
     var ul = document.createElement("ul");
     ul.setAttribute("id", mainlist[i]);
   for(var i=0;i<lists["lists"].length;i++) {
     var ul = document.createElement("ul");
     ul.setAttribute("id", mainlist[i]);

+    ul.setAttribute('draggable', 'true');
+    ul.addEventListener('dragstart', dragStart, false);
+    ul.addEventListener('dragenter', dragEnter, false);
+    ul.addEventListener('dragover', dragOver, false);
+    ul.addEventListener('dragleave', dragLeave, false);
+    ul.addEventListener('drop', drop, false);

     document.getElementById("links").appendChild(ul);
 
     document.getElementById("links").appendChild(ul);
 

+    var grip = document.createElement("span");
+    grip.setAttribute("class", "grip");
+

     var title = document.createElement("div");
     title.setAttribute("class", "title");
     var title = document.createElement("div");
     title.setAttribute("class", "title");

+    title.appendChild(grip)

     ul.appendChild(title);
 
     var p = document.createElement("p");
     ul.appendChild(title);
 
     var p = document.createElement("p");


@@ -68,14 +78,15 @@ var userListsCallback = function(lists) {
       var nme = list[j][0];
       var img = document.createElement("img");
       img.className = "icon";
       var nme = list[j][0];
       var img = document.createElement("img");
       img.className = "icon";

-      img.src = "http://www.google.com/s2/favicons?domain="+siteurl+"";
+      img.src = "https://www.google.com/s2/favicons?domain="+siteurl+"";

       li.insertAdjacentHTML("beforeend", "<a class='item' href="+siteurl+"><img src="+img.src+" alt="+extractDomain(siteurl,1)+"/> "+nme+"</a>");
       li.insertAdjacentHTML("beforeend", rmspan[0] + j + "-" + mainlist[i] + rmspan[1]);
       ul.appendChild(li);
     }
 
       li.insertAdjacentHTML("beforeend", "<a class='item' href="+siteurl+"><img src="+img.src+" alt="+extractDomain(siteurl,1)+"/> "+nme+"</a>");
       li.insertAdjacentHTML("beforeend", rmspan[0] + j + "-" + mainlist[i] + rmspan[1]);
       ul.appendChild(li);
     }
 

-    var sortable = Sortable.create(ul, {
+    new Sortable(ul, {

       group: "userlists",
       group: "userlists",

+      animation: 150,

       onUpdate: function (evt) {
         save();
       }
       onUpdate: function (evt) {
         save();
       }


@@ -86,6 +97,46 @@ var userListsCallback = function(lists) {
 
 };
 
 
 };
 

+function dragStart(e) {
+  console.log("Drag started for " + this);
+  console.log(this);
+  dragSrcEl = this;
+  e.dataTransfer.effectAllowed = 'move';
+  e.dataTransfer.setData('text/html', this.innerHTML);
+}
+
+function dragOver(e) {
+  console.log("Object " + this + " is ready to be placed");
+  if (e.preventDefault) {
+    e.preventDefault();
+  }
+  e.dataTransfer.dropEffect = 'move';
+  return false;
+}
+
+function dragEnter(e) {
+  this.classList.add('over');
+}
+
+function dragLeave(e) {
+  this.classList.remove('over');
+}
+
+function drop(e) {
+  if (e.stopPropagation); {
+    e.stopPropagation();
+  }
+  if (dragSrcEl != this) {
+    dragSrcEl.innerHTML = this.innerHTML;
+    this.innerHTML = e.dataTransfer.getData('text/html');
+  }
+  console.log("Saving positions");
+  save();
+  return false;
+}
+
+var dragSrcEl = null;
+

 document.onkeyup=function(e){
   var e = e || window.event; // for IE to cover IEs window event-object
   fields = document.getElementsByClassName("new");
 document.onkeyup=function(e){
   var e = e || window.event; // for IE to cover IEs window event-object
   fields = document.getElementsByClassName("new");


@@ -93,8 +144,8 @@ document.onkeyup=function(e){
     fields[fields.length-1].remove();
     return false;
   }
     fields[fields.length-1].remove();
     return false;
   }

-  if(e.which == 27 && fields != null) {
-    fields[fields.length-1].remove();
+  if(e.which == 13 && fields.length > 0) {
+    fields[fields.length-1].getElementsByClassName("save")[0].click();

     return false;
   }
 }
     return false;
   }
 }


@@ -117,14 +168,14 @@ function listen(li) {
       }
       var li = document.createElement("li");
       li.setAttribute("class", "new");
       }
       var li = document.createElement("li");
       li.setAttribute("class", "new");

-      li.insertAdjacentHTML("beforeend", "<span class='save' tabindex='3' id='input-"+columnToArray(li).length.toString()+"'>&#x2714;</span><input type='text' class='name' value='' placeholder='name' tabindex='1'><br /><input type='text' class='url' value='' placeholder='url' tabindex='2' id='form-"+columnToArray(li).length.toString()+"'>");
+      li.insertAdjacentHTML("beforeend", "<span class='save' tabindex='3' id='input-"+columnToArray(li).length.toString()+"'>&#x2714;</span><input type='text' class='name' value='' placeholder='name' tabindex='1'><br /><input type='url' spellcheck=false class='url' value='' placeholder='url' tabindex='2' id='form-"+columnToArray(li).length.toString()+"'>");

       ul.appendChild(li);
       var span = document.getElementById("input-"+columnToArray(li).length.toString());
       var form = document.getElementById("form-"+columnToArray(li).length.toString());
       span.addEventListener('click', function(event){
         var li = document.getElementsByClassName("new")[0]
         var ul = li.parentNode;
       ul.appendChild(li);
       var span = document.getElementById("input-"+columnToArray(li).length.toString());
       var form = document.getElementById("form-"+columnToArray(li).length.toString());
       span.addEventListener('click', function(event){
         var li = document.getElementsByClassName("new")[0]
         var ul = li.parentNode;

-        if (li.getElementsByClassName("name")[0].value != "" && li.getElementsByClassName("url")[0].value != "") {
+        if (li.getElementsByClassName("name")[0].value != "" && li.getElementsByClassName("url")[0].value != "" && li.getElementsByClassName("url")[0].validity.typeMismatch== false) {

           var newli = document.createElement("li");
           newli.setAttribute("id",r[1]+"-"+columnToArray(ul).length.toString());
           var siteurl = addhttp(li.getElementsByClassName("url")[0].value);
           var newli = document.createElement("li");
           newli.setAttribute("id",r[1]+"-"+columnToArray(ul).length.toString());
           var siteurl = addhttp(li.getElementsByClassName("url")[0].value);


@@ -151,7 +202,7 @@ function listen(li) {
       span.onmouseover = function() {
         nme = document.getElementsByClassName("name")[0];
         url = document.getElementsByClassName("url")[0];
       span.onmouseover = function() {
         nme = document.getElementsByClassName("name")[0];
         url = document.getElementsByClassName("url")[0];

-        if (nme.value === ''  || url.value === '') {
+        if (nme.value === ''  || url.value === '' || url.validity.typeMismatch == true) {

           this.style.background = "#bf616a";
         }
         else {
           this.style.background = "#bf616a";
         }
         else {

diff --git a/newtab.html b/newtab.html
index d8e25a6df0904ec964c7a3976616a3139865ad4f..c2a40aa88e684a91f9e48354d33fee858d6c1ff0 100644 (file)
--- a/newtab.html
+++ b/newtab.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html>
 <!DOCTYPE html>
 <html>

-<head>
+  <head>

     <title>New Tab</title>
     <meta charset="utf-8">
     <meta name=viewport content="width=device-width, initial-scale=1">
     <title>New Tab</title>
     <meta charset="utf-8">
     <meta name=viewport content="width=device-width, initial-scale=1">


@@ -10,11 +10,10 @@
     <script type="text/javascript" src="colours.js" ></script>
     <script src="Sortable.min.js"></script>
 
     <script type="text/javascript" src="colours.js" ></script>
     <script src="Sortable.min.js"></script>
 

-  <link rel="stylesheet" href="style.css">
-  <link rel="stylesheet" href="roboto.css">
-</head>
+    <link rel="stylesheet" href="style.css">
+  </head>

 
 

-<body style="background: #222222;">
-  <div class="favorites" id="links" style="min-height: 283px;"></div>
-</body>
+  <body>
+    <div class="favorites" id="links" style="min-height: 283px;"></div>
+  </body>

 </html>
 </html>

diff --git a/package-lock.json b/package-lock.json
new file mode 100644 (file)
index 0000000..23527a5
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,11 @@
+{
+  "requires": true,
+  "lockfileVersion": 1,
+  "dependencies": {
+    "sortablejs": {
+      "version": "1.10.0-rc3",
+      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.10.0-rc3.tgz",
+      "integrity": "sha512-uw8vZqwI3nkIeAqdrP6N/GDxFW3dY7yz3/rK0GLLoe8aJ2RZALmo6mAwOi+uA7RYuqfz2lm7AACr4ms6gXcb6w=="
+    }
+  }
+}

diff --git a/roboto-v15-latin-700.woff b/roboto-v15-latin-700.woff
deleted file mode 100644 (file)
index bf737c1..0000000
Binary files a/roboto-v15-latin-700.woff and /dev/null differ

diff --git a/roboto-v15-latin-700.woff2 b/roboto-v15-latin-700.woff2
deleted file mode 100644 (file)
index 11cde5d..0000000
Binary files a/roboto-v15-latin-700.woff2 and /dev/null differ

diff --git a/roboto-v15-latin-regular.woff b/roboto-v15-latin-regular.woff
deleted file mode 100644 (file)
index 941dfa4..0000000
Binary files a/roboto-v15-latin-regular.woff and /dev/null differ

diff --git a/roboto-v15-latin-regular.woff2 b/roboto-v15-latin-regular.woff2
deleted file mode 100644 (file)
index 120796b..0000000
Binary files a/roboto-v15-latin-regular.woff2 and /dev/null differ

diff --git a/roboto.css b/roboto.css
deleted file mode 100644 (file)
index 2c6181d..0000000
--- a/roboto.css
+++ /dev/null
@@ -1,18 +0,0 @@
-/* roboto-regular - latin */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Roboto'), local('Roboto-Regular'),
-       url('./roboto-v15-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-       url('./roboto-v15-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-/* roboto-700 - latin */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 700;
-  src: local('Roboto Bold'), local('Roboto-Bold'),
-       url('./roboto-v15-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-       url('./roboto-v15-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}

diff --git a/sort.js b/sort.js
new file mode 100644 (file)
index 0000000..84c675d
--- /dev/null
+++ b/sort.js
@@ -0,0 +1,25 @@
+var selected
+
+function dragOver( e ) {
+  if ( isBefore( selected, e.target ) ) e.target.parentNode.insertBefore( selected, e.target )
+  else e.target.parentNode.insertBefore( selected, e.target.nextSibling )
+}
+
+function dragEnd() {
+  selected = null
+}
+
+function dragStart( e ) {
+  e.dataTransfer.effectAllowed = "move"
+  e.dataTransfer.setData( "text/plain", null )
+  selected = e.target
+}
+
+function isBefore( el1, el2 ) {
+  var cur
+  if ( el2.parentNode === el1.parentNode ) {
+    for ( cur = el1.previousSibling; cur; cur = cur.previousSibling ) {
+      if (cur === el2) return true
+    }
+  } else return false;
+}

diff --git a/style.css b/style.css
index ad983955abd90a25e5b5542fecd9a1f50cdeffd3..0093262a2c441c91b03bb6b0c9186224c2906f77 100644 (file)
--- a/style.css
+++ b/style.css
@@ -33,6 +33,7 @@ ul {
   padding: 0;
   width: 10rem;
   margin: 0.5rem 2em 2em 2em;
   padding: 0;
   width: 10rem;
   margin: 0.5rem 2em 2em 2em;

+  float: left;

 }
 
 img {
 }
 
 img {


@@ -116,6 +117,10 @@ input.url {
   display: flex;
 }
 
   display: flex;
 }
 

+.title p:hover {
+  cursor: move;
+}
+

 .title:hover .add:not(:hover),
 li:hover > .remove:not(:hover) {
   display: flex;
 .title:hover .add:not(:hover),
 li:hover > .remove:not(:hover) {
   display: flex;


@@ -149,10 +154,19 @@ a, ul > .title > p {
   display: inline-block;
 }
 
   display: inline-block;
 }
 

-li.sortable-chosen.sortable-ghost > a {
+li.sortable-chosen.sortable-ghost {

   background-color: var(--hover-bg-2);
 }
 
   background-color: var(--hover-bg-2);
 }
 

+.over {
+ /* border: 2px dashed var(--default-fg);*/
+}
+
+.glyphicon-move {
+  cursor: move;
+  cursor: -webkit-grabbing;
+}
+

 .title {
   margin-bottom: 0.5rem;
   font-weight: bold;
 .title {
   margin-bottom: 0.5rem;
   font-weight: bold;