From e923cb0e5e1efac4fba534aba87f6b6e9d95d3f0 Mon Sep 17 00:00:00 2001
From: Sean Fridman <fridman@mail.sfsu.edu>
Date: Tue, 2 Jun 2015 15:55:45 -0400
Subject: Add link-list field type

---
 themes/okadmin/public/css/main.css              |  6 ++++
 themes/okadmin/public/js/app.js                 | 39 ++++++++++++++++++++++++-
 themes/okadmin/templates/partials/inputs.liquid | 25 +++++++++++++++-
 3 files changed, 68 insertions(+), 2 deletions(-)

diff --git a/themes/okadmin/public/css/main.css b/themes/okadmin/public/css/main.css
index e5af10c..094e66b 100644
--- a/themes/okadmin/public/css/main.css
+++ b/themes/okadmin/public/css/main.css
@@ -301,6 +301,12 @@ button, input[type=submit] {
 .main.resource form .video-element input[type=text] {
   width: 15em;
 }
+.main .link-list .add-link-btn,
+.main .link-list .remove-link-btn {
+  margin: 0;
+  height: 2em;
+  line-height: 1em;
+}
 .add-image-button {
   background: #ddd;
   clear: left;
diff --git a/themes/okadmin/public/js/app.js b/themes/okadmin/public/js/app.js
index 2667ce6..f989c7b 100644
--- a/themes/okadmin/public/js/app.js
+++ b/themes/okadmin/public/js/app.js
@@ -99,7 +99,44 @@ var OKAdmin = function(){
       $el.parent().find(".video-thumb").val( media.thumbnail )
     })
   }))
-  
+
+  // Add a new link to the list
+  $('.link-list').on('click', '.add-link-btn', function(e) {
+    e.preventDefault()
+    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('')
+  })
+
+  // 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()
+  })
+
   // fix post indexing in list-driven inputs
   $(".main.resource form").submit(function(e){
     var $id = $("[name=id]"), $title = $("[name=title]"), $menu = $("[name=menu]"), $section = $(".resource.main")
diff --git a/themes/okadmin/templates/partials/inputs.liquid b/themes/okadmin/templates/partials/inputs.liquid
index 25ad197..0d5321b 100644
--- a/themes/okadmin/templates/partials/inputs.liquid
+++ b/themes/okadmin/templates/partials/inputs.liquid
@@ -3,7 +3,8 @@
   {% assign spec = pair[1] %}
   {% assign type = spec.type %}
 
-  <div class="property {{type}} {% if spec.hidden %}hidden{% endif %}">
+  <div class="property {{type}} {% if spec.hidden %}hidden{% endif %}"
+       data-name="{{name}}">
     <label for="{{name}}">{{name | capitalize}}</label>
 
     {% if type == 'string' %}
@@ -54,6 +55,28 @@
         <input id="{{name}}-input" name="{{name}}" value="{{spec.value}}"
             placeholder="Enter a comma separated list of tags.">
       </div>
+    {% 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>
+          {% endfor %}
+        </div>
+        <input type="text"
+               class="link-input-new"
+               placeholder="http://www.example.com">
+        <button class="add-link-btn">+</button>
+      </div>
+
     {% elsif type == 'media-list' %}
       <div class="media-list group loaded">
         <div class="fields">
-- 
cgit v1.2.3-70-g09d2