Implement the first part of drag functionality. Having trouble getting visual feedback of the drop position between thumbnails, so this commit provides a checkpoint for trying various options

7 files changed, 116 insertions, 13 deletions

diff --git a/modules/organize/controllers/organize.php b/modules/organize/controllers/organize.php
index 3a81ef4f..6f83f940 100644
--- a/modules/organize/controllers/organize.php
+++ b/modules/organize/controllers/organize.php
@@ -60,13 +60,14 @@ class Organize_Controller extends Controller {
     $v->album_icon = "gBranchEmpty";
 
     $albums = $item->children(null, 0, array("type" => "album"), array("title" => "ASC"));
-    if ($albums->count()) {
-      $v->album_icon = empty($parents[$item->id]) ? "ui-icon-plus" : "ui-icon-minus";
-
-      foreach ($albums as $album) {
+    foreach ($albums as $album) {
+      if (access::can("view", $album)) {
         $v->children[] = $this->_tree($album, $parents);
       }
     }
+    if (count($v->children)) {
+      $v->album_icon = empty($parents[$item->id]) ? "ui-icon-plus" : "ui-icon-minus";
+    }
     return $v;
   }
 }
diff --git a/modules/organize/css/organize.css b/modules/organize/css/organize.css
index a4b5fdbd..1cc7c92c 100644
--- a/modules/organize/css/organize.css
+++ b/modules/organize/css/organize.css
@@ -1,3 +1,4 @@
+
 /*******************************************************************
  * Dialog wide stylings
  */
@@ -92,7 +93,7 @@
 }
 
 #gMicroThumbGrid {
-  padding: .5em;
+  padding: 1em;
 }
 
 .gMicroThumb {
@@ -107,10 +108,14 @@
   width: 9em;
 }
 
