From 65c850c393ce6159289e3fd05056c33e7d62e961 Mon Sep 17 00:00:00 2001
From: Tim Almdal <tnalmdal@shaw.ca>
Date: Wed, 5 Aug 2009 10:26:11 -0700
Subject: Revert "Revert "Checkpoint the organize module rewrite.  At this
 point, it doesn't really do""

This reverts commit 397468c47b8fc3fefeb54ff19a73980ed1dd8c20.
---
 modules/organize/css/organize.css | 184 +++++++-------------------------------
 1 file changed, 33 insertions(+), 151 deletions(-)

(limited to 'modules/organize/css')

diff --git a/modules/organize/css/organize.css b/modules/organize/css/organize.css
index e58cd5a5..4568a707 100644
--- a/modules/organize/css/organize.css
+++ b/modules/organize/css/organize.css
@@ -1,41 +1,44 @@
-/* @todo move to theme css */
 /*******************************************************************
  * Dialog wide stylings
  */
-#gMessage {
-  margin-bottom: .4em;
+#gOrganizeDialog {
+  text-align: left;
 }
 
-#gMessage .gInfo {
-  background-color: transparent;
-  background-image: none;
-  padding-left: .4em;
+#gOrganize {
+  overflow: hidden;
 }
 
-#gOrganizeProgressDialog {
-  text-align: left;
+#gOrganize .yui-u {
+  width: 75%;
+}
+
+#gOrganize .yui-gf .first {
+  width: 25%;
 }
 
-#gDialog .yui-gf div.first {
-  width: 20%;
+#gOrganize .yui-gf #gMessage {
+  margin-bottom: .4em;
+  width: 75%;
 }
 
-#gDialog .yui-gf .yui-u {
-  width: 80%;
+#gMessage .gInfo {
+  font-weight: bold;
+  padding-left: 2em;
 }
 
+
 /*******************************************************************
  * Album Tree styling
  */
 #gOrganizeTreeContainer {
-  overflow-y: auto;
+  overflow: auto;
   margin: 0 !important;
   padding: 0 !important;
 }
 
-#gOrganizeAlbumDescription {
-  height: 2em;
-  overflow-y: auto;
+#gOrganizeTreeContainer ul ul li {
+  padding-left: 1.2em;
 }
 
 .gBranchSelected {
@@ -45,37 +48,21 @@
   padding: .3em 0;
 }
 
-.gBranchDroppable {
-  border: 1px dotted;
-}
-
-.gBranchText {
-  cursor: pointer;
-  width: auto;
-}
-
 .gBranchCollapsed {
   display: none;
 }
 
-.gBranchEmpty {
-  visibility: hidden;
+.gOrganizeBranch span {
+  cursor: pointer;
 }
 
-#gOrganizeTreeContainer ul ul li {
-  padding-left: 1.2em;
+.gBranchText {
+  cursor: pointer;
+  width: auto;
 }
-
 /*******************************************************************
  * Album Panel Styles
  */
-
-#gMicroThumbUnselectAll,
-#gMicroThumbSelectAll {
-  font-size: 1em;
-  font-weight: bold;
-}
-
 #gMicroThumbPanel {
   margin: 0 !important;
   padding: 0 !important;
@@ -83,33 +70,27 @@
   border: 1px solid #999 !important;
   border-top: none !important;
   border-left: none !important;
-  margin-left: -1em !important;
   overflow-x: hidden;
   overflow-y: auto;
 }
 
 #gMicroThumbGrid {
-  padding: .5em;
 }
 
 .gMicroThumbContainer {
-  display: block;
-  float: left;
-  font-size: .7em;
-  height: 9em;
-  margin-bottom: 1em;
-  margin-left: 1em;
-  opacity: .4;
-  padding: 0 .5em;
+//  padding: 0 .5em;
+//  opacity: .4;
 }
 
 .gMicroThumb {
-  height: 9em;
-  width: 9em;
-  background-color: #fff;
   display: block;
   float: left;
+//  font-size: .7em;
+  height: 9em;
+  margin-bottom: 1em;
+  margin-left: 1em;
   text-align: center;
+  width: 9em;
 }
 
 #gMicroThumbPanel #gMicroThumbGrid .gAlbum {
