Revision of Block Sorting on Personal Desktop

1 Description

We should revise the block sorting on the Personal Desktop. This could be done by the jQuery UI Sortable plugin.

Here is my first approach: In file templates/default/tpl.adm_content.html I only added a class attribute to the element with id il_left_col and appended a new div element to the table cell with id il_RightColumn.
What I did not implement yet is the storage of the new sort sequence, which could be easily done by $.ajax({}), and the deactivation of the old block movement mechanism.

1
2
3
4
5

<!-- [...] -->
<div id="il_left_col" class="connectedSortable">{LEFT_CONTENT}</div>
<!-- [...] -->
<td class="il_RightColumn"><div id="il_right_col" class="connectedSortable">{RIGHT_CONTENT}</div></td>
<!-- [...] -->

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<script type="text/javascript">
	$(document).ready(function() {
		$( "#il_left_col,#il_right_col" ).sortable({
			stop: function(event, ui) {
				console.log($( "#il_left_col").sortable("toArray"));
				console.log($( "#il_right_col").sortable("toArray")); 
			},
			opacity: 0.6,
			revert: true,
			handle: '.ilBlockHeader',
			placeholder: 'il_Pd_Block_Sort_Placeholer',
			connectWith: ".connectedSortable",
			forcePlaceholderSize: true,
			items: '>div'
		}).disableSelection();
	});
</script>

1
2
3
4
5
6

<style type="text/css">
	.il_Pd_Block_Sort_Placeholer {
		background-color: yellow;
		border: 1px black solid;
	}
</style>

2 Status

• Scheduled for: Release 4.3
• Funding: Funded by Databay AG / Michael Jansen
• Development: Feature is to be developed by Michael Jansen

3 Additional Information

• If you want to know more about this feature, its implementation or funding, please contact: Michael Jansen / mjansen [at] databay [dot] de

4 Discussion

JF 9 Jul 2012: We highly appreciate this feature and would, if ready, accept it as a usability fix for 4.3 as well.

MJ 9 July 2012: Do we need a fallback for mobile devices? Can I remove the old implementation?

AK 10 Jul 2012: Drag/Drop is possible on Touch-Devices. Afaik it is only a matter of mapping the corresponding events. Please remove the old implementation. SVN won't forget it in the case we really need it in the future.

MJ 10 July 2012: Implemented!

MJ 10 July 2012: I added the famous action menu and removed the configuration block on the right column ;-) (see: screenshot above). This is currently a local change on my dev installation. Any objections? Should I commit this?
 
I had to add a new member of type ilAdvancedSelectionListGUI to class ilPersonalDesktopGUI and injected this member via setter injection into the instances of ilColumnGUI. The respective instances (left column, center column, right column) are able to add items to the passed selection list (see: screenshot).

Matthias Kunkel, 11 July 2012: I prefer this solution to the old one. But I would change the menu texts a bit. Not "Anzeigen: Nachrichten" but "Nachrichten anzeigen". THis wording makes it much clearer that it is an action (EN: Show News, Show ..., Add New Webfeed, Enable Moving Blocks, ...)

MJ 11 July 2012: I agree. Now I have to talk with Alex  (and vice versa) about the code/technical concept :-).

Implemented! :-)
 
Still do to: Renaming the actions as suggested by Matthias.

MJ 12 July 2012: I changed the title of the action menu links. One topic to discuss is the ordering of these links.

Matthias Kunkel, 18 July 2012: I see two options for sorting: (a) alphabetically or (b) according to a defined order. The only defined order I see in the moment is the one in Administration > Personal Desktop where you enable/disable these blocks. But not all existing blocks are listed there... So maybe (a) is a better and general concept.
There is one thing in the menu I would like to change for the stable version. Hidden webfeed blocks should not named like "Show Spiegel Online" but "Show Webfeed: Spiegel Online". It took some minutes for me to understand that "Show ILIAS" is not a new super feature but only the link to show the webfeed "ILIAS" ... ;-)

Hansjörg Lauener, 25. July 2012: We do like very much this feature, but we suggest further suggestions/improvements.
 
First suggestion: Drag-and-drop of Block-elements could and should be always "ON". With this improvement, users can always move their blocks, the action-menu "Start/Stop moving blocks" can be removed. This is the same behavior as Google (iGoogle) uses.
 
Second suggestion: If you drag all block-elements to the left, or if you drag all block-elements to the right, then ILIAS should automatically change to a solution with two areas. Actually, you have a big white area. (see Attachment)

MJ 25 Jul 2012:
 
@HJ: You are right, but: If no block exists on any of the two outer columns (because you removed all these blocks before), the necessary html elements
 
<td class="il_LeftColumn" id="il_left_col_td"><div id="il_left_col">{LEFT_CONTENT}</div></td>

and
 
<td class="il_RightColumn"><div id="il_right_col">{RIGHT_CONTENT}</div></td>

are not rendered by the template engine of ILIAS. When removing the "Start/Stop" moving behaviour, these html elements have to be created with javascript on the drag and drop start event, which would lead to a flickering layout behaviour.

HJ 25. Jul 2012:
@MJ: So we must live with this suboptimal behavior, or could this be done with additional effort?

MJ 28 Jul 2012: I tried different approaches but there seems to be an issue of the jquery sortable plugin with empty drop zones. Image the following initial situation...

I can register a handler for the start event of the jquery sortable plugin. At this time I can create the required html (mentioned in my comment above) dynamically so an empty column appears on the right side.

It is not possible to drop the element on the right side. This seems to be a known issue of the jquery sortable plugin. The width and height of the dynamically created column (right side) have to be set before the start event of the jquery sortable plugin is triggered. But this is the first event we can listen to to create the html for the right column. There are some workarounds for ordered or unordered lists which do unfortunately not apply to our column layout (http://rolleys.wordpress.com/2010/05/18/cant-get-jquery-sortable-to-drop-on-to-empty-lists/ and http://blog.woodylabs.com/2011/10/unable-to-drop-jquery-sortable-onto-empty-list-hack-solution/ do not solve the problem)
In my opinion there is of course a way to fix this (we are developers ;-)) but this would require additional effort.
A simple workaround could be to create the empty column with a fix width and height when a user just clicked on the block title row (which also triggers the start event of the sortable plugin). Disadvantage: Even though a user does not have the intent to drag the block, the column will be created and will not disappear anymore (until the next page reload).

MJ 29 Jul 2012: I just committed some lines of code. Users are now able to move blocks without the need to explicitly activate this feature. Columns (right or left) are created (if all blocks are placed on one side) and removed (if a column is empty after dragging is finished) dynamically.
 
Works on Firefox, Opera, Chrome, Safari, IE (tested in 9 an 10), iPad2, Android (Samsung Galaxy S2) :-).

2012-07-30 ILIAS_LM @MJ:
Thanks a lot!! I very Like the transparency (here) of your work and that you also tested Chrome and IE. I'm getting a fan...

Matthias Kunkel, 30 JUL 2012: I like the new block moving on the desktop, too! Thanks to Michael for this contribution!
 
But besides moving blocks I see still some more things to improve on this screen, see Personal Desktop. Important issues that we should tackle are:

• Remove from Desktop for Multiple Objects
• Remove System Messages from Personal Desktop
• Add objects from My memberships to selected items
• Revise My Courses and Groups Page
• Additional sorting options for 'Selected Items'

5 Implementation