From 65c850c393ce6159289e3fd05056c33e7d62e961 Mon Sep 17 00:00:00 2001 From: Tim Almdal Date: Wed, 5 Aug 2009 10:26:11 -0700 Subject: Revert "Revert "Checkpoint the organize module rewrite. At this point, it doesn't really do"" This reverts commit 397468c47b8fc3fefeb54ff19a73980ed1dd8c20. --- modules/organize/views/organize.html.php | 53 ---------------------- modules/organize/views/organize_album.html.php | 17 ------- .../organize/views/organize_button_pane.html.php | 49 +------------------- modules/organize/views/organize_dialog.html.php | 37 +++++++++++++++ modules/organize/views/organize_edit.html.php | 14 ------ .../organize/views/organize_thumb_grid.html.php | 23 ++++++---- modules/organize/views/organize_tree.html.php | 20 +++++++- 7 files changed, 72 insertions(+), 141 deletions(-) delete mode 100644 modules/organize/views/organize.html.php delete mode 100644 modules/organize/views/organize_album.html.php create mode 100644 modules/organize/views/organize_dialog.html.php delete mode 100644 modules/organize/views/organize_edit.html.php (limited to 'modules/organize/views') diff --git a/modules/organize/views/organize.html.php b/modules/organize/views/organize.html.php deleted file mode 100644 index 1686d255..00000000 --- a/modules/organize/views/organize.html.php +++ /dev/null @@ -1,53 +0,0 @@ - - - -
- p::purify($item->title))) ?> -
-
-
-
-
-

