single image upload field, abstract upload class a bit

4 files changed, 160 insertions, 99 deletions

diff --git a/themes/okadmin/public/css/main.css b/themes/okadmin/public/css/main.css
index ec426f9..685e368 100644
--- a/themes/okadmin/public/css/main.css
+++ b/themes/okadmin/public/css/main.css
@@ -228,7 +228,9 @@ button, input[type=submit] {
   border: 0;
   display: none;
 }
-.main.resource form .group.loaded input:first-child,
+.main.resource form .group.image input,
+.main.resource form .group.video input:first-child,
+.main.resource form .group.loaded.video input[type=text],
 .main.resource form .group input:first-child {
   display: block;
   width: 25em;
@@ -238,17 +240,24 @@ button, input[type=submit] {
 }
 .main.resource form .group.loaded input {
   display: block;
-  width: 20.05em;
 }
-.main.resource form .group input {
-  display: none;
+.main.resource form .group input[type=text] {
+  width: 20.05em;
   margin-bottom: 0.1em;
 }
+.main.resource form .group.image .image-element,
+.main.resource form .group.video input[type=text],
 .main.resource form .group.loaded input[hidden],
+.main.resource form .group.image.loaded .fields,
 .main.resource form input[hidden] {
   display: none;
 }
-
+.main.resource form .group.image.loaded .image-element {
+  display: block;
+}
+.main.resource form .fields {
+  height: 3em;
+}
 .main.resource form textarea {
   padding: 0.5em;
   height: 15em;
@@ -280,6 +289,8 @@ button, input[type=submit] {
   width: 10em;
   max-height: 10em;
   border: 0;
+}
+.main.resource form .images img {
   cursor: -webkit-grab;
   cursor: grab;
 }
@@ -313,10 +324,10 @@ button, input[type=submit] {
   margin: 0; padding: 0;
   cursor: pointer;
 }
-li.image-element:hover .remove-image {
+.image-element:hover .remove-image {
   display: block;
 }
-li.image-element .remove-image:hover {
+.image-element .remove-image:hover {
 	color: red;
 }
 .remove-image {
diff --git a/themes/okadmin/public/js/app.js b/themes/okadmin/public/js/app.js
index 22317f3..baa4873 100644
--- a/themes/okadmin/public/js/app.js
+++ b/themes/okadmin/public/js/app.js
@@ -1,38 +1,75 @@
 var OKAdmin = function(){
   
-  // initialize our (single) ajax image uploader with an element and a template
-  OKUpload.bind( document.getElementById("file") )
-  OKUpload.add = function(data){
-    var url = data[0].extra.Location
-    add_image(url)
-  }
-
-  // also handle straight image urls
-  $("#add-image-url").keydown(pressEnter(function(e){
-    var url = $(this).val()
-    $(this).val("")
-    add_image(url)
-  }))
+  // initialize our multi-image uploader with an element and a template
+  $(".image-list").each(function(){
+    var uploader = new OKUpload ()
+    uploader.bind( $(".add-image-button input", this) )
+    uploader.add = function(data){
+      var url = data[0].extra.Location
+      add_image(url)
+    }
+    // also handle straight image urls
+    $(".add-image-url", this).keydown(pressEnter(function(e){
+      var url = $(this).val()
+      $(this).val("")
+      add_image(url)
+    }))
 
-  // clone and populate template
-  function add_image(url){
-    var imageTemplate = $("#captioned-image-template").html()
-    var $el = $(imageTemplate)
-    $el.find(".uri").val(url)
-    $el.find("img").attr("src", url)
-    $(".captioned-image-list ol").append($el)
-  }
+    // clone and populate template
+    function add_image(url){
+      var imageTemplate = $("#captioned-image-template").html()
+      var $el = $(imageTemplate)
+      $el.find(".uri").val(url)
+      $el.find("img").attr("src", url)
+      $(".captioned-image-list ol").append($el)
+    }
+  })
+  // delete image from gallery
+  $(document).on("mousedown", ".image-list .remove-image", function(){
+    if (confirm("Delete this image?")) {
+      $(this).parent().remove()
+    }
+  })
 
-  // make the region sortable with drag-and-drop
-  $(".captioned-image-list ol").sortable()
-  $(".captioned-image-list ol").disableSelection()
+  // initialize our single image uploader with existing DOM
+  $(".image").each(function(){
+    var $el = $(this)
+    
+    var uploader = new OKUpload ()
+    uploader.bind( $(".add-image-button input", this) )
+    uploader.add = function(data){
+      var url = data[0].extra.Location
+      add_image(url)
+    }
+    // also handle straight image urls
+    $(".add-image-url", this).keydown(pressEnter(function(e){
+      var url = $(this).val()
+      $(this).val("")
+      add_image(url)
+    }))
 
-  // delete image
-  $(document).on("mousedown", ".remove-image", function(){
+    // clone and populate template
+    function add_image(url){
+      $el.find(".uri").val(url)
+      $el.find(".caption").val("")
+      $el.find("img").attr("src", url)
+      $el.addClass("loaded")
+    }
+  })
+  // delete image from single image entry
+  $(document).on("mousedown", ".image .remove-image", function(){
     if (confirm("Delete this image?")) {
-      $(this).parent().remove()
+      var $el = $(this).closest(".image")
+      $el.removeClass('loaded')
+      $el.find(".uri").val("")
+      $el.find(".caption").val("")
+      $el.find("img").attr("src", "")
     }
   })
+
+  // make the region sortable with drag-and-drop
+  $(".captioned-image-list ol").sortable()
+  $(".captioned-image-list ol").disableSelection()
   
   // populate a video field with info from our url parser
   var last_url
diff --git a/themes/okadmin/public/js/upload.js b/themes/okadmin/public/js/upload.js
index 1c9094c..39f7427 100644
--- a/themes/okadmin/public/js/upload.js
+++ b/themes/okadmin/public/js/upload.js
@@ -1,55 +1,48 @@
 
-var OKUpload = {
-	action: "/_services/image",
-	
-	bind: function(el){
-	  if (! el) return
-		el.addEventListener("change", OKUpload.handleFileSelect)
-	},
-
-  handleFileSelect: function(e) {
-    e.stopPropagation();
-    e.preventDefault();
-
-    var files = e.dataTransfer ? e.dataTransfer.files : e.target.files;
-
-    for (var i = 0, f; f = files[i]; i++) {
-      if ( ! f.type.match('image.*')) {
-        continue;
-      }
-			OKUpload.upload(f)
-    }
-  },
+var OKUpload = function(){
+	this.action = "/_services/image"
+}
+OKUpload.prototype.bind = function(el){
+  if (el.length) el = el[0]
+  el.addEventListener("change", this.handleFileSelect.bind(this))
+}
+OKUpload.prototype.handleFileSelect = function(e) {
+  e.stopPropagation();
+  e.preventDefault();
 
-  upload: function(f){
-    var fd = new FormData()
-    fd.append('image', f)
+  var files = e.dataTransfer ? e.dataTransfer.files : e.target.files;
 
-    var request = $.ajax({
-      url: OKUpload.action,
-      type: "post",
-      data: fd,
-      dataType: "json",
-      processData: false,
-      contentType: false,
-    })
-    request.done(OKUpload.success)
-  },
-  
-  success: function(media){
-    if (media.error) {
-      console.log(media.error)
-      return
+  for (var i = 0, f; f = files[i]; i++) {
+    if ( ! f.type.match('image.*')) {
+      continue;
     }
-    OKUpload.add(media)
-  },
-  
-  add: function(media){
-    console.log(media)
-  },
-  
-  error: function(error){
-    throw error
-  },
+    this.upload(f)
+  }
+}
+OKUpload.prototype.upload = function(f){
+  var fd = new FormData()
+  fd.append('image', f)
 
+  var request = $.ajax({
+    url: this.action,
+    type: "post",
+    data: fd,
+    dataType: "json",
+    processData: false,
+    contentType: false,
+  })
+  request.done(this.success.bind(this))
+}
+OKUpload.prototype.success = function(media){
+  if (media.error) {
+    console.log(media.error)
+    return
+  }
+  this.add(media)
+}
+OKUpload.prototype.add = function(media){
+  console.log(media)
+}
+OKUpload.prototype.error = function(error){
+  throw error
 }
diff --git a/themes/okadmin/templates/partials/inputs.liquid b/themes/okadmin/templates/partials/inputs.liquid
index 253b275..c9a4d92 100644
--- a/themes/okadmin/templates/partials/inputs.liquid
+++ b/themes/okadmin/templates/partials/inputs.liquid
@@ -22,15 +22,48 @@
     {% elsif type == 'video' %}
       <div class="video group {% if spec.value.url %}loaded{% endif %}">
         <input name="{{name}}[url]" type="text" value="{{spec.value.url}}" class="url" placeholder="Enter a video URL">
-        <input name="{{name}}[type]" type="text" value="{{spec.value.type}}" class="video-type" hidden>
-        <input name="{{name}}[token]" type="text" value="{{spec.value.token}}" class="video-token" hidden>
+        <input name="{{name}}[type]" type="hidden" value="{{spec.value.type}}" class="video-type" hidden>
+        <input name="{{name}}[token]" type="hidden" value="{{spec.value.token}}" class="video-token" hidden>
         <label>Title</label>
         <input name="{{name}}[title]" type="text" value="{{spec.value.title}}" class="video-title">
         <label>Thumbnail</label>
         <input name="{{name}}[thumb]" type="text" value="{{spec.value.thumb}}" class="video-thumb">
       </div>
+    {% elsif type == 'image' %}
+      <div class="image group {% if spec.value.uri %}loaded{% endif %}">
+        <div class="fields">
+          <div class="add-image-button">
+            <input type="file" accept="image/*">
+            <button>+ Add image</button>
+          </div>
+          <input class="add-image-url" type="text" placeholder="+ Add URL">
+        </div>
+        <div class="image-element">
+          <input class="uri" type="hidden" name="{{name}}[uri]" value="{{spec.value.uri}}">
+          <textarea class="caption" name="{{name}}[caption]">{{spec.value.caption}}</textarea>
+          <img src="{{spec.value.uri}}" alt="{{spec.value.caption}}">
+          <button class="remove-image">x</button>
+        </div>
+      </div>
     {% elsif type == 'captioned-image-list' %}
-      <div class="image group loaded">
+      <div class="image-list group loaded">
+        <div class="fields">
+          <div class="add-image-button">
+            <input type="file" accept="image/*" multiple>
+            <button>+ Add images</button>
+          </div>
+          <input class="add-image-url" type="text" placeholder="+ Add URL">
+        </div>
+
+        <script type="text/html" id="captioned-image-template">
+          <li class="image-element">
+            <input class="uri" type="hidden" name="{{name}}[][uri]" value="">
+            <textarea class="caption" name="{{name}}[][caption]"></textarea>
+            <img alt="{{image.caption}}">
+            <button class="remove-image">x</button>
+          </li>
+        </script>
+
         <ol>
           {% for image in spec.value %}
             <li class="image-element">
@@ -41,19 +74,6 @@
             </li>
           {% endfor %}
         </ol>
-        <div class="add-image-button">
-          <input id="file" type="file" accept="image/*" multiple>
-          <button>+ Add images</button>
-        </div>
-        <input id="add-image-url" type="text" placeholder="+ Add URL">
-        <script type="text/html" id="captioned-image-template">
-          <li class="image-element">
-            <input class="uri" type="hidden" name="{{name}}[][uri]" value="">
-            <textarea class="caption" name="{{name}}[][caption]"></textarea>
-            <img alt="{{image.caption}}">
-            <button class="remove-image">x</button>
-          </li>
-        </script>
       </div>
     {% elsif type == 'meta' %}
       <input class="hidden" type="hidden" name="{{name}}" value="{{spec.value}}">