From 49fe25c8e884c14ab3258d22240a62f0b57da490 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Mon, 28 Mar 2016 16:15:46 -0400
Subject: make links sortable

---
 examples/db.json                                | 33 ++++++++++++-------------
 themes/okadmin/public/css/main.css              |  9 ++++++-
 themes/okadmin/public/js/app.js                 | 19 ++++++++++----
 themes/okadmin/templates/partials/inputs.liquid | 19 ++++++++------
 4 files changed, 49 insertions(+), 31 deletions(-)

diff --git a/examples/db.json b/examples/db.json
index 5e10d60..9ab7233 100644
--- a/examples/db.json
+++ b/examples/db.json
@@ -92,22 +92,6 @@
       },
       "__index": 3,
       "id": "croissant"
-    },
-    {
-      "type": "Test",
-      "title": "Testing",
-      "description": "",
-      "color": "red",
-      "video": {
-        "url": "",
-        "type": "",
-        "token": "",
-        "title": "",
-        "thumb": ""
-      },
-      "__index": "5",
-      "dateCreated": "Mon, 28 Mar 2016 18:49:32 GMT",
-      "images": []
     }
   ],
   "page": [
@@ -123,7 +107,22 @@
       "title": "ok...",
       "body": "2406 Old Rd, San Juan Bautista",
       "id": "contact",
-      "__index": 0
+      "__index": "0",
+      "links": [
+        {
+          "text": "US Bread Board",
+          "uri": "http://bread.com/"
+        },
+        {
+          "text": "National Council on Grain",
+          "uri": "http://grain.org/"
+        },
+        {
+          "text": "USDA",
+          "uri": "http://usda.gov/"
+        }
+      ],
+      "dateCreated": ""
     }
   ]
 }
\ No newline at end of file
diff --git a/themes/okadmin/public/css/main.css b/themes/okadmin/public/css/main.css
index 9289fdf..df0ca43 100644
--- a/themes/okadmin/public/css/main.css
+++ b/themes/okadmin/public/css/main.css
@@ -310,8 +310,15 @@ button, input[type=submit] {
   width: 13.05em;
   padding: 0 0 0 0.5em;
 }
+.handle {
+  display: block;
+  width: 1em;
+  height: 2em;
+  background: #ddd;
+  float: left;
+}
 .main.resource form .links li {
-  height: auto;
+  height: 2em;
 }
 .main .link-list .add-link-btn,
 .main .link-list .remove-link-btn {
diff --git a/themes/okadmin/public/js/app.js b/themes/okadmin/public/js/app.js
index 17b35d0..da398eb 100644
--- a/themes/okadmin/public/js/app.js
+++ b/themes/okadmin/public/js/app.js
@@ -91,7 +91,7 @@ var OKAdmin = function(){
   })
 
   // make the region sortable with drag-and-drop
-  $(".media-list ol, .image-list ol").sortable()
+  $(".media-list ol, .image-list ol, .link-list .links").sortable()
   $(".media-list ol, .image-list ol").disableSelection()
 
   // populate a video field with info from our url parser
@@ -115,20 +115,22 @@ var OKAdmin = function(){
   }))
 
   // Add a new link to the list
-  $('.link-list').on('click', '.add-link-btn', function(e) {
-    e.preventDefault()
-    e.stopPropagation()
+  $('.link-list').on('click', '.add-link-btn', function addNewLink (e) {
+    e.preventDefault && e.preventDefault()
+    e.stopPropagation && e.stopPropagation()
     var $delegate = $(e.delegateTarget)
     var $list = $delegate.find('.links')
+    var linkCount = $list.find("li").length
+    
     var $linkText = $delegate.find(".link-input-new.link-text")
     var $linkURI = $delegate.find(".link-input-new.link-uri")
     
     var template = $delegate.find(".link-template").html()
+    template = template.replace(/\[\]/g, "[" + linkCount + "]")
     var $el = $(template)
     $el.find(".link-text").val( $linkText.val() )
     $el.find(".link-uri").val( $linkURI.val() )
     $list.append($el)
-    console.log($list, template)
     $linkText.val("")
     $linkURI.val("")
   })
@@ -195,6 +197,13 @@ var OKAdmin = function(){
         input.checked = true
       }
     })
+    
+    $(".link-list").each(function(){
+      var $inputs = $(this).find(".link-input-new")
+      if ($inputs.eq(0).val() && $inputs.eq(1).val()) {
+        $(this).find(".add-link-btn").trigger("click")
+      }
+    })
 
     $("ol").each(function(){
       $("li", this).each(function(index){
diff --git a/themes/okadmin/templates/partials/inputs.liquid b/themes/okadmin/templates/partials/inputs.liquid
index 55d5fb8..4acb435 100644
--- a/themes/okadmin/templates/partials/inputs.liquid
+++ b/themes/okadmin/templates/partials/inputs.liquid
@@ -82,17 +82,18 @@
 
     {% elsif type == 'link-list' %}
       <div class="link-list group">
-        <div class="links">
+        <ol class="links">
           {% for link in spec.value %}
             <li>
+              <div class="handle"></div>
               <input
-                  name="{{name}}[][text]"
+                  name="{{name}}[{{forloop.index0}}][text]"
                   value="{{link.text}}"
                   type="text"
                   placeholder="Link text"
                   class="link-input link-text">
               <input
-                  name="{{name}}[][uri]"
+                  name="{{name}}[{{forloop.index0}}][uri]"
                   value="{{link.uri}}"
                   type="text"
                   placeholder="URL"
@@ -102,7 +103,8 @@
               </button>
             </li>
           {% endfor %}
-        </div>
+        </ol>
+        
         <input type="text"
                class="link-input-new link-text"
                placeholder="Link text">
@@ -113,6 +115,7 @@
 
         <script type="text/html" class="link-template">
           <li>
+            <div class="handle"></div>
             <input
                 name="{{name}}[][text]"
                 value=""
@@ -172,12 +175,12 @@
             {% if image.token %}
               <li class="video-element">
                 <div style="float: left">
-                <input name="{{name}}[][type]" value="{{image.type}}" type="hidden" class="video-type" hidden>
-                <input name="{{name}}[][token]" value="{{image.token}}" type="hidden" class="video-token" hidden>
+                <input name="{{name}}[{{forloop.index0}}][type]" value="{{image.type}}" type="hidden" class="video-type" hidden>
+                <input name="{{name}}[{{forloop.index0}}][token]" value="{{image.token}}" type="hidden" class="video-token" hidden>
                 <label>Caption</label>
-                <input name="{{name}}[][title]" value="{{image.title}}" type="text" class="video-title">
+                <input name="{{name}}[{{forloop.index0}}][title]" value="{{image.title}}" type="text" class="video-title">
                 <label>Thumbnail</label>
-                <input name="{{name}}[][thumb]" value="{{image.thumb}}" type="text" class="video-thumb">
+                <input name="{{name}}[{{forloop.index0}}][thumb]" value="{{image.thumb}}" type="text" class="video-thumb">
                 </div>
                 <img src="{{image.thumb}}">
                 <button class="remove">x</button>
-- 
cgit v1.2.3-70-g09d2