@@ -120,35 +101,12 @@
   opacity: 1;
 }
 
-.gMicroThumbContainer.ui-selected {
-  opacity: 1;
-}
-
-#gDragHelper .gMicroThumbGrid {
-  background-color: transparent;
-  padding: 0;
-  overflow: visible;
-}
-
-#gDragHelper .gMicroThumbContainer {
-  display: block;
-  margin: 0;
-  padding: 0;
-}
-
-#gDragHelper .gMicroThumb {
-  background-color: transparent;
-  height: auto;
-  width: auto;
-}
-
-
 /****************************************************************
  * Organize Edit Drawer styling
  */
 #gOrganizeEditDrawer {
   background-color: #13A;
-  width: 90%;
+  width: 100% !important;
 }
 
 #gOrganizeEditDrawerPanel {
@@ -204,79 +162,3 @@
   height: 30px;
   width: 15px;
 }
-
-#gOrganizeFormButtons {
-  bottom: 0.5em;
-}
-
-#gOrganizeFormButtons .submit {
-  display: inline;
-  float: none;
-  left: 0.5em;
-  position: relative;
-}
-
-/* yui-u gives 80% width, but then we wrap so do it ourselves */
-#gOrganizeEditForm {
-  float: right;
-  width: 79%;
-  //  height: 100px;
-}
-
-#gOrganizeFormThumbs {
-  overflow: hidden;
-}
-
-#gOrganizeFormThumbs div {
-  margin: 0;
-  text-align: center;
-  background: transparent none repeat scroll 0 0;
-}
-
-#gOrganizeFormThumbs .gMicroThumbContainer {
-  display: block;
-  float: left;
-  opacity: 1;
-  position: absolute;
-}
-
-/****************************************************************
- * Organize Edit From tabs styling
- */
-#gOrganizeEditForm.ui-tabs .ui-tabs-hide {
-  display: block !important;
-  left: -10000px;
-  position: absolute;
-}
-
-#gOrganizeEditForm.ui-widget {
-  font-size: .75em;
-}
-
-.gOrganizeEditPane {
-  height: 135px;
-  overflow-y: auto;
-}
-
-.textbox,
-.textarea {
-  border: 1px solid #e8e8e8;
-  border-top-color: #ccc;
-  border-left-color: #ccc;
-  color: #333;
-  width: 100%;
-}
-
-.textarea {
-  height: 6em;
-}
-
-.textbox  {
-  height: 1.3em;
-  width: 50%
-}
-
-.gTagGroup {
-  float:left;
-  margin: .5em;
-}
-- 
cgit v1.2.3


From 63f3efef37839ffba8cd75b9098d56cd03b06376 Mon Sep 17 00:00:00 2001
From: Tim Almdal <tnalmdal@shaw.ca>
Date: Wed, 5 Aug 2009 10:26:49 -0700
Subject: Revert "Revert "Enable the expand/collapse of branches by clicking on
 the plus/minus""

This reverts commit e37526f94df74a52a9cf36f0a5a5e641958ebbb3.
---
 modules/organize/controllers/organize.php       | 59 ++++++++++++++++---------
 modules/organize/css/organize.css               |  8 ++++
 modules/organize/js/organize.js                 | 28 +++++++++++-
 modules/organize/views/organize_dialog.html.php |  2 +-
 modules/organize/views/organize_tree.html.php   | 10 +++--
 5 files changed, 80 insertions(+), 27 deletions(-)

(limited to 'modules/organize/css')

diff --git a/modules/organize/controllers/organize.php b/modules/organize/controllers/organize.php
index d7854c53..e10e33b5 100644
--- a/modules/organize/controllers/organize.php
+++ b/modules/organize/controllers/organize.php
@@ -50,6 +50,27 @@ class Organize_Controller extends Controller {
     print $v->__toString();
   }
 
