tablesaw-rails 0.0.1

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

@@ -0,0 +1,93 @@
+/*
+* tablesaw: A set of plugins for responsive tables
+* Stack: switches from column layout to rows with inline labels
+* Copyright (c) 2013 Filament Group, Inc.
+* MIT License
+*/
+
+;(function( win, $, undefined ){
+
+	var classes = {
+		stackTable: 'tablesaw-stack',
+		cellLabels: 'tablesaw-cell-label'
+	};
+
+	var data = {
+		obj: 'tablesaw-stack'
+	};
+
+	var attrs = {
+		labelless: 'data-no-labels'
+	};
+
+	var Stack = function( element ) {
+
+		this.$table = $( element );
+
+		this.labelless = this.$table.is( '[' + attrs.labelless + ']' );
+
+		if( !this.labelless ) {
+			// allHeaders references headers, plus all THs in the thead, which may include several rows, or not
+			this.allHeaders = this.$table.find( "th" );
+		}
+
+		this.$table.data( data.obj, this );
+	};
+
+	Stack.prototype.init = function( colstart ) {
+		this.$table.addClass( classes.stackTable );
+
+		if( this.labelless ) {
+			return;
+		}
+
+		// get headers in reverse order so that top-level headers are appended last
+		var reverseHeaders = $( this.allHeaders );
+
+		// create the hide/show toggles
+		reverseHeaders.each(function(){
+			var $cells = $( this.cells ).filter(function() {
+					return !$( this ).parent().is( "[" + attrs.labelless + "]" );
+				}),
+				hierarchyClass = $cells.not( this ).filter( "thead th" ).length && " tablesaw-cell-label-top",
+				text = $(this).text();
+
+			if( text !== "" ){
+				if( hierarchyClass ){
+					var iteration = parseInt( $( this ).attr( "colspan" ), 10 ),
+						filter = "";
+
+					if( iteration ){
+						filter = "td:nth-child("+ iteration +"n + " + ( colstart ) +")";
+					}
+					$cells.filter( filter ).prepend( "<b class='" + classes.cellLabels + hierarchyClass + "'>" + text + "</b>"  );
+				} else {
+					$cells.prepend( "<b class='" + classes.cellLabels + "'>" + text + "</b>"  );
+				}
+			}
+		});
+	};
+
+	Stack.prototype.destroy = function() {
+		this.$table.removeClass( classes.stackTable );
+		this.$table.find( '.' + classes.cellLabels ).remove();
+	};
+
+	// on tablecreate, init
+	$( document ).on( "tablesawcreate", function( e, Tablesaw, colstart ){
+		if( Tablesaw.mode === 'stack' ){
+			var table = new Stack( Tablesaw.table );
+			table.init( colstart );
+		}
+
+	} );
+
+	$( document ).on( "tablesawdestroy", function( e, Tablesaw ){
+
+		if( Tablesaw.mode === 'stack' ){
+			$( Tablesaw.table ).data( data.obj ).destroy();
+		}
+
+	} );
+
+}( this, jQuery ));

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

