always indicate the next sorting state correctly on hover

leomelzer · Mar 27, 2019 · e724ead · e724ead
1 parent 0f02b1f
commit e724ead
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 14 deletions.
diff --git a/lib/modules/apostrophe-pieces/public/css/manager.less b/lib/modules/apostrophe-pieces/public/css/manager.less
@@ -63,10 +63,18 @@
   content: '↕'
 }
 
-.apos-manage-column--sortable:not(.apos-manage-column--forward):not(.apos-manage-column--backward):hover:after {
+.apos-manage-column--sortable.apos-manage-column--next-forward:hover:after {
   content: '↓';
 }
 
+.apos-manage-column--sortable.apos-manage-column--next-backward:hover:after {
+  content: '↑';
+}
+
+.apos-manage-column--sortable.apos-manage-column--next-none:hover:after {
+  content: '↕'
+}
+
 .apos-ui .apos-table {
   .apos-manage-column--forward,
   .apos-manage-column--backward {

diff --git a/lib/modules/apostrophe-pieces/public/js/manager-modal.js b/lib/modules/apostrophe-pieces/public/js/manager-modal.js
@@ -546,13 +546,7 @@ apos.define('apostrophe-pieces-manager-modal', {
         var $column = $(this);
         var direction = $column.attr('data-sort');
         var defaultDirection = $column.attr('data-default-sort-direction');
-        if (!direction) {
-          direction = defaultDirection;
-        } else if (direction === defaultDirection) {
-          direction = (-parseInt(defaultDirection)).toString();
-        } else if (direction) {
-          direction = '';
-        }
+        direction = self.getNextDirection(defaultDirection, direction);
         if (direction) {
           self.sort = {
             column: $column.attr('data-column-name'),
@@ -561,21 +555,60 @@ apos.define('apostrophe-pieces-manager-modal', {
         } else {
           self.sort = undefined;
         }
+        self.nextDirection = self.getNextDirection(defaultDirection, direction);
         self.refresh();
       });
     };
 
+    self.getNextDirection = function(defaultDirection, direction) {
+      if (!direction) {
+        direction = defaultDirection;
+      } else if (direction === defaultDirection) {
+        direction = (-parseInt(defaultDirection)).toString();
+      } else if (direction) {
+        direction = '';
+      }
+      return direction;
+    };
+
     self.reflectSort = function() {
       var $columns = self.$el.find('[data-column-name]');
-      $columns.removeClass('apos-column-sort--forward').removeClass('apos-column-sort--backward');
+      $columns.removeClass('apos-manage-column--forward')
+        .removeClass('apos-manage-column--backward')
+        .removeClass('apos-manage-column--next-forward')
+        .removeClass('apos-manage-column--next-backward')
+        .removeClass('apos-manage-column--next-none');
+
       $columns.filter('[data-sort]').attr('data-sort', '');
+      var $current;
+
       if (self.sort) {
-        var $column = self.$el.find('[data-column-name="' + self.sort.column + '"]');
-        $column.attr('data-sort', self.sort.direction);
-        if (self.sort.direction === '1') {
-          $column.addClass('apos-manage-column--forward');
+        $current = self.$el.find('[data-column-name="' + self.sort.column + '"]');
+      }
+      $columns.each(function() {
+        var $column = $(this);
+        if ((!$current) || ($column[0] !== $current[0])) {
+          var direction = self.getNextDirection($column.attr('data-default-sort-direction'), '');
+          indicateNext($column, direction);
+        }
+      });
+      if (self.sort) {
+        $current.attr('data-sort', self.sort.direction);
+        if (self.sort.direction == 1) {
+          $current.addClass('apos-manage-column--forward');
+        } else {
+          $current.addClass('apos-manage-column--backward');
+        }
+        indicateNext($current, self.getNextDirection($current.attr('data-default-sort-direction'), self.sort.direction));
+      }
+
+      function indicateNext($column, direction) {
+        if (direction == 1) {
+          $column.addClass('apos-manage-column--next-forward');
+        } else if (direction == -1) {
+          $column.addClass('apos-manage-column--next-backward');
         } else {
-          $column.addClass('apos-manage-column--backward');
+          $column.addClass('apos-manage-column--next-none');
         }
       }
     };