+  function children($item_id) {
+    $item = ORM::factory("item", $item_id);
+    access::required("view", $item);
+    access::required("edit", $item);
+
+    $albums = $item->children(null, 0, "album", array("title" => "ASC"));
+
+    $children = "";
+    foreach ($albums as $album) {
+      $v = new View("organize_tree.html");
+      $v->album = $album;
+      $v->selected = false;
+      $v->children = array();
+      $v->album_icon = $album->children_count("album") ? "ui-icon-plus" : "gBranchEmpty";
+
+      $children .= $v->__toString();
+    }
+
+    print $children;
+  }
+
   private function _get_micro_thumb_grid($item, $offset=0) {
     $v = new View("organize_thumb_grid.html");
     $v->item_id = $item->id;
@@ -60,34 +81,30 @@ class Organize_Controller extends Controller {
     return $v;
   }
 
-  private function _tree($item, $parent, $selected=false) {
-    access::required("view", $item);
-    access::required("edit", $item);
-
-    $albums = ORM::factory("item")
-      ->where(array("parent_id" => $parent->id, "type" => "album"))
-      ->orderby(array("title" => "ASC"))
-      ->find_all();
+  private function _tree($item, $parent, $depth=0) {
+    $albums = $parent->children(null, 0, "album", array("title" => "ASC"));
 
     $v = new View("organize_tree.html");
     $v->album = $parent;
 
-    $v->selected = false;
-    $v->children = "";
-    $v->album_icon = "ui-icon-plus";
-    if (!$selected) {
-      $v->selected = $parent->id == $item->id;
+    if ($parent->id == $item->id) {
+      $v->selected = true;
+      $depth = 1;
+    } else {
+      $v->selected = false;
+    }
+    $v->children = array();
+    $v->album_icon = "gBranchEmpty";
+    if ($albums->count()) {
+      $v->album_icon = "ui-icon-plus";
 
-      if ($albums->count() && ($parent->id == 1 || $v->selected) ) {
+      if ($depth <= 1) {
         $v->album_icon = "ui-icon-minus";
-      }
-
-      foreach ($albums as $album) {
-        $v->children .= $this->_tree($item, $album, $v->selected);
+        foreach ($albums as $album) {
+          $v->children[] = $this->_tree($item, $album, ++$depth);
+        }
       }
     }
-    return $v->__toString();
+    return $v;
   }
-
-
 }
diff --git a/modules/organize/css/organize.css b/modules/organize/css/organize.css
index 4568a707..7c2d9c5b 100644
--- a/modules/organize/css/organize.css
+++ b/modules/organize/css/organize.css
@@ -41,6 +41,14 @@
   padding-left: 1.2em;
 }
 
+.gBranchText:hover {
+  border: 1px dashed #999;
+}
+
+.gBranchEmpty {
+  visibility: hidden;
+}
+
 .gBranchSelected {
   background-color: #cfdeff !important;
   border-bottom: 1px solid #999 !important;
diff --git a/modules/organize/js/organize.js b/modules/organize/js/organize.js
index e84afd03..74b02569 100644
--- a/modules/organize/js/organize.js
+++ b/modules/organize/js/organize.js
@@ -37,7 +37,6 @@
    * Dynamically initialize the organize dialog when it is displayed
    */
   function _init(data) {
-
     // Deal with ui.jquery bug: http://dev.jqueryui.com/ticket/4475
     $(".sf-menu li.sfHover ul").css("z-index", 70);
 
@@ -64,6 +63,8 @@
       $.gallery_reload();
     });
 
+    $(".gBranchText span").click(_collapse_or_expanded_tree);
+
     //$(".gOrganizeBranch .ui-icon").click(organizeToggleChildren);
     //$(".gBranchText").droppable(treeDroppable);
     //$(".gBranchText").click(organizeOpenFolder);
@@ -109,6 +110,31 @@
     $("#gOrganizeDialog").dialog("close");
   };
 
+  /**
+   * Open or close a branch. If the children is a div placeholder, replace with <ul>
+   */
+  function _collapse_or_expanded_tree(event) {
+    var id = $(event.currentTarget).attr("ref");
+    if ($(event.currentTarget).hasClass("ui-icon-minus")) {
+      $(event.currentTarget).removeClass("ui-icon-minus");
+      $(event.currentTarget).addClass("ui-icon-plus");
+      $("#gOrganizeChildren-" + id).hide();
+    } else {
+      if ($("#gOrganizeChildren-" + id).is("div")) {
+        $("#gOrganizeChildren-" + id).remove();
+        $("#gOrganizeBranch-" + id).after("<ul id=\"gOrganizeChildren-" + id + "></ul>");
+        var url = $("#gOrganizeAlbumTree").attr("ref").replace("__ITEM_ID__", id);
+        $.get(url, function(data) {
+          $("#gOrganizeChildren-" + id).html(data);
+          $(".gBranchText span").click(_collapse_or_expanded_tree);
+        });;
+      }
+      $("#gOrganizeChildren-" + id).show();
+      $(event.currentTarget).removeClass("ui-icon-plus");
+      $(event.currentTarget).addClass("ui-icon-minus");
+    }
+  }
+
 })(jQuery);
 
 $("document").ready(function() {
diff --git a/modules/organize/views/organize_dialog.html.php b/modules/organize/views/organize_dialog.html.php
index cf3fd478..1e6646e4 100644
--- a/modules/organize/views/organize_dialog.html.php
+++ b/modules/organize/views/organize_dialog.html.php
@@ -12,7 +12,7 @@
     </div>
     <div class="yui-gf">
       <div id="gOrganizeTreeContainer" class="yui-u first">
-        <ul id="gOrganizeAlbumTree">
+        <ul id="gOrganizeAlbumTree" ref="<?= url::site("organize/children/__ITEM_ID__") ?>">
           <?= $album_tree ?>
         </ul>
       </div>
diff --git a/modules/organize/views/organize_tree.html.php b/modules/organize/views/organize_tree.html.php
index 28b45be0..d64410d8 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 ?>">
-  <span id="gOrganizeIcon-<?= $album->id ?>" ref="<?= $album->id ?>"
-        class="ui-icon <?= $album_icon ?> <?= $album_icon ? "" : "gBranchEmpty" ?>">
-  </span>
 
   <div id="gOrganizeBranch-<?= $album->id ?>" ref="<?= $album->id ?>"
        class="<?= $selected ? "gBranchSelected" : "" ?> gBranchText">
+    <span id="gOrganizeIcon-<?= $album->id ?>" ref="<?= $album->id ?>"
+          class="ui-icon <?= $album_icon ?>">
+    </span>
     <?= p::clean($album->title) ?>
   </div>
   <? if (empty($children)): ?>
@@ -13,7 +13,9 @@
   <? else: ?>
     <ul id="gOrganizeChildren-<?= $album->id ?>"
        class="<?= $album_icon == "ui-icon-plus" ? "gBranchCollapsed" : "" ?>">
-      <?= $children ?>
+      <? foreach ($children as $child): ?>
+        <?= $child ?>
+      <? endforeach ?>
     </ul>
   <? endif ?>
 </li>
-- 
cgit v1.2.3


From a03f8b1003093b385e9c839c1e5e2e4f80f0cd0b Mon Sep 17 00:00:00 2001
From: Tim Almdal <tnalmdal@shaw.ca>
Date: Wed, 5 Aug 2009 16:45:44 -0700
Subject: Fix up formatting of items in thumbgrid

---
 modules/organize/css/organize.css | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

(limited to 'modules/organize/css')

diff --git a/modules/organize/css/organize.css b/modules/organize/css/organize.css
index 7c2d9c5b..0a23a6bf 100644
--- a/modules/organize/css/organize.css
+++ b/modules/organize/css/organize.css
@@ -83,6 +83,7 @@
 }
 
 #gMicroThumbGrid {
+  padding: .5em;
 }
 
 .gMicroThumbContainer {
@@ -93,7 +94,7 @@
 .gMicroThumb {
   display: block;
   float: left;
-//  font-size: .7em;
+  font-size: .8em;
   height: 9em;
   margin-bottom: 1em;
   margin-left: 1em;
@@ -101,6 +102,10 @@
   width: 9em;
 }
 
+.gThumbnail {
+  padding: .5em;
+}
+
 #gMicroThumbPanel #gMicroThumbGrid .gAlbum {
   background-color: #e8e8e8;
 }
