modify links field to specify text and uri

3 files changed, 64 insertions, 34 deletions

diff --git a/themes/okadmin/public/css/main.css b/themes/okadmin/public/css/main.css
index a5fbdeb..9289fdf 100644
--- a/themes/okadmin/public/css/main.css
+++ b/themes/okadmin/public/css/main.css
@@ -305,6 +305,14 @@ button, input[type=submit] {
 .main.resource form .video-element input[type=text] {
   width: 15em;
 }
+.main.resource form .group input[type=text].link-input,
+.main.resource form .group input[type=text].link-input-new {
+  width: 13.05em;
+  padding: 0 0 0 0.5em;
+}
+.main.resource form .links li {
+  height: auto;
+}
 .main .link-list .add-link-btn,
 .main .link-list .remove-link-btn {
   margin: 0;
diff --git a/themes/okadmin/public/js/app.js b/themes/okadmin/public/js/app.js
index edf9980..17b35d0 100644
--- a/themes/okadmin/public/js/app.js
+++ b/themes/okadmin/public/js/app.js
@@ -120,35 +120,25 @@ var OKAdmin = function(){
     e.stopPropagation()
     var $delegate = $(e.delegateTarget)
     var $list = $delegate.find('.links')
-    var length = $list.find('input').length
-    var name = $delegate.parent('.property').data('name')
-    var $new = $delegate.find('.link-input-new')
-    var input = document.createElement('input')
-    var delBtn = document.createElement('button')
-    var inputName = name + '[' + length + ']'
-    $(input).attr({
-      name: inputName,
-      type: 'text',
-      value: $new.val()
-    })
-    $list.append(input)
-    $(delBtn).addClass('remove-link-btn')
-    $(delBtn).data('for', inputName)
-    delBtn.innerHTML = '-'
-    $list.append(delBtn)
-    $new.val('')
+    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()
+    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("")
   })
 
   // Remove a link from the list
   $('.link-list').on('click', '.remove-link-btn', function(e) {
     e.preventDefault()
     e.stopPropagation()
-    var $delegate = $(e.delegateTarget)
     var $target = $(e.target)
-    var inputName = $target.data('for')
-    var $input = $delegate.find('[name="' + inputName + '"]')
-    $input.remove()
-    $target.remove()
+    $target.closest("li").remove()
   })
 
   // fix post indexing in list-driven inputs
diff --git a/themes/okadmin/templates/partials/inputs.liquid b/themes/okadmin/templates/partials/inputs.liquid
index c6efc68..55d5fb8 100644
--- a/themes/okadmin/templates/partials/inputs.liquid
+++ b/themes/okadmin/templates/partials/inputs.liquid
@@ -79,26 +79,58 @@
                value="{{spec.value}}"
                placeholder="Enter a comma separated list of tags.">
       </div>
-    {% elsif type == 'link-list' %}
 
+    {% elsif type == 'link-list' %}
       <div class="link-list group">
         <div class="links">
-          {% for url in spec.value %}
-            <input
-                name="{{name}}[{{forloop.index0}}]"
-                value="{{url}}"
-                type="text"
-                class="link-input">
-            <button class="remove-link-btn"
-                    data-for="{{name}}[{{forloop.index0}}]">
-              -
-            </button>
+          {% for link in spec.value %}
+            <li>
+              <input
+                  name="{{name}}[][text]"
+                  value="{{link.text}}"
+                  type="text"
+                  placeholder="Link text"
+                  class="link-input link-text">
+              <input
+                  name="{{name}}[][uri]"
+                  value="{{link.uri}}"
+                  type="text"
+                  placeholder="URL"
+                  class="link-input link-uri">
+              <button class="remove-link-btn">
+                -
+              </button>
+            </li>
           {% endfor %}
         </div>
         <input type="text"
-               class="link-input-new"
+               class="link-input-new link-text"
+               placeholder="Link text">
+        <input type="text"
+               class="link-input-new link-uri"
                placeholder="http://www.example.com">
         <button class="add-link-btn">+</button>
+
+        <script type="text/html" class="link-template">
+          <li>
+            <input
+                name="{{name}}[][text]"
+                value=""
+                type="text"
+                placeholder="Link text"
+                class="link-input link-text">
+            <input
+                name="{{name}}[][uri]"
+                value=""
+                type="text"
+                placeholder="URL"
+                class="link-input link-uri">
+            <button class="remove-link-btn">
+              -
+            </button>
+          </li>
+        </script>
+
       </div>
 
     {% elsif type == 'media-list' %}