Fix #422. Remove sort caret for column when sort on a different column

Author: wyuenho

lib/backgrid.js

@@ -2073,19 +2073,35 @@ var HeaderCell = Backgrid.HeaderCell = Backbone.View.extend({
                       }
                     }
                   });
-    this.listenTo(column, "change:direction", this.resetCellDirection);
+    this.listenTo(column, "change:direction", this.setCellDirectionMaybe);
     this.listenTo(column, "change:name change:label", this.render);
 
     if (Backgrid.callByNeed(column.editable(), column, collection)) $el.addClass("editable");
     if (Backgrid.callByNeed(column.sortable(), column, collection)) $el.addClass("sortable");
     if (Backgrid.callByNeed(column.renderable(), column, collection)) $el.addClass("renderable");
+
+    this.listenTo(collection, "backgrid:sort", this.removeCellDirectionMaybe);
+  },
+
+  /**
+     Event handler for the collection's `backgrid:sort` event. Removes all the
+     CSS direction classes if the column being sorted on is not the same as this
+     header cell's.
+   */
+  removeCellDirectionMaybe: function (columnToSort) {
+    if (columnToSort.cid != this.column.cid) {
+      this.$el.removeClass("ascending").removeClass("descending");
+      this.column.set("direction", null);
+    }
   },
 
   /**
-     Event handler for the column's `change:direction` event. Resets this cell's
-     direction to default if sorting is being done on another column.
+     Event handler for the column's `change:direction` event. If this
+     HeaderCell's column is being sorted on, it applies the direction given as a
+     CSS class to the header cell. Removes all the CSS direction classes
+     otherwise.
    */
-  resetCellDirection: function (columnToSort, direction) {
+  setCellDirectionMaybe: function (columnToSort, direction) {
     this.$el.removeClass("ascending").removeClass("descending");
     if (columnToSort.cid == this.column.cid) this.$el.addClass(direction);
   },
@@ -2490,6 +2506,10 @@ var Body = Backgrid.Body = Backbone.View.extend({
   */
   sort: function (column, direction) {
 
+    if (!_.contains(["ascending", "descending", null], direction)) {
+      throw new RangeError('direction must be one of "ascending", "descending" or `null`');
+    }
+
     if (_.isString(column)) column = this.columns.findWhere({name: column});
 
     var collection = this.collection;

src/header.js

@@ -49,19 +49,35 @@ var HeaderCell = Backgrid.HeaderCell = Backbone.View.extend({
                       }
                     }
                   });
-    this.listenTo(column, "change:direction", this.resetCellDirection);
+    this.listenTo(column, "change:direction", this.setCellDirectionMaybe);
     this.listenTo(column, "change:name change:label", this.render);
 
     if (Backgrid.callByNeed(column.editable(), column, collection)) $el.addClass("editable");
     if (Backgrid.callByNeed(column.sortable(), column, collection)) $el.addClass("sortable");
     if (Backgrid.callByNeed(column.renderable(), column, collection)) $el.addClass("renderable");
+
+    this.listenTo(collection, "backgrid:sort", this.removeCellDirectionMaybe);
+  },
+
+  /**
+     Event handler for the collection's `backgrid:sort` event. Removes all the
+     CSS direction classes if the column being sorted on is not the same as this
+     header cell's.
+   */
+  removeCellDirectionMaybe: function (columnToSort) {
+    if (columnToSort.cid != this.column.cid) {
+      this.$el.removeClass("ascending").removeClass("descending");
+      this.column.set("direction", null);
+    }
   },
 
   /**
-     Event handler for the column's `change:direction` event. Resets this cell's
-     direction to default if sorting is being done on another column.
+     Event handler for the column's `change:direction` event. If this
+     HeaderCell's column is being sorted on, it applies the direction given as a
+     CSS class to the header cell. Removes all the CSS direction classes
+     otherwise.
    */
-  resetCellDirection: function (columnToSort, direction) {
+  setCellDirectionMaybe: function (columnToSort, direction) {
     this.$el.removeClass("ascending").removeClass("descending");
     if (columnToSort.cid == this.column.cid) this.$el.addClass(direction);
   },

test/header.js

@@ -190,6 +190,16 @@ describe("A HeaderCell", function () {
     expect(cell.$el.hasClass("descending")).toBe(false);
   });
 
+  it("will remove its direction CSS class if `backgrid:sort` is triggered with a different column", function () {
+    cell.column.set("direction", "ascending");
+    cell.collection.trigger("backgrid:sort", new Backgrid.Column({
+      name: "name",
+      cell: "string"
+    }), "descending");
+    expect(cell.$el.hasClass("ascending")).toBe(false);
+    expect(cell.$el.hasClass("descending")).toBe(false);
+  });
+
   it("with `sortType` set to `toggle`, triggers `backgrid:sort` with the column and direction set to 'ascending' if the column's direction is not set", function () {
     var column, direction;
     cell.column.set("sortType", "toggle");