tablesaw-rails 0.0.1

data/app/assets/javascripts/tablesaw/tables.js

@@ -0,0 +1,135 @@
+/*
+* tablesaw: A set of plugins for responsive tables
+* Stack and Column Toggle tables
+* Copyright (c) 2013 Filament Group, Inc.
+* MIT License
+*/
+
+;(function( $ ) {
+	var pluginName = "table",
+		classes = {
+			toolbar: "tablesaw-bar"
+		},
+		events = {
+			create: "tablesawcreate",
+			destroy: "tablesawdestroy",
+			refresh: "tablesawrefresh"
+		},
+		defaultMode = "stack",
+		initSelector = "table[data-mode],table[data-sortable]";
+
+	var Table = function( element ) {
+		if( !element ) {
+			throw new Error( "Tablesaw requires an element." );
+		}
+
+		this.table = element;
+		this.$table = $( element );
+
+		this.mode = this.$table.attr( "data-mode" ) || defaultMode;
+
+		this.init();
+	};
+
+	Table.prototype.init = function() {
+		// assign an id if there is none
+		if ( !this.$table.attr( "id" ) ) {
+			this.$table.attr( "id", pluginName + "-" + Math.round( Math.random() * 10000 ) );
+		}
+
+		this.createToolbar();
+
+		var colstart = this._initCells();
+
+		this.$table.trigger( events.create, [ this, colstart ] );
+	};
+
+	Table.prototype._initCells = function() {
+		var colstart,
+			thrs = this.table.querySelectorAll( "thead tr" ),
+			self = this;
+
+		$( thrs ).each( function(){
+			var coltally = 0;
+
+			$( this ).children().each( function(){
+				var span = parseInt( this.getAttribute( "colspan" ), 10 ),
+					sel = ":nth-child(" + ( coltally + 1 ) + ")";
+
+				colstart = coltally + 1;
+
+				if( span ){
+					for( var k = 0; k < span - 1; k++ ){
+						coltally++;
+						sel += ", :nth-child(" + ( coltally + 1 ) + ")";
+					}
+				}
+
+				// Store "cells" data on header as a reference to all cells in the same column as this TH
+				this.cells = self.$table.find("tr").not( $( thrs ).eq( 0 ) ).not( this ).children( sel );
+				coltally++;
+			});
+		});
+
+		return colstart;
+	};
+
+	Table.prototype.refresh = function() {
+		this._initCells();
+
+		this.$table.trigger( events.refresh );
+	};
+
+	Table.prototype.createToolbar = function() {
+		// Insert the toolbar
+		// TODO move this into a separate component
+		var $toolbar = this.$table.prev( '.' + classes.toolbar );
+		if( !$toolbar.length ) {
+			$toolbar = $( '<div>' )
+				.addClass( classes.toolbar )
+				.insertBefore( this.$table );
+		}
+		this.$toolbar = $toolbar;
+
+		if( this.mode ) {
+			this.$toolbar.addClass( 'mode-' + this.mode );
+		}
+	};
+
+	Table.prototype.destroy = function() {
+		// Don’t remove the toolbar. Some of the table features are not yet destroy-friendly.
+		this.$table.prev( '.' + classes.toolbar ).each(function() {
+			this.className = this.className.replace( /\bmode\-\w*\b/gi, '' );
+		});
+
+		var tableId = this.$table.attr( 'id' );
+		$( document ).unbind( "." + tableId );
+		$( window ).unbind( "." + tableId );
+
+		// other plugins
+		this.$table.trigger( events.destroy, [ this ] );
+
+		this.$table.removeAttr( 'data-mode' );
+
+		this.$table.removeData( pluginName );
+	};
+
+	// Collection method.
+	$.fn[ pluginName ] = function() {
+		return this.each( function() {
+			var $t = $( this );
+
+			if( $t.data( pluginName ) ){
+				return;
+			}
+
+			var table = new Table( this );
+			$t.data( pluginName, table );
+		});
+	};
+
+	$( document ).on( "enhance.tablesaw", function( e ) {
+		$( e.target ).find( initSelector )[ pluginName ]();
+	});
+
+}( jQuery ));

