diff options
Diffstat (limited to 'modules/organize')
| -rw-r--r-- | modules/organize/controllers/organize.php | 12 | ||||
| -rw-r--r-- | modules/organize/css/organize.css | 85 | ||||
| -rw-r--r-- | modules/organize/css/organize_theme.css | 16 | ||||
| -rw-r--r-- | modules/organize/helpers/organize_theme.php | 1 | ||||
| -rw-r--r-- | modules/organize/js/organize.js | 144 | ||||
| -rw-r--r-- | modules/organize/views/organize_dialog.html.php | 24 | ||||
| -rw-r--r-- | modules/organize/views/organize_thumb_grid.html.php | 12 | ||||
| -rw-r--r-- | modules/organize/views/organize_tree.html.php | 12 |
8 files changed, 201 insertions, 105 deletions
diff --git a/modules/organize/controllers/organize.php b/modules/organize/controllers/organize.php index 4a4b9f13..38e8ca58 100644 --- a/modules/organize/controllers/organize.php +++ b/modules/organize/controllers/organize.php @@ -48,8 +48,12 @@ class Organize_Controller extends Controller { access::required("view", $target_album); access::required("add", $target_album); + $source_album = null; foreach (Input::instance()->post("source_ids") as $source_id) { $source = ORM::factory("item", $source_id); + if (empty($source_album)) { // get the source_album + $source_album = $source->parent(); + } if (!$source->contains($target_album)) { access::required("edit", $source); item::move($source, $target_album); @@ -57,8 +61,8 @@ class Organize_Controller extends Controller { } print json_encode( - array("tree" => (string)self::_expanded_tree(ORM::factory("item", 1), $target_album), - "grid" => (string)self::_get_micro_thumb_grid($target_album, 0))); + array("tree" => (string)self::_expanded_tree(ORM::factory("item", 1), $source_album), + "grid" => (string)self::_get_micro_thumb_grid($source_album, 0))); } function rearrange($target_id, $before_or_after) { @@ -69,6 +73,10 @@ class Organize_Controller extends Controller { access::required("view", $album); access::required("edit", $album); + if (locales::is_rtl()) { // invert the position if the locale is rtl + $before_or_after = $before_or_after == "after" ? "before" : "after"; + } + $source_ids = Input::instance()->post("source_ids", array()); if ($album->sort_column != "weight") { diff --git a/modules/organize/css/organize.css b/modules/organize/css/organize.css index d8923ea7..22d6e051 100644 --- a/modules/organize/css/organize.css +++ b/modules/organize/css/organize.css @@ -3,18 +3,18 @@ */ #g-organize { - height: auto; margin: 0 !important; + min-height: auto; padding: 0 !important; position: relative; width: 100%; } #g-organize-content-pane { - height: auto; + height: 100%; margin: 0 !important; padding: 0 !important; - position: relative; + position: absolute; width: 100%; } @@ -23,11 +23,15 @@ */ #g-organize #g-organize-tree-container { - height: 100%; - overflow: auto; margin: 0; + min-height: 100%; padding: 0; - width: 19%; + position: relative; + width: 20%; +} + +#g-organize #g-organize-tree-container h3 { + margin-bottom: 0.1em; } #g-organize-album-tree { @@ -38,6 +42,10 @@ padding: 0 0 .2em 1.2em; } +.rtl #g-organize-album-tree ul li { + padding: 0 1.2em .2em 0; +} + .g-organize-album span { cursor: pointer; } @@ -49,15 +57,27 @@ width: auto; } +.rtl .g-organize-album-text { + cursor: pointer; + display: block; + margin: 2px 2px 1px 1px; + width: auto; +} + +.g-organize-album-text:hover { + border-width: 1px; + border-style: dotted; +} + /******************************************************************* * Album panel styles */ #g-organize #g-organize-detail { - height: 100%; margin: 0 !important; - overflow: hidden; + min-height: 100%; padding: 0 !important; + position: relative; width: 80%; } @@ -68,35 +88,27 @@ #g-organize #g-organize-detail .g-message-block li { padding-bottom: .2em; padding-top: .2em; - width: inherit; -} - -#g-organize-microthumb-panel { - height: 100%; - margin: 0 !important; - position: relative; - padding: 0 !important; - width: 100%; + width: auto; } #g-organize-microthumb-grid { - height: 100%; - overflow: auto; + border-width: 1px; + border-style: solid; + bottom: 1.8em; + left: 0; + margin: 0 !important; + overflow-x: hidden; + overflow-y: auto; padding: .4em !important; - position: relative; + position: absolute; + right: 0; + top: 1.6em; } - .g-organize-microthumb-grid-cell { - margin: 6px; - padding: 0 !important; - position: relative; -} - -.g-organize-microthumb { display: block; height: 100px; - margin: 0; - padding: .4em 0; + margin: 6px; + padding: .4em 0 !important; position: relative; text-align: center; width: 110px; @@ -106,7 +118,7 @@ z-index: 2000 !important; } -.g-organize-microthumb .ui-icon { +.g-organize-microthumb-grid-cell .ui-icon { bottom: 0; left: 0; position: absolute; @@ -118,11 +130,22 @@ */ #g-organize-controls { + bottom: 0; + height: 1.9em; + left: 0; margin: 0 !important; - padding: .2em .4em; + padding: .1em .4em; + position: absolute; + right: 0; } +#g-organize-controls #g-organize-sort-order-text { + padding: .2em 0 0 0; +} + + #g-organize-controls select { + margin-left: .42em; display: inline; } diff --git a/modules/organize/css/organize_theme.css b/modules/organize/css/organize_theme.css new file mode 100644 index 00000000..3d289755 --- /dev/null +++ b/modules/organize/css/organize_theme.css @@ -0,0 +1,16 @@ +/** ******************************************************************* + * Organize styles that are theme overrideable + *********************************************************************/ +.g-organize-microthumb-grid-cell.ui-selected { + background: #DFEFFC !important; +} + +#g-organize-microthumb-grid, +#g-organize-drop-target-marker, +.g-organize-album-text:hover { + border-color: #79B7E7; +} + +#g-organize-drop-target-marker { + background-color: #79B7E7; +} diff --git a/modules/organize/helpers/organize_theme.php b/modules/organize/helpers/organize_theme.php index 61b6fe7d..c2914675 100644 --- a/modules/organize/helpers/organize_theme.php +++ b/modules/organize/helpers/organize_theme.php @@ -27,6 +27,7 @@ class organize_theme { // approach that lets us continue to use the Kohana cascading filesystem. $theme->script("organize.js"); $theme->css("organize.css"); + $theme->css("organize_theme.css"); } } } diff --git a/modules/organize/js/organize.js b/modules/organize/js/organize.js index 76eadf85..276fc3fa 100644 --- a/modules/organize/js/organize.js +++ b/modules/organize/js/organize.js @@ -4,18 +4,16 @@ handle: ".ui-selected", distance: 10, cursorAt: { left: -10, top: -10}, - appendTo: "#g-organize-microthumb-panel", + appendTo: "#g-organize-content-pane", helper: function(event, ui) { var selected = $(".ui-draggable.ui-selected img"); if (selected.length) { var set = $('<div class="g-drag-helper"></div>') .css({ - zIndex: 2000, - width: 80, - height: Math.ceil(selected.length / 5) * 16 + zIndex: 2000, + width: 80, + height: Math.ceil(selected.length / 5) * 16 }); - var offset = $(this).offset(); - var click = {left: event.pageX - offset.left, top: event.pageY - offset.top}; selected.each(function(i) { var row = parseInt(i / 5); @@ -37,17 +35,19 @@ }, start: function(event, ui) { - $("#g-organize-microthumb-panel .ui-selected").hide(); + $("#g-organize-microthumb-grid .ui-selected").hide(); }, drag: function(event, ui) { - var top = $("#g-organize-microthumb-panel").offset().top; - var height = $("#g-organize-microthumb-panel").height(); + var top = $("#g-organize-microthumb-grid").offset().top; + var height = $("#g-organize-microthumb-grid").height(); + var scrollTop = $("#g-organize-microthumb-grid").scrollTop(); if (ui.offset.top > height + top - 20) { - $("#g-organize-microthumb-panel").get(0).scrollTop += 100; + scrollTop += 100; } else if (ui.offset.top < top + 20) { - $("#g-organize-microthumb-panel").get(0).scrollTop = Math.max(0, $("#g-organize-microthumb-panel").get(0).scrollTop - 100); + scrollTop = Math.max(0, scrollTop - 100); } + $("#g-organize-microthumb-grid").scrollTop(scrollTop); } }, @@ -56,19 +56,11 @@ tolerance: "pointer", greedy: true, drop: function(event, ui) { - var before_or_after = null; - var target_id = null; - if ($(".currentDropTarget").length) { - before_or_after = $(".currentDropTarget").css("borderLeftStyle") == "solid" ? "before" : "after"; - target_id = $(".currentDropTarget").attr("ref"); - } else { - before_or_after = "after"; - target_id = $("#g-organize-microthumb-grid li:last").attr("ref"); - } + var target = $("#g-organize-drop-target-marker").data("drop_position"); $.organize.do_drop({ url: rearrange_url - .replace("__TARGET_ID__", target_id) - .replace("__BEFORE__", before_or_after), + .replace("__TARGET_ID__", target.id) + .replace("__BEFORE__", target.position ? "before" : "after"), source: $(ui.helper).children("img") }); } @@ -80,8 +72,8 @@ greedy: true, drop: function(event, ui) { if ($(event.target).hasClass("g-view-only")) { + $("#g-organize-drop-target-marker").remove(); $(".ui-selected").show(); - $(".g-organize-microthumb-grid-cell").css("borderStyle", "none"); } else { $.organize.do_drop({ url: move_url.replace("__ALBUM_ID__", $(event.target).attr("ref")), @@ -92,19 +84,31 @@ }, do_drop: function(options) { - $("#g-organize-microthumb-panel").selectable("destroy"); + $("#g-organize-microthumb-grid").selectable("destroy"); var source_ids = []; $(options.source).each(function(i) { source_ids.push($(this).attr("ref")); }); if (source_ids.length) { + var loading = $('<div class="g-dialog-loading-large"> </div>') + .css({bottom: 5, + opacity: .5, + left: 0, + position: "absolute", + right: 0, + top: 0, + zIndex: 2000 + }); + $("#g-organize-microthumb-grid").append(loading); + $.post(options.url, - { "source_ids[]": source_ids }, - function(data) { - $.organize._refresh(data); - }, - "json"); + { "source_ids[]": source_ids }, + function(data) { + $.organize._refresh(data); + $(".g-dialog-loading-large").remove(); + }, + "json"); } }, @@ -120,14 +124,45 @@ $.organize.set_handlers(); }, - mouse_move_handler: function(event) { + grid_mouse_leave_handler: function(event) { + if ($(".g-drag-helper").length && $("#g-organize-drop-target-marker").length) { + $("#g-organize-drop-target-marker").remove(); + } + }, + + grid_mouse_move_handler: function(event) { if ($(".g-drag-helper").length) { - $(".g-organize-microthumb-grid-cell").css({borderStyle: "hidden", margin: "6px"}); - $(".currentDropTarget").removeClass("currentDropTarget"); - var borderStyle = event.pageX < $(this).offset().left + $(this).width() / 2 ? - {borderLeftStyle: "solid", marginLeft: "2px"} : {borderRightStyle: "solid", marginRight: "2px"}; - $(this).addClass("currentDropTarget") - .css(borderStyle); + var cellSize = $("#g-organize").data("cellSize"); + var thumbnailCount = $(".g-organize-microthumb-grid-cell:visible").length; + + var scrollTop = $("#g-organize-microthumb-grid").scrollTop(); + var itemPos = { + col: Math.floor((event.pageX - $("#g-organize-microthumb-grid").offset().left) / cellSize.width), + row: Math.floor((event.pageY + scrollTop - $("#g-organize-microthumb-grid").offset().top) / cellSize.height) + }; + + var itemIndex = itemPos.row * cellSize.columns + itemPos.col; + var item = itemIndex < thumbnailCount ? $(".g-organize-microthumb-grid-cell:visible").get(itemIndex) : + $(".g-organize-microthumb-grid-cell:visible:last"); + + var before = event.pageX < ($(item).offset().left + $(item).width() / 2); + var left = (before && itemIndex < thumbnailCount ? $(item).position().left : $(item).position().left + cellSize.width) - 3; + var top = $(item).position().top + 6 + scrollTop; + + if ($("#g-organize-drop-target-marker").length) { + $("#g-organize-drop-target-marker").remove(); + } + var set = $('<div id="g-organize-drop-target-marker"></div>') + .css({zIndex: 2000, + width: 2, + height: 112, + borderWidth: 1, + borderStyle: "solid", + position: "absolute", + top: top, left: left + }) + .data("drop_position", {id: $(item).attr("ref"), position: before}); + $("#g-organize-microthumb-grid").append(set); } }, @@ -140,9 +175,16 @@ $(".sf-menu li.sfHover ul").css("z-index", 68); $("#g-dialog").dialog("option", "zIndex", 70); $("#g-dialog").bind("dialogopen", function(event, ui) { - $("#g-organize").height($("#g-dialog").innerHeight() - 20); - $("#g-organize-microthumb-grid").height($("#g-dialog").innerHeight() - 91); - $("#g-organize-tree-container").height($("#g-dialog").innerHeight() - 60); + var outerHeight = $(".g-organize-microthumb-grid-cell").outerHeight(true); + var outerWidth = $(".g-organize-microthumb-grid-cell").outerWidth(true); + var gridInnerWidth = $("#g-organize-microthumb-grid").innerWidth() - 2 * parseFloat($("#g-organize-microthumb-grid").css("paddingLeft")); + $("#g-organize") + .height($("#g-dialog").innerHeight() - 20) + .data("cellSize", { + height: outerHeight, + width: outerWidth, + columns: Math.floor(gridInnerWidth / outerWidth) + }); }); $("#g-dialog").bind("dialogclose", function(event, ui) { @@ -164,11 +206,13 @@ set_handlers: function() { $("#g-organize-microthumb-grid") .selectable({filter: ".g-organize-microthumb-grid-cell"}) + .mousemove($.organize.grid_mouse_move_handler) + .mouseleave($.organize.grid_mouse_leave_handler) .droppable($.organize.content_droppable); $(".g-organize-microthumb-grid-cell") - .draggable($.organize.micro_thumb_draggable) - .mouseleave($.organize.mouse_leave_handler) - .mousemove($.organize.mouse_move_handler); + // need to manually add this class in case we care calling with additional elements + .addClass("ui-selectee") + .draggable($.organize.micro_thumb_draggable); $(".g-organize-album").droppable($.organize.branch_droppable); $(".g-organize-album-text").click($.organize.show_album); $("#g-organize-album-tree .ui-icon-plus,#g-organize-album-tree .ui-icon-minus").click($.organize.toggle_branch); @@ -210,18 +254,18 @@ if ($(parent).hasClass("g-view-only")) { return; } - $("#g-organize-microthumb-panel").selectable("destroy"); + $("#g-organize-microthumb-grid").selectable("destroy"); var id = $(event.currentTarget).attr("ref"); $(".g-organize-album-text.ui-state-focus").removeClass("ui-state-focus"); $(".g-organize-album-text[ref=" + id + "]").addClass("ui-state-focus"); - var url = $("#g-organize-microthumb-panel").attr("ref").replace("__ITEM_ID__", id).replace("__OFFSET__", 0); + var url = $("#g-organize-microthumb-grid").attr("ref").replace("__ITEM_ID__", id).replace("__OFFSET__", 0); $.get(url, {}, - function(data) { - $("#g-organize-microthumb-grid").html(data.grid); - $("#g-organize-sort-column").attr("value", data.sort_column); - $("#g-organize-sort-order").attr("value", data.sort_order); - $.organize.set_handlers(); - }, + function(data) { + $("#g-organize-microthumb-grid").html(data.grid); + $("#g-organize-sort-column").attr("value", data.sort_column); + $("#g-organize-sort-order").attr("value", data.sort_order); + $.organize.set_handlers(); + }, "json"); }, diff --git a/modules/organize/views/organize_dialog.html.php b/modules/organize/views/organize_dialog.html.php index 435f5ae3..38d05b81 100644 --- a/modules/organize/views/organize_dialog.html.php +++ b/modules/organize/views/organize_dialog.html.php @@ -15,22 +15,28 @@ </ul> </div> <div id="g-organize-detail" class="g-left ui-helper-clearfix"> - <div id="g-organize-microthumb-panel" class="ui-widget" + <ul id="g-action-status" class="g-message-block"> + <li class="g-info"><?= t("Drag and drop photos to re-order or move between albums") ?></li> + </ul> + <div id="g-organize-microthumb-grid" class="ui-widget" ref="<?= url::site("organize/album/__ITEM_ID__/__OFFSET__") ?>"> - <ul id="g-action-status" class="g-message-block"> - <li class="g-info"><?= t("Drag and drop photos to re-order or move between albums") ?></li> - </ul> - <ul id="g-organize-microthumb-grid" class="ui-widget-content"> <?= $micro_thumb_grid ?> - </ul> </div> <div id="g-organize-controls" class="ui-widget-header"> <a id="g-organize-close" href="#" ref="done" class="g-button g-right ui-corner-all ui-state-default"><?= t("Close") ?></a> <form> - <?= t("Sort order") ?> - <?= form::dropdown(array("id" => "g-organize-sort-column"), album::get_sort_order_options(), $album->sort_column) ?> - <?= form::dropdown(array("id" => "g-organize-sort-order"), array("ASC" => "Ascending", "DESC" => "Descending"), $album->sort_order) ?> + <ul> + <li id="g-organize-sort-order-text" class="g-left"><?= t("Sort order") ?></li> + <li class="g-left"> + <?= form::dropdown(array("id" => "g-organize-sort-column"), + album::get_sort_order_options(), $album->sort_column) ?> + </li> + <li class="g-left"> + <?= form::dropdown(array("id" => "g-organize-sort-order"), + array("ASC" => t("Ascending"), "DESC" => t("Descending")), $album->sort_order) ?> + </li> + </ul> </form> </div> </div> diff --git a/modules/organize/views/organize_thumb_grid.html.php b/modules/organize/views/organize_thumb_grid.html.php index 9a9cd819..f5db53d4 100644 --- a/modules/organize/views/organize_thumb_grid.html.php +++ b/modules/organize/views/organize_thumb_grid.html.php @@ -1,12 +1,10 @@ <?php defined("SYSPATH") or die("No direct script access.") ?> <? foreach ($album->children(25, $offset) as $child): ?> -<li class="g-organize-microthumb-grid-cell g-left ui-state-default" ref="<?= $child->id ?>"> - <div id="g-organize-microthumb-<?= $child->id ?>" - class="g-organize-microthumb <?= $child->is_album() ? "g-album" : "g-photo" ?> ui-state-active"> - <?= $child->thumb_img(array("class" => "g-thumbnail", "ref" => $child->id), 90, true) ?> - <span<?= $child->is_album() ? " class=\"ui-icon ui-icon-note\"" : "" ?>></span> - </div> -</li> +<div class="g-organize-microthumb-grid-cell g-left ui-state-default ui-state-active <?= $child->is_album() ? "g-album" : "g-photo" ?>" + ref="<?= $child->id ?>"> + <?= $child->thumb_img(array("class" => "g-thumbnail", "ref" => $child->id), 90, true) ?> + <span<?= $child->is_album() ? " class=\"ui-icon ui-icon-note\"" : "" ?>></span> +</div> <? endforeach ?> <? if ($album->children_count() > $offset): ?> diff --git a/modules/organize/views/organize_tree.html.php b/modules/organize/views/organize_tree.html.php index 513c0625..3912c1f6 100644 --- a/modules/organize/views/organize_tree.html.php +++ b/modules/organize/views/organize_tree.html.php @@ -1,9 +1,9 @@ <?php defined("SYSPATH") or die("No direct script access.") ?> -<li class="g-organize-album ui-icon-left <?= access::can("edit", $album) ? "" : "g-view-only" ?>" +<li class="g-organize-album ui-icon-left g-left <?= access::can("edit", $album) ? "" : "g-view-only" ?>" ref="<?= $album->id ?>"> - <span class="ui-icon ui-icon-minus"> + <span class="ui-icon ui-icon-minus g-left"> </span> - <span class="g-organize-album-text <?= $selected && $album->id == $selected->id ? "ui-state-focus" : "" ?>" + <span class="g-organize-album-text g-left <?= $selected && $album->id == $selected->id ? "ui-state-focus" : "" ?>" ref="<?= $album->id ?>"> <?= html::clean($album->title) ?> </span> @@ -12,10 +12,10 @@ <? if ($selected && $child->contains($selected)): ?> <?= View::factory("organize_tree.html", array("selected" => $selected, "album" => $child)); ?> <? else: ?> - <li class="g-organize-album ui-icon-left <?= access::can("edit", $child) ? "" : "g-view-only" ?>" + <li class="g-organize-album ui-icon-left g-left <?= access::can("edit", $child) ? "" : "g-view-only" ?>" ref="<?= $child->id ?>"> - <span class="ui-icon ui-icon-plus"></span> - <span class="g-organize-album-text" ref="<?= $child->id ?>"> + <span class="ui-icon ui-icon-plus g-left"></span> + <span class="g-organize-album-text g-left <?= $selected && $child->id == $selected->id ? "ui-state-focus" : "" ?>" ref="<?= $child->id ?>"> <?= html::clean($child->title) ?> </span> </li> |