Refactored the draggable setup into the plempable jQuery plugin

public/javascripts/plemp-ui.js

@@ -1,5 +1,5 @@
 $(document).ready(function() {
-  // Handlers for showing/hiding the upload dialog via buttons & keys.
+  // Handlers for showing/hiding the upload dialog via clicks & keys.
   $("#add").click(show_add_dialog);
   $("#add_form #cancel").click(hide_add_dialog);
   if ($.browser.mozilla) {
@@ -9,50 +9,59 @@ $(document).ready(function() {
     $(document).keyup(key_handler);
   }
 
+  // The plempable jQuery plugin containing most of the Plemp! UI
+  // functionality.
+  $.fn.plempable = function(data) {
+    console.log(data);
+    this.draggable({ stack: ".draggable",
+                     containment: "window",
+                     stop: update_drag_info })
+        .hover(function() { $(this).find(".comments").fadeIn(); },
+               function() { $(this).find(".comments").fadeOut(); });
+    this.find(".delete").click({ id: this.id,
+                                 element: this },
+                               delete_draggable);
+    this.find(".title").editable('draggables/' + this.id,
+                                 { tooltip: "Click to edit…",
+                                   name: 'title',
+                                   submit: 'OK',
+                                   cancel: 'Discard',
+                                   style: 'inherit' });
+    // FIXME: actually get the comments!
+    this.find(".comments").text("Comments (0)").hide();
+    // Highlight contained code.
+    this.find("pre code").each(function(idx, elem) {
+      hljs.highlightBlock(elem, '  ');
+    });
+  };
+
   // Populate the canvas with the draggables.
   $.get("draggables", function(data) {
-    var last_drag;
+    $.each(data, function(drag_id, drag_info) {
-    $.each(data, function(key, val) {
+       $.get("draggables/" + drag_id, function(data) {
-       $.get("draggables/" + key, function(data) {
          $("#draggables").append(data);
          // Assume we have appended one draggable here:
-         last_drag = $(".draggable").last();
+         $(".draggable").last().plempable(drag_info);
-         last_drag.draggable({ stack: ".draggable",
+       });
-                               containment: "window",
+    });
-                               stop: update_drag_info });
-         last_drag.find(".delete").click({ id: last_drag[0].id,
-                                           element: last_drag },
-                                           delete_draggable);
-         last_drag.find(".title").editable('draggables/' + last_drag[0].id,
-                                           { tooltip: "Click to edit…",
-                                             name: 'title',
-                                             submit: 'OK',
-                                             cancel: 'Discard',
-                                             style: 'inherit' });
-         last_drag.hover(function() { $(this).find(".comments").fadeIn(); },
-                         function() { $(this).find(".comments").fadeOut(); });
-         // FIXME: get the comments!
-         last_drag.find(".comments").text("Comments (0)").hide();
-         // Highlight contained code.
-         last_drag.find("pre code").each(function(idx, elem) {
-           hljs.highlightBlock(elem, '  ');
-         });
-       })
-    })
   }, "json");
 });
 
 // Callback functions.
+
+// Show the add dialog with a visual effect.
 function show_add_dialog() {
   $('#add_dialog').fadeIn('slow');
 }
 
+// Hide the add dialog with a visual effect and reset the form when finished.
 function hide_add_dialog() {
   $("#add_dialog").fadeOut('fast', function() {
     $("#add_form")[0].reset();
   });
 }
 
+// Delete a draggable on the server; remove it with a visual effect.
 function delete_draggable(event) {
   drag_id = event.data.id
   $.post("draggables/" + drag_id, {"_method": "delete"}, function(data) {
@@ -63,10 +72,12 @@ function delete_draggable(event) {
   }, "json");
 }
 
+// Update the position of a draggable on the server.
 function update_drag_info(event, ui) {
   $.post("draggables/" + ui.helper.context.id, ui.position, "json");
 }
 
+// Handle the Escape and Plus keys for hiding/showing the add dialog.
 function key_handler(event) {
   switch (event.keyCode) {
     case 27: /* Escape */