data/app/assets/javascripts/tablesaw/tables.minimap.js

@@ -0,0 +1,81 @@
+/*
+* tablesaw: A set of plugins for responsive tables
+* minimap: a set of dots to show which columns are currently visible.
+* Copyright (c) 2013 Filament Group, Inc.
+* MIT License
+*/
+
+;(function( win, $, undefined ){
+
+	var MM = {
+		attr: {
+			init: 'data-minimap'
+		}
+	};
+
+	function createMiniMap( $table ){
+
+		var $btns = $( '<div class="tablesaw-advance minimap">' ),
+			$dotNav = $( '<ul class="tablesaw-advance-dots">' ).appendTo( $btns ),
+			hideDot = 'tablesaw-advance-dots-hide',
+			$headerCells = $table.find( 'thead th' );
+
+		// populate dots
+		$headerCells.each(function(){
+			$dotNav.append( '<li><i></i></li>' );
+		});
+
+		$btns.appendTo( $table.prev( '.tablesaw-bar' ) );
+
+		function showMinimap( $table ) {
+			var mq = $table.attr( MM.attr.init );
+			return !mq || win.matchMedia && win.matchMedia( mq ).matches;
+		}
+
+		function showHideNav(){
+			if( !showMinimap( $table ) ) {
+				$btns.hide();
+				return;
+			}
+			$btns.show();
+
+			// show/hide dots
+			var dots = $dotNav.find( "li" ).removeClass( hideDot );
+			$table.find( "thead th" ).each(function(i){
+				if( $( this ).css( "display" ) === "none" ){
+					dots.eq( i ).addClass( hideDot );
+				}
+			});
+		}
+
+		// run on init and resize
+		showHideNav();
+		$( win ).on( "resize", showHideNav );
+
+
+		$table
+			.bind( "tablesawcolumns.minimap", function(){
+				showHideNav();
+			})
+			.bind( "tablesawdestroy.minimap", function(){
+				var $t = $( this );
+
+				$t.prev( '.tablesaw-bar' ).find( '.tablesaw-advance' ).remove();
+				$( win ).off( "resize", showHideNav );
+
+				$t.unbind( ".minimap" );
+			});
+	}
+
+
+
+	// on tablecreate, init
+	$( document ).on( "tablesawcreate", function( e, Tablesaw ){
+
+		if( ( Tablesaw.mode === 'swipe' || Tablesaw.mode === 'columntoggle' ) && Tablesaw.$table.is( '[ ' + MM.attr.init + ']' ) ){
+			createMiniMap( Tablesaw.$table );
+		}
+
+	} );
+
+}( this, jQuery ));

data/app/assets/javascripts/tablesaw/tables.modeswitch.js

