From f1cb43430bc84aaa2bcf7bfc99d1ef9dd0138e78 Mon Sep 17 00:00:00 2001 From: Tim Almdal Date: Fri, 3 Apr 2009 00:50:43 +0000 Subject: First iteration of the organize functionality (orginally called bulk edit). There is limited functionality in no edits work. This is primary a chance for the team to review the ui. It is in a separate module to isolate the changes. Eventually, it will be moved back into core. --- modules/organize/controllers/organize.php | 92 +++++++++++ modules/organize/css/organize.css | 98 ++++++++++++ modules/organize/helpers/organize_installer.php | 32 ++++ modules/organize/helpers/organize_menu.php | 32 ++++ modules/organize/helpers/organize_theme.php | 30 ++++ modules/organize/js/organize.js | 172 +++++++++++++++++++++ modules/organize/js/organize_init.js | 24 +++ modules/organize/module.info | 3 + modules/organize/views/organize.html.php | 43 ++++++ modules/organize/views/organize_album.html.php | 15 ++ .../organize/views/organize_button_pane.html.php | 25 +++ modules/organize/views/organize_edit.html.php | 46 ++++++ .../organize/views/organize_thumb_grid.html.php | 14 ++ modules/organize/views/organize_tree.html.php | 4 + 14 files changed, 630 insertions(+) create mode 100644 modules/organize/controllers/organize.php create mode 100644 modules/organize/css/organize.css create mode 100644 modules/organize/helpers/organize_installer.php create mode 100644 modules/organize/helpers/organize_menu.php create mode 100644 modules/organize/helpers/organize_theme.php create mode 100644 modules/organize/js/organize.js create mode 100644 modules/organize/js/organize_init.js create mode 100644 modules/organize/module.info create mode 100644 modules/organize/views/organize.html.php create mode 100644 modules/organize/views/organize_album.html.php create mode 100644 modules/organize/views/organize_button_pane.html.php create mode 100644 modules/organize/views/organize_edit.html.php create mode 100644 modules/organize/views/organize_thumb_grid.html.php create mode 100644 modules/organize/views/organize_tree.html.php (limited to 'modules') diff --git a/modules/organize/controllers/organize.php b/modules/organize/controllers/organize.php new file mode 100644 index 00000000..5faf30e1 --- /dev/null +++ b/modules/organize/controllers/organize.php @@ -0,0 +1,92 @@ +id == 1) ? $item : ORM::factory("item", 1); + + $v = new View("organize.html"); + $v->root = $root; + $v->item = $item; + $v->album_tree = $this->tree($item, $root); + + $v->edit_form = new View("organize_edit.html"); + $v->edit_form->button_pane = new View("organize_button_pane.html"); + + print $v; + } + + public function content($item_id) { + $item = ORM::factory("item", $item_id); + $width = $this->input->get("width"); + $height = $this->input->get("height"); + $offset = $this->input->get("offset", 0); + $thumbsize = self::$_MICRO_THUMB_SIZE + 2 * self::$_MICRO_THUMB_PADDING; + $page_size = ((int)($width / $thumbsize)) * ceil($height / $thumbsize); + + $v = new View("organize_thumb_grid.html"); + $v->children = $item->children($page_size, $offset); + $v->thumbsize = self::$_MICRO_THUMB_SIZE; + $v->padding = self::$_MICRO_THUMB_PADDING; + + print $v; + } + + public function header($item_id) { + $item = ORM::factory("item", $item_id); + + print json_encode(array("title" => $item->title, + "description" => empty($item->description) ? "" : $item->description)); + } + + public function detail($item_id) { + $item = ORM::factory("item", $item_id); + + print json_encode(array("title" => $item->title, + "owner" => $item->owner->name, + "date" => date("j-M-Y", $item->updated), + "description" => empty($item->description) ? "" : $item->description)); + } + + public function tree($item, $parent) { + $albums = ORM::factory("item") + ->where(array("parent_id" => $parent->id, "type" => "album")) + ->orderby(array("title" => "ASC")) + ->find_all(); + + $v = new View("organize_album.html"); + $v->album = $parent; + $v->selected = $parent->id == $item->id; + + if ($albums->count()) { + $v->album_icon = $parent->id == 1 || $v->selected ? "ui-icon-minus" : "ui-icon-plus"; + } else { + $v->album_icon = ""; + } + + $v->children = ""; + foreach ($albums as $album) { + $v->children .= $this->tree($item, $album); + } + return $v->__toString(); + } +} \ No newline at end of file diff --git a/modules/organize/css/organize.css b/modules/organize/css/organize.css new file mode 100644 index 00000000..cc39ac26 --- /dev/null +++ b/modules/organize/css/organize.css @@ -0,0 +1,98 @@ +/* @todo move to theme css */ +#gOrganizeTreeContainer, +#gMicroThumbContainer { + overflow-y: auto; +} + +#gMicroThumbContainer #gMicroThumbGrid { + margin: 0; +} + +#gMicroThumbContainer #gMicroThumbGrid .gMicroThumb { + border: 1px solid #e8e8e8; + border-right-color: #ccc; + border-bottom-color: #ccc; + float: left; + font-size: .7em; + height: 9em; + margin-left: .5em; + margin-top: .5em; + overflow: hidden; + padding: .5em; + text-align: center; + width: 9em; +} + +#gOrganizeAlbumDescription { + height: 2em; + overflow-y: auto; +} + +#gMicroThumbContainer #gMicroThumbGrid .gAlbum { + background-color: #e8e8e8; +} + +#gMicroThumbContainer #gMicroThumbGrid :hover { + background-color: #09F !important; + opacity: .3; +} + +.gThumbSelected { + border: 0.2em solid #0099FF !important; +} + +.gBranchSelected { + background-color: #6CF !important; +} + +.gBranchText { + cursor: pointer; +} + +.gBranchCollapsed { + display: none; +} + +.gBranchEmpty { + visibility: hidden; +} + +#gOrganizeTreeContainer ul ul li { + padding-left: 1.2em; +} + +#gOrganizeFormButtons { + bottom: 0.5em; + position: absolute; +} + +#gOrganizeFormButtons .submit { + display: inline; + float: none; + left: 0.5em; + position: relative; +} + +#gOrganizeFormThumbs { + padding: .5em; + height: 7em; + width: 100%; + overflow: hidden; +} + +#gOrganizeFormThumbs div { + margin: 0 auto; + text-align: center; +} + +#gOrganizeButtonPane { + padding: .5em; + text-align: center; +} + +#gOrganizeFormInfo td { + border: thin none; + padding: 0; +} + + diff --git a/modules/organize/helpers/organize_installer.php b/modules/organize/helpers/organize_installer.php new file mode 100644 index 00000000..185f09a9 --- /dev/null +++ b/modules/organize/helpers/organize_installer.php @@ -0,0 +1,32 @@ +item(); + + if ($item && access::can("edit", $item) && $item->is_album()) { + $menu->get("options_menu") + ->append(Menu::factory("link") + ->id("organize") + ->label(t("Organize Album")) + ->css_id("gOrganizeLink") + ->url(url::site("organize/index/{$item->id}"))); + } + } +} diff --git a/modules/organize/helpers/organize_theme.php b/modules/organize/helpers/organize_theme.php new file mode 100644 index 00000000..4ce4c780 --- /dev/null +++ b/modules/organize/helpers/organize_theme.php @@ -0,0 +1,30 @@ +"; + return implode("\n", $script); + //return html::script("modules/organize/js/organize_init.js"); + } +} diff --git a/modules/organize/js/organize.js b/modules/organize/js/organize.js new file mode 100644 index 00000000..c3e5d3be --- /dev/null +++ b/modules/organize/js/organize.js @@ -0,0 +1,172 @@ +/* + * @todo Trap resize of dialog and resize the child areas (tree, grid and edit form) + */ +var url; +var height; + +function get_album_content() { + var grid_width = $("#gMicroThumbContainer").width(); + url = $("#gMicroThumbContainer").attr("ref"); + url = url.replace("__WIDTH__", grid_width); + url = url.replace("__HEIGHT__", height); + + retrieve_micro_thumbs(url); +} + +function retrieve_micro_thumbs() { + var offset = $("#gMicroThumbGrid li").length; + if (url == null) { + var grid_width = $("#gMicroThumbContainer").width(); + url = $("#gMicroThumbContainer").attr("ref"); + url = url.replace("__WIDTH__", grid_width); + url = url.replace("__HEIGHT__", height); + } + var url_data = url.replace("__OFFSET__", offset); + url_data = url.replace("__ITEM_ID__", item_id); + $.get(url_data, function(data) { + $("#gMicroThumbGrid").append(data); + get_more_data(); + }); +} + +function get_more_data() { + var element = $("#gMicroThumbContainer").get(0); + var scrollHeight = element.scrollHeight; + var scrollTop = element.scrollTop; + var height = $("#gMicroThumbContainer").height(); + var scrollPosition = scrollHeight - (scrollTop + height); + if (scrollPosition > 0 && scrollPosition <= 100) { + retrieve_micro_thumbs(); + } +} + +function toggle_select(event) { + var clone = null; + var id = $(this).attr("id").replace(/[^0-9]/g, ""); + + if ($(this).hasClass("gThumbSelected")) { + $(this).removeClass("gThumbSelected"); + var newSelect = $(".gThumbSelected"); + if (newSelect.size() == 1) { + clone = $(".gThumbSelected").children("img").clone(true); + id = $(".gThumbSelected").attr("id").replace(/[^0-9]/g, ""); + } else { + clone = null; + } + } else { + clone = $(this).children("img").clone(true); + $(this).addClass("gThumbSelected"); + } + switch ($(".gThumbSelected").size()) { + case 0: + reset_edit_select(); + break; + case 1: + $("#gOrganizeFormThumb").empty(); + $("#gOrganizeFormThumb").append(clone); + $("#gOrganizeFormNoImage").hide(); + $("#gOrganizeFormMultipleImages").hide(); + $("#gOrganizeFormThumb").show(); + $("#gOrganizeButtonPane").show(); + $.getJSON($("#gOrganizeFormInfo").attr("ref").replace("__ITEM_ID__", id), function(data) { + $("#gOrganizeFormTitle").text(data.title); + $("#gOrganizeFormOwner").text(data.owner); + $("#gOrganizeFormDate").text(data.date); + $("#gOrganizeFormDescription").text(data.description); + $("#gOrganizeFormInfo").show(); + }); + break; + default: + $("#gOrganizeFormThumb").hide(); + $("#gOrganizeFormInfo").hide(); + $("#gOrganizeFormMultipleImages").show(); + } + event.preventDefault(); +} + +function reset_edit_select() { + $("#gOrganizeFormNoImage").show(); + $("#gOrganizeFormThumb").hide(); + $("#gOrganizeFormMultipleImages").hide(); + $("#gOrganizeButtonPane").hide(); + $("#gOrganizeFormInfo").hide(); +} + +function organize_toggle_children(event) { + var id = $(this).attr("ref"); + var span_children = $("#gOrganizeChildren-" + id); + if ($(this).hasClass("ui-icon-plus")) { + $(this).removeClass("ui-icon-plus"); + $(this).addClass("ui-icon-minus"); + $("#gOrganizeChildren-" + id).removeClass("gBranchCollapsed"); + } else { + $(this).removeClass("ui-icon-minus"); + $(this).addClass("ui-icon-plus"); + $("#gOrganizeChildren-" + id).addClass("gBranchCollapsed"); + } + event.preventDefault(); +} + +function organize_open_folder(event) { + var selected = $(".gBranchSelected"); + if ($(selected).attr("id") != $(this).attr("id")) { + $(selected).removeClass("gBranchSelected"); + $(this).addClass("gBranchSelected"); + item_id = $(this).attr("ref"); + $("#gMicroThumbGrid").empty(); + var url_header = $("#gDialog #hd").attr("ref").replace("__ITEM_ID__", item_id); + $.getJSON(url_header, function(data) { + $("#gOrganizeAlbumTitle").text(data.title); + $("#gOrganizeAlbumDescription").text(data.description); + }); + reset_edit_select(); + retrieve_micro_thumbs(); + } + event.preventDefault(); +} + +function organize_dialog_init() { + var size = viewport_size(); + height = size.height() - 100; + var width = size.width() - 100; + + $("#gDialog").dialog("option", "width", width); + $("#gDialog").dialog("option", "height", height); + + $("#gDialog").dialog("open"); + if ($("#gDialog h1").length) { + $("#gDialog").dialog('option', 'title', $("#gDialog h1:eq(0)").html()); + } else if ($("#gDialog fieldset legend").length) { + $("#gDialog").dialog('option', 'title', $("#gDialog fieldset legend:eq(0)").html()); + } + + height -= 2 * parseFloat($("#gDialog").css("padding-top")); + height -= 2 * parseFloat($("#gDialog").css("padding-bottom")); + height -= $("#gMicroThumbContainer").position().top; + height -= $("#gDialog #ft").height(); + height = Math.round(height); + + $("#gMicroThumbContainer").height(height); + $("#gOrganizeTreeContainer").height(height); + $("#gOrganizeEditContainer").height(height); + + $(".gOrganizeBranch .ui-icon").click(organize_toggle_children); + $(".gBranchText").click(organize_open_folder); + retrieve_micro_thumbs(item_id); + //showLoading("#gDialog"); +} + +function viewport_size() { + return { + width : function() { + return window.innerWidth + || document.documentElement && document.documentElement.clientWidth + || document.body.clientWidth; + }, + height : function() { + return window.innerHeight + || document.documentElement && document.documentElement.clientHeight + || document.body.clientHeight; + } + }; +} diff --git a/modules/organize/js/organize_init.js b/modules/organize/js/organize_init.js new file mode 100644 index 00000000..70949eab --- /dev/null +++ b/modules/organize/js/organize_init.js @@ -0,0 +1,24 @@ +$("document").ready(function() { + $("#gOrganizeLink").click(function(event) { + event.preventDefault(); + var href = event.target.href; + + $("body").append('
'); + + $("#gDialog").dialog({ + autoOpen: false, + autoResize: false, + modal: true, + resizable: true, + close: closeDialog + }); + + //showLoading("#gDialog"); + + $.get(href, function(data) { + $("#gDialog").html(data); + }); + return false; + }); +}); + diff --git a/modules/organize/module.info b/modules/organize/module.info new file mode 100644 index 00000000..b3ae94a3 --- /dev/null +++ b/modules/organize/module.info @@ -0,0 +1,3 @@ +name = Organize +description = Organize your gallery by apply tags or moving images +version = 1 diff --git a/modules/organize/views/organize.html.php b/modules/organize/views/organize.html.php new file mode 100644 index 00000000..915b7446 --- /dev/null +++ b/modules/organize/views/organize.html.php @@ -0,0 +1,43 @@ + + + +
+ $item->title)) ?> +
+
+
"> +

