Author: sevein
Date: Mon Jun 25 20:50:50 2012
New Revision: 11805
Log:
Add sortable behavior to the new information object treeview, items can only be
dragged within the same level of the hierarchy (sorting)
Added:
trunk/images/loading.small.gif (contents, props changed)
Modified:
trunk/apps/qubit/modules/informationobject/actions/treeViewAction.class.php
trunk/css/graphic.css
trunk/js/treeView.js
trunk/plugins/sfDcPlugin/modules/sfDcPlugin/config/view.yml
trunk/plugins/sfIsadPlugin/modules/sfIsadPlugin/config/view.yml
trunk/plugins/sfModsPlugin/modules/sfModsPlugin/config/view.yml
trunk/plugins/sfRadPlugin/modules/sfRadPlugin/config/view.yml
Modified:
trunk/apps/qubit/modules/informationobject/actions/treeViewAction.class.php
==============================================================================
--- trunk/apps/qubit/modules/informationobject/actions/treeViewAction.class.php
Mon Jun 25 20:48:01 2012 (r11804)
+++ trunk/apps/qubit/modules/informationobject/actions/treeViewAction.class.php
Mon Jun 25 20:50:50 2012 (r11805)
@@ -93,6 +93,27 @@
$this->resource->lft)));
break;
+
+ case 'moveAfter':
+ case 'moveBefore':
+ $params =
$this->context->routing->parse(Qubit::pathInfo($request->target));
+ $target = $params['_sf_route']->resource;
+
+ if (QubitInformationObject::ROOT_ID == $this->resource->id)
+ {
+ break;
+ }
+
+ if ('moveAfter' == $request->show)
+ {
+ $this->resource->moveToNextSiblingOf($target);
+ }
+ else
+ {
+ $this->resource->moveToPrevSiblingOf($target);
+ }
+
+ break;
}
}
}
Modified: trunk/css/graphic.css
==============================================================================
--- trunk/css/graphic.css Mon Jun 25 20:48:01 2012 (r11804)
+++ trunk/css/graphic.css Mon Jun 25 20:50:50 2012 (r11805)
@@ -254,7 +254,8 @@
#treeview
{
- max-height: 600px;
+ max-height: 480px;
+ margin-bottom: 10px;
overflow: auto;
overflow-x: hidden;
}
@@ -271,6 +272,8 @@
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
+ background-color: white;
+ position: relative;
}
#treeview .ancestor
@@ -281,6 +284,12 @@
#treeview .back
{
background: #ddd;
+ cursor: pointer;
+}
+
+#treeview .back:hover a
+{
+ text-decoration: underline;
}
#treeview .back,
@@ -301,6 +310,11 @@
font-weight: bold;
}
+#treeview .placeholder
+{
+ background-color: #f0f0f0;
+}
+
#treeview .more a
{
background-color: #ccc;
@@ -328,7 +342,7 @@
}
#treeview .ancestor i { background-position: -10px 0px; } /* left */
-#treeview .immediate-ancestor i { background-position: 0px 0px; } /* left */
+#treeview .immediate-ancestor i { background-position: 0px 0px; cursor:
default; } /* left */
#treeview .back i { background-position: -10px 0px; } /* left */
#treeview .expand i { background-position: -20px 0px; } /* right */
@@ -337,10 +351,24 @@
color: #0069d6;
}
+#treeview .ui-sortable-helper
+{
+ background-color: White;
+ background-color: rgba(255, 255, 255, 0.9);
+ border: 1px solid #ccc;
+}
-
-
-
+#treeview li .loading
+{
+ display: inline-block;
+ width: 22px;
+ height: 18px;
+ background-image: url(../images/loading.small.gif);
+ background-repeat: no-repeat;
+ background-position: 50% 50%;
+ position: absolute;
+ left: -7px;
+}
Added: trunk/images/loading.small.gif
==============================================================================
Binary file. No diff available.
Modified: trunk/js/treeView.js
==============================================================================
--- trunk/js/treeView.js Mon Jun 25 20:48:01 2012 (r11804)
+++ trunk/js/treeView.js Mon Jun 25 20:50:50 2012 (r11805)
@@ -83,7 +83,6 @@
})(jQuery);
-
(function ($) {
"use strict";
@@ -177,8 +176,10 @@
{
this.$element
.on('click.treeview.qubit', 'li', $.proxy(this.click, this))
+ .on('mousedown.treeview.qubit', 'li', $.proxy(this.mousedownup,
this))
+ .on('mouseup.treeview.qubit', 'li', $.proxy(this.mousedownup, this))
.bind('scroll', $.proxy(this.scroll, this))
- .bind('scroll-debounced', $.proxy(this.debouncedScroll, this))
+ .bind('scroll-debounced', $.proxy(this.debouncedScroll, this));
// Prevent out-of-bounds scrollings via mousewheel
if ($.fn.mousewheel)
@@ -192,10 +193,91 @@
self.$element.trigger('scroll-debounced', e);
});
+ this.$element.sortable(
+ {
+ items: 'li:not(.back, .ancestor, .more)',
+ placeholder: 'placeholder',
+ forcePlaceholderSize: true,
+ start: $.proxy(this.drag, this),
+ stop: $.proxy(this.drop, this)
+ });
+ this.$element.disableSelection();
+
this.highlightLastAncestor();
},
- mousewheel: function(e, delta, deltaX, deltaY)
+ mousedownup: function (e)
+ {
+ if (this.loading)
+ {
+ killEvent(e);
+ }
+ },
+
+ drag: function (e, ui)
+ {
+ this._position = ui.item.prev().index();
+ },
+
+ drop: function (e, ui)
+ {
+ if (this._position == ui.item.prev().index())
+ {
+ return this;
+ }
+
+ var $prev = ui.item.prev();
+ var $next = ui.item.next();
+
+ var data = {};
+
+ if ($prev.is('.back, .ancestor'))
+ {
+ data = { show: 'moveBefore', target: $next.data('xhr-location') };
+ }
+ else
+ {
+ data = { show: 'moveAfter', target: $prev.data('xhr-location') };
+ }
+
+ $.ajax({
+ url: ui.item.data('xhr-location'),
+ context: this,
+ dataType: 'html',
+ data: data,
+ beforeSend: function ()
+ {
+ this.loading = true;
+
+ ui.item.prepend('<div class="loading" />');
+ ui.item.children('i').css('visibility', 'hidden');
+ },
+ // success: function (data) { },
+ complete: function ()
+ {
+ this.loading = false;
+
+ ui.item
+ .children('.loading').hide('fast', function()
+ {
+ $(this).remove()
+ }).end()
+ .children('i').css('visibility', 'visible');
+ },
+ error: function (jqXHR, textStatus, thrownError)
+ {
+ // Cancel event if HTTP error
+ if (thrownError.length)
+ {
+ this.$element.sortable('cancel');
+ }
+ }
+ });
+
+ return this;
+ },
+
+ mousewheel: function (e, delta, deltaX, deltaY)
{
var top = this.$element.scrollTop(), height;
if (deltaY > 0 && top - deltaY <= 0)
@@ -239,26 +321,30 @@
click: function (e)
{
- if (this.loading)
+ var $li = 'LI' === e.target.tagName ? $(e.target) :
$(e.target).closest('li');
+
+ if (this.loading && 'A' !== e.target.tagName)
{
+ killEvent(e);
+
return;
}
- var $li = 'LI' === e.target.tagName ? $(e.target) :
$(e.target).closest('li');
-
if ($li.hasClass('more'))
{
killEvent(e);
return this.showMore($li);
}
+ else if ($li.hasClass('back'))
+ {
+ killEvent(e);
+
+ return this.showAll($li);
+ }
else if ('I' === e.target.tagName)
{
- if ($li.hasClass('back'))
- {
- return this.showAll($li);
- }
- else if ($li.hasClass('ancestor'))
+ if ($li.hasClass('ancestor'))
{
if (!$li.next().hasClass('ancestor'))
{
@@ -426,7 +512,9 @@
highlightLastAncestor: function()
{
// Unfortunately I couldn't do this with CSS
- this.$element.find('.ancestor:last').addClass('immediate-ancestor');
+ this.$element
+ .find('.ancestor').removeClass('immediate-ancestor')
+ .last().addClass('immediate-ancestor');
}
};
Modified: trunk/plugins/sfDcPlugin/modules/sfDcPlugin/config/view.yml
==============================================================================
--- trunk/plugins/sfDcPlugin/modules/sfDcPlugin/config/view.yml Mon Jun 25
20:48:01 2012 (r11804)
+++ trunk/plugins/sfDcPlugin/modules/sfDcPlugin/config/view.yml Mon Jun 25
20:50:50 2012 (r11805)
@@ -21,6 +21,8 @@
imageflow:
multiRow:
select:
+
+ /vendor/jquery-ui:
treeView:
indexSuccess:
@@ -33,6 +35,8 @@
/vendor/imageflow/imageflow.packed.js:
blank:
imageflow:
+
+ /vendor/jquery-ui:
treeView:
all:
Modified: trunk/plugins/sfIsadPlugin/modules/sfIsadPlugin/config/view.yml
==============================================================================
--- trunk/plugins/sfIsadPlugin/modules/sfIsadPlugin/config/view.yml Mon Jun
25 20:48:01 2012 (r11804)
+++ trunk/plugins/sfIsadPlugin/modules/sfIsadPlugin/config/view.yml Mon Jun
25 20:50:50 2012 (r11805)
@@ -23,6 +23,8 @@
multiInstanceInput:
multiRow:
select:
+
+ /vendor/jquery-ui:
treeView:
fileListSuccess:
@@ -40,6 +42,8 @@
/vendor/imageflow/imageflow.packed.js:
blank:
imageflow:
+
+ /vendor/jquery-ui:
treeView:
all:
Modified: trunk/plugins/sfModsPlugin/modules/sfModsPlugin/config/view.yml
==============================================================================
--- trunk/plugins/sfModsPlugin/modules/sfModsPlugin/config/view.yml Mon Jun
25 20:48:01 2012 (r11804)
+++ trunk/plugins/sfModsPlugin/modules/sfModsPlugin/config/view.yml Mon Jun
25 20:50:50 2012 (r11805)
@@ -21,6 +21,8 @@
imageflow:
multiRow:
select:
+
+ /vendor/jquery-ui:
treeView:
indexSuccess:
@@ -33,6 +35,8 @@
/vendor/imageflow/imageflow.packed.js:
blank:
imageflow:
+
+ /vendor/jquery-ui:
treeView:
all:
Modified: trunk/plugins/sfRadPlugin/modules/sfRadPlugin/config/view.yml
==============================================================================
--- trunk/plugins/sfRadPlugin/modules/sfRadPlugin/config/view.yml Mon Jun
25 20:48:01 2012 (r11804)
+++ trunk/plugins/sfRadPlugin/modules/sfRadPlugin/config/view.yml Mon Jun
25 20:50:50 2012 (r11805)
@@ -23,6 +23,8 @@
multiInstanceInput:
multiRow:
select:
+
+ /vendor/jquery-ui:
treeView:
indexSuccess:
@@ -35,6 +37,8 @@
/vendor/imageflow/imageflow.packed.js:
blank:
imageflow:
+
+ /vendor/jquery-ui:
treeView:
all:
--
You received this message because you are subscribed to the Google Groups
"Qubit Toolkit Commits" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/qubit-commits?hl=en.