-- 
cgit v1.2.3


From 93c0dffab3ba3631c9ebf4693571bd38e5613d1c Mon Sep 17 00:00:00 2001
From: Tim Almdal <tnalmdal@shaw.ca>
Date: Thu, 6 Aug 2009 09:46:39 -0700
Subject: Remove the complicated calculation to determine the height of the
 micro thumb grid, by setting all the parent elements to 100% in the css and
 then subtract the height of the button bar

---
 modules/organize/css/organize.css | 11 +++++++++-
 modules/organize/js/organize.js   | 43 ++++++++++++++++-----------------------
 2 files changed, 27 insertions(+), 27 deletions(-)

(limited to 'modules/organize/css')

diff --git a/modules/organize/css/organize.css b/modules/organize/css/organize.css
index 0a23a6bf..56ecc309 100644
--- a/modules/organize/css/organize.css
+++ b/modules/organize/css/organize.css
@@ -7,6 +7,11 @@
 
 #gOrganize {
   overflow: hidden;
+  height: 100%;
+}
+
+#gOrganize #bd {
+  height: 100%;
 }
 
 #gOrganize .yui-u {
@@ -22,16 +27,20 @@
   width: 75%;
 }
 
+#gOrganizeDetail {
+  height: 100%;
+}
+
 #gMessage .gInfo {
   font-weight: bold;
   padding-left: 2em;
 }
 