@@ -0,0 +1,87 @@
+/*
+* tablesaw: A set of plugins for responsive tables
+* Mode Switch: UI element to allow the user to change table modes: stack/swipe/columntoggle
+* Copyright (c) 2013 Filament Group, Inc.
+* MIT License
+*/
+
+;(function( win, $ ) {
+
+	var S = {
+		selectors: {
+			init: 'table[data-mode-switch]'
+		},
+		attributes: {
+			excludeMode: 'data-mode-exclude'
+		},
+		classes: {
+			main: 'tablesaw-modeswitch',
+			toolbar: 'tablesaw-toolbar'
+		},
+		modes: [ 'stack', 'swipe', 'columntoggle' ],
+		i18n: {
+			modes: [ 'Stack', 'Swipe', 'Toggle' ],
+			columns: 'Col<span class="a11y-sm">umn</span>s'
+		},
+		init: function( table ) {
+			var $table = $( table ),
+				ignoreMode = $table.attr( S.attributes.excludeMode ),
+				$toolbar = $table.prev( '.tablesaw-bar' ),
+				modeVal = '',
+				$switcher = $( '<div>' ).addClass( S.classes.main + ' ' + S.classes.toolbar ).html(function() {
+					var html = [ '<label>' + S.i18n.columns + ':' ],
+						dataMode = $table.attr( 'data-mode' ),
+						isSelected;
+
+					html.push( '<span class="btn btn-small">&#160;<select>' );
+					for( var j=0, k = S.modes.length; j<k; j++ ) {
+						if( ignoreMode && ignoreMode.toLowerCase() === S.modes[ j ] ) {
+							continue;
+						}
+
+						isSelected = dataMode === S.modes[ j ];
+
+						if( isSelected ) {
+							modeVal = S.modes[ j ];
+						}
+
+						html.push( '<option' +
+							( isSelected ? ' selected' : '' ) +
+							' value="' + S.modes[ j ] + '">' + S.i18n.modes[ j ] + '</option>' );
+					}
+					html.push( '</select></span></label>' );
+
+					return html.join('');
+				});
+
+			var $otherToolbarItems = $toolbar.find( '.tablesaw-advance' ).eq( 0 );
+			if( $otherToolbarItems.length ) {
+				$switcher.insertBefore( $otherToolbarItems );
+			} else {
+				$switcher.appendTo( $toolbar );
+			}
+
+			$switcher.find( '.btn' ).tablesawbtn();
+			$switcher.find( 'select' ).bind( 'change', S.onModeChange );
+		},
+		onModeChange: function() {
+			var $t = $( this ),
+				$switcher = $t.closest( '.' + S.classes.main ),
+				$table = $t.closest( '.tablesaw-bar' ).nextUntil( $table ).eq( 0 ),
+				val = $t.val();
+
+			$switcher.remove();
+			$table.data( 'table' ).destroy();
+
+			$table.attr( 'data-mode', val );
+			$table.table();
+		}
+	};
+
+	$( win.document ).on( "tablesawcreate", function( e, Tablesaw ) {
+		if( Tablesaw.$table.is( S.selectors.init ) ) {
+			S.init( Tablesaw.table );
+		}
+	});
+
+})( this, jQuery );

data/app/assets/javascripts/tablesaw/tables.sortable.js

