Categories in menu are now sortable (#566)

lemonldap-ng-portal/example/index_skin.pl

@@ -43,6 +43,7 @@ my $template = HTML::Template->new(
     die_on_bad_params => 0,
     cache             => 0,
     global_vars       => 1,
+    loop_context_vars => 1,
     filter            => [
         sub { $portal->translate_template(@_) },
         sub { $portal->session_template(@_) }

lemonldap-ng-portal/example/skins/common/portal.js

@@ -29,6 +29,18 @@ $(document).ready(function(){
 		top.location.href = location.href;
 	}
 
+	/* Sortable menu */
+	$("#appslist").sortable({
+		axis: "y",
+		cursor: "move",
+		opacity: 0.5,
+		revert: true,
+		items: "> div.category",
+		update: function(){ getOrder(); },
+	});
+
+	restoreOrder();
+
 	/* Display message */
 	$("div.message").fadeIn('slow');
 
@@ -78,6 +90,69 @@ $(document).ready(function(){
 	}
 });
 
+/* Code from http://snipplr.com/view/29434/ */
+// set the list selector
+var setSelector = "#appslist";
+// function that writes the list order to session
+function getOrder() {
+	// save custom order to persistent session
+	$.ajax({
+		type:"POST",
+		url:scriptname,
+		data:{storeAppsListOrder:$(setSelector).sortable("toArray").join()},
+		dataType:'json',
+	});
+}
+
+// function that restores the list order from session
+function restoreOrder() {
+	var list = $(setSelector);
+	if (list == null) return;
+
+	// fetch the session value (saved order)
+	if (!appslistorder) return;
+
+	// make array from saved order
+	var IDs = appslistorder.split(",");
+
+	// fetch current order
+	var items = list.sortable("toArray");
+
+	// make array from current order
+	var rebuild = new Array();
+	for ( var v=0, len=items.length; v<len; v++ ){
+		rebuild[items[v]] = items[v];
+	}
+
+	for (var i = 0, n = IDs.length; i < n; i++) {
+
+		// item id from saved order
+		var itemID = IDs[i];
+
+		if (itemID in rebuild) {
+
+			// select item id from current order
+			var item = rebuild[itemID];
+
+			// select the item according to current order
+			var child = $(setSelector+".ui-sortable").children("#" + item);
+
+			// select the item according to the saved order
+			var savedOrd = $(setSelector+".ui-sortable").children("#" + itemID);
+
+			// remove all the items
+			child.remove();
+
+			// add the items in turn according to saved order
+			// we need to filter here since the "ui-sortable"
+			// class is applied to all ul elements and we
+			// only want the very first! You can modify this
+			// to support multiple lists - not tested!
+			$(setSelector+".ui-sortable").filter(":first").append(savedOrd);
+		}
+	}
+}
+
 /* function boolean isHiddenFormValueSet(string option)
  * Check if an hidden option is set
  * @param option Option name

lemonldap-ng-portal/example/skins/impact/header.tpl

@@ -24,6 +24,7 @@
             var login='<TMPL_VAR NAME="LOGIN">';
             var newwindow='<TMPL_VAR NAME="NEWWINDOW">';
             var antiframe='<TMPL_VAR NAME="ANTIFRAME">';
+            var appslistorder='<TMPL_VAR NAME="APPSLIST_ORDER">';
         //]]></script>
         <script type="text/javascript" src="<TMPL_VAR NAME="SKIN_PATH">/common/portal.js"></script>
         <TMPL_INCLUDE NAME="customhead.tpl">

lemonldap-ng-portal/example/skins/impact/menu.tpl

@@ -52,7 +52,7 @@
                 <TMPL_IF NAME="category">
                 <!-- Category -->
 
-                <div class="category cat-level-<TMPL_VAR NAME="catlevel"> <TMPL_VAR NAME="catid">">
+                <div class="category cat-level-<TMPL_VAR NAME="catlevel"> <TMPL_VAR NAME="catid">" id="sort_<TMPL_VAR NAME="__counter__">">
                 <h3 class="catname"><TMPL_VAR NAME="catname"></h3>
 
                 <TMPL_IF applications>

lemonldap-ng-portal/example/skins/pastel/header.tpl

@@ -24,6 +24,7 @@
             var login='<TMPL_VAR NAME="LOGIN">';
             var newwindow='<TMPL_VAR NAME="NEWWINDOW">';
             var antiframe='<TMPL_VAR NAME="ANTIFRAME">';
+            var appslistorder='<TMPL_VAR NAME="APPSLIST_ORDER">';
         //]]></script>
         <script type="text/javascript" src="<TMPL_VAR NAME="SKIN_PATH">/common/portal.js"></script>
 	<TMPL_INCLUDE NAME="customhead.tpl">

lemonldap-ng-portal/example/skins/pastel/menu.tpl

@@ -42,7 +42,7 @@
 		<TMPL_IF NAME="category">
 		<!-- Category -->
 
-		<div class="category cat-level-<TMPL_VAR NAME="catlevel"> <TMPL_VAR NAME="catid">">
+		<div class="category cat-level-<TMPL_VAR NAME="catlevel"> <TMPL_VAR NAME="catid">" id="sort_<TMPL_VAR NAME="__counter__">">
 		<h3 class="catname"><TMPL_VAR NAME="catname"></h3>
 
 		<TMPL_IF applications>

lemonldap-ng-portal/lib/Lemonldap/NG/Portal/Display.pm

@@ -109,6 +109,7 @@ sub display {
                 APPSLIST_MENU => $self->{menuAppslistMenu},  # For old templates
                 APPSLIST_DESC => $self->{menuAppslistDesc},  # For old templates
                 SCRIPT_NAME   => $ENV{SCRIPT_NAME},
+                APPSLIST_ORDER => $self->{sessionInfo}->{'appsListOrder'},
             );
 
         }

lemonldap-ng-portal/lib/Lemonldap/NG/Portal/Simple.pm

@@ -1826,6 +1826,15 @@ sub controlExistingSession {
                   . '{"auth":true}';
                 $self->quit();
             }
+
+            # Special ajax request "storeAppsListOrder"
+            if ( $self->param('storeAppsListOrder') ) {
+                my $order = $self->param('storeAppsListOrder');
+                $self->lmLog( "Get new apps list order: $order", 'debug' );
+                $self->updatePersistentSession( { appsListOrder => $order } );
+                $self->quit();
+            }
+ 
             $self->{id} = $id;
 
             # A session has been found => call existingSession