Create a thumbnail stack of selected thumbnails for the organize

drawer

3 files changed, 43 insertions, 12 deletions

diff --git a/modules/organize/css/organize.css b/modules/organize/css/organize.css
index 42534ec6..765ef169 100644
--- a/modules/organize/css/organize.css
+++ b/modules/organize/css/organize.css
@@ -212,12 +212,19 @@
 }
 
 #gOrganizeFormThumbs {
-  padding: .5em;
-  height: 7em;
   overflow: hidden;
+  min-height: 150px;
 }
 
 #gOrganizeFormThumbs div {
   margin: 0;
   text-align: center;
+  background: transparent none repeat scroll 0 0;
+}
+
+#gOrganizeFormThumbs .gMicroThumbContainer {
+  display: block;
+  float: left;
+  opacity: 1;
+  position: absolute;
 }
diff --git a/modules/organize/js/organize.js b/modules/organize/js/organize.js
index c8fc9d43..63cc81d9 100644
--- a/modules/organize/js/organize.js
+++ b/modules/organize/js/organize.js
@@ -192,9 +192,12 @@ function drawerHandleButtonsClick(event) {
       $("#gOrganizeEditDrawerPanel").animate(
         {"height": "toggle", "display": "block"},
         {duration: "fast",
-          step: function() {
-            $("#gMicroThumbPanel").height(heightMicroThumbPanel - $(this).height());
-          }
+         complete: function() {
+           setSelectedThumbs();
+         },
+         step: function() {
+           $("#gMicroThumbPanel").height(heightMicroThumbPanel - $(this).height());
+         }
       });
       break;
     case "select-all":
@@ -411,6 +414,33 @@ function setDrawerButtonState() {
     $("#gOrganizeEditHandleButtonsLeft a[ref='albumCover']").attr("disabled", true);
     $("#gOrganizeEditHandleButtonsLeft a[ref='albumCover']").addClass("ui-state-disabled");
   }
+  setSelectedThumbs();
+}
+
+function setSelectedThumbs() {
+  $("#gOrganizeFormThumbStack").empty();
+  if (!$("#gOrganizeEditDrawerPanel::visible").length) {
+    return;
+  }
+  var position = $("#gOrganizeFormThumbStack").position();
+  var beginLeft = position.left;
+  var beginTop = 50;
+  var zindex = 2000;
+  $("li.ui-selected").each(function(i) {
+    var clone = $(this).clone();
+    $(clone).attr("id", "edit_clone_" + $(this).attr("ref"));
+    $("#gOrganizeFormThumbStack").append(clone);
+    $(clone).removeClass("ui-draggable");
+    $(clone).removeClass("ui-selected");
+    $(clone).css("margin-top", beginTop);
+    $(clone).css("left", beginLeft);
+    $(clone).css("z-index", zindex--);
+
+    if (i < 9) {
+      beginTop -= 5;
+      beginLeft += 5;
+    }
+  });
 }
 
 function serializeItemIds(selector) {
diff --git a/modules/organize/views/organize.html.php b/modules/organize/views/organize.html.php
index fd2caaa1..3df40c14 100644
--- a/modules/organize/views/organize.html.php
+++ b/modules/organize/views/organize.html.php
@@ -39,13 +39,7 @@
         <div id="gOrganizeEditDrawer" class="yui-u">
           <div id="gOrganizeEditDrawerPanel" class="yui-gf">
             <div id="gOrganizeFormThumbs" class="yui-u first">
-              <div id="gOrganizeFormNoImage">
-                <h3><?= t("No Image Selected") ?></h3>
-              </div>
-              <div id="gOrganizeFormThumb" style="display: none"></div>
-              <div id="gOrganizeFormMultipleImages" style="display:none">
-                <h3><?= t("Multiple Images Selected") ?></h3>
-              </div>
+              <ul id="gOrganizeFormThumbStack" />
             </div>
             <?= $edit_form ?>
           </div>