Column sorting improvements #18

README.md

@@ -42,17 +42,28 @@ You can pass options object to initialization function:
 
 + _iconUrl_ absolute or relative path to client icon to display in hub window
 + _defaultHubUrl_ absolute or relative path to default hub ( .jnlp file to load and launch )
++ _tableOptions_  object which passed to Table constructor options argument 
+
+e.g. customizing table headings sort icons
+
+	var tOptions = { sortIcon: { asc: '<img src="up.png"/>', desc: '<img src="down.png"/>' } };
+	AstroTools.init({ tableOptions: tOptions })
 
 Features
 ========
 
 Table class
 -----------
 
-	var t = new AstroTools.Table()
+	var t = new AstroTools.Table( tableId, options )
 
 makes possible to add sorting, row highlighting and point at coordinates through SAMP connection.
 
+Options
+-------
+
++ _sortIcon_ Object with keys _asc_ and _desc_, used for indicate sorting in table headings.
+
 For example, you have table
 
 	<table id="myAwesomeTable">
@@ -73,7 +84,7 @@ Column sorting feature
 
 allows to sort columns by clicking on column headings, markup you need for this:
 
-1. Table headings must be in th tags, with possible attribute data-type ( valid values are 'string', 'numerical', 'sexagesimal' ), used for sorting ( default assuming that column has 'numerical' data-type )
+1. Table headings must be in th tags, with possible attribute data-type ( valid values are 'string', 'numerical', 'sexagesimal', 'astronomical-object-name' ), used for sorting ( default assuming that column has 'numerical' data-type )
 
 Row highlighting feature
 ------------------------

index.html

@@ -32,7 +32,7 @@
 <col></colgroup>
 <thead>
 <tr>
-<th data-type="string" class="name">Name</th>
+<th data-type="astronomical-object-name" class="name">Name</th>
 <th data-type="string" class="name">Other name</th>
 <th data-type="sexagesimal">&#206;&#177;<sub>2000</sub>&nbsp;</th>
 <th data-type="sexagesimal">&#206;&#180;<sub>2000</sub></th>

js/astrotools.js

@@ -72,16 +72,21 @@ var AstroTools = (function() {
 	function init( options ) {
 		if ( AstroTools.isStarted ) return undefined;
 
-		defaultHubUrl = options instanceof Object ? options['defaultHubUrl'] : defaultHubUrl;
-		iconUrl  = options instanceof Object ? options['iconUrl'] : iconUrl;
+		var tableOptions;
+		if ( options instanceof Object ) {
+			defaultHubUrl = options['defaultHubUrl'] || defaultHubUrl;
+			iconUrl       = options['iconUrl']       || iconUrl;
+			tableOptions  = options['tableOptions']  || {};
+		}
+
 		UI.init();
 		// if we store private-key on cookies we no need anymore to disconnect on unload
 		// $(window).unload( disconnect );
 
 		makeLinksBroadcastable();
 
 		if ( this.tableId && $('#'+this.tableId).length ) {
-			table = new Table( this.tableId );
+			table = new Table( this.tableId, tableOptions );
 			AstroTools.table = table;
 			table.makeSortable();
 		}
@@ -244,17 +249,24 @@ var AstroTools = (function() {
   };
 
 	// Table class
-	function Table( tableId ) {
+	function Table( tableId, options ) {
 		var $table = $( document.getElementById(tableId) );
 		if ( ! $table.length ) return;
 		this.$table = $table;
 		this.id   = $table.attr('data-vo-table-id');
 		this.name = $table.attr('data-vo-table-name');
 		this.url  = absolutizeURL( $table.attr('data-vo-table-url') );
 
+		if ( options instanceof Object ) {
+			this.sortIcon.asc = options['sortIcon']['asc'] || this.sortIcon.asc;
+			this.sortIcon.desc = options['sortIcon']['desc'] ||this.sortIcon.desc;
+		}
+
 		return this;
 	}
 
+	Table.prototype.sortIcon = { 'asc': '▲', 'desc': '▼' };
+
 	Table.prototype.disableCoordinatesHandler = function() {
 		this.$table.off('click', '.at-table-cell-coords');
 		this.$table.find('.at-table-cell-coords').removeClass('at-table-cell-coords');
@@ -336,6 +348,7 @@ var AstroTools = (function() {
 
 	Table.prototype.makeSortable = function() {
 		var that = this;
+		that.$table.find('thead th').css('cursor', 'pointer');
 		that.$table.on('click', 'thead th', function() {
 			var
 				$rows = that.$table.find('tbody tr'),
@@ -353,7 +366,7 @@ var AstroTools = (function() {
 					.find('.at-sort-icon').remove();
 				var sorter = that.rowSorters[this.getAttribute('data-type')||'numerical']( cellIndex );
 				that.$table.append( $rows.detach().toArray().sort( sorter ) );
-				$(this).addClass('at-table-column-sorted').append('<span class="at-sort-icon at-sort-icon-asc">&nbsp;Asc&nbsp;</span><span class="at-sort-icon at-sort-icon-desc" style="display:none">&nbsp;Desc&nbsp;</span>');
+				$(this).addClass('at-table-column-sorted').append('<span class="at-sort-icon at-sort-icon-asc">&nbsp;' + that.sortIcon.asc + '&nbsp;</span><span class="at-sort-icon at-sort-icon-desc" style="display:none">&nbsp;' + that.sortIcon.desc + '&nbsp;</span>');
 			}
 		});
 	};
@@ -405,6 +418,43 @@ var AstroTools = (function() {
 		}
 	}
 
+	Table.prototype.rowSorters['astronomical-object-name'] = function( cellIndex ) {
+		return function( rowA, rowB ) {
+			var
+				wordsA = rowA.children[cellIndex].textContent.split(/\s+/),
+				wordsB = rowB.children[cellIndex].textContent.split(/\s+/),
+				i = 0,
+				result = undefined;
+
+			while ( result == undefined ) {
+				if ( wordsA[i] == undefined && wordsB[i] != undefined ) {
+					result = -1;
+				}
+				if ( wordsB[i] == undefined && wordsA[i] != undefined ) {
+					result = 1;
+				}
+				if ( wordsB[i] == undefined && wordsA[i] == undefined ) {
+					result = 0;
+				}
+				if ( wordsA[i] == wordsB[i] ) {
+					i++;
+					continue;
+				}
+				// if current words are number, compare them
+				if ( wordsA[i]-0 == wordsA[i] && wordsB[i]-0 == wordsB[i] ) {
+					result = wordsA[i] - wordsB[i];
+				}
+				else {
+					// else strings comparision
+					if ( wordsA[i] > wordsB[i] ) result = 1;
+					if ( wordsA[i] < wordsB[i] ) result = -1;
+				}
+			}
+
+			return result;
+		}
+	};
+
 	Table.prototype.broadcast = function() {
 		// broadcast table to others
 		var params = { 'url': this.url };