Enable the expand/collapse of branches by clicking on the plus/minus

icons.  Branches with no albums, will not have an icon.

5 files changed, 80 insertions, 27 deletions

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>