-.gMicroThumb.ui-selected {
+.gMicroThumb.ui-state-selected {
   opacity: 1;
 }
 
+.ui-selectable-lasso {
+  z-index: 2000 !important;
+  border: 1px dashed #13A;
+}
 
 .gThumbnail {
   padding: .5em;
diff --git a/modules/organize/helpers/organize_theme.php b/modules/organize/helpers/organize_theme.php
new file mode 100644
index 00000000..de812261
--- /dev/null
+++ b/modules/organize/helpers/organize_theme.php
@@ -0,0 +1,28 @@
+<?php defined("SYSPATH") or die("No direct script access.");
+/**
+ * Gallery - a web based photo album viewer and editor
+ * Copyright (C) 2000-2009 Bharat Mediratta
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2 of the License, or (at
+ * your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street - Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+class organize_theme {
+  static function head($theme) {
+    $item = $theme->item();
+    if ($item && access::can("edit", $item) && $item->is_album()) {
+      $theme->script("organize.js");
+      $theme->css("organize.css");
+    }
+  }
+}
diff --git a/modules/organize/js/organize.js b/modules/organize/js/organize.js
index 05693200..c9408673 100644
--- a/modules/organize/js/organize.js
+++ b/modules/organize/js/organize.js
@@ -1,15 +1,83 @@
 (function($) {
   $.organize = {
+    micro_thumb_draggable: {
+      distance: 10,
+      cursorAt: { left: -10, top: -10},
+      appendTo: "#gOrganizeContentPane",
+      helper: function(event, ui) {
+        var selected = $("li.ui-state-selected img"),
+            set = $('<div class="temp"></div>').css({zIndex: 2000, width: 80, height: Math.ceil(selected.length / 5) * 16 }),
+            offset = $(this).offset(),
+            click = { left: event.pageX - offset.left, top: event.pageY - offset.top };
+
+        selected.each(function(i) {
+          var row = parseInt(i / 5);
+          var j = i - (row * 5);
+
+          var o = $(this).offset();
+
+          var copy = $(this).clone()
+            .css({
+              width: $(this).width(), height: $(this).height(), display: "block",
+              margin: 0, position: 'absolute', outline: '5px solid #fff',
+              left: o.left - event.pageX, top: o.top - event.pageY
+            })
+            .appendTo(set)
+            .animate({width: 10, height: 10, outlineWidth: 1, margin: 1, left: (20 * j), top: (row * 20)}, 500);
+        });
+        return set;
+      },
+      start: function(event, ui) {
+        $("#gMicroThumbPanel").prepend("<div id=\"gPlaceHolder\"></div>");
+
+        $("#gMicroThumbPanel li.ui-state-selected").hide();
+      },
+      drag: function(event, ui) {
+        var container = $("#gMicroThumbPanel").get(0);
+        var scrollTop = container.scrollTop;
+        var height = $(container).height();
+        if (event.pageY > height + scrollTop) {
+          container.scrollTop += height;
+        } else if (event.pageY < scrollTop) {
+          container.scrollTop -= height;
+        }
+      },
+      stop: function(event, ui) {
+        $("li.ui-state-selected").show();
+      }
+    },
+
+    droppable: {
+      accept: "*",
+      tolerance: "pointer",
+      greedy: true,
+      drop: function(event, ui) {
+        // @todo do a ajax call to send the rearrange request to the zerver
+        // organize/move/target_id/
+        // post parameters
+        //  before=id|after=id
+        //  source=[id1, id2, ...]
+        //  before or after not supplied then append to end
+        // return: json {
+        //   result: success | msg,
+        //   tree: null | new tree,
+        //   content: new thumbgrid
+        // }
+      }
+    },
+
     /**
      * Dynamically initialize the organize dialog when it is displayed
      */
     init: function(data) {
+      var self = this;
       // Deal with ui.jquery bug: http://dev.jqueryui.com/ticket/4475 (target 1.8?)
       $(".sf-menu li.sfHover ul").css("z-index", 68);
       $("#gDialog").dialog("option", "zIndex", 70);
       $("#gDialog").bind("dialogopen", function(event, ui) {
         $("#gOrganize").height($("#gDialog").innerHeight() - 20);
         $("#gMicroThumbPanel").height($("#gDialog").innerHeight() - 90);
+        $("#gOrganizeAlbumTree").height($("#gDialog").innerHeight() - 59);
       });
 
       $("#gDialog").bind("dialogclose", function(event, ui) {
@@ -23,7 +91,10 @@
       $(".gBranchText span").click($.organize.collapse_or_expand_tree);
       $(".gBranchText").click($.organize.show_album);
 
-      $("#gMicroThumbGrid").selectable({filter: ".gMicroThumb"});
+      $("#gMicroThumbPanel").selectable({filter: "li"});
+      $("#gMicroThumbPanel img").draggable($.organize.micro_thumb_draggable);
+      $(".gOrganizeBranch").droppable($.organize.droppable);
+      $("#gMicroThumbPanel").droppable($.organize.droppable);
     },
 
     /**
diff --git a/modules/organize/views/organize_dialog.html.php b/modules/organize/views/organize_dialog.html.php
index b946d82b..f8d6d792 100644
--- a/modules/organize/views/organize_dialog.html.php
+++ b/modules/organize/views/organize_dialog.html.php
@@ -1,5 +1,4 @@
 <?php defined("SYSPATH") or die("No direct script access.") ?>
-<link rel="stylesheet" type="text/css" href="<?= url::file("modules/organize/css/organize.css") ?>" />
 <div id="gOrganize" class="gDialogPanel">
   <h1 style="display:none"><?= t("Organize %name", array("name" => p::purify($title))) ?></h1>
   <div id="bd">
@@ -11,7 +10,7 @@
         <div class="gInfo"><?= t("Select one or more items to edit; drag and drop items to re-order or move between albums") ?></div>
       </div>
     </div>
-    <div class="yui-gf">
+    <div id= "gOrganizeContentPane" class="yui-gf">
       <div id="gOrganizeTreeContainer" class="yui-u first">
         <ul id="gOrganizeAlbumTree">
           <?= $album_tree ?>
@@ -39,7 +38,6 @@
   </div>
 </div>
 
-<script type="text/javascript" src="<?= url::file("modules/organize/js/organize.js") ?>"></script>
 <script type="text/javascript">
   $("#gOrganize").ready($.organize.init);
 </script>
diff --git a/modules/organize/views/organize_thumb_grid.html.php b/modules/organize/views/organize_thumb_grid.html.php
index 0d54c5c8..b6e3aa11 100644
--- a/modules/organize/views/organize_thumb_grid.html.php
+++ b/modules/organize/views/organize_thumb_grid.html.php
@@ -3,7 +3,7 @@
 <li id="gMicroThumb_<?= $child->id ?>"
     class="gMicroThumb <?= $child->is_album() ? "gAlbum" : "gPhoto" ?>"
     ref="<?= $child->id ?>">
-  <?= $child->thumb_img(array("class" => "gThumbnail"), 90, true) ?>
+  <?= $child->thumb_img(array("class" => "gThumbnail", "ref" => $child->id), 90, true) ?>
 </li>
 <? endforeach ?>
 
diff --git a/modules/organize/views/organize_tree.html.php b/modules/organize/views/organize_tree.html.php
index 99b0dc1a..d2ef287a 100644
--- a/modules/organize/views/organize_tree.html.php
+++ b/modules/organize/views/organize_tree.html.php
@@ -1,11 +1,11 @@
 <?php defined("SYSPATH") or die("No direct script access.") ?>
 <li class="gOrganizeBranch ui-icon-left" ref="<?= $album->id ?>">
   <div id="gOrganizeBranch-<?= $album->id ?>" ref="<?= $album->id ?>"
-       class="<?= $selected ? "gBranchSelected" : "" ?> gBranchText">
+       class="<?= $selected ? "gBranchSelected" : "" ?>">
     <span id="gOrganizeIcon-<?= $album->id ?>" ref="<?= $album->id ?>"
           class="ui-icon <?= $album_icon ?>">
     </span>
-    <?= p::clean($album->title) ?>
+    <span class="gBranchText" ref="<?= $album->id ?>"><?= p::clean($album->title) ?></span>
   </div>
   <ul id="gOrganizeChildren-<?= $album->id ?>"
       class="<?= $album_icon == "ui-icon-plus" ? "gBranchCollapsed" : "" ?>">