title ?>

+

description ?>

+
+
+
+
+
+
+ +
+
"> +
    +
+
+
+
+
+
+ +
+
+
+ +
+
diff --git a/modules/organize/views/organize_album.html.php b/modules/organize/views/organize_album.html.php new file mode 100644 index 00000000..9f38a2cc --- /dev/null +++ b/modules/organize/views/organize_album.html.php @@ -0,0 +1,15 @@ + + diff --git a/modules/organize/views/organize_button_pane.html.php b/modules/organize/views/organize_button_pane.html.php new file mode 100644 index 00000000..82b7607d --- /dev/null +++ b/modules/organize/views/organize_button_pane.html.php @@ -0,0 +1,25 @@ + + + +"> + + + + + +"> + + + + + + +"> + + + + + diff --git a/modules/organize/views/organize_edit.html.php b/modules/organize/views/organize_edit.html.php new file mode 100644 index 00000000..ebfbae2b --- /dev/null +++ b/modules/organize/views/organize_edit.html.php @@ -0,0 +1,46 @@ + +
+ "post")) ?> +
+
+

+
+ + +
+ + + + + + + "gOrganizePauseButton", "name" => "pause", "disabled" => true, "class" => "submit", "style" => "display:none"), t("Pause")) ?> + "gOrganizeApplyButton", "name" => "apply", "disabled" => true, "class" => "submit"), t("Apply")) ?> + + +
\ 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 new file mode 100644 index 00000000..1cbc4241 --- /dev/null +++ b/modules/organize/views/organize_thumb_grid.html.php @@ -0,0 +1,14 @@ + + + $child): ?> + +is_album()): ?> + + +
  • + micro_thumb_tag(array("class" => "gThumbnail"), $thumbsize) ?> +
    • + + diff --git a/modules/organize/views/organize_tree.html.php b/modules/organize/views/organize_tree.html.php new file mode 100644 index 00000000..d2cdd957 --- /dev/null +++ b/modules/organize/views/organize_tree.html.php @@ -0,0 +1,4 @@ + + $child): ?> + + -- cgit v1.2.3