@@ -0,0 +1,248 @@
+/*
+* tablesaw: A set of plugins for responsive tables
+* Swipe Toggle: swipe gesture (or buttons) to navigate which columns are shown.
+* Copyright (c) 2013 Filament Group, Inc.
+* MIT License
+*/
+
+;(function( win, $, undefined ){
+
+
+	function createSwipeTable( $table ){
+
+		var $btns = $( "<div class='tablesaw-advance'></div>" ),
+			$prevBtn = $( "<a href='#' class='tablesaw-nav-btn btn btn-micro left' title='Previous Column'></a>" ).appendTo( $btns ),
+			$nextBtn = $( "<a href='#' class='tablesaw-nav-btn btn btn-micro right' title='Next Column'></a>" ).appendTo( $btns ),
+			hideBtn = 'disabled',
+			persistWidths = 'tablesaw-fix-persist',
+			$headerCells = $table.find( "thead th" ),
+			$headerCellsNoPersist = $headerCells.not( '[data-priority="persist"]' ),
+			headerWidths = [],
+			$head = $( document.head || 'head' ),
+			tableId = $table.attr( 'id' ),
+			// TODO switch this to an nth-child feature test
+			isIE8 = $( 'html' ).is( '.ie-lte8' );
+
+		if( !$headerCells.length ) {
+			throw new Error( "tablesaw swipe: no header cells found. Are you using <th> inside of <thead>?" );
+		}
+
+		// Calculate initial widths
+		$table.css('width', 'auto');
+		$headerCells.each(function() {
+			headerWidths.push( $( this ).outerWidth() );
+		});
+		$table.css( 'width', '' );
+
+		$btns.appendTo( $table.prev( '.tablesaw-bar' ) );
+
+		$table.addClass( "tablesaw-swipe" );
+
+		if( !tableId ) {
+			tableId = 'tableswipe-' + Math.round( Math.random() * 10000 );
+			$table.attr( 'id', tableId );
+		}
+
+		function $getCells( headerCell ) {
+			return $( headerCell.cells ).add( headerCell );
+		}
+
+		function showColumn( headerCell ) {
+			$getCells( headerCell ).removeClass( 'tablesaw-cell-hidden' );
+		}
+
+		function hideColumn( headerCell ) {
+			$getCells( headerCell ).addClass( 'tablesaw-cell-hidden' );
+		}
+
+		function persistColumn( headerCell ) {
+			$getCells( headerCell ).addClass( 'tablesaw-cell-persist' );
+		}
+
+		function isPersistent( headerCell ) {
+			return $( headerCell ).is( '[data-priority="persist"]' );
+		}
+
+		function unmaintainWidths() {
+			$table.removeClass( persistWidths );
+			$( '#' + tableId + '-persist' ).remove();
+		}
+
+		function maintainWidths() {
+			var prefix = '#' + tableId + ' ',
+				styles = [],
+				tableWidth = $table.width();
+
+			$headerCells.each(function( index ) {
+				var width;
+				if( isPersistent( this ) ) {
+					width = $( this ).outerWidth();
+
+					// Only save width on non-greedy columns (take up less than 75% of table width)
+					if( width < tableWidth * 0.75 ) {
+						styles.push( prefix + ' .tablesaw-cell-persist:nth-child(' + ( index + 1 ) + ') { width: ' + width + 'px; }' );
+					}
+				}
+			});
+
+			unmaintainWidths();
+			$table.addClass( persistWidths );
+			$head.append( $( '<style>' + styles.join( "\n" ) + '</style>' ).attr( 'id', tableId + '-persist' ) );
+		}
+
+		function getNext(){
+			var next = [],
+				checkFound;
+
+			$headerCellsNoPersist.each(function( i ) {
+				var $t = $( this ),
+					isHidden = $t.css( "display" ) === "none" || $t.is( ".tablesaw-cell-hidden" );
+
+				if( !isHidden && !checkFound ) {
+					checkFound = true;
+					next[ 0 ] = i;
+				} else if( isHidden && checkFound ) {
+					next[ 1 ] = i;
+
+					return false;
+				}
+			});
+
+			return next;
+		}
+
+		function getPrev(){
+			var next = getNext();
+			return [ next[ 1 ] - 1 , next[ 0 ] - 1 ];
+		}
+
+		function nextpair( fwd ){
+			return fwd ? getNext() : getPrev();
+		}
+
+		function canAdvance( pair ){
+			return pair[ 1 ] > -1 && pair[ 1 ] < $headerCellsNoPersist.length;
+		}
+
+		function fakeBreakpoints() {
+			var extraPaddingPixels = 20,
+				containerWidth = $table.parent().width(),
+				sum = 0;
+
+			$headerCells.each(function( index ) {
+				var $t = $( this ),
+					isPersist = $t.is( '[data-priority="persist"]' );
+				sum += headerWidths[ index ] + ( isPersist ? 0 : extraPaddingPixels );
+
+				if( isPersist ) {
+					// for visual box-shadow
+					persistColumn( this );
+					return;
+				}
+
+				if( sum > containerWidth ) {
+					hideColumn( this );
+				} else {
+					showColumn( this );
+				}
+
+			});
+
+			if( !isIE8 ) {
+				unmaintainWidths();
+			}
+			$table.trigger( 'tablesawcolumns' );
+		}
+
+		function advance( fwd ){
+			var pair = nextpair( fwd );
+			if( canAdvance( pair ) ){
+				if( isNaN( pair[ 0 ] ) ){
+					if( fwd ){
+						pair[0] = 0;
+					}
+					else {
+						pair[0] = $headerCellsNoPersist.length - 1;
+					}
+				}
+
+				if( !isIE8 ) {
+					maintainWidths();
+				}
+
+				hideColumn( $headerCellsNoPersist.get( pair[ 0 ] ) );
+				showColumn( $headerCellsNoPersist.get( pair[ 1 ] ) );
+
+				$table.trigger( 'tablesawcolumns' );
+			}
+		}
+
+		$prevBtn.add( $nextBtn ).click(function( e ){
+			advance( !!$( e.target ).closest( $nextBtn ).length );
+			e.preventDefault();
+		});
+
+		$table
+			.bind( "touchstart.swipetoggle", function( e ){
+				var originX = ( e.touches || e.originalEvent.touches )[ 0 ].pageX,
+					originY = ( e.touches || e.originalEvent.touches )[ 0 ].pageY,
+					x,
+					y;
+
+				$( this )
+					.bind( "touchmove", function( e ){
+						x = ( e.touches || e.originalEvent.touches )[ 0 ].pageX;
+						y = ( e.touches || e.originalEvent.touches )[ 0 ].pageY;
+
+						if( Math.abs( x - originX ) > 15 && Math.abs( y - originY ) < 20 ) {
+							e.preventDefault();
+						}
+					})
+					.bind( "touchend.swipetoggle", function(){
+						if( x - originX < 15 ){
+							advance( true );
+						}
+						if( x - originX > -15 ){
+							advance( false );
+						}
+
+						$( this ).unbind( "touchmove touchend" );
+					});
+
+			})
+			.bind( "tablesawcolumns.swipetoggle", function(){
+				$prevBtn[ canAdvance( getPrev() ) ? "removeClass" : "addClass" ]( hideBtn );
+				$nextBtn[ canAdvance( getNext() ) ? "removeClass" : "addClass" ]( hideBtn );
+			})
+			.bind( "tablesawnext.swipetoggle", function(){
+				advance( true );
+			} )
+			.bind( "tablesawprev.swipetoggle", function(){
+				advance( false );
+			} )
+			.bind( "tablesawdestroy.swipetoggle", function(){
+				var $t = $( this );
+
+				$t.removeClass( 'tablesaw-swipe' );
+				$t.prev( '.tablesaw-bar' ).find( '.tablesaw-advance' ).remove();
+				$( win ).off( "resize", fakeBreakpoints );
+
+				$t.unbind( ".swipetoggle" );
+			});
+
+		fakeBreakpoints();
+		$( win ).on( "resize", fakeBreakpoints );
+	}
+
+
+
+	// on tablecreate, init
+	$( document ).on( "tablesawcreate", function( e, Tablesaw ){
+
+		if( Tablesaw.mode === 'swipe' ){
+			createSwipeTable( Tablesaw.$table );
+		}
+
+	} );
+
+}( this, jQuery ));

