summaryrefslogtreecommitdiff
path: root/modules
diff options
context:
space:
mode:
Diffstat (limited to 'modules')
-rw-r--r--modules/organize/helpers/organize_event.php6
-rw-r--r--modules/organize/views/organize_dialog.html.php420
-rw-r--r--modules/organize/views/organize_frame.html.php420
3 files changed, 423 insertions, 423 deletions
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>
generated by cgit v1.2.3 (git 2.46.0) at 2025-10-13 19:05:17 +0000