From 8e21dda195015a3c9420553f874c10d3ebfa5dfa Mon Sep 17 00:00:00 2001
From: Bharat Mediratta <bharat@menalto.com>
Date: Mon, 3 Jan 2011 20:24:21 -0800
Subject: Complete rewrite of the organize module in Javascript using the
 Sencha JavaScript library.  It's got all the functionality from the Flash
 version except it doesn't support creating new albums or uploading photos.

Only tested in Chrome 10.0.x so far.
---
 modules/organize/views/organize_dialog.html.php | 481 +++++++++++++++++-------
 1 file changed, 354 insertions(+), 127 deletions(-)

(limited to 'modules/organize/views/organize_dialog.html.php')

diff --git a/modules/organize/views/organize_dialog.html.php b/modules/organize/views/organize_dialog.html.php
index 3ea1143d..b2e56a04 100644
--- a/modules/organize/views/organize_dialog.html.php
+++ b/modules/organize/views/organize_dialog.html.php
@@ -1,144 +1,371 @@
 <?php defined("SYSPATH") or die("No direct script access.") ?>
-<script type="text/javascript" src="<?= url::file("lib/swfobject.js") ?>"></script>
-<style type="text/css" media="screen">
-  .g-organize {
-    padding: 0;
-    margins: 0;
-  }
-
-  object {
-    display: block;
-    outline: none;
-  }
-
-  #g-dialog {
-    padding: 0;
+<link rel="stylesheet" type="text/css" href="<?= url::file("modules/organize/vendor/ext/css/ext-all.css") ?>" />
+<link rel="stylesheet" type="text/css" href="<?= url::file("modules/organize/vendor/ext/css/ux-all.css") ?>" />
+<link rel="stylesheet" type="text/css" href="<?= url::file("modules/organize/css/organize.css") ?>" />
+<style type="text/css">
+  .g-organize div.thumb-album div.icon {
+    background-image: url(<?= url::file("modules/organize/vendor/ext/images/default/tree/folder.gif") ?>);
   }
 </style>
 
+<script type="text/javascript" src="<?= url::file("modules/organize/vendor/ext/js/ext-base.js") ?>"></script>
+<script type="text/javascript" src="<?= url::file("modules/organize/vendor/ext/js/ext-all.js") ?>"></script>
 <script type="text/javascript">
-  $("#g-dialog").bind("dialogclose", function(event, ui) {
-    // @todo do a call to organize/closing to end the batch
-    if ($(this).data("reload.location")) {
-      window.location = $(this).data("reload.location");
-    } else {
-      window.location.reload();
+  Ext.BLANK_IMAGE_URL = "<?= url::file("modules/organize/vendor/ext/images/default/s.gif") ?>";
+  Ext.Ajax.timeout = 1000000;  // something really large
+
+  Ext.onReady(function() {
+    /*
+     * ********************************************************************************
+     * Utility functions for loading data and making changes
+     * ********************************************************************************
+     */
+    var current_album_id = null;
+    var load_album_data = function(id) {
+      Ext.Msg.wait(<?= t("Loading...")->for_js() ?>);
+      Ext.Ajax.request({
+        url: '<?= url::site("organize/album_info/__ID__") ?>'.replace("__ID__", id),
+        success: function(xhr, opts) {
+          Ext.Msg.hide();
+          var album_info = Ext.util.JSON.decode(xhr.responseText);
+          var store = new Ext.data.JsonStore({
+            autoDestroy: true,
+            fields: ["id", "thumb_url", "width", "height", "type", "title"],
+            idProperty: "id",
+            root: "children",
+            data: album_info
+          });
+          current_album_id = id;
+          thumb_data_view.bindStore(store);
+          sort_column_combobox.setValue(album_info.sort_column);
+          sort_order_combobox.setValue(album_info.sort_order);
+        },
+        failure: function() {
+          Ext.Msg.hide();
+          Ext.Msg.alert(
+            <?= t("An error occurred.  Consult your system administrator.")->for_js() ?>);
+        }
+      });
+    };
+
+    var reload_album_data = function() {
+      if (current_album_id) {
+        load_album_data(current_album_id);
+      }
+    };
+
+    var set_album_sort = function(params) {
+      Ext.Msg.wait(<?= t("Changing sort...")->for_js() ?>);
+      params['csrf'] = '<?= access::csrf_token() ?>';
+      Ext.Ajax.request({
+        url: '<?= url::site("organize/set_sort/__ID__") ?>'.replace("__ID__", current_album_id),
+        method: "post",
+        success: function() {
+          Ext.Msg.hide();
+          reload_album_data();
+        },
+        failure: function() {
+          Ext.Msg.hide();
+          Ext.Msg.alert(
+            <?= t("An error occurred.  Consult your system administrator.")->for_js() ?>);
+        },
+        params: params
+      });
     }
-  });
 
-  function closeOrganizeDialog() {
-    $("#g-dialog").dialog("close");
-  }
+    /*
+     * ********************************************************************************
+     * JsonStore, DataView and Panel for viewing albums
+     * ********************************************************************************
+     */
+    thumb_data_view = new Ext.DataView({
+      autoScroll: true,
+      enableDragDrop: true,
+      itemSelector: "div.thumb",
+      listeners: {
+        "render": function(v) {
+          v.dragZone = new Ext.dd.DragZone(v.getEl(), {
+            getDragData: function(e) {
+              var target = e.getTarget(v.itemSelector, 10);
+              if (target) {
+                if (!v.isSelected(target)) {
+                  v.onClick(e);
+                }
+                var selected_nodes = v.getSelectedNodes();
+                var drag_data = {
+                  nodes: selected_nodes,
+                  repair_xy: Ext.fly(target).getXY()
+                };
+                if (selected_nodes.length == 1) {
+                  drag_data.ddel = target;
+                } else {
+                  var div = document.createElement("div");
+                  div.className = "multi-proxy";
+                  for (var i = 0; i != selected_nodes.length; i++) {
+                    div.appendChild(selected_nodes[i].cloneNode(true));
+                    if ((i+1) % 3 == 0) {
+                      div.appendChild(document.createElement("br"));
+                    }
+                  }
+                  drag_data.ddel = div;
+                }
+                return drag_data;
+              }
+            },
+            getRepairXY: function() {
+              return this.dragData.repair_xy;
+            }
+          });
 
-  function setLocation(url) {
-    $("#g-dialog").data("reload.location", url);
-  }
+          v.dropZone = new Ext.dd.DropZone(v.getEl(), {
+            getTargetFromEvent: function(e) {
+              return e.getTarget("div.thumb", 10);
+            },
+            onNodeEnter: function(target, dd, e, data) {
+              Ext.fly(target).addClass("active");
+            },
+            onNodeOut: function(target, dd, e, data) {
+              Ext.fly(target).removeClass("active");
+            },
+            onNodeOver: function(target, dd, e, data) {
+              return Ext.dd.DropZone.prototype.dropAllowed;
+            },
+            onNodeDrop: function(target, dd, e, data) {
+              var nodes = data.nodes;
+              source_ids = [];
+              for (var i = 0; i != nodes.length; i++) {
+                source_ids.push(Ext.fly(nodes[i]).getAttribute("rel"));
+              }
+              Ext.Msg.wait(<?= t("Rearranging...")->for_js() ?>);
+              Ext.Ajax.request({
+                url: '<?= url::site("organize/move_before") ?>',
+                method: "post",
+                success: function() {
+                  Ext.Msg.hide();
+                  reload_album_data();
+                },
+                failure: function() {
+                  Ext.Msg.hide();
+                  Ext.Msg.alert(
+                    <?= t("An error occurred.  Consult your system administrator.")->for_js() ?>);
+                },
+                params: {
+                  source_ids: source_ids.join(","),
+                  target_id: Ext.fly(target).getAttribute("rel"),
+                  csrf: '<?= access::csrf_token() ?>'
+                }
+              });
+              return true;
+            }
+          });
+        }
+      },
+      loadingText: <?= t("Loading...")->for_js() ?>,
+      multiSelect: true,
+      selectedClass: "selected",
+      tpl: new Ext.XTemplate(
+        '<tpl for=".">',
+        '<div class="thumb thumb-{type}" id="thumb-{id}" rel="{id}">',
+        '<img src="{thumb_url}" width="{width}" height="{height}" title="{title}">',
+        '<div class="icon"></div>',
+        '</div>',
+        '</tpl>')
+    });
 
-  function setTitle(title) {
-    $("#ui-dialog-title-g-dialog").text(<?= t("Organize :: ")->for_js() ?> + title);
-  }
+    /*
+     * ********************************************************************************
+     * Toolbar with sort column, sort order and a close button.
+     * ********************************************************************************
+     */
+    var sort_column_combobox = new Ext.form.ComboBox({
+      mode: "local",
+      editable: false,
+      allowBlank: false,
+      forceSelection: true,
+      triggerAction: "all",
+      store: new Ext.data.ArrayStore({
+        id: 0,
+        fields: ["key", "value"],
+        data: [
+        <? foreach (album::get_sort_order_options() as $key => $value): ?>
+          ["<?= $key ?>", <?= $value->for_js() ?>],
+        <? endforeach ?>
+        ]
+      }),
+      listeners: {
+        "select": function(combo, record, index) {
+          set_album_sort({sort_column: record.id});
+        }
+      },
+      valueField: "key",
+      displayField: "value"
+    });
 
-  function getOrganizeStyles() {
-    return {
-      color: colorToHex($("#g-organize").css("color")),
-      backgroundColor: colorToHex($("#g-organize").css("backgroundColor")),
-      borderColor: colorToHex($("#g-organize").css("borderLeftColor")),
-      rollOverColor: colorToHex($("#g-organize-hover").css("backgroundColor")),
-      selectionColor: colorToHex($("#g-organize-active").css("backgroundColor"))
-    };
-  }
+    var sort_order_combobox = new Ext.form.ComboBox({
+      mode: "local",
+      editable: false,
+      allowBlank: false,
+      forceSelection: true,
+      triggerAction: "all",
+      store: new Ext.data.ArrayStore({
+        id: 0,
+        fields: ["key", "value"],
+        data: [
+          ["ASC", <?= t("Ascending")->for_js() ?>],
+          ["DESC", <?= t("Descending")->for_js() ?>]]
+      }),
+      listeners: {
+        "select": function(combo, record, index) {
+          set_album_sort({sort_order: record.id});
+        }
+      },
+      valueField: "key",
+      displayField: "value"
+    });
 
-  function colorToHex(color) {
-    // Surprising no one, the color extracted from the css is in a different format
-    // in IE than it is when extracted from FF or Chrome.  FF and Chrome return
-    // the of "rgb(nn,nn,nn)". Where as IE returns it as #hhhhhh.
+    var button_panel = new Ext.Panel({
+      layout: "hbox",
+      region: "south",
+      height: 24,
+      layoutConfig: {
+        align: "stretch"
+      },
+      items: [sort_column_combobox, sort_order_combobox,
+        {
+          xtype: "spacer",
+          flex: 4,
+        }, {
+          xtype: "button",
+          flex: 1,
+          text: <?= t("Close")->for_js() ?>,
+          listeners: {
+            "click": function() {
+              parent.done_organizing(current_album_id);
+            }
+          }
+        },
+      ]
+    });
 
-    if (color.indexOf("#") === 0) {
-      return '0x' + color.substring(1);
-    } else {
-      var digits = /(.*?)rgb\((\d+), (\d+), (\d+)\)/.exec(color);
+    var album_panel = new Ext.Panel({
+      layout: "border",
+      region: "center",
+      items: [
+        {
+          xtype: "label",
+          region: "north",
+          text: <?= t("Drag and drop photos to re-order or move between albums")->for_js() ?>,
+          margins: "5 5 5 10",
+        },
+        {
+          xtype: "panel",
+          layout: "fit",
+          region: "center",
+          items: [thumb_data_view]
+        },
+        button_panel
+      ]
+    });
 
-      var red = parseInt(digits[2]);
-      var green = parseInt(digits[3]);
-      var blue = parseInt(digits[4]);
+    /*
+     * ********************************************************************************
+     *  TreeLoader and TreePanel
+     * ********************************************************************************
+     */
+    var tree_loader = new Ext.tree.TreeLoader({
+      dataUrl: '<?= url::site("organize/tree/{$album->id}") ?>',
+      nodeParameter: "root_id",
+      requestMethod: "post",
+    });
 
-      var rgb = blue | (green << 8) | (red << 16);
-      return digits[1] + '0x' + rgb.toString(16);
-    }
-  }
+    var tree_panel = new Ext.tree.TreePanel({
+      useArrows: true,
+      autoScroll: true,
+      animate: true,
+      border: false,
+      containerScroll: true,
+      enableDD: true,
+      ddGroup: "organizeDD",
+      listeners: {
+        "click": function(node) {
+          load_album_data(node.id);
+        },
+        "render": function(v) {
+          v.dropZone = new Ext.dd.DropZone(v.getEl(), {
+            getTargetFromEvent: function(e) {
+              return e.getTarget("div.x-tree-node-el", 10);
+            },
+            onNodeDrop: function(target, dd, e, data) {
+              var nodes = data.nodes;
+              source_ids = [];
+              for (var i = 0; i != nodes.length; i++) {
+                var node = Ext.fly(nodes[i]);
+                source_ids.push(node.getAttribute("rel"));
+              }
+              var target_id = target.getAttribute("ext:tree-node-id");
+              Ext.Msg.wait(<?= t("Moving...")->for_js() ?>);
+              Ext.Ajax.request({
+                url: '<?= url::site("organize/reparent") ?>',
+                method: "post",
+                success: function() {
+                  Ext.Msg.hide();
+                  reload_album_data();
+                  v.getNodeById(target_id).reload();
 
-  function getTextStrings() {
-    return {
-      statusText: <?= t("Drag and drop photos to re-order or move between album")->for_js() ?>,
-      remoteError:
-        <?= t("Remote server error, please contact your gallery administrator")->for_js() ?>,
-      addAlbumError: <?= t("The above highlighted fields are invalid")->for_js() ?>,
-      errorOccurred: <?= t("Remote error ocurred")->for_js() ?>,
-      addAlbum: <?= t("Add album")->for_js() ?>,
-      addImages: <?= t("Add photo")->for_js() ?>,
-      deleteSelected: <?= t("Delete")->for_js() ?>,
-      uploadedText: <?= t("Uploaded {0}")->for_js() ?>,
-      removeFileText: <?= t("Remove")->for_js() ?>,
-      progressLabel:  <?= t("Completed image %1 of %2")->for_js() ?>,
-      uploadLabel:  <?= t("Loaded %1 of %2 bytes")->for_js() ?>,
-      moveTitle:  <?= t("Move images")->for_js() ?>,
-      deleteTitle:  <?= t("Delete image")->for_js() ?>,
-      uploadTitle:  <?= t("Upload image")->for_js() ?>,
-      cancel: <?= t("Cancel")->for_js() ?>,
-      close: <?= t("Close")->for_js() ?>
-    };
-  }
+                  // If the target node contains the selected node, then the selected
+                  // node just got strafed by the target's reload and no longer exists,
+                  // so we can't reload it.
+                  var selected_node = v.getNodeById(current_album_id);
+                  if (selected_node) {
+                    selected_node.reload();
+                  }
+                },
+                failure: function() {
+                  Ext.Msg.hide();
+                  Ext.Msg.alert(
+                    <?= t("An error occurred.  Consult your system administrator.")->for_js() ?>);
+                },
+                params: {
+                  source_ids: source_ids.join(","),
+                  target_id: target_id,
+                  csrf: '<?= access::csrf_token() ?>'
+                }
+              });
+              return true;
+            }
+          })
+        }
+      },
+      loader: tree_loader,
 
-  function getGalleryParameters() {
-    return {
-      domain: "<?= $domain ?>",
-      accessKey: "<?= $access_key ?>",
-      protocol: "<?= request::protocol() ?>",
-      fileFilter: "<?= $file_filter ?>",
-      sortOrder: "<?= $sort_order ?>",
-      sortFields: "<?= $sort_fields ?>",
-      albumId: "<?= $album->id ?>",
-      selectedId: "<?= $selected_id ?>",
-      restUri: "<?= $rest_uri ?>",
-      controllerUri: "<?= $controller_uri ?>"
-    };
-  };
-
-  // For version detection, set to minimum required Flash Player version, or 0 (or 0.0.0),
-  // for no version detection.
-  var swfVersionStr = "<?= $flash_minimum_version = "10.0.0" ?>";
-
-  // To use express install, set to playerProductInstall.swf, otherwise the empty string.
-  var xiSwfUrlStr = "";
-  var flashvars = {};
-
-  var size = $.gallery_get_viewport_size();
-
-  var params = {};
-  params.quality = "high";
-  params.bgcolor = "#ffffff";
-  params.allowNetworking = "all";
-  params.allowscriptaccess = "sameDomain";
-  params.allowfullscreen = "true";
-  var attributes = {};
-  attributes.id = "Gallery3WebClient";
-  attributes.name = "Gallery3WebClient";
-  attributes.align = "middle";
-  swfobject.embedSWF("<?= $swf_uri ?>",
-                     "flashContent", size.width() - 100,  size.height() - 135,
-                     swfVersionStr, xiSwfUrlStr, flashvars, params, attributes);
+      region: "west",
+      width: 150,
+      split: true,
+
+      root: {
+        nodeType: "async",
+        text: "<?= item::root()->title ?>",
+        draggable: false,
+        id: "<?= item::root()->id ?>",
+        expanded: true,
+      }
+    });
+
+    var first_organize_load = true;
+    tree_loader.addListener("load", function() {
+      if (first_organize_load) {
+        tree_panel.getNodeById(<?= $album->id ?>).select();
+        load_album_data(<?= $album->id ?>);
+        first_organize_load = false;
+        tree_loader.doPreload = function() { return false; }
+      }
+    });
+    tree_panel.getRootNode().expand();
+
+    new Ext.Viewport({
+      layout: "border",
+      cls: "g-organize",
+      items: [tree_panel, album_panel]
+    });
+  });
 </script>
-<div id="g-organize" class="g-dialog-panel">
-    <!-- The following spans are placeholders so we can load the hover and active styles for the flex component -->
-    <span id="g-organize-hover" /><span id="g-organize-active" />
-  <h1 style="display:none"><?= t("Organize :: %name", array("name" => html::purify($album->title))) ?></h1>
-  <div id="flashContent">
-    <p>
-      <?= t("Your browser must have Adobe Flash Player version %flash_minimum_version or greater installed to use this feature.", array("flash_minimum_version" => $flash_minimum_version)) ?>
-    </p>
-    <a href="http://www.adobe.com/go/getflashplayer">
-      <img src="<?= request::protocol() ?>://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"
-           alt=<?= t("Get Adobe Flash Player")->for_js() ?> />
-    </a>
-  </div>
-</div>
-- 
cgit v1.2.3


From 90852b192970173042ac34191b12be725021897a Mon Sep 17 00:00:00 2001
From: Bharat Mediratta <bharat@menalto.com>
Date: Mon, 3 Jan 2011 21:23:21 -0800
Subject: whitespace fix.

---
 modules/organize/views/organize_dialog.html.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'modules/organize/views/organize_dialog.html.php')

