# HG changeset patch
# User Sylvain Thénault <sylvain.thenault@logilab.fr>
# Date 1366381545 -7200
# Node ID e80dfffc2c2ae983f1cee274be559bf6c08ad29f
# Parent  409ea1ed9832748db551856f325cd6b9990e4a04
[facet js] fix reordering of facet check boxes. Closes #2732947

Before this patch, when one select an element, it's moved to the top of
the select content. Fine. But when it's later deselected, it stays there
instead of moving back to its original location.

This patch fixes that by introducing a facetCheckBoxReorder function which
properly reorder the whole facet, instead of buggy attempt to locally reorder.

diff -r 409ea1ed9832 -r e80dfffc2c2a web/data/cubicweb.facets.js
--- a/web/data/cubicweb.facets.js	Wed Apr 24 14:40:09 2013 +0200
+++ b/web/data/cubicweb.facets.js	Fri Apr 19 16:25:45 2013 +0200
@@ -195,38 +195,13 @@
                             }
                             this.setAttribute('alt', (_("not selected")));
                         });
-                        var index = parseInt($this.attr('cubicweb:idx'));
-                        // we dont need to move the element when cubicweb:idx == 0
-                        if (index > 0) {
-                            var shift = $.grep(facet.find('.facetValueSelected'), function(n) {
-                                var nindex = parseInt(n.getAttribute('cubicweb:idx'));
-                                return nindex > index;
-                            }).length;
-                            index += shift;
-                            var parent = this.parentNode;
-                            var $insertAfter = $(parent).find('.facetCheckBox:nth(' + index + ')');
-                            if (! ($insertAfter.length == 1 && shift == 0)) {
-                                // only rearrange element if necessary
-                                $insertAfter.after(this);
-                            }
-                        }
                     } else {
-                        var lastSelected = facet.find('.facetValueSelected:last');
-                        if (lastSelected.length) {
-                            lastSelected.after(this);
-                        } else {
-                            var parent = this.parentNode;
-                            $(parent).prepend(this);
-                        }
                         $(this).addClass('facetValueSelected');
                         var $img = $(this).find('img');
                         $img.attr('src', SELECTED_IMG).attr('alt', (_("selected")));
                     }
+                    facetCheckBoxReorder(facet);
                     buildRQL.apply(null, jsfacetargs);
-                    facet.find('.facetBody').animate({
-                        scrollTop: 0
-                    },
-                    '');
                 });
                 facet.find('select.facetOperator').change(function() {
                     var nbselected = facet.find('div.facetValueSelected').length;
@@ -244,6 +219,29 @@
     });
 }
 
+// facetCheckBoxReorder: reorder all items according to cubicweb:idx attribute
+function facetCheckBoxReorder($facet) {
+    var sortfunc = function (a, b) {
+        // convert from string to integer
+        a = +a.getAttribute("cubicweb:idx");
+        b = +b.getAttribute("cubicweb:idx");
+        // compare
+        if (a > b) {
+            return 1;
+        } else if (a < b) {
+            return -1;
+        } else {
+            return 0;
+        }
+    };
+    var $items = $facet.find('.facetValue.facetValueSelected')
+    $items.sort(sortfunc);
+    $facet.find('.facetBody').append($items);
+    var $items = $facet.find('.facetValue:not(.facetValueSelected)')
+    $items.sort(sortfunc);
+    $facet.find('.facetBody').append($items);
+    $facet.find('.facetBody').animate({scrollTop: 0}, '');
+}
 
 // trigger this function on document ready event if you provide some kind of
 // persistent search (eg crih)