-
-
-
-
-
-
-
- -
-
"> -
    -
    -
    -
    -
    -
      -
    -
    -
    -
    -
    - -
    -
    -
    -
    -
    diff --git a/modules/organize/views/organize_album.html.php b/modules/organize/views/organize_album.html.php deleted file mode 100644 index ae2d5d51..00000000 --- a/modules/organize/views/organize_album.html.php +++ /dev/null @@ -1,17 +0,0 @@ - - diff --git a/modules/organize/views/organize_button_pane.html.php b/modules/organize/views/organize_button_pane.html.php index c5839a44..8eced107 100644 --- a/modules/organize/views/organize_button_pane.html.php +++ b/modules/organize/views/organize_button_pane.html.php @@ -1,50 +1,5 @@ -
    - "> - - - - " style="display: none"> - - - - - "> - - - - "> - - - - - "> - - - - "> - - -
    -
    - " style="display: none" > - - - - " style="display: none" > - - -
    - - - +
    diff --git a/modules/organize/views/organize_dialog.html.php b/modules/organize/views/organize_dialog.html.php new file mode 100644 index 00000000..cf3fd478 --- /dev/null +++ b/modules/organize/views/organize_dialog.html.php @@ -0,0 +1,37 @@ + +
    +

    p::purify($item->title))) ?>

    +
    +
    +
    +

    +
    +
    +
    +
    +
    +
    +
    +
      + +
    +
    +
    +
    "> +
      + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    + diff --git a/modules/organize/views/organize_edit.html.php b/modules/organize/views/organize_edit.html.php deleted file mode 100644 index 1adf290f..00000000 --- a/modules/organize/views/organize_edit.html.php +++ /dev/null @@ -1,14 +0,0 @@ - - - - 0): ?> - $pane): ?> -
    - - -
    - \ No newline at end of file diff --git a/modules/organize/views/organize_thumb_grid.html.php b/modules/organize/views/organize_thumb_grid.html.php index c80696ad..e6b7aec0 100644 --- a/modules/organize/views/organize_thumb_grid.html.php +++ b/modules/organize/views/organize_thumb_grid.html.php @@ -1,12 +1,19 @@ $child): ?> - -is_album()): ?> - - -
  • -
    + + is_album()): ?> + + +
  • thumb_img(array("class" => "gThumbnail"), $thumbsize, true) ?> - -
    • + += 25): ?> + + \ No newline at end of file diff --git a/modules/organize/views/organize_tree.html.php b/modules/organize/views/organize_tree.html.php index d2cdd957..28b45be0 100644 --- a/modules/organize/views/organize_tree.html.php +++ b/modules/organize/views/organize_tree.html.php @@ -1,4 +1,20 @@ - $child): ?> - +
  • + "> + + +
    gBranchText"> + title) ?> +
    + +
    + + + +
    • -- cgit v1.2.3 From 63f3efef37839ffba8cd75b9098d56cd03b06376 Mon Sep 17 00:00:00 2001 From: Tim Almdal Date: Wed, 5 Aug 2009 10:26:49 -0700 Subject: Revert "Revert "Enable the expand/collapse of branches by clicking on the plus/minus"" This reverts commit e37526f94df74a52a9cf36f0a5a5e641958ebbb3. --- modules/organize/controllers/organize.php | 59 ++++++++++++++++--------- modules/organize/css/organize.css | 8 ++++ modules/organize/js/organize.js | 28 +++++++++++- modules/organize/views/organize_dialog.html.php | 2 +- modules/organize/views/organize_tree.html.php | 10 +++-- 5 files changed, 80 insertions(+), 27 deletions(-) (limited to 'modules/organize/views') diff --git a/modules/organize/controllers/organize.php b/modules/organize/controllers/organize.php index d7854c53..e10e33b5 100644 --- a/modules/organize/controllers/organize.php +++ b/modules/organize/controllers/organize.php @@ -50,6 +50,27 @@ class Organize_Controller extends Controller { print $v->__toString(); } + function children($item_id) { + $item = ORM::factory("item", $item_id); + access::required("view", $item); + access::required("edit", $item); + + $albums = $item->children(null, 0, "album", array("title" => "ASC")); + + $children = ""; + foreach ($albums as $album) { + $v = new View("organize_tree.html"); + $v->album = $album; + $v->selected = false; + $v->children = array(); + $v->album_icon = $album->children_count("album") ? "ui-icon-plus" : "gBranchEmpty"; + + $children .= $v->__toString(); + } + + print $children; + } + private function _get_micro_thumb_grid($item, $offset=0) { $v = new View("organize_thumb_grid.html"); $v->item_id = $item->id; @@ -60,34 +81,30 @@ class Organize_Controller extends Controller { return $v; } - private function _tree($item, $parent, $selected=false) { - access::required("view", $item); - access::required("edit", $item); - - $albums = ORM::factory("item") - ->where(array("parent_id" => $parent->id, "type" => "album")) - ->orderby(array("title" => "ASC")) - ->find_all(); + private function _tree($item, $parent, $depth=0) { + $albums = $parent->children(null, 0, "album", array("title" => "ASC")); $v = new View("organize_tree.html"); $v->album = $parent; - $v->selected = false; - $v->children = ""; - $v->album_icon = "ui-icon-plus"; - if (!$selected) { - $v->selected = $parent->id == $item->id; + if ($parent->id == $item->id) { + $v->selected = true; + $depth = 1; + } else { + $v->selected = false; + } + $v->children = array(); + $v->album_icon = "gBranchEmpty"; + if ($albums->count()) { + $v->album_icon = "ui-icon-plus"; - if ($albums->count() && ($parent->id == 1 || $v->selected) ) { + if ($depth <= 1) { $v->album_icon = "ui-icon-minus"; - } - - foreach ($albums as $album) { - $v->children .= $this->_tree($item, $album, $v->selected); + foreach ($albums as $album) { + $v->children[] = $this->_tree($item, $album, ++$depth); + } } } - return $v->__toString(); + return $v; } - - } diff --git a/modules/organize/css/organize.css b/modules/organize/css/organize.css index 4568a707..7c2d9c5b 100644 --- a/modules/organize/css/organize.css +++ b/modules/organize/css/organize.css @@ -41,6 +41,14 @@ padding-left: 1.2em; } +.gBranchText:hover { + border: 1px dashed #999; +} + +.gBranchEmpty { + visibility: hidden; +} + .gBranchSelected { background-color: #cfdeff !important; border-bottom: 1px solid #999 !important; diff --git a/modules/organize/js/organize.js b/modules/organize/js/organize.js index e84afd03..74b02569 100644 --- a/modules/organize/js/organize.js +++ b/modules/organize/js/organize.js @@ -37,7 +37,6 @@ * Dynamically initialize the organize dialog when it is displayed */ function _init(data) { - // Deal with ui.jquery bug: http://dev.jqueryui.com/ticket/4475 $(".sf-menu li.sfHover ul").css("z-index", 70); @@ -64,6 +63,8 @@ $.gallery_reload(); }); + $(".gBranchText span").click(_collapse_or_expanded_tree); + //$(".gOrganizeBranch .ui-icon").click(organizeToggleChildren); //$(".gBranchText").droppable(treeDroppable); //$(".gBranchText").click(organizeOpenFolder); @@ -109,6 +110,31 @@ $("#gOrganizeDialog").dialog("close"); }; + /** + * Open or close a branch. If the children is a div placeholder, replace with - -- cgit v1.2.3 From 7b0ea229b8591c3fba5eb3cb853aa2ac3efd2d97 Mon Sep 17 00:00:00 2001 From: Tim Almdal Date: Fri, 7 Aug 2009 17:07:04 -0700 Subject: Make the organize dialog open properly in IE8, Chrome and FF. For some reason (probably a timing thing) the height of the contents was not being set correctly in FF. So we just hard code an estimate of the size of the Draw handle, and message areas. --- lib/gallery.dialog.js | 8 ++++++-- modules/organize/js/organize.js | 16 +++++++--------- modules/organize/views/organize_dialog.html.php | 4 +--- 3 files changed, 14 insertions(+), 14 deletions(-) (limited to 'modules/organize/views') diff --git a/lib/gallery.dialog.js b/lib/gallery.dialog.js index 51ebb21a..e3597eab 100644 --- a/lib/gallery.dialog.js +++ b/lib/gallery.dialog.js @@ -59,10 +59,14 @@ var dialogHeight = $("#gDialog").height(); var cssWidth = new String($("#gDialog form").css("width")); var childWidth = cssWidth.replace(/[^0-9]/g,""); + var size = $.gallery_get_viewport_size(); if ($("#gDialog iframe").length) { - dialogWidth = $(window).width() - 100; + dialogWidth = size.width() - 100; // Set the iframe width and height - $("#gDialog iframe").width("100%").height($(window).height() - 100); + $("#gDialog iframe").width("100%").height(size.height() - 100); + } else if ($("#gDialog form").length == 0) { + dialogWidth = size.width() - 100; + $("#gDialog").dialog("option", "height", size.height() - 100); } else if (childWidth == "" || childWidth > 300) { dialogWidth = 500; } diff --git a/modules/organize/js/organize.js b/modules/organize/js/organize.js index 6b4a5934..853e3eef 100644 --- a/modules/organize/js/organize.js +++ b/modules/organize/js/organize.js @@ -4,21 +4,19 @@ * Dynamically initialize the organize dialog when it is displayed */ init: function(data) { - // Resize with 50 pixels padding all around - var size = $.getViewportSize(); - $("#gDialog").dialog("option", "height", size.height() - 100) - .dialog("option", "width", size.width() - 100) - .dialog("option", "position", "center"); - // Deal with ui.jquery bug: http://dev.jqueryui.com/ticket/4475 (target 1.8?) $(".sf-menu li.sfHover ul").css("z-index", 70); - var height = $("#gOrganizeDetail").innerHeight(); - $("#gMicroThumbPanel").height(height - $("#gOrganizeEditDrawerHandle").outerHeight()); + $("#gDialog").bind("dialogopen", function(event, ui) { + $("#gMicroThumbPanel").height($("#gDialog").innerHeight() - 90); + }); + + $("#gDialog").bind("dialogclose", function(event, ui) { + window.location.reload(); + }); $("#gDialog #gMicroThumbDone").click(function(event) { $("#gDialog").dialog("close"); - window.location.reload(); }); $(".gBranchText span").click($.organize.collapse_or_expand_tree); diff --git a/modules/organize/views/organize_dialog.html.php b/modules/organize/views/organize_dialog.html.php index 6001e038..0daa328d 100644 --- a/modules/organize/views/organize_dialog.html.php +++ b/modules/organize/views/organize_dialog.html.php @@ -41,7 +41,5 @@ -- cgit v1.2.3 From 1c5b04a2c5d58838dbea413359c9b114f7077ca8 Mon Sep 17 00:00:00 2001 From: Tim Almdal Date: Sat, 8 Aug 2009 16:26:34 -0700 Subject: Fix the problem where the login page and edit permission pages were supersized based on ly last commit. --- lib/gallery.dialog.js | 2 +- modules/organize/views/organize_dialog.html.php | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'modules/organize/views') diff --git a/lib/gallery.dialog.js b/lib/gallery.dialog.js index 6c2993fd..ace588f6 100644 --- a/lib/gallery.dialog.js +++ b/lib/gallery.dialog.js @@ -61,7 +61,7 @@ dialogWidth = size.width() - 100; // Set the iframe width and height $("#gDialog iframe").width("100%").height(size.height() - 100); - } else if ($("#gDialog form").length == 0) { + } else if ($("#gDialog .gDialogPanel").length) { dialogWidth = size.width() - 100; $("#gDialog").dialog("option", "height", size.height() - 100); } else if (childWidth == "" || childWidth > 300) { diff --git a/modules/organize/views/organize_dialog.html.php b/modules/organize/views/organize_dialog.html.php index 0daa328d..b946d82b 100644 --- a/modules/organize/views/organize_dialog.html.php +++ b/modules/organize/views/organize_dialog.html.php @@ -1,6 +1,6 @@ " /> -
    +

    p::purify($title))) ?>

    -- cgit v1.2.3 From 3823f65dfb4114caf9bd9cfbf730638927f6c970 Mon Sep 17 00:00:00 2001 From: Tim Almdal Date: Wed, 12 Aug 2009 21:55:25 -0700 Subject: Implement the first part of drag functionality. Having trouble getting visual feedback of the drop position between thumbnails, so this commit provides a checkpoint for trying various options --- modules/organize/controllers/organize.php | 9 +-- modules/organize/css/organize.css | 9 ++- modules/organize/helpers/organize_theme.php | 28 +++++++++ modules/organize/js/organize.js | 73 +++++++++++++++++++++- modules/organize/views/organize_dialog.html.php | 4 +- .../organize/views/organize_thumb_grid.html.php | 2 +- modules/organize/views/organize_tree.html.php | 4 +- 7 files changed, 116 insertions(+), 13 deletions(-) create mode 100644 modules/organize/helpers/organize_theme.php (limited to 'modules/organize/views') diff --git a/modules/organize/controllers/organize.php b/modules/organize/controllers/organize.php index 3a81ef4f..6f83f940 100644 --- a/modules/organize/controllers/organize.php +++ b/modules/organize/controllers/organize.php @@ -60,13 +60,14 @@ class Organize_Controller extends Controller { $v->album_icon = "gBranchEmpty"; $albums = $item->children(null, 0, array("type" => "album"), array("title" => "ASC")); - if ($albums->count()) { - $v->album_icon = empty($parents[$item->id]) ? "ui-icon-plus" : "ui-icon-minus"; - - foreach ($albums as $album) { + foreach ($albums as $album) { + if (access::can("view", $album)) { $v->children[] = $this->_tree($album, $parents); } } + if (count($v->children)) { + $v->album_icon = empty($parents[$item->id]) ? "ui-icon-plus" : "ui-icon-minus"; + } return $v; } } diff --git a/modules/organize/css/organize.css b/modules/organize/css/organize.css index a4b5fdbd..1cc7c92c 100644 --- a/modules/organize/css/organize.css +++ b/modules/organize/css/organize.css @@ -1,3 +1,4 @@ + /******************************************************************* * Dialog wide stylings */ @@ -92,7 +93,7 @@ } #gMicroThumbGrid { - padding: .5em; + padding: 1em; } .gMicroThumb { @@ -107,10 +108,14 @@ width: 9em; } -.gMicroThumb.ui-selected { +.gMicroThumb.ui-state-selected { opacity: 1; } +.ui-selectable-lasso { + z-index: 2000 !important; + border: 1px dashed #13A; +} .gThumbnail { padding: .5em; diff --git a/modules/organize/helpers/organize_theme.php b/modules/organize/helpers/organize_theme.php new file mode 100644 index 00000000..de812261 --- /dev/null +++ b/modules/organize/helpers/organize_theme.php @@ -0,0 +1,28 @@ +item(); + if ($item && access::can("edit", $item) && $item->is_album()) { + $theme->script("organize.js"); + $theme->css("organize.css"); + } + } +} diff --git a/modules/organize/js/organize.js b/modules/organize/js/organize.js index 05693200..c9408673 100644 --- a/modules/organize/js/organize.js +++ b/modules/organize/js/organize.js @@ -1,15 +1,83 @@ (function($) { $.organize = { + micro_thumb_draggable: { + distance: 10, + cursorAt: { left: -10, top: -10}, + appendTo: "#gOrganizeContentPane", + helper: function(event, ui) { + var selected = $("li.ui-state-selected img"), + set = $('
    ').css({zIndex: 2000, width: 80, height: Math.ceil(selected.length / 5) * 16 }), + offset = $(this).offset(), + click = { left: event.pageX - offset.left, top: event.pageY - offset.top }; + + selected.each(function(i) { + var row = parseInt(i / 5); + var j = i - (row * 5); + + var o = $(this).offset(); + + var copy = $(this).clone() + .css({ + width: $(this).width(), height: $(this).height(), display: "block", + margin: 0, position: 'absolute', outline: '5px solid #fff', + left: o.left - event.pageX, top: o.top - event.pageY + }) + .appendTo(set) + .animate({width: 10, height: 10, outlineWidth: 1, margin: 1, left: (20 * j), top: (row * 20)}, 500); + }); + return set; + }, + start: function(event, ui) { + $("#gMicroThumbPanel").prepend("
    "); + + $("#gMicroThumbPanel li.ui-state-selected").hide(); + }, + drag: function(event, ui) { + var container = $("#gMicroThumbPanel").get(0); + var scrollTop = container.scrollTop; + var height = $(container).height(); + if (event.pageY > height + scrollTop) { + container.scrollTop += height; + } else if (event.pageY < scrollTop) { + container.scrollTop -= height; + } + }, + stop: function(event, ui) { + $("li.ui-state-selected").show(); + } + }, + + droppable: { + accept: "*", + tolerance: "pointer", + greedy: true, + drop: function(event, ui) { + // @todo do a ajax call to send the rearrange request to the zerver + // organize/move/target_id/ + // post parameters + // before=id|after=id + // source=[id1, id2, ...] + // before or after not supplied then append to end + // return: json { + // result: success | msg, + // tree: null | new tree, + // content: new thumbgrid + // } + } + }, + /** * Dynamically initialize the organize dialog when it is displayed */ init: function(data) { + var self = this; // Deal with ui.jquery bug: http://dev.jqueryui.com/ticket/4475 (target 1.8?) $(".sf-menu li.sfHover ul").css("z-index", 68); $("#gDialog").dialog("option", "zIndex", 70); $("#gDialog").bind("dialogopen", function(event, ui) { $("#gOrganize").height($("#gDialog").innerHeight() - 20); $("#gMicroThumbPanel").height($("#gDialog").innerHeight() - 90); + $("#gOrganizeAlbumTree").height($("#gDialog").innerHeight() - 59); }); $("#gDialog").bind("dialogclose", function(event, ui) { @@ -23,7 +91,10 @@ $(".gBranchText span").click($.organize.collapse_or_expand_tree); $(".gBranchText").click($.organize.show_album); - $("#gMicroThumbGrid").selectable({filter: ".gMicroThumb"}); + $("#gMicroThumbPanel").selectable({filter: "li"}); + $("#gMicroThumbPanel img").draggable($.organize.micro_thumb_draggable); + $(".gOrganizeBranch").droppable($.organize.droppable); + $("#gMicroThumbPanel").droppable($.organize.droppable); }, /** diff --git a/modules/organize/views/organize_dialog.html.php b/modules/organize/views/organize_dialog.html.php index b946d82b..f8d6d792 100644 --- a/modules/organize/views/organize_dialog.html.php +++ b/modules/organize/views/organize_dialog.html.php @@ -1,5 +1,4 @@ -" />

    p::purify($title))) ?>

    @@ -11,7 +10,7 @@
    -
    +
      @@ -39,7 +38,6 @@
    - diff --git a/modules/organize/views/organize_thumb_grid.html.php b/modules/organize/views/organize_thumb_grid.html.php index 0d54c5c8..b6e3aa11 100644 --- a/modules/organize/views/organize_thumb_grid.html.php +++ b/modules/organize/views/organize_thumb_grid.html.php @@ -3,7 +3,7 @@
  • " ref="id ?>"> - thumb_img(array("class" => "gThumbnail"), 90, true) ?> + thumb_img(array("class" => "gThumbnail", "ref" => $child->id), 90, true) ?>
    • diff --git a/modules/organize/views/organize_tree.html.php b/modules/organize/views/organize_tree.html.php index 99b0dc1a..d2ef287a 100644 --- a/modules/organize/views/organize_tree.html.php +++ b/modules/organize/views/organize_tree.html.php @@ -1,11 +1,11 @@
  • gBranchText"> + class=""> - title) ?> + title) ?>
      "> -- cgit v1.2.3 From d758266fabff6c9fe4de22fce57bf00962150ee2 Mon Sep 17 00:00:00 2001 From: Tim Almdal Date: Thu, 13 Aug 2009 18:58:40 -0700 Subject: Add a visual indicator of the insertion point --- modules/organize/css/organize.css | 16 ++++++---- modules/organize/js/organize.js | 34 ++++++++++++++++------ .../organize/views/organize_thumb_grid.html.php | 5 +++- 3 files changed, 39 insertions(+), 16 deletions(-) (limited to 'modules/organize/views') diff --git a/modules/organize/css/organize.css b/modules/organize/css/organize.css index 1cc7c92c..d717bcae 100644 --- a/modules/organize/css/organize.css +++ b/modules/organize/css/organize.css @@ -96,19 +96,23 @@ padding: 1em; } +.gMicroThumbGridCell { + float: left; + font-size: 0.8em; + padding: .5em !important; + opacity: .5; + border-left: 1px hidden #13A; + border-right: 1px hidden #13A; +} + .gMicroThumb { display: block; - float: left; - font-size: .8em; height: 9em; - margin-bottom: 1em; - margin-left: 1em; - opacity: .5; text-align: center; width: 9em; } -.gMicroThumb.ui-state-selected { +.gMicroThumbGridCell.ui-state-selected { opacity: 1; } diff --git a/modules/organize/js/organize.js b/modules/organize/js/organize.js index aadc713a..a1b59676 100644 --- a/modules/organize/js/organize.js +++ b/modules/organize/js/organize.js @@ -3,10 +3,10 @@ micro_thumb_draggable: { distance: 10, cursorAt: { left: -10, top: -10}, - //appendTo: "#gOrganizeContentPane", + appendTo: "#gMicroThumbPanel", helper: function(event, ui) { - var selected = $("li.ui-state-selected img"), - set = $('
      ').css({zIndex: 2000, width: 80, height: Math.ceil(selected.length / 5) * 16 }), + var selected = $(".ui-draggable.ui-state-selected img"), + set = $('
      ').css({zIndex: 2000, width: 80, height: Math.ceil(selected.length / 5) * 16 }), offset = $(this).offset(), click = { left: event.pageX - offset.left, top: event.pageY - offset.top }; @@ -28,7 +28,7 @@ return set; }, start: function(event, ui) { - $("#gMicroThumbPanel li.ui-state-selected").hide(); + $("#gMicroThumbPanel .ui-state-selected").hide(); }, drag: function(event, ui) { var top = $("#gMicroThumbPanel").offset().top; @@ -39,9 +39,10 @@ $("#gMicroThumbPanel").get(0).scrollTop = Math.max(0, $("#gMicroThumbPanel").get(0).scrollTop - 100); } }, + // @todo delete this method when drop is implemented stop: function(event, ui) { - // @todo delete this method when drop is implemented - $("li.ui-state-selected").show(); + $(".ui-state-selected").show(); + $(".gMicroThumbGridCell").css("borderStyle", "none"); } }, @@ -50,7 +51,7 @@ tolerance: "pointer", greedy: true, drop: function(event, ui) { - // @todo do a ajax call to send the rearrange request to the zerver + // @todo do a ajax call to send the rearrange request to the server // organize/move/target_id/ // post parameters // before=id|after=id @@ -90,10 +91,24 @@ $(".gBranchText span").click($.organize.collapse_or_expand_tree); $(".gBranchText").click($.organize.show_album); - $("#gMicroThumbPanel").selectable({filter: "li"}); - $("#gMicroThumbPanel li").draggable($.organize.micro_thumb_draggable); + $("#gMicroThumbPanel").selectable({filter: ".gMicroThumbGridCell"}); $(".gOrganizeBranch").droppable($.organize.droppable); $("#gMicroThumbPanel").droppable($.organize.droppable); + + $.organize.set_handlers(); + }, + + set_handlers: function() { + $(".gMicroThumbGridCell").draggable($.organize.micro_thumb_draggable); + $(".gMicroThumbGridCell").mousemove(function(event) { + if ($(".gDragHelper").length) { + $(".gMicroThumbGridCell").css("borderStyle", "none"); + console.log("pageX:" + event.pageX + ", offset.left:" + $(this).offset().left + ", width:" + $(this).width()); + var side = event.pageX < $(this).offset().left + $(this).width() / 2 ? + "hidden hidden hidden solid" : "hidden solid hidden hidden"; + $(this).css("borderStyle", side); + } + }); }, /** @@ -119,6 +134,7 @@ var url = $("#gMicroThumbPanel").attr("ref").replace("__ITEM_ID__", id).replace("__OFFSET__", 0); $.get(url, function(data) { $("#gMicroThumbGrid").html(data); + $.organize.set_handlers(); }); } }; diff --git a/modules/organize/views/organize_thumb_grid.html.php b/modules/organize/views/organize_thumb_grid.html.php index b6e3aa11..b41c54e8 100644 --- a/modules/organize/views/organize_thumb_grid.html.php +++ b/modules/organize/views/organize_thumb_grid.html.php @@ -1,9 +1,11 @@ children(25, $offset) as $child): ?> -
    • +
      " ref="id ?>"> thumb_img(array("class" => "gThumbnail", "ref" => $child->id), 90, true) ?> +
      • @@ -13,6 +15,7 @@ $.get("id/" . ($offset + 25)) ?>", function(data) { $("#gMicroThumbGrid").append(data); + $.organize.set_handlers(); } ); }, 50); -- cgit v1.2.3 From eeae2dc56c822a2fa32278bfe0f52bc43f665ec2 Mon Sep 17 00:00:00 2001 From: Tim Almdal Date: Thu, 13 Aug 2009 21:31:20 -0700 Subject: Added javascript portion of the drop functionality. At this point you can drag selected images and drop them on the micro thumb grid in a different position or onto a branch in the gallery tree. No ajax call is made, it just writes the generated url and post data to the console, so it only works in ff right now. --- modules/organize/js/organize.js | 90 +++++++++++++++------- modules/organize/views/organize_dialog.html.php | 3 + .../organize/views/organize_thumb_grid.html.php | 5 +- 3 files changed, 68 insertions(+), 30 deletions(-) (limited to 'modules/organize/views') diff --git a/modules/organize/js/organize.js b/modules/organize/js/organize.js index a1b59676..07c07286 100644 --- a/modules/organize/js/organize.js +++ b/modules/organize/js/organize.js @@ -46,23 +46,68 @@ } }, - droppable: { + content_droppable: { accept: "*", tolerance: "pointer", greedy: true, drop: function(event, ui) { - // @todo do a ajax call to send the rearrange request to the server - // organize/move/target_id/ - // post parameters - // before=id|after=id - // source=[id1, id2, ...] - // before or after not supplied then append to end - // return: json { - // result: success | msg, - // tree: null | new tree, - // content: new thumbgrid - // } - // do forget to reset all the stuff in init when updating the content + $.organize.do_drop({ + parent_id: $(".gBranchSelected").attr("ref"), + target_id: $(".currentDropTarget").attr("ref"), + position: $(".currentDropTarget").css("borderLeftStyle") == "solid" ? "before" : "after", + source: $(ui.helper).children("img") + }); + } + }, + + branch_droppable: { + accept: "*", + tolerance: "pointer", + greedy: true, + drop: function(event, ui) { + $.organize.do_drop({ + parent_id: $(event.target).attr("ref"), + target_id: -1, + position: "after", + source: $(ui.helper).children("img") + }); + } + }, + + do_drop:function(drop_parms) { + var source_ids = ""; + $(drop_parms.source).each(function(i) { + source_ids += (source_ids.length ? "&" : "") + "source_id[" + i + "]=" + $(this).attr("ref"); + }); + var url = drop_url.replace("__PARENT_ID__", drop_parms.parent_id) + .replace("__POSITION__", drop_parms.position) + .replace("__TARGET_ID__", drop_parms.target_id); + + console.group("do_drop"); + console.log("Generated url: " + url); + console.log("Post data(ids to move): " + source_ids); + console.groupEnd(); + // @todo do a ajax call to send the rearrange request to the server + // organize/move/parent_id/before|after/-1|target_id + // post parameters + // source=[id1, id2, ...] + // before or after not supplied then append to end + // return: json { + // result: success | msg, + // tree: null | new tree, + // content: new thumbgrid + // } + // do forget to reset all the stuff in init when updating the content + }, + + mouse_move_handler: function(event) { + if ($(".gDragHelper").length) { + $(".gMicroThumbGridCell").css("borderStyle", "hidden"); + $(".currentDropTarget").removeClass("currentDropTarget"); + var borderStyle = event.pageX < $(this).offset().left + $(this).width() / 2 ? + "borderLeftStyle" : "borderRightStyle"; + $(this).css(borderStyle, "solid"); + $(this).addClass("currentDropTarget"); } }, @@ -88,27 +133,18 @@ $("#gDialog").dialog("close"); }); - $(".gBranchText span").click($.organize.collapse_or_expand_tree); - $(".gBranchText").click($.organize.show_album); - $("#gMicroThumbPanel").selectable({filter: ".gMicroThumbGridCell"}); - $(".gOrganizeBranch").droppable($.organize.droppable); - $("#gMicroThumbPanel").droppable($.organize.droppable); + $("#gMicroThumbPanel").droppable($.organize.content_droppable); $.organize.set_handlers(); }, set_handlers: function() { $(".gMicroThumbGridCell").draggable($.organize.micro_thumb_draggable); - $(".gMicroThumbGridCell").mousemove(function(event) { - if ($(".gDragHelper").length) { - $(".gMicroThumbGridCell").css("borderStyle", "none"); - console.log("pageX:" + event.pageX + ", offset.left:" + $(this).offset().left + ", width:" + $(this).width()); - var side = event.pageX < $(this).offset().left + $(this).width() / 2 ? - "hidden hidden hidden solid" : "hidden solid hidden hidden"; - $(this).css("borderStyle", side); - } - }); + $(".gMicroThumbGridCell").mousemove($.organize.mouse_move_handler); + $(".gOrganizeBranch").droppable($.organize.branch_droppable); + $(".gBranchText span").click($.organize.collapse_or_expand_tree); + $(".gBranchText").click($.organize.show_album); }, /** diff --git a/modules/organize/views/organize_dialog.html.php b/modules/organize/views/organize_dialog.html.php index f8d6d792..982eba9e 100644 --- a/modules/organize/views/organize_dialog.html.php +++ b/modules/organize/views/organize_dialog.html.php @@ -1,4 +1,7 @@ +

      p::purify($title))) ?>

      diff --git a/modules/organize/views/organize_thumb_grid.html.php b/modules/organize/views/organize_thumb_grid.html.php index b41c54e8..671e0ce4 100644 --- a/modules/organize/views/organize_thumb_grid.html.php +++ b/modules/organize/views/organize_thumb_grid.html.php @@ -1,9 +1,8 @@ children(25, $offset) as $child): ?> -
    • +
    • " - ref="id ?>"> + class="gMicroThumb is_album() ? "gAlbum" : "gPhoto" ?>"> thumb_img(array("class" => "gThumbnail", "ref" => $child->id), 90, true) ?>
      • -- cgit v1.2.3 From 76f320ab3d6b1f67055dd913eb5811d0d113682a Mon Sep 17 00:00:00 2001 From: Tim Almdal Date: Sun, 16 Aug 2009 12:36:14 -0700 Subject: In this patch, drag now works to the album tree, but the progress bar is not showing. As well fixed a problem where selectable single clink no longer worked when the album was reloaded. --- modules/gallery/controllers/combined.php | 9 +- modules/organize/controllers/organize.php | 121 +++++++++++++++++++-- modules/organize/js/organize.js | 138 ++++++++++++++---------- modules/organize/views/organize_dialog.html.php | 7 +- 4 files changed, 208 insertions(+), 67 deletions(-) (limited to 'modules/organize/views') diff --git a/modules/gallery/controllers/combined.php b/modules/gallery/controllers/combined.php index 9a790fdf..c1f42bfe 100644 --- a/modules/gallery/controllers/combined.php +++ b/modules/gallery/controllers/combined.php @@ -42,22 +42,23 @@ class Combined_Controller extends Controller { private function _emit($type, $key) { $input = Input::instance(); + // We don't need to save the session for this request + Session::abort_save(); + // Our data is immutable, so if they already have a copy then it needs no updating. if ($input->server("HTTP_IF_MODIFIED_SINCE")) { header('HTTP/1.0 304 Not Modified'); header("Expires: Tue, 19 Jan 2038 00:00:00 GMT"); header("Cache-Control: max-age=2678400"); header('Pragma: public'); - return; + Kohana::close_buffers(false); + return ""; } if (empty($key)) { Kohana::show_404(); } - // We don't need to save the session for this request - Session::abort_save(); - $cache = Cache::instance(); $use_gzip = function_exists("gzencode") && stripos($input->server("HTTP_ACCEPT_ENCODING"), "gzip") !== false && diff --git a/modules/organize/controllers/organize.php b/modules/organize/controllers/organize.php index 6f83f940..1c4a3a69 100644 --- a/modules/organize/controllers/organize.php +++ b/modules/organize/controllers/organize.php @@ -32,8 +32,8 @@ class Organize_Controller extends Controller { } $parents[$item->id] = 1; - $v->album_tree = $this->_tree($root, $parents); - $v->micro_thumb_grid = $this->_get_micro_thumb_grid($item, 0); + $v->album_tree = self::_tree($root, $parents); + $v->micro_thumb_grid = self::_get_micro_thumb_grid($item, 0); print $v; } @@ -41,17 +41,77 @@ class Organize_Controller extends Controller { $item = ORM::factory("item", $item_id); access::required("view", $item); access::required("edit", $item); - print $this->_get_micro_thumb_grid($item, $offset); + print self::_get_micro_thumb_grid($item, $offset); } - private function _get_micro_thumb_grid($item, $offset) { + function move($target_id) { + access::verify_csrf(); + + $task_def = Task_Definition::factory() + ->callback("Organize_Controller::move_task_handler") + ->description(t("Move images")) + ->name(t("Move Images")); + $task = task::create($task_def, array("target_id" => $target_id, + "source_ids" => $this->input->post("source_ids"))); + + print json_encode( + array("result" => "started", + "status" => $task->status, + "url" => url::site("organize/run/$task->id?csrf=" . access::csrf_token()))); + } + + function rearrange($target_id, $before) { + access::verify_csrf(); + $target = ORM::factory("item", $target_id); + $parent = $target->parent(); + access::required("view", $parent); + access::required("edit", $parent); + + $task_def = Task_Definition::factory() + ->callback("Organize_Controller::rearrange_task_handler") + ->description(t("Rearrange Image")) + ->name(t("Rearrange Images")); + $task = task::create($task_def, array("target_id" => $target_id, "before" => $before, + "current" => 0, + "source_ids" => $this->input->post("source_ids"))); + + print json_encode( + array("result" => "started", + "status" => $task->status, + "url" => url::site("organize/run/$task->id?csrf=" . access::csrf_token()))); + } + + private static function _get_micro_thumb_grid($item, $offset) { $v = new View("organize_thumb_grid.html"); $v->item = $item; $v->offset = $offset; return $v; } - private function _tree($item, $parents) { + /** + * Run the task + */ + function run($task_id) { + access::verify_csrf(); + + $task = ORM::factory("task", $task_id); + if (!$task->loaded || $task->owner_id != user::active()->id) { + access::forbidden(); + } + + $task = task::run($task_id); + $results = array("done" => $task->done, "status" => $task->status, + "percent_complete" => $task->percent_complete); + foreach (array("tree", "content") as $data) { + $value = $task->get($data, false); + if ($value !== false) { + $results[$data] = $value; + } + } + print json_encode($results); + } + + private static function _tree($item, $parents) { $v = new View("organize_tree.html"); $v->album = $item; $keys = array_keys($parents); @@ -62,7 +122,7 @@ class Organize_Controller extends Controller { $albums = $item->children(null, 0, array("type" => "album"), array("title" => "ASC")); foreach ($albums as $album) { if (access::can("view", $album)) { - $v->children[] = $this->_tree($album, $parents); + $v->children[] = self::_tree($album, $parents); } } if (count($v->children)) { @@ -70,4 +130,53 @@ class Organize_Controller extends Controller { } return $v; } + + static function move_task_handler($task) { + $start = microtime(true); + if ($task->percent_complete == 0) { + batch::start(); + } + + $target = ORM::factory("item", $task->get("target_id")); + $source_ids = $task->get("source_ids", array()); + $idx = $task->get("current", 0); + $count = 0; + for (; $idx < count($source_ids) && microtime(true) - $start < 0.5; $idx++) { + item::move(ORM::factory("item", $source_ids[$idx]), $target); + $count++; + } + $task->set("current", $idx); + $task->percent_complete = ceil($idx / count($source_ids) * 100); + $task->status = t2("Moved one file", "Moved %count files", $count); + if ($task->percent_complete == 100) { + batch::stop(); + $task->done = true; + $task->state = "success"; + $parents = array(); + foreach ($target->parents() as $parent) { + $parents[$parent->id] = 1; + } + $parents[$target->id] = 1; + // @TODO do we want to set a flag and then generate them in the run method so we don't + // potentially store large data items in the task? + $task->set("tree", self::_tree(ORM::factory("item", 1), $parents)->__toString()); + $task->set("content", self::_get_micro_thumb_grid($target, 0)->__toString()); + } + } + + static function rearrange_task_handler($task) { + // @todo need to + // 1) reset the weights based on the current sort order + // 2) when they are all copied, change the sort order of the parent to "weight" + $task->percent_complete = 100; + //$start = microtime(true); + //$mode = $task->get("mode", "init"); + //$start = microtime(true); + // if (microtime(true) - $start > 0.5) { + // break; + $task->done = true; + $task->state = "success"; + $target = ORM::factory("item", $task->get("target_id")); + $task->set("content", self::_get_micro_thumb_grid($target, 0)->__toString()); + } } diff --git a/modules/organize/js/organize.js b/modules/organize/js/organize.js index 07c07286..2d7c99fc 100644 --- a/modules/organize/js/organize.js +++ b/modules/organize/js/organize.js @@ -1,32 +1,37 @@ (function($) { $.organize = { micro_thumb_draggable: { + handle: ".ui-state-selected", distance: 10, cursorAt: { left: -10, top: -10}, appendTo: "#gMicroThumbPanel", helper: function(event, ui) { - var selected = $(".ui-draggable.ui-state-selected img"), - set = $('
      ').css({zIndex: 2000, width: 80, height: Math.ceil(selected.length / 5) * 16 }), - offset = $(this).offset(), - click = { left: event.pageX - offset.left, top: event.pageY - offset.top }; - - selected.each(function(i) { - var row = parseInt(i / 5); - var j = i - (row * 5); - - var o = $(this).offset(); - - var copy = $(this).clone() - .css({ - width: $(this).width(), height: $(this).height(), display: "block", - margin: 0, position: 'absolute', outline: '5px solid #fff', - left: o.left - event.pageX, top: o.top - event.pageY - }) - .appendTo(set) - .animate({width: 10, height: 10, outlineWidth: 1, margin: 1, left: (20 * j), top: (row * 20)}, 500); - }); - return set; + var selected = $(".ui-draggable.ui-state-selected img"); + if (selected.length) { + var set = $('
      ').css({zIndex: 2000, width: 80, height: Math.ceil(selected.length / 5) * 16 }), + offset = $(this).offset(), + click = { left: event.pageX - offset.left, top: event.pageY - offset.top }; + + selected.each(function(i) { + var row = parseInt(i / 5); + var j = i - (row * 5); + + var o = $(this).offset(); + + var copy = $(this).clone() + .css({ + width: $(this).width(), height: $(this).height(), display: "block", + margin: 0, position: 'absolute', outline: '5px solid #fff', + left: o.left - event.pageX, top: o.top - event.pageY + }) + .appendTo(set) + .animate({width: 10, height: 10, outlineWidth: 1, margin: 1, left: (20 * j), top: (row * 20)}, 500); + }); + return set; + } + return null; }, + start: function(event, ui) { $("#gMicroThumbPanel .ui-state-selected").hide(); }, @@ -52,9 +57,8 @@ greedy: true, drop: function(event, ui) { $.organize.do_drop({ - parent_id: $(".gBranchSelected").attr("ref"), - target_id: $(".currentDropTarget").attr("ref"), - position: $(".currentDropTarget").css("borderLeftStyle") == "solid" ? "before" : "after", + url: rearrange_url.replace("__TARGET_ID__", $(".currentDropTarget").attr("ref")) + .replace("__BEFORE__", $(".currentDropTarget").css("borderLeftStyle") == "solid"), source: $(ui.helper).children("img") }); } @@ -66,40 +70,61 @@ greedy: true, drop: function(event, ui) { $.organize.do_drop({ - parent_id: $(event.target).attr("ref"), - target_id: -1, - position: "after", + url: move_url.replace("__TARGET_ID__", $(event.target).attr("ref")), source: $(ui.helper).children("img") }); } }, - do_drop:function(drop_parms) { - var source_ids = ""; - $(drop_parms.source).each(function(i) { - source_ids += (source_ids.length ? "&" : "") + "source_id[" + i + "]=" + $(this).attr("ref"); + do_drop:function(options) { + var source_ids = []; + $(options.source).each(function(i) { + source_ids.push($(this).attr("ref")); }); - var url = drop_url.replace("__PARENT_ID__", drop_parms.parent_id) - .replace("__POSITION__", drop_parms.position) - .replace("__TARGET_ID__", drop_parms.target_id); - - console.group("do_drop"); - console.log("Generated url: " + url); - console.log("Post data(ids to move): " + source_ids); - console.groupEnd(); - // @todo do a ajax call to send the rearrange request to the server - // organize/move/parent_id/before|after/-1|target_id - // post parameters - // source=[id1, id2, ...] - // before or after not supplied then append to end - // return: json { - // result: success | msg, - // tree: null | new tree, - // content: new thumbgrid - // } - // do forget to reset all the stuff in init when updating the content + + if (source_ids.length) { + $("#gOrganize .gProgressBar").progressbar().progressbar("value", 0); + $("#gOrganizeProgress").slideDown("fast", function() { + $.ajax({ + url: options.url, + type: "POST", + async: false, + data: { "source_ids[]": source_ids }, + dataType: "json", + success: function(data, textStatus) { + $("#gStatus").html(data.status); + $("#gOrganize .gProgressBar").progressbar("value", data.percent_complete); + setTimeout(function() { $.organize._run_task(data.url); }, 0); + } + }); + }); + } }, + _run_task: function(url) { + $.ajax({ + url: url, + async: false, + dataType: "json", + success: function(data, textStatus) { + $("#gStatus").html(data.status); + $("#gOrganize .gProgressBar").progressbar("value", data.percent_complete); + if (data.done) { + $("#gProgress").slideUp(); + // Don't forget to refresh the content pane and tree + if (data.tree) { + $("#gOrganizeAlbumTree").html(data.tree); + } + if (data.content) { + $("#gMicroThumbGrid").html(data.content); + } + $.organize.set_handlers(); + } else { + setTimeout(function() { $.organize._run_task(url); }, 0); + } + } + }); + }, mouse_move_handler: function(event) { if ($(".gDragHelper").length) { $(".gMicroThumbGridCell").css("borderStyle", "hidden"); @@ -121,8 +146,8 @@ $("#gDialog").dialog("option", "zIndex", 70); $("#gDialog").bind("dialogopen", function(event, ui) { $("#gOrganize").height($("#gDialog").innerHeight() - 20); - $("#gMicroThumbPanel").height($("#gDialog").innerHeight() - 90); - $("#gOrganizeAlbumTree").height($("#gDialog").innerHeight() - 59); + $("#gMicroThumbPanel").height($("#gDialog").innerHeight() - 120); + $("#gOrganizeAlbumTree").height($("#gDialog").innerHeight() - 89); }); $("#gDialog").bind("dialogclose", function(event, ui) { @@ -133,18 +158,18 @@ $("#gDialog").dialog("close"); }); - $("#gMicroThumbPanel").selectable({filter: ".gMicroThumbGridCell"}); - $("#gMicroThumbPanel").droppable($.organize.content_droppable); - $.organize.set_handlers(); }, set_handlers: function() { + $("#gMicroThumbPanel").selectable({filter: ".gMicroThumbGridCell"}); + $("#gMicroThumbPanel").droppable($.organize.content_droppable); + $(".gMicroThumbGridCell").draggable($.organize.micro_thumb_draggable); $(".gMicroThumbGridCell").mousemove($.organize.mouse_move_handler); $(".gOrganizeBranch").droppable($.organize.branch_droppable); - $(".gBranchText span").click($.organize.collapse_or_expand_tree); $(".gBranchText").click($.organize.show_album); + $(".gOrganizeBranch .ui-icon").click($.organize.collapse_or_expand_tree); }, /** @@ -164,6 +189,7 @@ if ($(event.currentTarget).hasClass("gBranchSelected")) { return; } + $("#gMicroThumbPanel").selectable("destroy"); var id = $(event.currentTarget).attr("ref"); $(".gBranchSelected").removeClass("gBranchSelected"); $("#gOrganizeBranch-" + id).addClass("gBranchSelected"); diff --git a/modules/organize/views/organize_dialog.html.php b/modules/organize/views/organize_dialog.html.php index 982eba9e..46f9ad9b 100644 --- a/modules/organize/views/organize_dialog.html.php +++ b/modules/organize/views/organize_dialog.html.php @@ -1,6 +1,7 @@

      p::purify($title))) ?>

      @@ -39,6 +40,10 @@
      +