data/app/assets/stylesheets/tablesaw/tables.columntoggle.css

@@ -0,0 +1,156 @@
+/*
+ Styles for the table columntoggle mode
+*/
+
+/* see Gruntfile.js for grunticon selector */
+.btn.tablesaw-columntoggle-btn {
+	float: right;
+}
+
+.btn.tablesaw-columntoggle-btn span {
+	text-indent: -9999px;
+	display: inline-block;
+}
+
+.tablesaw-columntoggle-btnwrap .dialog-content {
+	padding: .5em;
+}
+.tablesaw-columntoggle tbody td {
+	line-height: 1.5;
+}
+
+
+/* Remove top/bottom margins around the fieldcontain on check list */
+.tablesaw-columntoggle-popup {
+	display: none;
+}
+.tablesaw-columntoggle-btnwrap.visible .tablesaw-columntoggle-popup {
+	display: block;
+	position: absolute;
+	top: 2em;
+	right: 0;
+	background-color: #fff;
+	padding: .5em .8em;
+	border: 1px solid #ccc;
+	box-shadow: 0 1px 2px #ccc;
+	border-radius: .2em;
+	z-index: 1;
+}
+.tablesaw-columntoggle-popup fieldset {
+	margin:0;
+}
+
+/* Hide all prioritized columns by default */
+@media only all {
+	.tablesaw-columntoggle th.tablesaw-priority-6,
+	.tablesaw-columntoggle td.tablesaw-priority-6,
+	.tablesaw-columntoggle th.tablesaw-priority-5,
+	.tablesaw-columntoggle td.tablesaw-priority-5,
+	.tablesaw-columntoggle th.tablesaw-priority-4,
+	.tablesaw-columntoggle td.tablesaw-priority-4,
+	.tablesaw-columntoggle th.tablesaw-priority-3,
+	.tablesaw-columntoggle td.tablesaw-priority-3,
+	.tablesaw-columntoggle th.tablesaw-priority-2,
+	.tablesaw-columntoggle td.tablesaw-priority-2,
+	.tablesaw-columntoggle th.tablesaw-priority-1,
+	.tablesaw-columntoggle td.tablesaw-priority-1 {
+		display: none;
+	}
+}
+
+.tablesaw-columntoggle-btnwrap {
+	position: relative;
+	float: right;
+}
+.tablesaw-columntoggle-btnwrap .dialog-content {
+	top: 0 !important;
+	right: 1em;
+	left: auto !important;
+	width: 12em;
+	max-width: 18em;
+	margin: -.5em auto 0;
+}
+.tablesaw-columntoggle-btnwrap .dialog-content:focus {
+	outline-style: none;
+}
+
+/* Preset breakpoints if "" class added to table */
+
+/* Show priority 1 at 320px (20em x 16px) */
+@media (min-width: 20em) {
+	.tablesaw-columntoggle th.tablesaw-priority-1,
+	.tablesaw-columntoggle td.tablesaw-priority-1 {
+		display: table-cell;
+	}
+}
+/* Show priority 2 at 480px (30em x 16px) */
+@media (min-width: 30em) {
+	.tablesaw-columntoggle th.tablesaw-priority-2,
+	.tablesaw-columntoggle td.tablesaw-priority-2 {
+		display: table-cell;
+	}
+}
+/* Show priority 3 at 640px (40em x 16px) */
+@media (min-width: 40em) {
+	.tablesaw-columntoggle th.tablesaw-priority-3,
+	.tablesaw-columntoggle td.tablesaw-priority-3 {
+		display: table-cell;
+	}
+
+	.tablesaw-columntoggle tbody td {
+		line-height: 2;
+	}
+}
+/* Show priority 4 at 800px (50em x 16px) */
+@media (min-width: 50em) {
+	.tablesaw-columntoggle th.tablesaw-priority-4,
+	.tablesaw-columntoggle td.tablesaw-priority-4 {
+		display: table-cell;
+	}
+}
+/* Show priority 5 at 960px (60em x 16px) */
+@media (min-width: 60em) {
+	.tablesaw-columntoggle th.tablesaw-priority-5,
+	.tablesaw-columntoggle td.tablesaw-priority-5 {
+		display: table-cell;
+	}
+}
+/* Show priority 6 at 1,120px (70em x 16px) */
+@media (min-width: 70em) {
+	.tablesaw-columntoggle th.tablesaw-priority-6,
+	.tablesaw-columntoggle td.tablesaw-priority-6 {
+		display: table-cell;
+	}
+}
+
+@media only all {
+	.tablesaw-swipe .tablesaw-cell-persist {
+		border-right: 1px solid #e4e1de;
+	}
+	.tablesaw-swipe .tablesaw-cell-persist {
+		box-shadow: 3px 0 4px -1px #e4e1de;
+	}
+
+	/* Unchecked manually: Always hide */
+	.tablesaw-swipe th.tablesaw-cell-hidden,
+	.tablesaw-swipe td.tablesaw-cell-hidden,
+	.tablesaw-columntoggle th.tablesaw-cell-hidden,
+	.tablesaw-columntoggle td.tablesaw-cell-hidden {
+		display: none;
+	}
+
+	/* Checked manually: Always show */
+	.tablesaw-columntoggle th.tablesaw-cell-visible,
+	.tablesaw-columntoggle td.tablesaw-cell-visible {
+		display: table-cell;
+	}
+}
+
+.tablesaw-columntoggle-popup .btn-group > label {
+	display: block;
+	padding: .2em 0;
+	white-space: nowrap;
+}
+.tablesaw-columntoggle-popup .btn-group > label input {
+	margin-right: .8em;
+}