summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--modules/organize/css/organize.css138
-rw-r--r--modules/organize/js/organize.js238
-rw-r--r--modules/organize/js/organize_init.js3
-rw-r--r--modules/organize/views/organize.html.php2
-rw-r--r--modules/organize/views/organize_thumb_grid.html.php11
5 files changed, 230 insertions, 162 deletions
diff --git a/modules/organize/css/organize.css b/modules/organize/css/organize.css
index c6c052bc..a1dc062a 100644
--- a/modules/organize/css/organize.css
+++ b/modules/organize/css/organize.css
@@ -1,85 +1,115 @@
/* @todo move to theme css */
-#gOrganizeTreeContainer,
-#gMicroThumbContainer {
+/*******************************************************************
+ * Album Tree styling
+ */
+#gOrganizeTreeContainer {
overflow-y: auto;
margin: 0 !important;
padding: 0 !important;
}
-#gMicroThumbContainer {
+#gOrganizeAlbumDescription {
+ height: 2em;
+ overflow-y: auto;
+}
+
+.gBranchSelected {
+ background-color: #cfdeff !important;
+ border-bottom: 1px solid #999 !important;
+ display: block;
+ padding: .3em 0;
+}
+
+.gBranchText {
+ cursor: pointer;
+}
+
+.gBranchCollapsed {
+ display: none;
+}
+
+.gBranchEmpty {
+ visibility: hidden;
+}
+
+#gOrganizeTreeContainer ul ul li {
+ padding-left: 1.2em;
+}
+
+/*******************************************************************
+ * Album Panel Styles
+ */
+#gMicroThumbPanel {
+ margin: 0 !important;
+ padding: 0 !important;
background-color: #cfdeff;
border: 1px solid #999 !important;
border-top: none !important;
border-left: none !important;
margin-left: -1em !important;
+ overflow: auto;
}
-#gMicroThumbGrid li div div {
- float: left;
-}
-
-#gMicroThumbContainer #gMicroThumbGrid {
- margin: 0;
+#gMicroThumbGrid {
+ padding: .5em;
}
-#gMicroThumbContainer #gMicroThumbGrid .gMicroThumb {
- background-color: #fff;
- border: 2px solid #e8e8e8;
- border-right-color: #ccc;
- border-bottom-color: #ccc;
+.gMicroThumbContainer {
+ display: block;
+ //border: 2px solid #e8e8e8;
+ //border-right-color: #ccc;
+ //border-bottom-color: #ccc;
float: left;
font-size: .7em;
height: 9em;
- margin-left: .5em;
- margin-top: .5em;
+ margin-bottom: 1em;
opacity: .4;
- overflow: hidden;
- padding: .5em;
- text-align: center;
- width: 9em;
+ padding: 0 .5em;
}
-#gOrganizeAlbumDescription {
- height: 2em;
- overflow-y: auto;
+.gMicroThumb {
+ height: 9em;
+ width: 9em;
+ background-color: #fff;
+ display: block;
+ float: left;
+ text-align: center;
}
-#gMicroThumbContainer #gMicroThumbGrid .gAlbum {
+#gMicroThumbPanel #gMicroThumbGrid .gAlbum {
background-color: #e8e8e8;
}
-#gMicroThumbContainer #gMicroThumbGrid :hover {
+#gMicroThumbPanel #gMicroThumbGrid :hover {
opacity: 1;
}
-#gMicroThumbContainer #gMicroThumbGrid .gThumbSelected {
- border: 0.2em solid #09f;
+.gMicroThumbContainer.ui-selected {
opacity: 1;
}
-.gBranchSelected {
- background-color: #cfdeff !important;
- border-bottom: 1px solid #999 !important;
- display: block;
- padding: .3em 0;
+#gDragHelper .gMicroThumbGrid {
+ background-color: transparent;
+ padding: 0;
+ overflow: visible;
}
-
-.gBranchText {
- cursor: pointer;
-}
-
-.gBranchCollapsed {
- display: none;
-}
-
-.gBranchEmpty {
- visibility: hidden;
+
+#gDragHelper .gMicroThumbContainer {
+ display: block;
+ margin: 0;
+ padding: 0;
}
-#gOrganizeTreeContainer ul ul li {
- padding-left: 1.2em;
+#gDragHelper .gMicroThumb {
+ background-color: transparent;
+ height: auto;
+ width: auto;
}
+
+/****************************************************************
+ * Organize Edit styling
+ */
#gOrganizeFormButtons {
bottom: 0.5em;
position: absolute;
@@ -102,21 +132,3 @@
margin: 0;
text-align: center;
}
-
-#gMicroThumbUnselectAll,
-#gMicroThumbSelectAll {
- font-size: 1.2em;
- font-weight: bold;
-}
-
-.gOrganizeReorderDropTarget {
- visibility: hidden;
- background-color: #5C9CCC;
- float: none;
- width: .5em;
- height: 9em;
-}
-
-.gOrganizeReorderDropTargetHover {
- visibility: visible;
-}
diff --git a/modules/organize/js/organize.js b/modules/organize/js/organize.js
index c40a2d67..045603a4 100644
--- a/modules/organize/js/organize.js
+++ b/modules/organize/js/organize.js
@@ -4,9 +4,77 @@
var url;
var height;
+function organize_dialog_init() {
+ var size = viewport_size();
+ height = size.height() - 100;
+ var width = size.width() - 100;
+
+ // Deal with ui.jquery bug: http://dev.jqueryui.com/ticket/4475
+ $(".sf-menu li.sfHover ul").css("z-index", 70);
+
+ $("#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 -= $("#gMicroThumbPanel").position().top;
+ height -= $("#gDialog #ft").height();
+ height = Math.round(height);
+
+ $("#gMicroThumbPanel").height(height);
+ $("#gOrganizeTreeContainer").height(height);
+
+ $(".gOrganizeBranch .ui-icon").click(organize_toggle_children);
+ $(".gBranchText").click(organize_open_folder);
+ retrieve_micro_thumbs(item_id);
+ //showLoading("#gDialog");
+
+ $("#gMicroThumbPanel").scroll(function() {
+ get_more_data();
+ });
+
+ $("#gMicroThumbSelectAll").click(function(event) {
+ select_all(true);
+ event.preventDefault();
+ });
+ $("#gMicroThumbUnselectAll").click(function(event) {
+ select_all(false);
+ event.preventDefault();
+ });
+
+ $("#gMicroThumbGrid").selectable({
+ count: 0,
+ filter: ".gMicroThumbContainer",
+ selected: function(event, ui) {
+ /*
+ * Count the number of selected items if it is greater than 1,
+ * then click won't be called so we need to remove the gSelecting
+ * class in the stop event.
+ */
+ var count = $("#gMicroThumbGrid").selectable("option", "count") + 1;
+ $("#gMicroThumbGrid").selectable("option", "count", count);
+ $(ui.selected).addClass("gSelecting");
+ },
+ stop: function(event) {
+ var count = $("#gMicroThumbGrid").selectable("option", "count");
+ if (count > 1) {
+ $(".gMicroThumbContainer.gSelecting").removeClass("gSelecting");
+ }
+ $("#gMicroThumbGrid").selectable("option", "count", 0);
+ }
+ });
+}
+
function get_album_content() {
- var grid_width = $("#gMicroThumbContainer").width();
- url = $("#gMicroThumbContainer").attr("ref");
+ var grid_width = $("#.gMicroThumbPanel").width();
+ url = $("#gMicroThumbPanel").attr("ref");
url = url.replace("__WIDTH__", grid_width);
url = url.replace("__HEIGHT__", height);
@@ -16,8 +84,8 @@ function get_album_content() {
function retrieve_micro_thumbs() {
var offset = $("#gMicroThumbGrid li").length;
if (url == null) {
- var grid_width = $("#gMicroThumbContainer").width();
- url = $("#gMicroThumbContainer").attr("ref");
+ var grid_width = $("#gMicroThumbPanel").width();
+ url = $("#gMicroThumbPanel").attr("ref");
url = url.replace("__WIDTH__", grid_width);
url = url.replace("__HEIGHT__", height);
}
@@ -26,39 +94,92 @@ function retrieve_micro_thumbs() {
$.get(url_data, function(data) {
$("#gMicroThumbGrid").append(data);
get_more_data();
+ $(".gMicroThumbContainer").click(function(event) {
+ if ($(this).hasClass("gSelecting")) {
+ $(this).removeClass("gSelecting");
+ } else {
+ $(this).removeClass("ui-selected");
+ }
+ });
+ $(".gMicroThumbContainer").draggable({
+ cancel: ".gMicroThumbContainer:not(.ui-selected)",
+ handle: ".gMicroThumbContainer.ui-selected",
+ zindex: 2000,
+ helper: function(event, ui) {
+ $("body").append("<div id=\"gDragHelper\"><ul></ul></div>");
+ var beginTop = event.pageY;
+ var beginLeft = event.pageX;
+ var zindex = $(".gMicroThumbContainer").draggable("option", "zindex");
+ $("#gDragHelper").css('top', event.pageY - 22.5);
+ $("#gDragHelper").css('left', event.pageX + 22.5);
+ var placeHolder = $(this).clone();
+ $(placeHolder).attr("id", "gPlaceHolder");
+ $(placeHolder).css("visibility", "hidden");
+ $(placeHolder).removeClass("ui-selected");
+ $(placeHolder).removeClass("ui-draggable");
+ $(this).after(placeHolder);
+
+ $("li.ui-selected").each(function(i) {
+ var clone = $(this).clone();
+ $(clone).attr("id", "drag_clone_" + $(this).attr("ref"));
+ $("#gDragHelper ul").append(clone);
+ $(clone).css("position", "absolute");
+ $(clone).css("top", beginTop);
+ $(clone).css("left", beginLeft);
+ $(clone).css("z-index", zindex--);
+ $(this).hide();
+
+ var children = $(clone).find(".gMicroThumb .gThumbnail");
+ var width = new String(children.css("width")).replace(/[^0-9]/g,"") * .5;
+ height = new String(children.css("height")).replace(/[^0-9]/g,"") * .5;
+ var marginTop = new String(children.css("margin-top")).replace(/[^\.0-9]/g,"") * .5;
+ children.attr("width", width);
+ children.attr("height", height);
+ children.css("margin-top", marginTop);
+ if (i < 9) {
+ beginTop -= 5;
+ beginLeft += 5;
+ }
+ });
+ return $("#gDragHelper");
+ },
+ stop: function(event, ui) {
+ $("#gDragHelper li").each(function(i) {
+ $("#gPlaceHolder").before($("#thumb_" + $(this).attr("ref")).show());
+ });
+ $(".gMicroThumbContainer.ui-selected").css("z-index", null);
+ $("#gDragHelper").remove();
+ $("#gPlaceHolder").remove();
+ }
+ });
+ $(".gMicroThumbContainer").droppable( {
+ tolerance: "pointer",
+ over: function(event, ui) {
+ $(this).after($("#gPlaceHolder"));
+ },
+ drop: function(event, ui) {
+ $("#gDragHelper li").each(function(i) {
+ $("#gPlaceHolder").before($("#thumb_" + $(this).attr("ref")).show());
+ });
+ $(".gMicroThumbContainer.ui-selected").css("z-index", null);
+ $("#gDragHelper").remove();
+ $("#gPlaceHolder").remove();
+ }
+ });
});
}
function get_more_data() {
- var element = $("#gMicroThumbContainer").get(0);
+ var element = $("#gMicroThumbPanel").get(0);
var scrollHeight = element.scrollHeight;
var scrollTop = element.scrollTop;
- var height = $("#gMicroThumbContainer").height();
+ var height = $("#gMicroThumbPanel").height();
var scrollPosition = scrollHeight - (scrollTop + height);
if (scrollPosition > 0 && scrollPosition <= 100) {
retrieve_micro_thumbs();
}
}
-function toggle_select(event) {
- if ($(this).hasClass("gThumbSelected")) {
- $(this).removeClass("gThumbSelected");
- $(this).draggable("destroy");
- } else {
- $(this).addClass("gThumbSelected");
- $(this).draggable({containment: "#gDialog"});
- }
- event.preventDefault();
-}
-
-function reset_edit_select() {
- $("#gOrganizeFormNoImage").show();
- $("#gOrganizeFormThumb").hide();
- $("#gOrganizeFormMultipleImages").hide();
- $("#gOrganizeButtonPane").hide();
- select_all(false);
-}
-
function organize_toggle_children(event) {
var id = $(this).attr("ref");
var span_children = $("#gOrganizeChildren-" + id);
@@ -81,81 +202,18 @@ function organize_open_folder(event) {
$(this).addClass("gBranchSelected");
item_id = $(this).attr("ref");
$("#gMicroThumbGrid").empty();
- 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");
-
- $("#gMicroThumbContainer").scroll(function() {
- get_more_data();
- });
-
- $("#gMicroThumbSelectAll").click(function(event) {
- select_all(true);
- event.preventDefault();
- });
- $("#gMicroThumbUnselectAll").click(function(event) {
- select_all(false);
- event.preventDefault();
- });
-
- // Drag and Drop Initialization
- $(".gOrganizeReorderDropTarget").droppable({
- hoverClass: "gOrganizeReorderDropTargetHover",
- accept: ".gThumbSelected",
- drop: function(event, ui) {
- // Ajax call to start task for rearrange
- }
- });
-
- $(".gOrganizeBranch").droppable({
- greedy: true,
- accept: ".gThumbSelected",
- drop: function(event, ui) {
- // Ajax call to start task for move
- }
- });
-}
-
function select_all(select) {
- $(".gMicroThumb").click();
if (select) {
-// $("#gMicroThumbGrid li").addClass("gThumbSelected");
+ $(".gMicroThumbContainer").addClass("ui-selected");
$("#gMicroThumbSelectAll").hide();
$("#gMicroThumbUnselectAll").show();
} else {
-// $("#gMicroThumbGrid li").removeClass("gThumbSelected");
+ $(".gMicroThumbContainer").removeClass("ui-selected");
$("#gMicroThumbSelectAll").show();
$("#gMicroThumbUnselectAll").hide();
}
diff --git a/modules/organize/js/organize_init.js b/modules/organize/js/organize_init.js
index 70949eab..faa725d3 100644
--- a/modules/organize/js/organize_init.js
+++ b/modules/organize/js/organize_init.js
@@ -10,7 +10,8 @@ $("document").ready(function() {
autoResize: false,
modal: true,
resizable: true,
- close: closeDialog
+ close: closeDialog,
+ zIndex: 75
});
//showLoading("#gDialog");
diff --git a/modules/organize/views/organize.html.php b/modules/organize/views/organize.html.php
index 5f26603e..6b9eb3c6 100644
--- a/modules/organize/views/organize.html.php
+++ b/modules/organize/views/organize.html.php
@@ -16,7 +16,7 @@
<div class="yui-b">
<a id="gMicroThumbSelectAll" href="#"><?= t("select all") ?></a>
<a id="gMicroThumbUnselectAll" href="#" style="display: none"><?= t("deselect all") ?></a>
- <div id="gMicroThumbContainer" class="yui-u first"
+ <div id="gMicroThumbPanel" class="yui-u first"
ref="<?= url::site("organize/content/__ITEM_ID__?width=__WIDTH__&height=__HEIGHT__&offset=__OFFSET__") ?>">
<ul id="gMicroThumbGrid">
</ul>
diff --git a/modules/organize/views/organize_thumb_grid.html.php b/modules/organize/views/organize_thumb_grid.html.php
index cdfd00bb..34b8058f 100644
--- a/modules/organize/views/organize_thumb_grid.html.php
+++ b/modules/organize/views/organize_thumb_grid.html.php
@@ -1,18 +1,15 @@
<?php defined("SYSPATH") or die("No direct script access.") ?>
<script>
- $(".gMicroThumb").click(toggle_select);
+ //$(".gMicroThumb").click(toggle_select);
</script>
<? foreach ($children as $i => $child): ?>
<? $item_class = "gPhoto"; ?>
<? if ($child->is_album()): ?>
<? $item_class = "gAlbum"; ?>
<? endif ?>
-<li>
- <div>
- <div class="gOrganizeReorderDropTarget" ref="<?= $child->id ?>">&nbsp;</div>
- <div id="gMicroThumb-<?= $child->id ?>" class="gMicroThumb <?= $item_class ?>">
- <?= $child->thumb_tag(array("class" => "gThumbnail"), $thumbsize, true) ?>
- </div>
+<li id="thumb_<?= $child->id ?>" class="gMicroThumbContainer" ref="<?= $child->id ?>">
+ <div id="gMicroThumb-<?= $child->id ?>" class="gMicroThumb <?= $item_class ?>">
+ <?= $child->thumb_tag(array("class" => "gThumbnail"), $thumbsize, true) ?>
</div>
</li>
<? endforeach ?>
generated by cgit v1.2.3 (git 2.46.0) at 2025-10-14 01:25:02 +0000