-
 /*******************************************************************
  * Album Tree styling
  */
 #gOrganizeTreeContainer {
+  height: 100%;
   overflow: auto;
   margin: 0 !important;
   padding: 0 !important;
diff --git a/modules/organize/js/organize.js b/modules/organize/js/organize.js
index 89549954..6a65bfa2 100644
--- a/modules/organize/js/organize.js
+++ b/modules/organize/js/organize.js
@@ -1,54 +1,45 @@
 (function($) {
-  $.fn.organize = function(options) {
+  $.fn.organize = function() {
     var size = $.getViewportSize();
     var height = size.height() - 100;     // Leave 50 pixels on the top and bottom of the dialog
     var width = size.width() - 100;       // Leave 50 pixels on the left and right of the dialog
-    var opts = $.extend({}, $.fn.organize.defaults, {width: width, height: height}, options);
     return this.each(function() {
       $(this).click(function(event) {
         var href = event.target.href;
-        var size = $.getViewportSize();
 
         $("body").append('<div id="gOrganizeDialog"></div>');
 
-        $("#gOrganizeDialog").dialog(opts);
+        $("#gOrganizeDialog").dialog({
+          autoOpen: false,
+          modal: true,
+          resizable: false,
+          width: width,
+          height: height,
+          position: "center",
+          close: function () {
+            $("#gOrganizeDialog").trigger("organize_close");
+            $("#gOrganizeDialog").dialog("destroy").remove();
+          },
+          zIndex: 75
+        });
         $.get(href, _init);
         return false;
       });
     });
   };
 
-  $.fn.organize.defaults = {
-    autoOpen: false,
-    modal: true,
-    resizable: false,
-    minWidth: 600,
-    minHeight: 500,
-    position: "center",
-    close: function () {
-      $("#gOrganizeDialog").trigger("organize_close");
-      $("#gOrganizeDialog").dialog("destroy").remove();
-    },
-    zIndex: 75
-  };
-
   /**
    * Dynamically initialize the organize dialog when it is displayed
    */
   function _init(data) {
-    // Deal with ui.jquery bug: http://dev.jqueryui.com/ticket/4475
+    // Deal with ui.jquery bug: http://dev.jqueryui.com/ticket/4475 (target 1.8?)
     $(".sf-menu li.sfHover ul").css("z-index", 70);
 
     $("#gOrganizeDialog").html(data);
     $("#gOrganizeDialog").dialog("open");
 
-    var heightMicroThumbPanel = $("#gOrganizeDialog").innerHeight();
-    heightMicroThumbPanel -= 2 * parseFloat($("#gOrganizeDialog").css("padding-bottom"));
-    heightMicroThumbPanel = Math.floor(heightMicroThumbPanel - 10 - $("#gMessage").outerHeight());
-    $("#gOrganizeTreeContainer").height(heightMicroThumbPanel);
-
-    heightMicroThumbPanel -= $("#gOrganizeEditDrawerHandle").outerHeight();
-    $("#gMicroThumbPanel").height(heightMicroThumbPanel);
+    var height = $("#gOrganizeDetail").innerHeight();
+    $("#gMicroThumbPanel").height(height - $("#gOrganizeEditDrawerHandle").outerHeight());
 
     if ($("#gOrganizeDialog h1").length) {
       $("#gOrganizeDialog").dialog('option', 'title', $("#gOrganizeDialog h1:eq(0)").html());
-- 
cgit v1.2.3


From 685b1ddf88c8dd7c055c1fb2571060ad1e4f4530 Mon Sep 17 00:00:00 2001
From: Tim Almdal <tnalmdal@shaw.ca>
Date: Fri, 7 Aug 2009 21:40:35 -0700
Subject: Enhance how the organize dialog degrades if the browser window is not
 optimal

---
 modules/organize/css/organize.css | 2 +-
 modules/organize/js/organize.js   | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

(limited to 'modules/organize/css')

diff --git a/modules/organize/css/organize.css b/modules/organize/css/organize.css
index 56ecc309..d33dac0d 100644
--- a/modules/organize/css/organize.css
+++ b/modules/organize/css/organize.css
@@ -7,7 +7,6 @@
 
 #gOrganize {
   overflow: hidden;
-  height: 100%;
 }
 
 #gOrganize #bd {
@@ -25,6 +24,7 @@
 #gOrganize .yui-gf #gMessage {
   margin-bottom: .4em;
   width: 75%;
+  white-space: nowrap;
 }
 
 #gOrganizeDetail {
diff --git a/modules/organize/js/organize.js b/modules/organize/js/organize.js
index 853e3eef..03d81a98 100644
--- a/modules/organize/js/organize.js
+++ b/modules/organize/js/organize.js
@@ -8,6 +8,7 @@
       $(".sf-menu li.sfHover ul").css("z-index", 70);
 
       $("#gDialog").bind("dialogopen", function(event, ui) {
+        $("#gOrganize").height($("#gDialog").innerHeight() - 20);
         $("#gMicroThumbPanel").height($("#gDialog").innerHeight() - 90);
       });
 
-- 
cgit v1.2.3


From 39d0098038b828c3cf5d63caa06f1b6d57904f32 Mon Sep 17 00:00:00 2001
From: Tim Almdal <tnalmdal@shaw.ca>
Date: Sun, 9 Aug 2009 09:00:10 -0700
Subject: Enable microthumbnail selection

---
 modules/organize/css/organize.css | 11 ++++++-----
 modules/organize/js/organize.js   |  6 ++++--
 2 files changed, 10 insertions(+), 7 deletions(-)

(limited to 'modules/organize/css')

diff --git a/modules/organize/css/organize.css b/modules/organize/css/organize.css
index d33dac0d..a4b5fdbd 100644
--- a/modules/organize/css/organize.css
+++ b/modules/organize/css/organize.css
@@ -95,11 +95,6 @@
   padding: .5em;
 }
 
-.gMicroThumbContainer {
-//  padding: 0 .5em;
-//  opacity: .4;
-}
-
 .gMicroThumb {
   display: block;
   float: left;
@@ -107,10 +102,16 @@
   height: 9em;
   margin-bottom: 1em;
   margin-left: 1em;
+  opacity: .5;
   text-align: center;
   width: 9em;
 }
 
+.gMicroThumb.ui-selected {
+  opacity: 1;
+}
+
+
 .gThumbnail {
   padding: .5em;
 }
diff --git a/modules/organize/js/organize.js b/modules/organize/js/organize.js
index 03d81a98..05693200 100644
--- a/modules/organize/js/organize.js
+++ b/modules/organize/js/organize.js
@@ -5,8 +5,8 @@
      */
     init: function(data) {
       // Deal with ui.jquery bug: http://dev.jqueryui.com/ticket/4475 (target 1.8?)
-      $(".sf-menu li.sfHover ul").css("z-index", 70);
-
+      $(".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);
@@ -22,6 +22,8 @@
 
       $(".gBranchText span").click($.organize.collapse_or_expand_tree);
       $(".gBranchText").click($.organize.show_album);
+
+      $("#gMicroThumbGrid").selectable({filter: ".gMicroThumb"});
     },
 
     /**
-- 
cgit v1.2.3


From 3823f65dfb4114caf9bd9cfbf730638927f6c970 Mon Sep 17 00:00:00 2001
From: Tim Almdal <tnalmdal@shaw.ca>
Date: Wed, 12 Aug 2009 21:55:25 -0700
Subject: 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

---
 modules/organize/controllers/organize.php          |  9 +--
 modules/organize/css/organize.css                  |  9 ++-
 modules/organize/helpers/organize_theme.php        | 28 +++++++++
 modules/organize/js/organize.js                    | 73 +++++++++++++++++++++-
 modules/organize/views/organize_dialog.html.php    |  4 +-
 .../organize/views/organize_thumb_grid.html.php    |  2 +-
 modules/organize/views/organize_tree.html.php      |  4 +-
 7 files changed, 116 insertions(+), 13 deletions(-)
 create mode 100644 modules/organize/helpers/organize_theme.php

(limited to 'modules/organize/css')

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" : "" ?>">
-- 
cgit v1.2.3


From d758266fabff6c9fe4de22fce57bf00962150ee2 Mon Sep 17 00:00:00 2001
From: Tim Almdal <tnalmdal@shaw.ca>
Date: Thu, 13 Aug 2009 18:58:40 -0700
Subject: Add a visual indicator of the insertion point

---
 modules/organize/css/organize.css                  | 16 ++++++----
 modules/organize/js/organize.js                    | 34 ++++++++++++++++------
 .../organize/views/organize_thumb_grid.html.php    |  5 +++-
 3 files changed, 39 insertions(+), 16 deletions(-)

(limited to 'modules/organize/css')

diff --git a/modules/organize/css/organize.css b/modules/organize/css/organize.css
index 1cc7c92c..d717bcae 100644
--- a/modules/organize/css/organize.css
+++ b/modules/organize/css/organize.css
@@ -96,19 +96,23 @@
   padding: 1em;
 }
 
+.gMicroThumbGridCell {
+  float: left;
+  font-size: 0.8em;
+  padding: .5em !important;
+  opacity: .5;
+  border-left: 1px hidden #13A;
+  border-right: 1px hidden #13A;
+}
+
 .gMicroThumb {
   display: block;
-  float: left;
-  font-size: .8em;
   height: 9em;
-  margin-bottom: 1em;
-  margin-left: 1em;
-  opacity: .5;
   text-align: center;
   width: 9em;
 }
 
-.gMicroThumb.ui-state-selected {
+.gMicroThumbGridCell.ui-state-selected {
   opacity: 1;
 }
 
diff --git a/modules/organize/js/organize.js b/modules/organize/js/organize.js
index aadc713a..a1b59676 100644
--- a/modules/organize/js/organize.js
+++ b/modules/organize/js/organize.js
@@ -3,10 +3,10 @@
     micro_thumb_draggable: {
       distance: 10,
       cursorAt: { left: -10, top: -10},
-      //appendTo: "#gOrganizeContentPane",
+      appendTo: "#gMicroThumbPanel",
       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 }),
+        var selected = $(".ui-draggable.ui-state-selected img"),
+            set = $('<div class="gDragHelper"></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 };
 
@@ -28,7 +28,7 @@
         return set;
       },
       start: function(event, ui) {
-        $("#gMicroThumbPanel li.ui-state-selected").hide();
+        $("#gMicroThumbPanel .ui-state-selected").hide();
       },
       drag: function(event, ui) {
         var top = $("#gMicroThumbPanel").offset().top;
@@ -39,9 +39,10 @@
           $("#gMicroThumbPanel").get(0).scrollTop = Math.max(0, $("#gMicroThumbPanel").get(0).scrollTop - 100);
         }
       },
+      // @todo delete this method when drop is implemented
       stop: function(event, ui) {
-        // @todo delete this method when drop is implemented
-        $("li.ui-state-selected").show();
+        $(".ui-state-selected").show();
+        $(".gMicroThumbGridCell").css("borderStyle", "none");
       }
     },
 
@@ -50,7 +51,7 @@
       tolerance: "pointer",
       greedy: true,
       drop: function(event, ui) {
-        // @todo do a ajax call to send the rearrange request to the zerver
+        // @todo do a ajax call to send the rearrange request to the server
         // organize/move/target_id/
         // post parameters
         //  before=id|after=id
@@ -90,10 +91,24 @@
       $(".gBranchText span").click($.organize.collapse_or_expand_tree);
       $(".gBranchText").click($.organize.show_album);
 
-      $("#gMicroThumbPanel").selectable({filter: "li"});
-      $("#gMicroThumbPanel li").draggable($.organize.micro_thumb_draggable);
+      $("#gMicroThumbPanel").selectable({filter: ".gMicroThumbGridCell"});
       $(".gOrganizeBranch").droppable($.organize.droppable);
       $("#gMicroThumbPanel").droppable($.organize.droppable);
+
+      $.organize.set_handlers();
+    },
+
+    set_handlers: function() {
+      $(".gMicroThumbGridCell").draggable($.organize.micro_thumb_draggable);
+      $(".gMicroThumbGridCell").mousemove(function(event) {
+        if ($(".gDragHelper").length) {
+          $(".gMicroThumbGridCell").css("borderStyle", "none");
+          console.log("pageX:" + event.pageX + ", offset.left:" + $(this).offset().left + ", width:" + $(this).width());
+          var side = event.pageX < $(this).offset().left + $(this).width() / 2 ?
+            "hidden hidden hidden solid" : "hidden solid hidden hidden";
+          $(this).css("borderStyle", side);
+        }
+      });
     },
 
     /**
@@ -119,6 +134,7 @@
       var url = $("#gMicroThumbPanel").attr("ref").replace("__ITEM_ID__", id).replace("__OFFSET__", 0);
       $.get(url, function(data) {
         $("#gMicroThumbGrid").html(data);
+        $.organize.set_handlers();
       });
     }
   };
diff --git a/modules/organize/views/organize_thumb_grid.html.php b/modules/organize/views/organize_thumb_grid.html.php
index b6e3aa11..b41c54e8 100644
--- a/modules/organize/views/organize_thumb_grid.html.php
+++ b/modules/organize/views/organize_thumb_grid.html.php
@@ -1,9 +1,11 @@
 <?php defined("SYSPATH") or die("No direct script access.") ?>
 <? foreach ($item->children(25, $offset) as $child): ?>
-<li id="gMicroThumb_<?= $child->id ?>"
+<li class="gMicroThumbGridCell">
+<div id="gMicroThumb_<?= $child->id ?>"
     class="gMicroThumb <?= $child->is_album() ? "gAlbum" : "gPhoto" ?>"
     ref="<?= $child->id ?>">
   <?= $child->thumb_img(array("class" => "gThumbnail", "ref" => $child->id), 90, true) ?>
+</div>
 </li>
 <? endforeach ?>
 
@@ -13,6 +15,7 @@
     $.get("<?= url::site("organize/content/$item->id/" . ($offset + 25)) ?>",
       function(data) {
         $("#gMicroThumbGrid").append(data);
+        $.organize.set_handlers();
       }
     );
   }, 50);
-- 
cgit v1.2.3