feature:2219

Sort available plugins without reloading the whole page 

git-svn-id: http://piwigo.org/svn/trunk@9598 68402e56-0260-453c-a942-63ccdbb3a9ee

admin/plugins_new.php

@@ -30,8 +30,7 @@ include_once(PHPWG_ROOT_PATH.'admin/include/plugins.class.php');
 
 $template->set_filenames(array('plugins' => 'plugins_new.tpl'));
 
-$order = isset($_GET['order']) ? $_GET['order'] : 'date';
-$base_url = get_root_url().'admin.php?page='.$page['page'].'&order='.$order;
+$base_url = get_root_url().'admin.php?page='.$page['page'];
 
 $plugins = new plugins();
 
@@ -86,22 +85,20 @@ if (isset($_GET['installstatus']))
 $plugins->set_tabsheet($page['page']);
 
 //---------------------------------------------------------------Order options
-$link = get_root_url().'admin.php?page='.$page['page'].'&order=';
 $template->assign('order_options',
   array(
-    $link.'date' => l10n('Post date'),
-    $link.'revision' => l10n('Last revisions'),
-    $link.'name' => l10n('Name'),
-    $link.'author' => l10n('Author'),
-    $link.'downloads' => l10n('Number of downloads')));
-$template->assign('order_selected', $link.$order);
+    'date' => l10n('Post date'),
+    'revision' => l10n('Last revisions'),
+    'name' => l10n('Name'),
+    'author' => l10n('Author'),
+    'downloads' => l10n('Number of downloads')));
 
 // +-----------------------------------------------------------------------+
 // |                     start template output                             |
 // +-----------------------------------------------------------------------+
 if ($plugins->get_server_plugins(true))
 {
-  $plugins->sort_server_plugins($order);
+  $plugins->sort_server_plugins('date');
 
   foreach($plugins->server_plugins as $plugin)
   {
@@ -121,6 +118,7 @@ if ($plugins->get_server_plugins(true))
       'SMALL_DESC' => trim($small_desc, " \r\n"),
       'BIG_DESC' => $ext_desc,
       'VERSION' => $plugin['revision_name'],
+      'REVISION_DATE' => preg_replace('/[^0-9]/', '', $plugin['revision_date']),
       'AUTHOR' => $plugin['author_name'],
       'DOWNLOADS' => $plugin['extension_nb_downloads'],
       'URL_INSTALL' => $url_auto_install,

admin/themes/default/template/plugins_new.tpl

@@ -1,4 +1,16 @@
-{footer_script require='jquery.effects.blind'}{literal}
+{combine_script id='jquery.sort' path='themes/default/js/plugins/jquery.sort.js'}
+
+{footer_script require='jquery.effects.blind,jquery.sort'}{literal}
+var sortOrder = 'date';
+var sortPlugins = (function(a, b) {
+  if (sortOrder == 'downloads' || sortOrder == 'revision' || sortOrder == 'date')
+    return parseInt($(a).find('input[name="'+sortOrder+'"]').val())
+      < parseInt($(b).find('input[name="'+sortOrder+'"]').val()) ? 1 : -1;
+  else
+    return $(a).find('input[name="'+sortOrder+'"]').val().toLowerCase()
+      > $(b).find('input[name="'+sortOrder+'"]').val().toLowerCase()  ? 1 : -1;
+});
+
 jQuery(document).ready(function(){
 	jQuery("td[id^='desc_']").click(function() {
 		id = this.id.split('_');
@@ -13,15 +25,18 @@ jQuery(document).ready(function(){
 		jQuery(this).toggleClass('bigdesc');
 		return false;
 	});
+
+  jQuery('select[name="selectOrder"]').change(function() {
+    sortOrder = this.value;
+    $('.pluginBox').sortElements(sortPlugins);
+  });
 });
 {/literal}{/footer_script}
 
 <div class="titrePage">
 <span class="sort">
 {'Sort order'|@translate} : 
-  <select onchange="document.location = this.options[this.selectedIndex].value;">
-        {html_options options=$order_options selected=$order_selected}
-  </select>
+{html_options name="selectOrder" options=$order_options selected=$order_selected}
 </span>
   <h2>{'Plugins'|@translate}</h2>
 </div>
@@ -32,6 +47,11 @@ jQuery(document).ready(function(){
 <legend></legend>
 {foreach from=$plugins item=plugin name=plugins_loop}
 <div class="pluginBox" id="plugin_{$plugin.ID}">
+<input type="hidden" name="date" value="{$plugin.ID}">
+<input type="hidden" name="name" value="{$plugin.EXT_NAME}">
+<input type="hidden" name="revision" value="{$plugin.REVISION_DATE}">
+<input type="hidden" name="downloads" value="{$plugin.DOWNLOADS}">
+<input type="hidden" name="author" value="{$plugin.AUTHOR}">
   <table>
     <tr>
       <td class="pluginBoxNameCell">{$plugin.EXT_NAME}</td>

themes/default/js/plugins/jquery.sort.js

@@ -0,0 +1,65 @@
+/**
+ * jQuery.fn.sortElements
+ * --------------
+ * @param Function comparator:
+ *   Exactly the same behaviour as [1,2,3].sort(comparator)
+ *   
+ * @param Function getSortable
+ *   A function that should return the element that is
+ *   to be sorted. The comparator will run on the
+ *   current collection, but you may want the actual
+ *   resulting sort to occur on a parent or another
+ *   associated element.
+ *   
+ *   E.g. $('td').sortElements(comparator, function(){
+ *      return this.parentNode; 
+ *   })
+ *   
+ *   The <td>'s parent (<tr>) will be sorted instead
+ *   of the <td> itself.
+ */
+jQuery.fn.sortElements = (function(){
+ 
+    var sort = [].sort;
+ 
+    return function(comparator, getSortable) {
+ 
+        getSortable = getSortable || function(){return this;};
+ 
+        var placements = this.map(function(){
+ 
+            var sortElement = getSortable.call(this),
+                parentNode = sortElement.parentNode,
+ 
+                // Since the element itself will change position, we have
+                // to have some way of storing its original position in
+                // the DOM. The easiest way is to have a 'flag' node:
+                nextSibling = parentNode.insertBefore(
+                    document.createTextNode(''),
+                    sortElement.nextSibling
+                );
+ 
+            return function() {
+ 
+                if (parentNode === this) {
+                    throw new Error(
+                        "You can't sort elements if any one is a descendant of another."
+                    );
+                }
+ 
+                // Insert before flag:
+                parentNode.insertBefore(this, nextSibling);
+                // Remove flag:
+                parentNode.removeChild(nextSibling);
+ 
+            };
+ 
+        });
+ 
+        return sort.call(this, comparator).each(function(i){
+            placements[i].call(getSortable.call(this));
+        });
+ 
+    };
+ 
+})();