Convert to integer type of property value when sorting.

src/jquery.gridster.js

@@ -153,6 +153,28 @@
     Gridster.defaults = defaults;
     Gridster.generated_stylesheets = [];
 
+    /**
+     * Convert properties to Integer
+     *
+     * @param {Object}
+     * @return {Objct} Returns the converted object.
+     */
+    function convInt(obj) {
+      var props = ['col', 'row', 'size_x', 'size_y'];
+      var tmp = {};
+      for (var i=0, len=props.length; i<len; i++) {
+        var prop = props[i];
+        if (!(prop in obj)) {
+          throw new Error('Not exists property `'+ prop +'`');
+        }
+        var val = obj[prop];
+        if (!val || isNaN(val)) {
+          throw new Error('Invalid value of `'+ prop +'` property');
+        }
+        tmp[prop] = +val;
+      }
+      return tmp;
+    }
 
     /**
     * Sorts an Array of grid coords objects (representing the grid coords of
@@ -169,6 +191,8 @@
                 b = $(b).coords().grid;
             }
 
+            a = convInt(a);
+            b = convInt(b);
            if (a.row > b.row) {
                return 1;
            }
@@ -189,6 +213,8 @@
     */
     Gridster.sort_by_row_and_col_asc = function(widgets) {
         widgets = widgets.sort(function(a, b) {
+          a = convInt(a);
+          b = convInt(b);
            if (a.row > b.row || a.row === b.row && a.col > b.col) {
                return 1;
            }
@@ -209,6 +235,8 @@
     */
     Gridster.sort_by_col_asc = function(widgets) {
         widgets = widgets.sort(function(a, b) {
+          a = convInt(a);
+          b = convInt(b);
            if (a.col > b.col) {
                return 1;
            }
@@ -229,6 +257,8 @@
     */
     Gridster.sort_by_row_desc = function(widgets) {
         widgets = widgets.sort(function(a, b) {
+          a = convInt(a);
+          b = convInt(b);
             if (a.row + a.size_y < b.row + b.size_y) {
                 return 1;
             }

test/jquery.gridder.html → test/jquery.gridster.html

@@ -61,7 +61,7 @@ <h2 id="qunit-userAgent"></h2>
       </ul>
     </div>
   </div>
-
+  <div id="qunit-testresult"></div>
 
 </body>
 </html>

test/jquery.gridster_test.js

@@ -0,0 +1,128 @@
+/*global QUnit:false, module:false, test:false, asyncTest:false, expect:false*/
+/*global start:false, stop:false ok:false, equal:false, notEqual:false, deepEqual:false*/
+/*global notDeepEqual:false, strictEqual:false, notStrictEqual:false, raises:false*/
+(function($) {
+
+  /*
+    ======== A Handy Little QUnit Reference ========
+    http://docs.jquery.com/QUnit
+
+    Test methods:
+      expect(numAssertions)
+      stop(increment)
+      start(decrement)
+    Test assertions:
+      ok(value, [message])
+      equal(actual, expected, [message])
+      notEqual(actual, expected, [message])
+      deepEqual(actual, expected, [message])
+      notDeepEqual(actual, expected, [message])
+      strictEqual(actual, expected, [message])
+      notStrictEqual(actual, expected, [message])
+      raises(block, [expected], [message])
+  */
+
+  module('jQuery#gridster', {
+    setup: function() {
+
+      this.el = $('#qunit-fixture').find(".wrapper ul");
+
+      this.serialization = [
+		  { name: "A", col: "1",  row: "1",  size_x: "2",  size_y: "2"  },
+		  { name: "B", col: "4",  row: "1",  size_x: "1",  size_y: "2"  },
+		  { name: "C", col: "10", row: "10", size_x: "10", size_y: "10" },
+		  { name: "D", col: "3",  row: "1",  size_x: "1",  size_y: "1"  },
+		  { name: "E", col: "2",  row: "3",  size_x: "3",  size_y: "1"  }
+	  ];
+    }
+  });
+
+  // test('is chainable', 1, function() {
+  //   // Not a bad test to run on collection methods.
+  //   strictEqual(this.el, this.el.gridster(), 'should be chaninable');
+  // });
+
+  test('Gridster.sort_by_row_asc', function(assert) {
+    var sorted = Gridster.sort_by_row_asc(this.serialization);
+
+    var result = pickup(sorted, 'name').join(',');
+    var expected = 'A,B,D,E,C';
+    assert.equal(result, expected);
+  });
+
+  test('Gridster.sort_by_row_and_col_asc', function(assert) {
+    var sorted = Gridster.sort_by_row_and_col_asc(this.serialization);
+
+    var result = pickup(sorted, 'name').join(',');
+    var expected = 'A,D,B,E,C';
+    assert.equal(result, expected);
+  });
+
+  test('Gridster.sort_by_col_asc', function(assert) {
+    var sorted = Gridster.sort_by_col_asc(this.serialization);
+
+    var result = pickup(sorted, 'name').join(',');
+    var expected = 'A,E,D,B,C';
+    assert.equal(result, expected);
+  });
+
+  test('Gridster.sort_by_row_desc', function(assert) {
+    var sorted = Gridster.sort_by_row_desc(this.serialization);
+
+    var result = pickup(sorted, 'name').join(',');
+    var expected = 'C,E,A,B,D';
+    assert.equal(result, expected);
+  });
+
+  // erros
+  test('Throws not exists property', function(assert) {
+    assert.throws(function() {
+      var data = [{row:1, size_x:1, size_y:1},{col:2,row:1,size_x:1,size_y:1}];
+      Gridster.sort_by_row_asc(data);
+      },
+      Error,
+      'raise error not exists required property'
+    );
+  });
+
+  test('Throws invalid type of value', function(assert) {
+    // inconvertible types
+    assert.throws(function() {
+      Gridster.sort_by_row_asc([{col:"AAA", row:1, size_x:1, size_y:1},{col:2,row:1,size_x:1,size_y:1}]);
+      },
+      Error,
+      'raise error inconvertible types'
+    );
+
+    // null
+    assert.throws(function() {
+      Gridster.sort_by_row_asc([{col:null, row:1, size_x:1, size_y:1},{col:2,row:1,size_x:1,size_y:1}]);
+      },
+      Error,
+      'raise error value is null'
+    );
+
+    // array
+    assert.throws(function() {
+      Gridster.sort_by_row_asc([{col:[1,2,3], row:1, size_x:1, size_y:1},{col:2,row:1,size_x:1,size_y:1}]);
+      },
+      Error,
+      'raise error value is array'
+    );
+
+    // object
+    assert.throws(function() {
+      Gridster.sort_by_row_asc([{col:{k:1}, row:1, size_x:1, size_y:1},{col:2,row:1,size_x:1,size_y:1}]);
+      },
+      Error,
+      'raise error value is object'
+    );
+  });
+
+  // helper
+  function pickup(data, prop) {
+	return data.map(function(elm) {
+		return elm[prop];
+	});
+  }
+}(jQuery));