diff --git a/modules/organize/views/organize_dialog.html.php b/modules/organize/views/organize_dialog.html.php
index b2e56a04..9f89ba4d 100644
--- a/modules/organize/views/organize_dialog.html.php
+++ b/modules/organize/views/organize_dialog.html.php
@@ -103,7 +103,7 @@
                   div.className = "multi-proxy";
                   for (var i = 0; i != selected_nodes.length; i++) {
                     div.appendChild(selected_nodes[i].cloneNode(true));
-                    if ((i+1) % 3 == 0) {
+                    if ((i + 1) % 3 == 0) {
                       div.appendChild(document.createElement("br"));
                     }
                   }
-- 
cgit v1.2.3


From 3928058ba5897eb2c6a2f3fb76664012db014a89 Mon Sep 17 00:00:00 2001
From: Bharat Mediratta <bharat@menalto.com>
Date: Mon, 3 Jan 2011 22:31:20 -0800
Subject: Fix a few small visual issues: - Let the thumb data view scroll on
 drag/drop - Switch the album panel to be a FitLayout and use a title and  
 bbar instead of nested panels. - Set the tree_panel width to be 200px to
 start.

---
 modules/organize/views/organize_dialog.html.php | 27 +++++++++----------------
 1 file changed, 9 insertions(+), 18 deletions(-)

(limited to 'modules/organize/views/organize_dialog.html.php')

diff --git a/modules/organize/views/organize_dialog.html.php b/modules/organize/views/organize_dialog.html.php
index 9f89ba4d..0135707a 100644
--- a/modules/organize/views/organize_dialog.html.php
+++ b/modules/organize/views/organize_dialog.html.php
@@ -85,6 +85,7 @@
       listeners: {
         "render": function(v) {
           v.dragZone = new Ext.dd.DragZone(v.getEl(), {
+            containerScroll: true,
             getDragData: function(e) {
               var target = e.getTarget(v.itemSelector, 10);
               if (target) {
@@ -248,23 +249,11 @@
     });
 
     var album_panel = new Ext.Panel({
-      layout: "border",
+      layout: "fit",
       region: "center",
-      items: [
-        {
-          xtype: "label",
-          region: "north",
-          text: <?= t("Drag and drop photos to re-order or move between albums")->for_js() ?>,
-          margins: "5 5 5 10",
-        },
-        {
-          xtype: "panel",
-          layout: "fit",
-          region: "center",
-          items: [thumb_data_view]
-        },
-        button_panel
-      ]
+      title: <?= t("Drag and drop photos to re-order or move between albums")->for_js() ?>,
+      items: [thumb_data_view],
+      bbar: button_panel
     });
 
     /*
@@ -339,8 +328,10 @@
       loader: tree_loader,
 
       region: "west",
-      width: 150,
       split: true,
+      minSize: 200,
+      maxSize: 350,
+      width: 200,
 
       root: {
         nodeType: "async",
@@ -362,7 +353,7 @@
     });
     tree_panel.getRootNode().expand();
 
-    new Ext.Viewport({
+    var outer = new Ext.Viewport({
       layout: "border",
       cls: "g-organize",
       items: [tree_panel, album_panel]
-- 
cgit v1.2.3


From 79f27ea1ecefd6e0fdf725f218cc66c18b568fb4 Mon Sep 17 00:00:00 2001
From: Bharat Mediratta <bharat@menalto.com>
Date: Mon, 3 Jan 2011 22:59:07 -0800
Subject: Remove a bunch of trailing commas from arrays to make IE happy.

---
 modules/organize/views/organize_dialog.html.php | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

(limited to 'modules/organize/views/organize_dialog.html.php')

diff --git a/modules/organize/views/organize_dialog.html.php b/modules/organize/views/organize_dialog.html.php
index 0135707a..7c812f32 100644
--- a/modules/organize/views/organize_dialog.html.php
+++ b/modules/organize/views/organize_dialog.html.php
@@ -178,6 +178,11 @@
      * Toolbar with sort column, sort order and a close button.
      * ********************************************************************************
      */
+
+    sort_order_data = [];
+    <? foreach (album::get_sort_order_options() as $key => $value): ?>
+    sort_order_data.push(["<?= $key ?>", <?= $value->for_js() ?>]);
+    <? endforeach ?>
     var sort_column_combobox = new Ext.form.ComboBox({
       mode: "local",
       editable: false,
@@ -187,11 +192,7 @@
       store: new Ext.data.ArrayStore({
         id: 0,
         fields: ["key", "value"],
-        data: [
-        <? foreach (album::get_sort_order_options() as $key => $value): ?>
-          ["<?= $key ?>", <?= $value->for_js() ?>],
-        <? endforeach ?>
-        ]
+        data: sort_order_data
       }),
       listeners: {
         "select": function(combo, record, index) {
@@ -234,7 +235,7 @@
       items: [sort_column_combobox, sort_order_combobox,
         {
           xtype: "spacer",
-          flex: 4,
+          flex: 4
         }, {
           xtype: "button",
           flex: 1,
@@ -244,7 +245,7 @@
               parent.done_organizing(current_album_id);
             }
           }
-        },
+        }
       ]
     });
 
@@ -264,7 +265,7 @@
     var tree_loader = new Ext.tree.TreeLoader({
       dataUrl: '<?= url::site("organize/tree/{$album->id}") ?>',
       nodeParameter: "root_id",
-      requestMethod: "post",
+      requestMethod: "post"
     });
 
     var tree_panel = new Ext.tree.TreePanel({
@@ -338,7 +339,7 @@
         text: "<?= item::root()->title ?>",
         draggable: false,
         id: "<?= item::root()->id ?>",
-        expanded: true,
+        expanded: true
       }
     });
 
-- 
cgit v1.2.3


From 51d66df1924b9fb835ed741042beddce4f6e899f Mon Sep 17 00:00:00 2001
From: Bharat Mediratta <bharat@menalto.com>
Date: Tue, 4 Jan 2011 00:14:53 -0800
Subject: Switch to using Ext.Element.mask for a custom busy message that looks
 a little cleaner.

---
 modules/organize/css/organize.css               |  9 +++++++
 modules/organize/views/organize_dialog.html.php | 32 +++++++++++++++----------
 2 files changed, 29 insertions(+), 12 deletions(-)

(limited to 'modules/organize/views/organize_dialog.html.php')

diff --git a/modules/organize/css/organize.css b/modules/organize/css/organize.css
index 00395520..be449138 100644
--- a/modules/organize/css/organize.css
+++ b/modules/organize/css/organize.css
@@ -58,3 +58,12 @@ div.multi-proxy div {
   font-size: 12px;
   line-height: 20px;
 }
+
+.loading div {
+  font-size: 1.1em;
+  padding-left: 24px;
+  background-color: white;
+  background-image: url(../vendor/ext/images/default/tree/loading.gif);
+  background-position: 4px 8px;
+  background-repeat: no-repeat;
+}
diff --git a/modules/organize/views/organize_dialog.html.php b/modules/organize/views/organize_dialog.html.php
index 7c812f32..a3b1a1c5 100644
--- a/modules/organize/views/organize_dialog.html.php
+++ b/modules/organize/views/organize_dialog.html.php
@@ -20,13 +20,21 @@
      * Utility functions for loading data and making changes
      * ********************************************************************************
      */
+    var start_busy = function(msg) {
+      outer.el.mask(msg, "loading");
+    }
+
+    var stop_busy = function() {
+      outer.el.unmask();
+    }
+
     var current_album_id = null;
     var load_album_data = function(id) {
-      Ext.Msg.wait(<?= t("Loading...")->for_js() ?>);
+      start_busy(<?= t("Loading...")->for_js() ?>);
       Ext.Ajax.request({
         url: '<?= url::site("organize/album_info/__ID__") ?>'.replace("__ID__", id),
         success: function(xhr, opts) {
-          Ext.Msg.hide();
+          stop_busy();
           var album_info = Ext.util.JSON.decode(xhr.responseText);
           var store = new Ext.data.JsonStore({
             autoDestroy: true,
@@ -41,7 +49,7 @@
           sort_order_combobox.setValue(album_info.sort_order);
         },
         failure: function() {
-          Ext.Msg.hide();
+          stop_busy();
           Ext.Msg.alert(
             <?= t("An error occurred.  Consult your system administrator.")->for_js() ?>);
         }
@@ -55,17 +63,17 @@
     };
 
     var set_album_sort = function(params) {
-      Ext.Msg.wait(<?= t("Changing sort...")->for_js() ?>);
+      start_busy(<?= t("Changing sort...")->for_js() ?>);
       params['csrf'] = '<?= access::csrf_token() ?>';
       Ext.Ajax.request({
         url: '<?= url::site("organize/set_sort/__ID__") ?>'.replace("__ID__", current_album_id),
         method: "post",
         success: function() {
-          Ext.Msg.hide();
+          stop_busy();
           reload_album_data();
         },
         failure: function() {
-          Ext.Msg.hide();
+          stop_busy();
           Ext.Msg.alert(
             <?= t("An error occurred.  Consult your system administrator.")->for_js() ?>);
         },
@@ -137,16 +145,16 @@
               for (var i = 0; i != nodes.length; i++) {
                 source_ids.push(Ext.fly(nodes[i]).getAttribute("rel"));
               }
-              Ext.Msg.wait(<?= t("Rearranging...")->for_js() ?>);
+              start_busy(<?= t("Rearranging...")->for_js() ?>);
               Ext.Ajax.request({
                 url: '<?= url::site("organize/move_before") ?>',
                 method: "post",
                 success: function() {
-                  Ext.Msg.hide();
+                  stop_busy();
                   reload_album_data();
                 },
                 failure: function() {
-                  Ext.Msg.hide();
+                  stop_busy();
                   Ext.Msg.alert(
                     <?= t("An error occurred.  Consult your system administrator.")->for_js() ?>);
                 },
@@ -293,12 +301,12 @@
                 source_ids.push(node.getAttribute("rel"));
               }
               var target_id = target.getAttribute("ext:tree-node-id");
-              Ext.Msg.wait(<?= t("Moving...")->for_js() ?>);
+              start_busy(<?= t("Moving...")->for_js() ?>);
               Ext.Ajax.request({
                 url: '<?= url::site("organize/reparent") ?>',
                 method: "post",
                 success: function() {
-                  Ext.Msg.hide();
+                  stop_busy();
                   reload_album_data();
                   v.getNodeById(target_id).reload();
 
@@ -311,7 +319,7 @@
                   }
                 },
                 failure: function() {
-                  Ext.Msg.hide();
+                  stop_busy();
                   Ext.Msg.alert(
                     <?= t("An error occurred.  Consult your system administrator.")->for_js() ?>);
                 },
-- 
cgit v1.2.3


From 31652eae44bdd93b45d965a8288a3069e37d1934 Mon Sep 17 00:00:00 2001
From: Bharat Mediratta <bharat@menalto.com>
Date: Tue, 4 Jan 2011 22:00:30 -0800
Subject: Drag/drop improvements: - Restrict drag and drop to albums where the
 user has edit permissions. - Use the existing TreeDropZone instead of making
 a new DropZone to take   advantage of TreeDropZone features. - Properly use
 dropConfig in TreePanel.

---
 modules/organize/views/organize_dialog.html.php | 85 ++++++++++++-------------
 1 file changed, 42 insertions(+), 43 deletions(-)

(limited to 'modules/organize/views/organize_dialog.html.php')

diff --git a/modules/organize/views/organize_dialog.html.php b/modules/organize/views/organize_dialog.html.php
index a3b1a1c5..4d4bf990 100644
--- a/modules/organize/views/organize_dialog.html.php
+++ b/modules/organize/views/organize_dialog.html.php
@@ -93,6 +93,7 @@
       listeners: {
         "render": function(v) {
           v.dragZone = new Ext.dd.DragZone(v.getEl(), {
+            ddGroup: "organizeDD",
             containerScroll: true,
             getDragData: function(e) {
               var target = e.getTarget(v.itemSelector, 10);
@@ -283,55 +284,52 @@
       border: false,
       containerScroll: true,
       enableDD: true,
-      ddGroup: "organizeDD",
+      dropConfig: {
+        appendOnly: true,
+        ddGroup: "organizeDD",
+      },
       listeners: {
         "click": function(node) {
           load_album_data(node.id);
         },
-        "render": function(v) {
-          v.dropZone = new Ext.dd.DropZone(v.getEl(), {
-            getTargetFromEvent: function(e) {
-              return e.getTarget("div.x-tree-node-el", 10);
-            },
-            onNodeDrop: function(target, dd, e, data) {
-              var nodes = data.nodes;
-              source_ids = [];
-              for (var i = 0; i != nodes.length; i++) {
-                var node = Ext.fly(nodes[i]);
-                source_ids.push(node.getAttribute("rel"));
-              }
-              var target_id = target.getAttribute("ext:tree-node-id");
-              start_busy(<?= t("Moving...")->for_js() ?>);
-              Ext.Ajax.request({
-                url: '<?= url::site("organize/reparent") ?>',
-                method: "post",
-                success: function() {
-                  stop_busy();
-                  reload_album_data();
-                  v.getNodeById(target_id).reload();
+        "afterrender": function(v) {
+          v.dropZone.onNodeDrop = function(target, dd, e, data) {
+            var nodes = data.nodes;
+            source_ids = [];
+            for (var i = 0; i != nodes.length; i++) {
+              var node = Ext.fly(nodes[i]);
+              source_ids.push(node.getAttribute("rel"));
+            }
+            start_busy(<?= t("Moving...")->for_js() ?>);
+            Ext.Ajax.request({
+              url: '<?= url::site("organize/reparent") ?>',
+              method: "post",
+              success: function() {
+                stop_busy();
+                reload_album_data();
+                target.node.reload();
 
-                  // If the target node contains the selected node, then the selected
-                  // node just got strafed by the target's reload and no longer exists,
-                  // so we can't reload it.
-                  var selected_node = v.getNodeById(current_album_id);
-                  if (selected_node) {
-                    selected_node.reload();
-                  }
-                },
-                failure: function() {
-                  stop_busy();
-                  Ext.Msg.alert(
-                    <?= t("An error occurred.  Consult your system administrator.")->for_js() ?>);
-                },
-                params: {
-                  source_ids: source_ids.join(","),
-                  target_id: target_id,
-                  csrf: '<?= access::csrf_token() ?>'
+                // If the target node contains the selected node, then the selected
+                // node just got strafed by the target's reload and no longer exists,
+                // so we can't reload it.
+                var selected_node = v.getNodeById(current_album_id);
+                if (selected_node) {
+                  selected_node.reload();
                 }
-              });
-              return true;
-            }
-          })
+              },
+              failure: function() {
+                stop_busy();
+                Ext.Msg.alert(
+                  <?= t("An error occurred.  Consult your system administrator.")->for_js() ?>);
+              },
+              params: {
+                source_ids: source_ids.join(","),
+                target_id: target.node.id,
+                csrf: '<?= access::csrf_token() ?>'
+              }
+            });
+            return true;
+          }
         }
       },
       loader: tree_loader,
@@ -343,6 +341,7 @@
       width: 200,
 
       root: {
+        allowDrop: Boolean(<?= access::can("edit", item::root()) ?>),
         nodeType: "async",
         text: "<?= item::root()->title ?>",
         draggable: false,
-- 
cgit v1.2.3


From bd5e71ba6a84b4cda484bb4e4a8a77889bb0a02d Mon Sep 17 00:00:00 2001
From: Bharat Mediratta <bharat@menalto.com>
Date: Tue, 4 Jan 2011 22:20:24 -0800
Subject: More drag/drop tweaks. - Fix a bug in the prior commit where we could
 no longer drag/drop in   the thumb_data_view. - Change the CSS class when
 dropping items in the tree panel to be a   check box, not a plus symbol.

---
 modules/organize/views/organize_dialog.html.php | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

(limited to 'modules/organize/views/organize_dialog.html.php')

diff --git a/modules/organize/views/organize_dialog.html.php b/modules/organize/views/organize_dialog.html.php
index 4d4bf990..b398a19d 100644
--- a/modules/organize/views/organize_dialog.html.php
+++ b/modules/organize/views/organize_dialog.html.php
@@ -128,6 +128,7 @@
           });
 
           v.dropZone = new Ext.dd.DropZone(v.getEl(), {
+            ddGroup: "organizeDD",
             getTargetFromEvent: function(e) {
               return e.getTarget("div.thumb", 10);
             },
@@ -293,6 +294,22 @@
           load_album_data(node.id);
         },
         "afterrender": function(v) {
+          // Override Ext.tree.TreeDragZone.onNodeOver to change the
+          // x-tree-drop-ok-append CSS class to be x-dd-drop-ok since
+          // that connotes "ok" instead of "adding something new" and we're
+          // moving the item, not adding it.
+          //
+          // There's probably a better way of overriding the parent method, but
+          // my JavaScript-fu is weak.
+          v.dropZone.super_onNodeOver = v.dropZone.onNodeOver;
+          v.dropZone.onNodeOver = function(target, dd, e, data) {
+            var returnCls = this.super_onNodeOver(target, dd, e, data);
+            if (returnCls == "x-tree-drop-ok-append") {
+              return "x-dd-drop-ok";
+            }
+            return returnCls;
+          }
+
           v.dropZone.onNodeDrop = function(target, dd, e, data) {
             var nodes = data.nodes;
             source_ids = [];
-- 
cgit v1.2.3


From c590f881ebbb005390f6e4f8a37a6252a5796f51 Mon Sep 17 00:00:00 2001
From: Bharat Mediratta <bharat@menalto.com>
Date: Wed, 5 Jan 2011 01:25:17 -0800
Subject: single -> double quotes.

---
 modules/organize/views/organize_dialog.html.php | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

(limited to 'modules/organize/views/organize_dialog.html.php')

diff --git a/modules/organize/views/organize_dialog.html.php b/modules/organize/views/organize_dialog.html.php
index b398a19d..773e1955 100644
--- a/modules/organize/views/organize_dialog.html.php
+++ b/modules/organize/views/organize_dialog.html.php
@@ -7,7 +7,6 @@
     background-image: url(<?= url::file("modules/organize/vendor/ext/images/default/tree/folder.gif") ?>);
   }
 </style>
-
 <script type="text/javascript" src="<?= url::file("modules/organize/vendor/ext/js/ext-base.js") ?>"></script>
 <script type="text/javascript" src="<?= url::file("modules/organize/vendor/ext/js/ext-all.js") ?>"></script>
 <script type="text/javascript">
@@ -64,7 +63,7 @@
 
     var set_album_sort = function(params) {
       start_busy(<?= t("Changing sort...")->for_js() ?>);
-      params['csrf'] = '<?= access::csrf_token() ?>';
+      params["csrf"] = '<?= access::csrf_token() ?>';
       Ext.Ajax.request({
         url: '<?= url::site("organize/set_sort/__ID__") ?>'.replace("__ID__", current_album_id),
         method: "post",
-- 
cgit v1.2.3


From 372905bd1310fc446db795661e1eb013674e5a75 Mon Sep 17 00:00:00 2001
From: Bharat Mediratta <bharat@menalto.com>
Date: Wed, 5 Jan 2011 02:00:40 -0800
Subject: Support moving an item before or after the target.

---
 modules/organize/controllers/organize.php       | 11 ++++++++---
 modules/organize/css/organize.css               |  7 ++++++-
 modules/organize/views/organize_dialog.html.php | 23 +++++++++++++++++------
 3 files changed, 31 insertions(+), 10 deletions(-)

(limited to 'modules/organize/views/organize_dialog.html.php')

diff --git a/modules/organize/controllers/organize.php b/modules/organize/controllers/organize.php
index 18e6054b..c23d6d61 100644
--- a/modules/organize/controllers/organize.php
+++ b/modules/organize/controllers/organize.php
@@ -103,7 +103,7 @@ class Organize_Controller extends Controller {
     json::reply(null);
   }
 
-  function move_before() {
+  function rearrange() {
     access::verify_csrf();
 
     $input = Input::instance();
@@ -125,20 +125,25 @@ class Organize_Controller extends Controller {
     }
 
     $source_ids = explode(",", $input->post("source_ids"));
+    $base_weight = $target->weight;
+    if ($input->post("relative") == "after") {
+      $base_weight++;
+    }
+
     if ($source_ids) {
       // Make a hole the right size
       db::build()
         ->update("items")
         ->set("weight", db::expr("`weight` + " . count($source_ids)))
         ->where("parent_id", "=", $album->id)
-        ->where("weight", ">=", $target->weight)
+        ->where("weight", ">=", $base_weight)
         ->execute();
 
       // Move all the source items to the right spots.
       for ($i = 0; $i < count($source_ids); $i++) {
         $source = ORM::factory("item", $source_ids[$i]);
         if ($source->parent_id = $album->id) {
-          $source->weight = $target->weight + $i;
+          $source->weight = $base_weight + $i;
           $source->save();
         }
       }
diff --git a/modules/organize/css/organize.css b/modules/organize/css/organize.css
index be449138..82de9ad7 100644
--- a/modules/organize/css/organize.css
+++ b/modules/organize/css/organize.css
@@ -45,11 +45,16 @@
   background: #eee;
 }
 
-.g-organize div.active {
+.g-organize div.active-left {
   border-left: 4px solid #C9D8EB;
   margin-left: 4px;
 }
 
+.g-organize div.active-right {
+  border-right: 4px solid #C9D8EB;
+  margin-right: 4px;
+}
+
 div.multi-proxy div {
   display: inline-block;
 }
diff --git a/modules/organize/views/organize_dialog.html.php b/modules/organize/views/organize_dialog.html.php
index 773e1955..a482fb92 100644
--- a/modules/organize/views/organize_dialog.html.php
+++ b/modules/organize/views/organize_dialog.html.php
@@ -131,13 +131,22 @@
             getTargetFromEvent: function(e) {
               return e.getTarget("div.thumb", 10);
             },
-            onNodeEnter: function(target, dd, e, data) {
-              Ext.fly(target).addClass("active");
-            },
             onNodeOut: function(target, dd, e, data) {
-              Ext.fly(target).removeClass("active");
+              Ext.fly(target).removeClass("active-left");
+              Ext.fly(target).removeClass("active-right");
             },
             onNodeOver: function(target, dd, e, data) {
+              var target_x = Ext.lib.Dom.getX(target);
+              var target_center = target_x + (target.offsetWidth / 2);
+              if (Ext.lib.Event.getPageX(e) < target_center) {
+                Ext.fly(target).addClass("active-left");
+                Ext.fly(target).removeClass("active-right");
+                this.drop_side = "before";
+              } else {
+                Ext.fly(target).removeClass("active-left");
+                Ext.fly(target).addClass("active-right");
+                this.drop_side = "after";
+              }
               return Ext.dd.DropZone.prototype.dropAllowed;
             },
             onNodeDrop: function(target, dd, e, data) {
@@ -147,8 +156,9 @@
                 source_ids.push(Ext.fly(nodes[i]).getAttribute("rel"));
               }
               start_busy(<?= t("Rearranging...")->for_js() ?>);
+              target = Ext.fly(target);
               Ext.Ajax.request({
-                url: '<?= url::site("organize/move_before") ?>',
+                url: '<?= url::site("organize/rearrange") ?>',
                 method: "post",
                 success: function() {
                   stop_busy();
@@ -161,7 +171,8 @@
                 },
                 params: {
                   source_ids: source_ids.join(","),
-                  target_id: Ext.fly(target).getAttribute("rel"),
+                  target_id: target.getAttribute("rel"),
+                  relative: this.drop_side, // calculated in onNodeOver
                   csrf: '<?= access::csrf_token() ?>'
                 }
               });
-- 
cgit v1.2.3


From b8124efbd8f068758e70e53cc94fb1ea6c2b9ffb Mon Sep 17 00:00:00 2001
From: Bharat Mediratta <bharat@menalto.com>
Date: Wed, 5 Jan 2011 20:37:14 -0800
Subject: Refactor generic error handling code.  It still shows a pretty lame
 error message. Add a comment explaining the TreeLoader preload hack.

---
 modules/organize/views/organize_dialog.html.php | 38 +++++++++++--------------
 1 file changed, 16 insertions(+), 22 deletions(-)

(limited to 'modules/organize/views/organize_dialog.html.php')

diff --git a/modules/organize/views/organize_dialog.html.php b/modules/organize/views/organize_dialog.html.php
index a482fb92..8ba9b3cc 100644
--- a/modules/organize/views/organize_dialog.html.php
+++ b/modules/organize/views/organize_dialog.html.php
@@ -27,6 +27,12 @@
       outer.el.unmask();
     }
 
+    var show_generic_error = function() {
+      stop_busy();
+      Ext.Msg.alert(
+        <?= t("An error occurred.  Consult your system administrator.")->for_js() ?>);
+    }
+
     var current_album_id = null;
     var load_album_data = function(id) {
       start_busy(<?= t("Loading...")->for_js() ?>);
@@ -47,11 +53,7 @@
           sort_column_combobox.setValue(album_info.sort_column);
           sort_order_combobox.setValue(album_info.sort_order);
         },
-        failure: function() {
-          stop_busy();
-          Ext.Msg.alert(
-            <?= t("An error occurred.  Consult your system administrator.")->for_js() ?>);
-        }
+        failure: show_generic_error
       });
     };
 
@@ -71,11 +73,7 @@
           stop_busy();
           reload_album_data();
         },
-        failure: function() {
-          stop_busy();
-          Ext.Msg.alert(
-            <?= t("An error occurred.  Consult your system administrator.")->for_js() ?>);
-        },
+        failure: show_generic_error,
         params: params
       });
     }
@@ -85,7 +83,7 @@
      * JsonStore, DataView and Panel for viewing albums
      * ********************************************************************************
      */
-    thumb_data_view = new Ext.DataView({
+    var thumb_data_view = new Ext.DataView({
       autoScroll: true,
       enableDragDrop: true,
       itemSelector: "div.thumb",
@@ -164,11 +162,7 @@
                   stop_busy();
                   reload_album_data();
                 },
-                failure: function() {
-                  stop_busy();
-                  Ext.Msg.alert(
-                    <?= t("An error occurred.  Consult your system administrator.")->for_js() ?>);
-                },
+                failure: show_generic_error,
                 params: {
                   source_ids: source_ids.join(","),
                   target_id: target.getAttribute("rel"),
@@ -181,7 +175,6 @@
           });
         }
       },
-      loadingText: <?= t("Loading...")->for_js() ?>,
       multiSelect: true,
       selectedClass: "selected",
       tpl: new Ext.XTemplate(
@@ -344,11 +337,7 @@
                   selected_node.reload();
                 }
               },
-              failure: function() {
-                stop_busy();
-                Ext.Msg.alert(
-                  <?= t("An error occurred.  Consult your system administrator.")->for_js() ?>);
-              },
+              failure: show_generic_error,
               params: {
                 source_ids: source_ids.join(","),
                 target_id: target.node.id,
@@ -383,6 +372,11 @@
         tree_panel.getNodeById(<?= $album->id ?>).select();
         load_album_data(<?= $album->id ?>);
         first_organize_load = false;
+
+        // This is a hack that allows us to reload tree nodes asynchronously
+        // even though they came with preloaded hierarchical data from the
+        // initial tree load.  Without this, any nodes that were preloaded
+        // initially won't refresh if you call node.reload() on them.
         tree_loader.doPreload = function() { return false; }
       }
     });
-- 
cgit v1.2.3


From ce70669b8f09a9154723df80992ab6afe02c1d5c Mon Sep 17 00:00:00 2001
From: Bharat Mediratta <bharat@menalto.com>
Date: Wed, 5 Jan 2011 21:17:11 -0800
Subject: Visual tweaks for IE8 compatibility.

Set the min width and min height to what IE8 wants the thumbnail's box
to be when the inner image maxes out at 120 pixels (specified in
Organize_Controller::album_info()).

Avoid using inline-block.
---
 modules/organize/css/organize.css               | 9 +++------
 modules/organize/views/organize_dialog.html.php | 4 ++--
 2 files changed, 5 insertions(+), 8 deletions(-)

(limited to 'modules/organize/views/organize_dialog.html.php')

diff --git a/modules/organize/css/organize.css b/modules/organize/css/organize.css
index 81f41f21..6b034fc2 100644
--- a/modules/organize/css/organize.css
+++ b/modules/organize/css/organize.css
@@ -5,8 +5,8 @@
 .g-organize div.thumb {
   padding: 8px;
   margin: 8px;
-  width: 128px;
-  height: 128px;
+  width: 144px;
+  height: 149px;
   vertical-align: middle;
   float: left;
 }
@@ -17,6 +17,7 @@
 
 .g-organize div.thumb img {
   border: 4px solid white;
+  margin: 0px;
 }
 
 .g-organize div.thumb:hover {
@@ -55,10 +56,6 @@
   margin-right: 4px;
 }
 
-div.multi-proxy div {
-  display: inline-block;
-}
-
 .g-organize .x-tree-node-el {
   font-size: 12px;
   line-height: 20px;
diff --git a/modules/organize/views/organize_dialog.html.php b/modules/organize/views/organize_dialog.html.php
index 8ba9b3cc..eaba6cdd 100644
--- a/modules/organize/views/organize_dialog.html.php
+++ b/modules/organize/views/organize_dialog.html.php
@@ -109,7 +109,7 @@
                   var div = document.createElement("div");
                   div.className = "multi-proxy";
                   for (var i = 0; i != selected_nodes.length; i++) {
-                    div.appendChild(selected_nodes[i].cloneNode(true));
+                    div.appendChild(Ext.get(selected_nodes[i]).dom.firstChild.cloneNode(true));
                     if ((i + 1) % 3 == 0) {
                       div.appendChild(document.createElement("br"));
                     }
@@ -290,7 +290,7 @@
       enableDD: true,
       dropConfig: {
         appendOnly: true,
-        ddGroup: "organizeDD",
+        ddGroup: "organizeDD"
       },
       listeners: {
         "click": function(node) {
-- 
cgit v1.2.3


From 986374300191892ae5672ea545977831d7a0b807 Mon Sep 17 00:00:00 2001
From: Bharat Mediratta <bharat@menalto.com>
Date: Wed, 5 Jan 2011 21:22:41 -0800
Subject: Only refresh the tree when we move albums around.

---
 modules/organize/views/organize_dialog.html.php | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

(limited to 'modules/organize/views/organize_dialog.html.php')

diff --git a/modules/organize/views/organize_dialog.html.php b/modules/organize/views/organize_dialog.html.php
index eaba6cdd..a1d57958 100644
--- a/modules/organize/views/organize_dialog.html.php
+++ b/modules/organize/views/organize_dialog.html.php
@@ -316,9 +316,11 @@
           v.dropZone.onNodeDrop = function(target, dd, e, data) {
             var nodes = data.nodes;
             source_ids = [];
+            var moving_albums = 0;
             for (var i = 0; i != nodes.length; i++) {
               var node = Ext.fly(nodes[i]);
               source_ids.push(node.getAttribute("rel"));
+              moving_albums |= node.hasClass("thumb-album");
             }
             start_busy(<?= t("Moving...")->for_js() ?>);
             Ext.Ajax.request({
@@ -327,14 +329,18 @@
               success: function() {
                 stop_busy();
                 reload_album_data();
-                target.node.reload();
 
-                // If the target node contains the selected node, then the selected
-                // node just got strafed by the target's reload and no longer exists,
-                // so we can't reload it.
-                var selected_node = v.getNodeById(current_album_id);
-                if (selected_node) {
-                  selected_node.reload();
+                // If we're moving albums around then we need to refresh the tree when we're done
+                if (moving_albums) {
+                  target.node.reload();
+
+                  // If the target node contains the selected node, then the selected
+                  // node just got strafed by the target's reload and no longer exists,
+                  // so we can't reload it.
+                  var selected_node = v.getNodeById(current_album_id);
+                  if (selected_node) {
+                    selected_node.reload();
+                  }
                 }
               },
               failure: show_generic_error,
-- 
cgit v1.2.3


From e6b3886f8f6a3a526876a80470420501bdb25612 Mon Sep 17 00:00:00 2001
From: Bharat Mediratta <bharat@menalto.com>
Date: Wed, 5 Jan 2011 22:15:13 -0800
Subject: Functional improvements: - Add support for dragging a selection box.

Visual improvements;
- The "ghost" selection now has minimized thumbnails so that
  you're dragging a smaller div around the screen.
---
 modules/organize/css/organize.css               |  12 ++
 modules/organize/vendor/ext/js/DataView-more.js | 160 ++++++++++++++++++++++++
 modules/organize/views/organize_dialog.html.php |  26 ++--
 3 files changed, 191 insertions(+), 7 deletions(-)
 create mode 100644 modules/organize/vendor/ext/js/DataView-more.js

(limited to 'modules/organize/views/organize_dialog.html.php')

diff --git a/modules/organize/css/organize.css b/modules/organize/css/organize.css
index 6b034fc2..c14faf8c 100644
--- a/modules/organize/css/organize.css
+++ b/modules/organize/css/organize.css
@@ -42,6 +42,18 @@
   visibility: visible;
 }
 
+.g-organize div.drag-ghost {
+  width: 300px;
+  height: 180px;
+}
+
+.g-organize div.drag-ghost div {
+  width: 72px;
+  height: 72px;
+  vertical-align: baseline;
+  float: left;
+}
+
 .g-organize div.drop-target {
   background: #eee;
 }
diff --git a/modules/organize/vendor/ext/js/DataView-more.js b/modules/organize/vendor/ext/js/DataView-more.js
new file mode 100644
index 00000000..1bab1e70
--- /dev/null
+++ b/modules/organize/vendor/ext/js/DataView-more.js
@@ -0,0 +1,160 @@
+/*!
+ * Ext JS Library 3.3.1
+ * Copyright(c) 2006-2010 Sencha Inc.
+ * licensing@sencha.com
+ * http://www.sencha.com/license
+ */
+/**
+ * @class Ext.DataView.LabelEditor
+ * @extends Ext.Editor
+ * 
+ */
+Ext.DataView.LabelEditor = Ext.extend(Ext.Editor, {
+    alignment: "tl-tl",
+    hideEl : false,
+    cls: "x-small-editor",
+    shim: false,
+    completeOnEnter: true,
+    cancelOnEsc: true,
+    labelSelector: 'span.x-editable',
+    
+    constructor: function(cfg, field){
+        Ext.DataView.LabelEditor.superclass.constructor.call(this,
+            field || new Ext.form.TextField({
+                allowBlank: false,
+                growMin:90,
+                growMax:240,
+                grow:true,
+                selectOnFocus:true
+            }), cfg
+        );
+    },
+    
+    init : function(view){
+        this.view = view;
+        view.on('render', this.initEditor, this);
+        this.on('complete', this.onSave, this);
+    },
+
+    initEditor : function(){
+        this.view.on({
+            scope: this,
+            containerclick: this.doBlur,
+            click: this.doBlur
+        });
+        this.view.getEl().on('mousedown', this.onMouseDown, this, {delegate: this.labelSelector});
+    },
+    
+    doBlur: function(){
+        if(this.editing){
+            this.field.blur();
+        }
+    },
+
+    onMouseDown : function(e, target){
+        if(!e.ctrlKey && !e.shiftKey){
+            var item = this.view.findItemFromChild(target);
+            e.stopEvent();
+            var record = this.view.store.getAt(this.view.indexOf(item));
+            this.startEdit(target, record.data[this.dataIndex]);
+            this.activeRecord = record;
+        }else{
+            e.preventDefault();
+        }
+    },
+
+    onSave : function(ed, value){
+        this.activeRecord.set(this.dataIndex, value);
+    }
+});
+
+
+Ext.DataView.DragSelector = function(cfg){
+    cfg = cfg || {};
+    var view, proxy, tracker;
+    var rs, bodyRegion, dragRegion = new Ext.lib.Region(0,0,0,0);
+    var dragSafe = cfg.dragSafe === true;
+
+    this.init = function(dataView){
+        view = dataView;
+        view.on('render', onRender);
+    };
+
+    function fillRegions(){
+        rs = [];
+        view.all.each(function(el){
+            rs[rs.length] = el.getRegion();
+        });
+        bodyRegion = view.el.getRegion();
+    }
+
+    function cancelClick(){
+        return false;
+    }
+
+    function onBeforeStart(e){
+        return !dragSafe || e.target == view.el.dom;
+    }
+
+    function onStart(e){
+        view.on('containerclick', cancelClick, view, {single:true});
+        if(!proxy){
+            proxy = view.el.createChild({cls:'x-view-selector'});
+        }else{
+            if(proxy.dom.parentNode !== view.el.dom){
+                view.el.dom.appendChild(proxy.dom);
+            }
+            proxy.setDisplayed('block');
+        }
+        fillRegions();
+        view.clearSelections();
+    }
+
+    function onDrag(e){
+        var startXY = tracker.startXY;
+        var xy = tracker.getXY();
+
+        var x = Math.min(startXY[0], xy[0]);
+        var y = Math.min(startXY[1], xy[1]);
+        var w = Math.abs(startXY[0] - xy[0]);
+        var h = Math.abs(startXY[1] - xy[1]);
+
+        dragRegion.left = x;
+        dragRegion.top = y;
+        dragRegion.right = x+w;
+        dragRegion.bottom = y+h;
+
+        dragRegion.constrainTo(bodyRegion);
+        proxy.setRegion(dragRegion);
+
+        for(var i = 0, len = rs.length; i < len; i++){
+            var r = rs[i], sel = dragRegion.intersect(r);
+            if(sel && !r.selected){
+                r.selected = true;
+                view.select(i, true);
+            }else if(!sel && r.selected){
+                r.selected = false;
+                view.deselect(i);
+            }
+        }
+    }
+
+    function onEnd(e){
+        if (!Ext.isIE) {
+            view.un('containerclick', cancelClick, view);    
+        }        
+        if(proxy){
+            proxy.setDisplayed(false);
+        }
+    }
+
+    function onRender(view){
+        tracker = new Ext.dd.DragTracker({
+            onBeforeStart: onBeforeStart,
+            onStart: onStart,
+            onDrag: onDrag,
+            onEnd: onEnd
+        });
+        tracker.initEl(view.el);
+    }
+};
\ No newline at end of file
diff --git a/modules/organize/views/organize_dialog.html.php b/modules/organize/views/organize_dialog.html.php
index a1d57958..d9303075 100644
--- a/modules/organize/views/organize_dialog.html.php
+++ b/modules/organize/views/organize_dialog.html.php
@@ -9,6 +9,7 @@
 </style>
 <script type="text/javascript" src="<?= url::file("modules/organize/vendor/ext/js/ext-base.js") ?>"></script>
 <script type="text/javascript" src="<?= url::file("modules/organize/vendor/ext/js/ext-all.js") ?>"></script>
+<script type="text/javascript" src="<?= url::file("modules/organize/vendor/ext/js/DataView-more.js") ?>"></script>
 <script type="text/javascript">
   Ext.BLANK_IMAGE_URL = "<?= url::file("modules/organize/vendor/ext/images/default/s.gif") ?>";
   Ext.Ajax.timeout = 1000000;  // something really large
@@ -87,6 +88,9 @@
       autoScroll: true,
       enableDragDrop: true,
       itemSelector: "div.thumb",
+      plugins: [
+        new Ext.DataView.DragSelector({dragSafe: true})
+      ],
       listeners: {
         "render": function(v) {
           v.dragZone = new Ext.dd.DragZone(v.getEl(), {
@@ -106,15 +110,23 @@
                 if (selected_nodes.length == 1) {
                   drag_data.ddel = target;
                 } else {
-                  var div = document.createElement("div");
-                  div.className = "multi-proxy";
+                  var drag_ghost = document.createElement("div");
+                  drag_ghost.className = "drag-ghost";
                   for (var i = 0; i != selected_nodes.length; i++) {
-                    div.appendChild(Ext.get(selected_nodes[i]).dom.firstChild.cloneNode(true));
-                    if ((i + 1) % 3 == 0) {
-                      div.appendChild(document.createElement("br"));
-                    }
+                    var inner = document.createElement("div");
+                    drag_ghost.appendChild(inner);
+
+                    var img = Ext.get(selected_nodes[i]).dom.firstChild;
+                    var child = inner.appendChild(img.cloneNode(true));
+                    Ext.get(child).setWidth(Ext.fly(img).getWidth() / 2);
+                    Ext.get(child).setHeight(Ext.fly(img).getHeight() / 2);
                   }
-                  drag_data.ddel = div;
+                  // The contents of the ghost float, and the ghost is wide enough for
+                  // 4 images across so make sure that the ghost is tall enough.  Thumbnails
+                  // are max 120px high max, and ghost thumbs are half of that, but leave some
+                  // padding because IE is unpredictable.
+                  drag_ghost.style.height = Math.ceil(i/4) * 72 + "px";
+                  drag_data.ddel = drag_ghost;
                 }
                 return drag_data;
               }
-- 
cgit v1.2.3


From aebcd445135648603590e2ab99f40b72ee8ed097 Mon Sep 17 00:00:00 2001
From: Bharat Mediratta <bharat@menalto.com>
Date: Wed, 5 Jan 2011 22:19:33 -0800
Subject: Swap organize_frame and organize_dialog since they were semantically
 reversed.  organize_dialog contains the stuff that pops up in the dialog,
 organize_frame contains the stuff that's in the embedded iframe.

---
 modules/organize/helpers/organize_event.php     |   6 +-
 modules/organize/views/organize_dialog.html.php | 420 +-----------------------
 modules/organize/views/organize_frame.html.php  | 420 +++++++++++++++++++++++-
 3 files changed, 423 insertions(+), 423 deletions(-)

(limited to 'modules/organize/views/organize_dialog.html.php')

diff --git a/modules/organize/helpers/organize_event.php b/modules/organize/helpers/organize_event.php
index fbe18a7a..2f997600 100644
--- a/modules/organize/helpers/organize_event.php
+++ b/modules/organize/helpers/organize_event.php
@@ -27,7 +27,7 @@ class organize_event_Core {
                  ->id("organize")
                  ->label(t("Organize album"))
                  ->css_id("g-menu-organize-link")
-                 ->url(url::site("organize/frame/{$item->id}")));
+                 ->url(url::site("organize/dialog/{$item->id}")));
     }
   }
 
@@ -39,7 +39,7 @@ class organize_event_Core {
                    ->id("organize")
                    ->label(t("Organize album"))
                    ->css_class("ui-icon-folder-open g-organize-link")
-                   ->url(url::site("organize/frame/{$item->id}")));
+                   ->url(url::site("organize/dialog/{$item->id}")));
       } else {
         $parent = $item->parent();
         $menu->get("options_menu")
@@ -47,7 +47,7 @@ class organize_event_Core {
                    ->id("move")
                    ->label(t("Move to another album"))
                    ->css_class("ui-icon-folder-open g-organize-link")
-                   ->url(url::site("organize/frame/{$parent->id}?selected_id={$item->id}")));
+                   ->url(url::site("organize/dialog/{$parent->id}?selected_id={$item->id}")));
       }
     }
   }
diff --git a/modules/organize/views/organize_dialog.html.php b/modules/organize/views/organize_dialog.html.php
index d9303075..7bff576d 100644
--- a/modules/organize/views/organize_dialog.html.php
+++ b/modules/organize/views/organize_dialog.html.php
@@ -1,409 +1,23 @@
 <?php defined("SYSPATH") or die("No direct script access.") ?>
-<link rel="stylesheet" type="text/css" href="<?= url::file("modules/organize/vendor/ext/css/ext-all.css") ?>" />
-<link rel="stylesheet" type="text/css" href="<?= url::file("modules/organize/vendor/ext/css/ux-all.css") ?>" />
-<link rel="stylesheet" type="text/css" href="<?= url::file("modules/organize/css/organize.css") ?>" />
-<style type="text/css">
-  .g-organize div.thumb-album div.icon {
-    background-image: url(<?= url::file("modules/organize/vendor/ext/images/default/tree/folder.gif") ?>);
+<style>
+  #g-organize-frame {
+    border: 0px;
+    width: 100%;
+    height: 100%;
   }
 </style>
-<script type="text/javascript" src="<?= url::file("modules/organize/vendor/ext/js/ext-base.js") ?>"></script>
-<script type="text/javascript" src="<?= url::file("modules/organize/vendor/ext/js/ext-all.js") ?>"></script>
-<script type="text/javascript" src="<?= url::file("modules/organize/vendor/ext/js/DataView-more.js") ?>"></script>
 <script type="text/javascript">
-  Ext.BLANK_IMAGE_URL = "<?= url::file("modules/organize/vendor/ext/images/default/s.gif") ?>";
-  Ext.Ajax.timeout = 1000000;  // something really large
-
-  Ext.onReady(function() {
-    /*
-     * ********************************************************************************
-     * Utility functions for loading data and making changes
-     * ********************************************************************************
-     */
-    var start_busy = function(msg) {
-      outer.el.mask(msg, "loading");
-    }
-
-    var stop_busy = function() {
-      outer.el.unmask();
-    }
-
-    var show_generic_error = function() {
-      stop_busy();
-      Ext.Msg.alert(
-        <?= t("An error occurred.  Consult your system administrator.")->for_js() ?>);
-    }
-
-    var current_album_id = null;
-    var load_album_data = function(id) {
-      start_busy(<?= t("Loading...")->for_js() ?>);
-      Ext.Ajax.request({
-        url: '<?= url::site("organize/album_info/__ID__") ?>'.replace("__ID__", id),
-        success: function(xhr, opts) {
-          stop_busy();
-          var album_info = Ext.util.JSON.decode(xhr.responseText);
-          var store = new Ext.data.JsonStore({
-            autoDestroy: true,
-            fields: ["id", "thumb_url", "width", "height", "type", "title"],
-            idProperty: "id",
-            root: "children",
-            data: album_info
-          });
-          current_album_id = id;
-          thumb_data_view.bindStore(store);
-          sort_column_combobox.setValue(album_info.sort_column);
-          sort_order_combobox.setValue(album_info.sort_order);
-        },
-        failure: show_generic_error
-      });
-    };
-
-    var reload_album_data = function() {
-      if (current_album_id) {
-        load_album_data(current_album_id);
-      }
-    };
-
-    var set_album_sort = function(params) {
-      start_busy(<?= t("Changing sort...")->for_js() ?>);
-      params["csrf"] = '<?= access::csrf_token() ?>';
-      Ext.Ajax.request({
-        url: '<?= url::site("organize/set_sort/__ID__") ?>'.replace("__ID__", current_album_id),
-        method: "post",
-        success: function() {
-          stop_busy();
-          reload_album_data();
-        },
-        failure: show_generic_error,
-        params: params
-      });
-    }
-
-    /*
-     * ********************************************************************************
-     * JsonStore, DataView and Panel for viewing albums
-     * ********************************************************************************
-     */
-    var thumb_data_view = new Ext.DataView({
-      autoScroll: true,
-      enableDragDrop: true,
-      itemSelector: "div.thumb",
-      plugins: [
-        new Ext.DataView.DragSelector({dragSafe: true})
-      ],
-      listeners: {
-        "render": function(v) {
-          v.dragZone = new Ext.dd.DragZone(v.getEl(), {
-            ddGroup: "organizeDD",
-            containerScroll: true,
-            getDragData: function(e) {
-              var target = e.getTarget(v.itemSelector, 10);
-              if (target) {
-                if (!v.isSelected(target)) {
-                  v.onClick(e);
-                }
-                var selected_nodes = v.getSelectedNodes();
-                var drag_data = {
-                  nodes: selected_nodes,
-                  repair_xy: Ext.fly(target).getXY()
-                };
-                if (selected_nodes.length == 1) {
-                  drag_data.ddel = target;
-                } else {
-                  var drag_ghost = document.createElement("div");
-                  drag_ghost.className = "drag-ghost";
-                  for (var i = 0; i != selected_nodes.length; i++) {
-                    var inner = document.createElement("div");
-                    drag_ghost.appendChild(inner);
-
-                    var img = Ext.get(selected_nodes[i]).dom.firstChild;
-                    var child = inner.appendChild(img.cloneNode(true));
-                    Ext.get(child).setWidth(Ext.fly(img).getWidth() / 2);
-                    Ext.get(child).setHeight(Ext.fly(img).getHeight() / 2);
-                  }
-                  // The contents of the ghost float, and the ghost is wide enough for
-                  // 4 images across so make sure that the ghost is tall enough.  Thumbnails
-                  // are max 120px high max, and ghost thumbs are half of that, but leave some
-                  // padding because IE is unpredictable.
-                  drag_ghost.style.height = Math.ceil(i/4) * 72 + "px";
-                  drag_data.ddel = drag_ghost;
-                }
-                return drag_data;
-              }
-            },
-            getRepairXY: function() {
-              return this.dragData.repair_xy;
-            }
-          });
-
-          v.dropZone = new Ext.dd.DropZone(v.getEl(), {
-            ddGroup: "organizeDD",
-            getTargetFromEvent: function(e) {
-              return e.getTarget("div.thumb", 10);
-            },
-            onNodeOut: function(target, dd, e, data) {
-              Ext.fly(target).removeClass("active-left");
-              Ext.fly(target).removeClass("active-right");
-            },
-            onNodeOver: function(target, dd, e, data) {
-              var target_x = Ext.lib.Dom.getX(target);
-              var target_center = target_x + (target.offsetWidth / 2);
-              if (Ext.lib.Event.getPageX(e) < target_center) {
-                Ext.fly(target).addClass("active-left");
-                Ext.fly(target).removeClass("active-right");
-                this.drop_side = "before";
-              } else {
-                Ext.fly(target).removeClass("active-left");
-                Ext.fly(target).addClass("active-right");
-                this.drop_side = "after";
-              }
-              return Ext.dd.DropZone.prototype.dropAllowed;
-            },
-            onNodeDrop: function(target, dd, e, data) {
-              var nodes = data.nodes;
-              source_ids = [];
-              for (var i = 0; i != nodes.length; i++) {
-                source_ids.push(Ext.fly(nodes[i]).getAttribute("rel"));
-              }
-              start_busy(<?= t("Rearranging...")->for_js() ?>);
-              target = Ext.fly(target);
-              Ext.Ajax.request({
-                url: '<?= url::site("organize/rearrange") ?>',
-                method: "post",
-                success: function() {
-                  stop_busy();
-                  reload_album_data();
-                },
-                failure: show_generic_error,
-                params: {
-                  source_ids: source_ids.join(","),
-                  target_id: target.getAttribute("rel"),
-                  relative: this.drop_side, // calculated in onNodeOver
-                  csrf: '<?= access::csrf_token() ?>'
-                }
-              });
-              return true;
-            }
-          });
-        }
-      },
-      multiSelect: true,
-      selectedClass: "selected",
-      tpl: new Ext.XTemplate(
-        '<tpl for=".">',
-        '<div class="thumb thumb-{type}" id="thumb-{id}" rel="{id}">',
-        '<img src="{thumb_url}" width="{width}" height="{height}" title="{title}">',
-        '<div class="icon"></div>',
-        '</div>',
-        '</tpl>')
-    });
-
-    /*
-     * ********************************************************************************
-     * Toolbar with sort column, sort order and a close button.
-     * ********************************************************************************
-     */
-
-    sort_order_data = [];
-    <? foreach (album::get_sort_order_options() as $key => $value): ?>
-    sort_order_data.push(["<?= $key ?>", <?= $value->for_js() ?>]);
-    <? endforeach ?>
-    var sort_column_combobox = new Ext.form.ComboBox({
-      mode: "local",
-      editable: false,
-      allowBlank: false,
-      forceSelection: true,
-      triggerAction: "all",
-      store: new Ext.data.ArrayStore({
-        id: 0,
-        fields: ["key", "value"],
-        data: sort_order_data
-      }),
-      listeners: {
-        "select": function(combo, record, index) {
-          set_album_sort({sort_column: record.id});
-        }
-      },
-      valueField: "key",
-      displayField: "value"
-    });
-
-    var sort_order_combobox = new Ext.form.ComboBox({
-      mode: "local",
-      editable: false,
-      allowBlank: false,
-      forceSelection: true,
-      triggerAction: "all",
-      store: new Ext.data.ArrayStore({
-        id: 0,
-        fields: ["key", "value"],
-        data: [
-          ["ASC", <?= t("Ascending")->for_js() ?>],
-          ["DESC", <?= t("Descending")->for_js() ?>]]
-      }),
-      listeners: {
-        "select": function(combo, record, index) {
-          set_album_sort({sort_order: record.id});
-        }
-      },
-      valueField: "key",
-      displayField: "value"
-    });
-
-    var button_panel = new Ext.Panel({
-      layout: "hbox",
-      region: "south",
-      height: 24,
-      layoutConfig: {
-        align: "stretch"
-      },
-      items: [sort_column_combobox, sort_order_combobox,
-        {
-          xtype: "spacer",
-          flex: 4
-        }, {
-          xtype: "button",
-          flex: 1,
-          text: <?= t("Close")->for_js() ?>,
-          listeners: {
-            "click": function() {
-              parent.done_organizing(current_album_id);
-            }
-          }
-        }
-      ]
-    });
-
-    var album_panel = new Ext.Panel({
-      layout: "fit",
-      region: "center",
-      title: <?= t("Drag and drop photos to re-order or move between albums")->for_js() ?>,
-      items: [thumb_data_view],
-      bbar: button_panel
-    });
-
-    /*
-     * ********************************************************************************
-     *  TreeLoader and TreePanel
-     * ********************************************************************************
-     */
-    var tree_loader = new Ext.tree.TreeLoader({
-      dataUrl: '<?= url::site("organize/tree/{$album->id}") ?>',
-      nodeParameter: "root_id",
-      requestMethod: "post"
-    });
-
-    var tree_panel = new Ext.tree.TreePanel({
-      useArrows: true,
-      autoScroll: true,
-      animate: true,
-      border: false,
-      containerScroll: true,
-      enableDD: true,
-      dropConfig: {
-        appendOnly: true,
-        ddGroup: "organizeDD"
-      },
-      listeners: {
-        "click": function(node) {
-          load_album_data(node.id);
-        },
-        "afterrender": function(v) {
-          // Override Ext.tree.TreeDragZone.onNodeOver to change the
-          // x-tree-drop-ok-append CSS class to be x-dd-drop-ok since
-          // that connotes "ok" instead of "adding something new" and we're
-          // moving the item, not adding it.
-          //
-          // There's probably a better way of overriding the parent method, but
-          // my JavaScript-fu is weak.
-          v.dropZone.super_onNodeOver = v.dropZone.onNodeOver;
-          v.dropZone.onNodeOver = function(target, dd, e, data) {
-            var returnCls = this.super_onNodeOver(target, dd, e, data);
-            if (returnCls == "x-tree-drop-ok-append") {
-              return "x-dd-drop-ok";
-            }
-            return returnCls;
-          }
-
-          v.dropZone.onNodeDrop = function(target, dd, e, data) {
-            var nodes = data.nodes;
-            source_ids = [];
-            var moving_albums = 0;
-            for (var i = 0; i != nodes.length; i++) {
-              var node = Ext.fly(nodes[i]);
-              source_ids.push(node.getAttribute("rel"));
-              moving_albums |= node.hasClass("thumb-album");
-            }
-            start_busy(<?= t("Moving...")->for_js() ?>);
-            Ext.Ajax.request({
-              url: '<?= url::site("organize/reparent") ?>',
-              method: "post",
-              success: function() {
-                stop_busy();
-                reload_album_data();
-
-                // If we're moving albums around then we need to refresh the tree when we're done
-                if (moving_albums) {
-                  target.node.reload();
-
-                  // If the target node contains the selected node, then the selected
-                  // node just got strafed by the target's reload and no longer exists,
-                  // so we can't reload it.
-                  var selected_node = v.getNodeById(current_album_id);
-                  if (selected_node) {
-                    selected_node.reload();
-                  }
-                }
-              },
-              failure: show_generic_error,
-              params: {
-                source_ids: source_ids.join(","),
-                target_id: target.node.id,
-                csrf: '<?= access::csrf_token() ?>'
-              }
-            });
-            return true;
-          }
-        }
-      },
-      loader: tree_loader,
-
-      region: "west",
-      split: true,
-      minSize: 200,
-      maxSize: 350,
-      width: 200,
-
-      root: {
-        allowDrop: Boolean(<?= access::can("edit", item::root()) ?>),
-        nodeType: "async",
-        text: "<?= item::root()->title ?>",
-        draggable: false,
-        id: "<?= item::root()->id ?>",
-        expanded: true
-      }
-    });
-
-    var first_organize_load = true;
-    tree_loader.addListener("load", function() {
-      if (first_organize_load) {
-        tree_panel.getNodeById(<?= $album->id ?>).select();
-        load_album_data(<?= $album->id ?>);
-        first_organize_load = false;
-
-        // This is a hack that allows us to reload tree nodes asynchronously
-        // even though they came with preloaded hierarchical data from the
-        // initial tree load.  Without this, any nodes that were preloaded
-        // initially won't refresh if you call node.reload() on them.
-        tree_loader.doPreload = function() { return false; }
-      }
-    });
-    tree_panel.getRootNode().expand();
+  var ORGANIZE_TITLE =
+    <?= t("Organize :: %album_title", array("album_title" => "__TITLE__"))->for_js() ?>;
+  var done_organizing = function(album_id) {
+    $("#g-dialog").dialog("close");
+    window.location = '<?= url::site("items/__ID__") ?>'.replace("__ID__", album_id);
+  }
 
-    var outer = new Ext.Viewport({
-      layout: "border",
-      cls: "g-organize",
-      items: [tree_panel, album_panel]
-    });
-  });
+  var set_title = function(title) {
+    $("#g-dialog").dialog("option", "title", ORGANIZE_TITLE.replace("__TITLE__", title));
+  }
+  set_title("<?= $album->title ?>");
 </script>
+<iframe id="g-organize-frame" src="<?= url::site("organize/frame/{$album->id}") ?>">
+</iframe>
diff --git a/modules/organize/views/organize_frame.html.php b/modules/organize/views/organize_frame.html.php
index 2abea898..d9303075 100644
--- a/modules/organize/views/organize_frame.html.php
+++ b/modules/organize/views/organize_frame.html.php
@@ -1,23 +1,409 @@
 <?php defined("SYSPATH") or die("No direct script access.") ?>
-<style>
-  #g-organize-frame {
-    border: 0px;
-    width: 100%;
-    height: 100%;
+<link rel="stylesheet" type="text/css" href="<?= url::file("modules/organize/vendor/ext/css/ext-all.css") ?>" />
+<link rel="stylesheet" type="text/css" href="<?= url::file("modules/organize/vendor/ext/css/ux-all.css") ?>" />
+<link rel="stylesheet" type="text/css" href="<?= url::file("modules/organize/css/organize.css") ?>" />
+<style type="text/css">
+  .g-organize div.thumb-album div.icon {
+    background-image: url(<?= url::file("modules/organize/vendor/ext/images/default/tree/folder.gif") ?>);
   }
 </style>
+<script type="text/javascript" src="<?= url::file("modules/organize/vendor/ext/js/ext-base.js") ?>"></script>
+<script type="text/javascript" src="<?= url::file("modules/organize/vendor/ext/js/ext-all.js") ?>"></script>
+<script type="text/javascript" src="<?= url::file("modules/organize/vendor/ext/js/DataView-more.js") ?>"></script>
 <script type="text/javascript">
-  var ORGANIZE_TITLE =
-    <?= t("Organize :: %album_title", array("album_title" => "__TITLE__"))->for_js() ?>;
-  var done_organizing = function(album_id) {
-    $("#g-dialog").dialog("close");
-    window.location = '<?= url::site("items/__ID__") ?>'.replace("__ID__", album_id);
-  }
+  Ext.BLANK_IMAGE_URL = "<?= url::file("modules/organize/vendor/ext/images/default/s.gif") ?>";
+  Ext.Ajax.timeout = 1000000;  // something really large
 
-  var set_title = function(title) {
-    $("#g-dialog").dialog("option", "title", ORGANIZE_TITLE.replace("__TITLE__", title));
-  }
-  set_title("<?= $album->title ?>");
+  Ext.onReady(function() {
+    /*
+     * ********************************************************************************
+     * Utility functions for loading data and making changes
+     * ********************************************************************************
+     */
+    var start_busy = function(msg) {
+      outer.el.mask(msg, "loading");
+    }
+
+    var stop_busy = function() {
+      outer.el.unmask();
+    }
+
+    var show_generic_error = function() {
+      stop_busy();
+      Ext.Msg.alert(
+        <?= t("An error occurred.  Consult your system administrator.")->for_js() ?>);
+    }
+
+    var current_album_id = null;
+    var load_album_data = function(id) {
+      start_busy(<?= t("Loading...")->for_js() ?>);
+      Ext.Ajax.request({
+        url: '<?= url::site("organize/album_info/__ID__") ?>'.replace("__ID__", id),
+        success: function(xhr, opts) {
+          stop_busy();
+          var album_info = Ext.util.JSON.decode(xhr.responseText);
+          var store = new Ext.data.JsonStore({
+            autoDestroy: true,
+            fields: ["id", "thumb_url", "width", "height", "type", "title"],
+            idProperty: "id",
+            root: "children",
+            data: album_info
+          });
+          current_album_id = id;
+          thumb_data_view.bindStore(store);
+          sort_column_combobox.setValue(album_info.sort_column);
+          sort_order_combobox.setValue(album_info.sort_order);
+        },
+        failure: show_generic_error
+      });
+    };
+
+    var reload_album_data = function() {
+      if (current_album_id) {
+        load_album_data(current_album_id);
+      }
+    };
+
+    var set_album_sort = function(params) {
+      start_busy(<?= t("Changing sort...")->for_js() ?>);
+      params["csrf"] = '<?= access::csrf_token() ?>';
+      Ext.Ajax.request({
+        url: '<?= url::site("organize/set_sort/__ID__") ?>'.replace("__ID__", current_album_id),
+        method: "post",
+        success: function() {
+          stop_busy();
+          reload_album_data();
+        },
+        failure: show_generic_error,
+        params: params
+      });
+    }
+
+    /*
+     * ********************************************************************************
+     * JsonStore, DataView and Panel for viewing albums
+     * ********************************************************************************
+     */
+    var thumb_data_view = new Ext.DataView({
+      autoScroll: true,
+      enableDragDrop: true,
+      itemSelector: "div.thumb",
+      plugins: [
+        new Ext.DataView.DragSelector({dragSafe: true})
+      ],
+      listeners: {
+        "render": function(v) {
+          v.dragZone = new Ext.dd.DragZone(v.getEl(), {
+            ddGroup: "organizeDD",
+            containerScroll: true,
+            getDragData: function(e) {
+              var target = e.getTarget(v.itemSelector, 10);
+              if (target) {
+                if (!v.isSelected(target)) {
+                  v.onClick(e);
+                }
+                var selected_nodes = v.getSelectedNodes();
+                var drag_data = {
+                  nodes: selected_nodes,
+                  repair_xy: Ext.fly(target).getXY()
+                };
+                if (selected_nodes.length == 1) {
+                  drag_data.ddel = target;
+                } else {
+                  var drag_ghost = document.createElement("div");
+                  drag_ghost.className = "drag-ghost";
+                  for (var i = 0; i != selected_nodes.length; i++) {
+                    var inner = document.createElement("div");
+                    drag_ghost.appendChild(inner);
+
+                    var img = Ext.get(selected_nodes[i]).dom.firstChild;
+                    var child = inner.appendChild(img.cloneNode(true));
+                    Ext.get(child).setWidth(Ext.fly(img).getWidth() / 2);
+                    Ext.get(child).setHeight(Ext.fly(img).getHeight() / 2);
+                  }
+                  // The contents of the ghost float, and the ghost is wide enough for
+                  // 4 images across so make sure that the ghost is tall enough.  Thumbnails
+                  // are max 120px high max, and ghost thumbs are half of that, but leave some
+                  // padding because IE is unpredictable.
+                  drag_ghost.style.height = Math.ceil(i/4) * 72 + "px";
+                  drag_data.ddel = drag_ghost;
+                }
+                return drag_data;
+              }
+            },
+            getRepairXY: function() {
+              return this.dragData.repair_xy;
+            }
+          });
+
+          v.dropZone = new Ext.dd.DropZone(v.getEl(), {
+            ddGroup: "organizeDD",
+            getTargetFromEvent: function(e) {
+              return e.getTarget("div.thumb", 10);
+            },
+            onNodeOut: function(target, dd, e, data) {
+              Ext.fly(target).removeClass("active-left");
+              Ext.fly(target).removeClass("active-right");
+            },
+            onNodeOver: function(target, dd, e, data) {
+              var target_x = Ext.lib.Dom.getX(target);
+              var target_center = target_x + (target.offsetWidth / 2);
+              if (Ext.lib.Event.getPageX(e) < target_center) {
+                Ext.fly(target).addClass("active-left");
+                Ext.fly(target).removeClass("active-right");
+                this.drop_side = "before";
+              } else {
+                Ext.fly(target).removeClass("active-left");
+                Ext.fly(target).addClass("active-right");
+                this.drop_side = "after";
+              }
+              return Ext.dd.DropZone.prototype.dropAllowed;
+            },
+            onNodeDrop: function(target, dd, e, data) {
+              var nodes = data.nodes;
+              source_ids = [];
+              for (var i = 0; i != nodes.length; i++) {
+                source_ids.push(Ext.fly(nodes[i]).getAttribute("rel"));
+              }
+              start_busy(<?= t("Rearranging...")->for_js() ?>);
+              target = Ext.fly(target);
+              Ext.Ajax.request({
+                url: '<?= url::site("organize/rearrange") ?>',
+                method: "post",
+                success: function() {
+                  stop_busy();
+                  reload_album_data();
+                },
+                failure: show_generic_error,
+                params: {
+                  source_ids: source_ids.join(","),
+                  target_id: target.getAttribute("rel"),
+                  relative: this.drop_side, // calculated in onNodeOver
+                  csrf: '<?= access::csrf_token() ?>'
+                }
+              });
+              return true;
+            }
+          });
+        }
+      },
+      multiSelect: true,
+      selectedClass: "selected",
+      tpl: new Ext.XTemplate(
+        '<tpl for=".">',
+        '<div class="thumb thumb-{type}" id="thumb-{id}" rel="{id}">',
+        '<img src="{thumb_url}" width="{width}" height="{height}" title="{title}">',
+        '<div class="icon"></div>',
+        '</div>',
+        '</tpl>')
+    });
+
+    /*
+     * ********************************************************************************
+     * Toolbar with sort column, sort order and a close button.
+     * ********************************************************************************
+     */
+
+    sort_order_data = [];
+    <? foreach (album::get_sort_order_options() as $key => $value): ?>
+    sort_order_data.push(["<?= $key ?>", <?= $value->for_js() ?>]);
+    <? endforeach ?>
+    var sort_column_combobox = new Ext.form.ComboBox({
+      mode: "local",
+      editable: false,
+      allowBlank: false,
+      forceSelection: true,
+      triggerAction: "all",
+      store: new Ext.data.ArrayStore({
+        id: 0,
+        fields: ["key", "value"],
+        data: sort_order_data
+      }),
+      listeners: {
+        "select": function(combo, record, index) {
+          set_album_sort({sort_column: record.id});
+        }
+      },
+      valueField: "key",
+      displayField: "value"
+    });
+
+    var sort_order_combobox = new Ext.form.ComboBox({
+      mode: "local",
+      editable: false,
+      allowBlank: false,
+      forceSelection: true,
+      triggerAction: "all",
+      store: new Ext.data.ArrayStore({
+        id: 0,
+        fields: ["key", "value"],
+        data: [
+          ["ASC", <?= t("Ascending")->for_js() ?>],
+          ["DESC", <?= t("Descending")->for_js() ?>]]
+      }),
+      listeners: {
+        "select": function(combo, record, index) {
+          set_album_sort({sort_order: record.id});
+        }
+      },
+      valueField: "key",
+      displayField: "value"
+    });
+
+    var button_panel = new Ext.Panel({
+      layout: "hbox",
+      region: "south",
+      height: 24,
+      layoutConfig: {
+        align: "stretch"
+      },
+      items: [sort_column_combobox, sort_order_combobox,
+        {
+          xtype: "spacer",
+          flex: 4
+        }, {
+          xtype: "button",
+          flex: 1,
+          text: <?= t("Close")->for_js() ?>,
+          listeners: {
+            "click": function() {
+              parent.done_organizing(current_album_id);
+            }
+          }
+        }
+      ]
+    });
+
+    var album_panel = new Ext.Panel({
+      layout: "fit",
+      region: "center",
+      title: <?= t("Drag and drop photos to re-order or move between albums")->for_js() ?>,
+      items: [thumb_data_view],
+      bbar: button_panel
+    });
+
+    /*
+     * ********************************************************************************
+     *  TreeLoader and TreePanel
+     * ********************************************************************************
+     */
+    var tree_loader = new Ext.tree.TreeLoader({
+      dataUrl: '<?= url::site("organize/tree/{$album->id}") ?>',
+      nodeParameter: "root_id",
+      requestMethod: "post"
+    });
+
+    var tree_panel = new Ext.tree.TreePanel({
+      useArrows: true,
+      autoScroll: true,
+      animate: true,
+      border: false,
+      containerScroll: true,
+      enableDD: true,
+      dropConfig: {
+        appendOnly: true,
+        ddGroup: "organizeDD"
+      },
+      listeners: {
+        "click": function(node) {
+          load_album_data(node.id);
+        },
+        "afterrender": function(v) {
+          // Override Ext.tree.TreeDragZone.onNodeOver to change the
+          // x-tree-drop-ok-append CSS class to be x-dd-drop-ok since
+          // that connotes "ok" instead of "adding something new" and we're
+          // moving the item, not adding it.
+          //
+          // There's probably a better way of overriding the parent method, but
+          // my JavaScript-fu is weak.
+          v.dropZone.super_onNodeOver = v.dropZone.onNodeOver;
+          v.dropZone.onNodeOver = function(target, dd, e, data) {
+            var returnCls = this.super_onNodeOver(target, dd, e, data);
+            if (returnCls == "x-tree-drop-ok-append") {
+              return "x-dd-drop-ok";
+            }
+            return returnCls;
+          }
+
+          v.dropZone.onNodeDrop = function(target, dd, e, data) {
+            var nodes = data.nodes;
+            source_ids = [];
+            var moving_albums = 0;
+            for (var i = 0; i != nodes.length; i++) {
+              var node = Ext.fly(nodes[i]);
+              source_ids.push(node.getAttribute("rel"));
+              moving_albums |= node.hasClass("thumb-album");
+            }
+            start_busy(<?= t("Moving...")->for_js() ?>);
+            Ext.Ajax.request({
+              url: '<?= url::site("organize/reparent") ?>',
+              method: "post",
+              success: function() {
+                stop_busy();
+                reload_album_data();
+
+                // If we're moving albums around then we need to refresh the tree when we're done
+                if (moving_albums) {
+                  target.node.reload();
+
+                  // If the target node contains the selected node, then the selected
+                  // node just got strafed by the target's reload and no longer exists,
+                  // so we can't reload it.
+                  var selected_node = v.getNodeById(current_album_id);
+                  if (selected_node) {
+                    selected_node.reload();
+                  }
+                }
+              },
+              failure: show_generic_error,
+              params: {
+                source_ids: source_ids.join(","),
+                target_id: target.node.id,
+                csrf: '<?= access::csrf_token() ?>'
+              }
+            });
+            return true;
+          }
+        }
+      },
+      loader: tree_loader,
+
+      region: "west",
+      split: true,
+      minSize: 200,
+      maxSize: 350,
+      width: 200,
+
+      root: {
+        allowDrop: Boolean(<?= access::can("edit", item::root()) ?>),
+        nodeType: "async",
+        text: "<?= item::root()->title ?>",
+        draggable: false,
+        id: "<?= item::root()->id ?>",
+        expanded: true
+      }
+    });
+
+    var first_organize_load = true;
+    tree_loader.addListener("load", function() {
+      if (first_organize_load) {
+        tree_panel.getNodeById(<?= $album->id ?>).select();
+        load_album_data(<?= $album->id ?>);
+        first_organize_load = false;
+
+        // This is a hack that allows us to reload tree nodes asynchronously
+        // even though they came with preloaded hierarchical data from the
+        // initial tree load.  Without this, any nodes that were preloaded
+        // initially won't refresh if you call node.reload() on them.
+        tree_loader.doPreload = function() { return false; }
+      }
+    });
+    tree_panel.getRootNode().expand();
+
+    var outer = new Ext.Viewport({
+      layout: "border",
+      cls: "g-organize",
+      items: [tree_panel, album_panel]
+    });
+  });
 </script>
-<iframe id="g-organize-frame" src="<?= url::site("organize/dialog/{$album->id}") ?>">
-</iframe>
-- 
cgit v1.2.3


From 89597e7e703dddef8a2379f822772f9fd205d03b Mon Sep 17 00:00:00 2001
From: Bharat Mediratta <bharat@menalto.com>
Date: Thu, 6 Jan 2011 23:43:26 -0800
Subject: Add a spinner to the dialog when loading the iframe so that it's not
 just a blank dialog.  Create separate CSS for dialog vs. frame. Don't show
 the Loading message for the first load.

---
 modules/organize/css/organize.css                  |  99 ---------------------
 modules/organize/css/organize_dialog.css           |  17 ++++
 modules/organize/css/organize_frame.css            |  99 +++++++++++++++++++++
 .../vendor/ext/images/default/tree/leaf.gif        | Bin 945 -> 0 bytes
 modules/organize/views/organize_dialog.html.php    |  14 +--
 modules/organize/views/organize_frame.html.php     |  13 ++-
 6 files changed, 134 insertions(+), 108 deletions(-)
 delete mode 100644 modules/organize/css/organize.css
 create mode 100644 modules/organize/css/organize_dialog.css
 create mode 100644 modules/organize/css/organize_frame.css
 delete mode 100644 modules/organize/vendor/ext/images/default/tree/leaf.gif

(limited to 'modules/organize/views/organize_dialog.html.php')

diff --git a/modules/organize/css/organize.css b/modules/organize/css/organize.css
deleted file mode 100644
index 3f7ce8f6..00000000
--- a/modules/organize/css/organize.css
+++ /dev/null
@@ -1,99 +0,0 @@
-.g-organize {
-  font-family: 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
-}
-
-.g-organize div.thumb {
-  padding: 8px;
-  width: 128px;
-  height: 128px;
-  vertical-align: middle;
-  float: left;
-}
-
-.g-organize div.selected {
-  background: #C9D8EB;
-}
-
-.g-organize div.thumb {
-  border: 4px solid white;
-}
-
-.g-organize div.thumb:hover {
-  border: 2px solid #eee;
-  margin: 2px;
-  cursor: pointer;
-}
-
-.g-organize div.thumb div.icon {
-  position: relative;
-  padding: 0px;
-  margin: 0px;
-  visibility: hidden;
-  width: 16px;
-  height: 16px;
-  top: -16px;
-  margin-bottom: -16px;
-  padding-bottom: -16px;
-}
-
-.g-organize div.thumb-album div.icon {
-  visibility: visible;
-}
-
-.g-organize div.drag-ghost {
-  width: 300px;
-  height: 180px;
-}
-
-.g-organize div.drag-ghost div {
-  width: 72px;
-  height: 72px;
-  vertical-align: baseline;
-  float: left;
-}
-
-.g-organize div.drop-target {
-  background: #eee;
-}
-
-.g-organize div.active-left {
-  border-left: 4px solid #C9D8EB;
-}
-
-.g-organize div.active-right {
-  border-right: 4px solid #C9D8EB;
-}
-
-.g-organize label.sort {
-  font: 12px tahoma, arial;
-  vertical-align: middle;
-  font-weight: bold;
-  height: 22px;
-  text-align: center;
-  padding: 4px;
-}
-
-.loading div {
-  font-size: 1.1em;
-  padding-left: 24px;
-  background-color: white;
-  background-image: url(../vendor/ext/images/default/tree/loading.gif);
-  background-position: 4px 8px;
-  background-repeat: no-repeat;
-}
-
-/* IE specific overrides */
-body.ext-ie div.thumb {
-  width: 150px;
-  height: 150px;
-}
-
-/* ExtJS overrides */
-.x-tree-node-el {
-  font-size: 12px;
-  line-height: 20px;
-}
-
-.x-tree-node-leaf .x-tree-node-icon {
-  background-image:url(../vendor/ext/images/default/tree/folder.gif);
-}
diff --git a/modules/organize/css/organize_dialog.css b/modules/organize/css/organize_dialog.css
new file mode 100644
index 00000000..2b39cdf4
--- /dev/null
+++ b/modules/organize/css/organize_dialog.css
@@ -0,0 +1,17 @@
+#g-organize-frame {
+  border: 0px;
+  width: 100%;
+  height: 100%;
+}
+
+#g-organize-app-loading {
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 16px;
+  height: 16px;
+  background-image: url(../vendor/ext/images/default/tree/loading.gif);
+  background-position: center center;
+  background-repeat: no-repeat;
+}
diff --git a/modules/organize/css/organize_frame.css b/modules/organize/css/organize_frame.css
new file mode 100644
index 00000000..3f7ce8f6
--- /dev/null
+++ b/modules/organize/css/organize_frame.css
@@ -0,0 +1,99 @@
+.g-organize {
+  font-family: 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+}
+
+.g-organize div.thumb {
+  padding: 8px;
+  width: 128px;
+  height: 128px;
+  vertical-align: middle;
+  float: left;
+}
+
+.g-organize div.selected {
+  background: #C9D8EB;
+}
+
+.g-organize div.thumb {
+  border: 4px solid white;
+}
+
+.g-organize div.thumb:hover {
+  border: 2px solid #eee;
+  margin: 2px;
+  cursor: pointer;
+}
+
+.g-organize div.thumb div.icon {
+  position: relative;
+  padding: 0px;
+  margin: 0px;
+  visibility: hidden;
+  width: 16px;
+  height: 16px;
+  top: -16px;
+  margin-bottom: -16px;
+  padding-bottom: -16px;
+}
+
+.g-organize div.thumb-album div.icon {
+  visibility: visible;
+}
+
+.g-organize div.drag-ghost {
+  width: 300px;
+  height: 180px;
+}
+
+.g-organize div.drag-ghost div {
+  width: 72px;
+  height: 72px;
+  vertical-align: baseline;
+  float: left;
+}
+
+.g-organize div.drop-target {
+  background: #eee;
+}
+
+.g-organize div.active-left {
+  border-left: 4px solid #C9D8EB;
+}
+
+.g-organize div.active-right {
+  border-right: 4px solid #C9D8EB;
+}
+
+.g-organize label.sort {
+  font: 12px tahoma, arial;
+  vertical-align: middle;
+  font-weight: bold;
+  height: 22px;
+  text-align: center;
+  padding: 4px;
+}
+
+.loading div {
+  font-size: 1.1em;
+  padding-left: 24px;
+  background-color: white;
+  background-image: url(../vendor/ext/images/default/tree/loading.gif);
+  background-position: 4px 8px;
+  background-repeat: no-repeat;
+}
+
+/* IE specific overrides */
+body.ext-ie div.thumb {
+  width: 150px;
+  height: 150px;
+}
+
+/* ExtJS overrides */
+.x-tree-node-el {
+  font-size: 12px;
+  line-height: 20px;
+}
+
+.x-tree-node-leaf .x-tree-node-icon {
+  background-image:url(../vendor/ext/images/default/tree/folder.gif);
+}
diff --git a/modules/organize/vendor/ext/images/default/tree/leaf.gif b/modules/organize/vendor/ext/images/default/tree/leaf.gif
deleted file mode 100644
index 445769d3..00000000
Binary files a/modules/organize/vendor/ext/images/default/tree/leaf.gif and /dev/null differ
diff --git a/modules/organize/views/organize_dialog.html.php b/modules/organize/views/organize_dialog.html.php
index 7bff576d..a386fa77 100644
--- a/modules/organize/views/organize_dialog.html.php
+++ b/modules/organize/views/organize_dialog.html.php
@@ -1,11 +1,5 @@
 <?php defined("SYSPATH") or die("No direct script access.") ?>
-<style>
-  #g-organize-frame {
-    border: 0px;
-    width: 100%;
-    height: 100%;
-  }
-</style>
+<link rel="stylesheet" type="text/css" href="<?= url::file("modules/organize/css/organize_dialog.css") ?>" />
 <script type="text/javascript">
   var ORGANIZE_TITLE =
     <?= t("Organize :: %album_title", array("album_title" => "__TITLE__"))->for_js() ?>;
@@ -18,6 +12,12 @@
     $("#g-dialog").dialog("option", "title", ORGANIZE_TITLE.replace("__TITLE__", title));
   }
   set_title("<?= $album->title ?>");
+
+  var done_loading = function() {
+    $("#g-organize-app-loading").hide();
+  }
 </script>
+<div id="g-organize-app-loading">&nbsp;</div>
 <iframe id="g-organize-frame" src="<?= url::site("organize/frame/{$album->id}") ?>">
 </iframe>
+
diff --git a/modules/organize/views/organize_frame.html.php b/modules/organize/views/organize_frame.html.php
index 16f78603..cdbf3be7 100644
--- a/modules/organize/views/organize_frame.html.php
+++ b/modules/organize/views/organize_frame.html.php
@@ -1,7 +1,7 @@
 <?php defined("SYSPATH") or die("No direct script access.") ?>
 <link rel="stylesheet" type="text/css" href="<?= url::file("modules/organize/vendor/ext/css/ext-all.css") ?>" />
 <link rel="stylesheet" type="text/css" href="<?= url::file("modules/organize/vendor/ext/css/ux-all.css") ?>" />
-<link rel="stylesheet" type="text/css" href="<?= url::file("modules/organize/css/organize.css") ?>" />
+<link rel="stylesheet" type="text/css" href="<?= url::file("modules/organize/css/organize_frame.css") ?>" />
 <style type="text/css">
   .g-organize div.thumb-album div.icon {
     background-image: url(<?= url::file("modules/organize/vendor/ext/images/default/tree/folder.gif") ?>);
@@ -26,6 +26,11 @@
       thumb_data_view.el.unmask();
     }
 
+    // Notify the parent dialog that the ExtJS app is loaded
+    if (parent.done_loading) {
+      parent.done_loading();
+    }
+
     var show_generic_error = function() {
       stop_busy();
       Ext.Msg.alert(
@@ -34,7 +39,11 @@
 
     var current_album_id = null;
     var load_album_data = function(id) {
-      start_busy(<?= t("Loading...")->for_js() ?>);
+      if (current_album_id) {
+        // Don't show the loading message on the initial load, it
+        // feels a little jarring.
+        start_busy(<?= t("Loading...")->for_js() ?>);
+      }
       Ext.Ajax.request({
         url: '<?= url::site("organize/album_info/__ID__") ?>'.replace("__ID__", id),
         success: function(xhr, opts) {
-- 
cgit v1.2.3