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') 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