make links sortablev0.1.20

3 files changed, 33 insertions, 14 deletions

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>