@@ -0,0 +1,274 @@
+/*
+* tablesaw: A set of plugins for responsive tables
+* Sortable column headers
+* Copyright (c) 2013 Filament Group, Inc.
+* MIT License
+*/
+
+;(function( $ ) {
+	function getSortValue( cell ) {
+		return $.map( cell.childNodes, function( el ) {
+				var $el = $( el );
+				if( $el.is( 'input, select' ) ) {
+					return $el.val();
+				} else if( $el.hasClass( 'tablesaw-cell-label' ) ) {
+					return;
+				}
+				return $.trim( $el.text() );
+			}).join( '' );
+	}
+
+	var topLevelPluginName = "tablesaw-sortable",
+		pluginName = "sortable",
+		initSelector = "table[data-" + pluginName + "]",
+		sortableSwitchSelector = "[data-" + pluginName + "-switch]",
+		classes = {
+			head: pluginName + "-head",
+			ascend: pluginName + "-ascending",
+			descend: pluginName + "-descending",
+			switcher: topLevelPluginName + "-switch",
+			tableToolbar: 'tablesaw-toolbar'
+		},
+		i18n = {
+			sort: 'Sort'
+		},
+		methods = {
+			_create: function( o ){
+				return $( this ).each(function() {
+					var init = $( this ).data( "init" + pluginName );
+					if( init ) {
+						return false;
+					}
+					$( this )
+						.data( "init"+ pluginName, true )
+						.trigger( "beforecreate." + pluginName )
+						[ pluginName ]( "_init" , o )
+						.trigger( "create." + pluginName );
+				});
+			},
+			_init: function(){
+				var el = $( this ),
+					heads,
+					$switcher;
+
+				var addClassToTable = function(){
+						el.addClass( topLevelPluginName );
+					},
+					addClassToHeads = function( h ){
+						$.each( h , function( i , v ){
+							$( v ).addClass( classes.head );
+						});
+					},
+					makeHeadsActionable = function( h , fn ){
+						$.each( h , function( i , v ){
+							var b = $( "<button />" );
+							b.bind( "click" , { col: v } , fn );
+							$( v ).wrapInner( b );
+						});
+					},
+					clearOthers = function( sibs ){
+						$.each( sibs , function( i , v ){
+							var col = $( v );
+							col.removeAttr( "data-sortable-default-col" );
+							col.removeClass( classes.ascend );
+							col.removeClass( classes.descend );
+						});
+					},
+					headsOnAction = function( e ){
+						if( $( e.target ).is( 'a[href]' ) ) {
+							return;
+						}
+
+						e.stopPropagation();
+						var head = $( this ).parent(),
+							v = e.data.col,
+							newSortValue = heads.index( head );
+
+						clearOthers( head.siblings() );
+						if( head.hasClass( classes.descend ) ){
+							el[ pluginName ]( "sortBy" , v , true);
+							newSortValue += '_asc';
+						} else {
+							el[ pluginName ]( "sortBy" , v );
+							newSortValue += '_desc';
+						}
+						if( $switcher ) {
+							$switcher.find( 'select' ).val( newSortValue ).trigger( 'refresh' );
+						}
+
+						e.preventDefault();
+					},
+					handleDefault = function( heads ){
+						$.each( heads , function( idx , el ){
+							var $el = $( el );
+							if( $el.is( "[data-sortable-default-col]" ) ){
+								if( !$el.hasClass( classes.descend ) ) {
+									$el.addClass( classes.ascend );
+								}
+							}
+						});
+					},
+					addSwitcher = function( heads ){
+						$switcher = $( '<div>' ).addClass( classes.switcher ).addClass( classes.tableToolbar ).html(function() {
+							var html = [ '<label>' + i18n.sort + ':' ];
+
+							html.push( '<span class="btn btn-small">&#160;<select>' );
+							heads.each(function( j ) {
+								var $t = $( this ),
+									isDefaultCol = $t.is( '[data-sortable-default-col]' ),
+									isDescending = $t.hasClass( classes.descend ),
+									isNumeric = false;
+
+								// Check only the first three rows to see if the column is numbers.
+								$( this.cells ).slice( 0, 3 ).each(function() {
+									if( !isNaN( parseInt( getSortValue( this ), 10 ) ) ) {
+										isNumeric = true;
+										return false;
+									}
+								});
+
+								html.push( '<option' + ( isDefaultCol && !isDescending ? ' selected' : '' ) + ' value="' + j + '_asc">' + $t.text() + ' ' + ( isNumeric ? '↑' : '(A-Z)' ) + '</option>' );
+								html.push( '<option' + ( isDefaultCol && isDescending ? ' selected' : '' ) + ' value="' + j + '_desc">' + $t.text() + ' ' + ( isNumeric ? '↓' : '(Z-A)' ) + '</option>' );
+							});
+							html.push( '</select></span></label>' );
+
+							return html.join('');
+						});
+
+						var $toolbar = el.prev( '.tablesaw-bar' ),
+							$firstChild = $toolbar.children().eq( 0 );
+
+						if( $firstChild.length ) {
+							$switcher.insertBefore( $firstChild );
+						} else {
+							$switcher.appendTo( $toolbar );
+						}
+						$switcher.find( '.btn' ).tablesawbtn();
+						$switcher.find( 'select' ).on( 'change', function() {
+							var val = $( this ).val().split( '_' ),
+								head = heads.eq( val[ 0 ] );
+
+							clearOthers( head.siblings() );
+							el.sortable( 'sortBy', head.get( 0 ), val[ 1 ] === 'asc' );
+						});
+					};
+
+					addClassToTable();
+					heads = el.find( "thead th[data-" + pluginName + "-col]" );
+					addClassToHeads( heads );
+					makeHeadsActionable( heads , headsOnAction );
+					handleDefault( heads );
+
+					if( el.is( sortableSwitchSelector ) ) {
+						addSwitcher( heads, el.find('tbody tr:nth-child(-n+3)') );
+					}
+			},
+			getColumnNumber: function( col ){
+				return $( col ).prevAll().length;
+			},
+			getTableRows: function(){
+				return $( this ).find( "tbody tr" );
+			},
+			sortRows: function( rows , colNum , ascending, col ){
+				var cells, fn, sorted;
+				var getCells = function( rows ){
+						var cells = [];
+						$.each( rows , function( i , r ){
+							cells.push({
+								cell: getSortValue( $( r ).children().get( colNum ) ),
+								rowNum: i
+							});
+						});
+						return cells;
+					},
+					getSortFxn = function( ascending, forceNumeric ){
+						var fn,
+							regex = /[^\d\.]/g;
+						if( ascending ){
+							fn = function( a , b ){
+								if( forceNumeric || !isNaN( parseFloat( a.cell ) ) ) {
+									return parseFloat( a.cell.replace( regex, '' ) ) - parseFloat( b.cell.replace( regex, '' ) );
+								} else {
+									return a.cell.toLowerCase() > b.cell.toLowerCase() ? 1 : -1;
+								}
+							};
+						} else {
+							fn = function( a , b ){
+								if( forceNumeric || !isNaN( parseFloat( a.cell ) ) ) {
+									return parseFloat( b.cell.replace( regex, '' ) ) - parseFloat( a.cell.replace( regex, '' ) );
+								} else {
+									return a.cell.toLowerCase() < b.cell.toLowerCase() ? 1 : -1;
+								}
+							};
+						}
+						return fn;
+					},
+					applyToRows = function( sorted , rows ){
+						var newRows = [], i, l, cur;
+						for( i = 0, l = sorted.length ; i < l ; i++ ){
+							cur = sorted[ i ].rowNum;
+							newRows.push( rows[cur] );
+						}
+						return newRows;
+					};
+
+				cells = getCells( rows );
+				fn = getSortFxn( ascending, $( col ).is( '[data-sortable-numeric]' ) );
+				sorted = cells.sort( fn );
+				rows = applyToRows( sorted , rows );
+				return rows;
+			},
+			replaceTableRows: function( rows ){
+				var el = $( this ),
+					body = el.find( "tbody" );
+				body.html( rows );
+			},
+			makeColDefault: function( col , a ){
+				var c = $( col );
+				c.attr( "data-sortable-default-col" , "true" );
+				if( a ){
+					c.removeClass( classes.descend );
+					c.addClass( classes.ascend );
+				} else {
+					c.removeClass( classes.ascend );
+					c.addClass( classes.descend );
+				}
+			},
+			sortBy: function( col , ascending ){
+				var el = $( this ), colNum, rows;
+
+				colNum = el[ pluginName ]( "getColumnNumber" , col );
+				rows = el[ pluginName ]( "getTableRows" );
+				rows = el[ pluginName ]( "sortRows" , rows , colNum , ascending, col );
+				el[ pluginName ]( "replaceTableRows" , rows );
+				el[ pluginName ]( "makeColDefault" , col , ascending );
+			}
+		};
+
+	// Collection method.
+	$.fn[ pluginName ] = function( arrg ) {
+		var args = Array.prototype.slice.call( arguments , 1),
+			returnVal;
+
+		// if it's a method
+		if( arrg && typeof( arrg ) === "string" ){
+			returnVal = $.fn[ pluginName ].prototype[ arrg ].apply( this[0], args );
+			return (typeof returnVal !== "undefined")? returnVal:$(this);
+		}
+		// check init
+		if( !$( this ).data( pluginName + "data" ) ){
+			$( this ).data( pluginName + "active", true );
+			$.fn[ pluginName ].prototype._create.call( this , arrg );
+		}
+		return $(this);
+	};
+	// add methods
+	$.extend( $.fn[ pluginName ].prototype, methods );
+
+	$( document ).on( "tablesawcreate", function( e, Tablesaw ) {
+		if( Tablesaw.$table.is( initSelector ) ) {
+			Tablesaw.$table[ pluginName ]();
+		}
+	});
+
+}( jQuery ));