The rearrange module will now add an album if you drag the "new album" onto the album tree. I haven't had a chance to figure out why the form does get any styling or why a textarea is no included as a list item.

3 files changed, 57 insertions, 6 deletions

diff --git a/modules/rearrange/css/rearrange.css b/modules/rearrange/css/rearrange.css
index 216841ea..65fff8b0 100644
--- a/modules/rearrange/css/rearrange.css
+++ b/modules/rearrange/css/rearrange.css
@@ -12,6 +12,26 @@
   cursor: pointer;
 }
 
+#gAddAlbumPopup {
+  display: none;
+  position: absolute;
+  border: 1px solid #6fa5fd;
+  z-index: 2;
+  background: #ffffff;
+}
+
+#gAddAlbumPopupClose {
+  font-size:14px;  
+  line-height:14px;  
+  right:6px;  
+  top:4px;  
+  position:absolute;  
+  color:#6fa5fd;  
+  font-weight:700;  
+  display:block;
+  cursor: pointer;
+}
+
 #gDeleteItem {
   background-image: url(../images/bin_closed.png);
   background-repeat: no-repeat;
diff --git a/modules/rearrange/js/jquery.gallery.rearrange.tree.js b/modules/rearrange/js/jquery.gallery.rearrange.tree.js
index b2ad2810..399064ff 100644
--- a/modules/rearrange/js/jquery.gallery.rearrange.tree.js
+++ b/modules/rearrange/js/jquery.gallery.rearrange.tree.js
@@ -71,10 +71,7 @@ if(jQuery) (function($){
               accept: "#gAddAlbum",
               hoverClass: "droppable-hover",
               drop: function(ev, ui) {
-                source_element = ui.draggable;
-                source_parent = source_element.parent();
-                target = ui.element;
-                alert(source_element.attr("rel") + "\n" + target.attr("id"));
+                addAlbum(ui.element);
               }
             });
             if ($(c).hasClass('treeitem')) {
@@ -115,8 +112,7 @@ if(jQuery) (function($){
                 $(this).parent().removeClass('collapsed').addClass('expanded');
               } else {
                 // Collapse
-                $(this).parent().find('UL').slideUp({ duration: o.collapseSpeed, easing: o.collapseEasing });
-                $(this).parent().removeClass('expanded').addClass('collapsed');
+                collapse($(this).parent());
               }
             } else {
               h($(this).attr('rel'));
@@ -126,6 +122,37 @@ if(jQuery) (function($){
           // Prevent A from triggering the # on non-click events
           if( o.folderEvent.toLowerCase != 'click' ) $(t).find('LI A').bind('click', function() { return false; });
         }
+
+        function addAlbum(parent) {
+          $("#gAddAlbumPopupClose").click(function() {  
+            $("#gAddAlbumPopup").css({"display": "none"});
+          });
+
+          $.get("form/add/albums/" + parent.attr("id"), {}, function(data) {
+            $("#gAddAlbumArea").html(data);
+            $("#gAddAlbumForm").ajaxForm({
+              complete: function(xhr, statusText) {
+                //$("#gAddAlbumForm").replaceWith(xhr.responseText);
+                if (xhr.status == 200) {
+                  $("#gAddAlbumPopup").css({"display": "none"});
+                  collapse(parent);
+                  showTree(parent, parent.attr("id"));
+                }
+              }
+            });
+            $("#gAddAlbumPopup").css({
+              "display": "block",
+              "top": $("#gAddAlbum").offsetTop + $("#gAddAlbum").offsetHeight,
+              "left":$("#gAddAlbum").offsetLeft
+            });
+          });
+        }
+
+        function collapse(parent) {
+          parent.find('UL').slideUp({ duration: o.collapseSpeed, easing: o.collapseEasing });
+          parent.removeClass('expanded').addClass('collapsed');
+        }
+
         // Loading message
         $(this).html('<ul class="jqueryFileTree start"><li class="wait">' + o.loadMessage + '<li></ul>');
         // Get the initial file list
diff --git a/modules/rearrange/views/rearrange.html.php b/modules/rearrange/views/rearrange.html.php
index e1c03af2..24ccfb50 100644
--- a/modules/rearrange/views/rearrange.html.php
+++ b/modules/rearrange/views/rearrange.html.php
@@ -8,6 +8,10 @@ $(document).ready( function() {
 </script>
 <div id="gRearrange">
   <span id="gAddAlbum" rel="gAddAlbum">New Album</span>
+  <div id="gAddAlbumPopup">
+    <a id="gAddAlbumPopupClose">x</a>
+    <div id="gAddAlbumArea"></div>
+  </div>
   &nbsp;
   <span id="gDeleteItem">Delete</span>
   <hr/>