single image upload field, abstract upload class a bit

2 files changed, 106 insertions, 76 deletions

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
 }