Features - search pane: Cleaning up into functions

features/searchPane/dataTables.searchPane.js

@@ -1,6 +1,5 @@
 // TODO
 // - Tidy up class names
-// - Clean up code into functions
 // - Option to have vertical layout class
 // - Number of horizontal panels class options
 // - Threshold option - require that there is duplicate information in a column before it is used
@@ -8,6 +7,7 @@
 // - Styling for container / header
 // - Styling for clear option
 // - State saving integration
+// - Fix regex characters - (CEO) for example
 
 
 (function( factory ){
@@ -43,15 +43,77 @@ var DataTable = $.fn.dataTable;
 function SearchPanes ( settings, opts ) {
 	var that = this;
 	var table = new DataTable.Api( settings );
-	var container = $('<div class="dt-searchPane"/>')
-		.appendTo( opts.container );
+
+	this.s = {
+		dt: table
+	};
+
+	this.dom = {
+		container: $('<div class="dt-searchPane"/>')
+			.appendTo( opts.container )
+	}
 
 	table.columns(opts.columns).eq(0).each( function ( idx ) {
-		var column = table.column( idx );
+		that._pane( idx );
+	} );
+
+	$(this.dom.container)
+		.on( 'click', 'li', function () {
+			that._toggle( this );
+		} )
+		.on( 'click', 'button.close', function () {
+			that._clear( $(this).closest('div.pane') );
+		} );
+}
+
+
+$.extend( SearchPanes.prototype, {
+	_binData: function ( data, tags ) {
+		var out = {};
+		var add = function ( d ) {
+			if ( ! out[ d ] ) {
+				out[ d ] = 1;
+			}
+			else {
+				out[ d ]++;
+			}
+		};
 
+		data.each( function (d) {
+			if ( ! d ) {
+				return;
+			}
+
+			if ( tags ) {
+				var a = d.split(',');
+				for ( var i=0, ien=a.length ; i<ien ; i++ ) {
+					add( a[i] );
+				}
+			}
+			else {
+				add( d );
+			}
+		} );
+
+		return out;
+	},
+
+	_clear: function ( pane ) {
+		pane.find( 'li.selected' ).removeClass( 'selected' );
+		pane.removeClass('filtering');
+
+		this.s.dt
+			.column( pane.data('column') )
+			.search('')
+			.draw();
+	},
+
+	_pane: function ( idx ) {
+		var table = this.s.dt;
+		var column = table.column( idx );
 		var list = $('<ul/>');
 		var tags = $( column.header() ).hasClass('tags');
-		var bins = that._binData( column.data().flatten(), tags );
+		var bins = this._binData( column.data().flatten(), tags );
 
 		// On initialisation, do we need to set a filtering value from a
 		// saved state or init option?
@@ -79,7 +141,7 @@ function SearchPanes ( settings, opts ) {
 			}
 		}
 
-		$(container).append(
+		$(this.dom.container).append(
 			$('<div class="pane"/>')
 				.data( 'column', idx )
 				.addClass( search.length ? 'filtering' : '' )
@@ -87,17 +149,15 @@ function SearchPanes ( settings, opts ) {
 				.append( $('<div class="title"/>').html( $(column.header()).text() ) )
 				.append( $('<div class="scroller"/>').append( list ) )
 		);
-	} );
+	},
+	
+	_toggle: function ( li ) {
+		var table = this.s.dt;
+		var li = $(li);
+		var pane = li.closest('div.pane');
 
-	$(container).on( 'click', 'li', function () {
-		if ( $(this).hasClass( 'selected' ) ) {
-			$(this).removeClass( 'selected' );
-		}
-		else {
-			$(this).addClass( 'selected' );
-		}
+		li.toggleClass( 'selected', ! li.hasClass( 'selected' ) );
 
-		var pane = $(this).closest('div.pane');
 		var filters = pane.find( 'li.selected' );
 
 		if ( filters.length === 0 ) {
@@ -116,51 +176,6 @@ function SearchPanes ( settings, opts ) {
 				} ).join('|'), true, false )
 				.draw();
 		}
-	} );
-
-
-	$(container).on( 'click', 'button.close', function () {
-		var pane = $(this).closest('div.pane');
-		pane.find( 'li.selected' ).removeClass( 'selected' );
-		pane.removeClass('filtering');
-
-		table
-			.column( pane.data('column') )
-			.search('')
-			.draw();
-	} );
-}
-
-
-$.extend( SearchPanes.prototype, {
-	_binData: function ( data, tags ) {
-		var out = {};
-		var add = function ( d ) {
-			if ( ! out[ d ] ) {
-				out[ d ] = 1;
-			}
-			else {
-				out[ d ]++;
-			}
-		};
-
-		data.each( function (d) {
-			if ( ! d ) {
-				return;
-			}
-
-			if ( tags ) {
-				var a = d.split(',');
-				for ( var i=0, ien=a.length ; i<ien ; i++ ) {
-					add( a[i] );
-				}
-			}
-			else {
-				add( d );
-			}
-		} );
-
-		return out;
 	}
 } );
 

features/searchPane/dataTables.searchPane.scss

@@ -13,7 +13,7 @@ div.dt-searchPane {
 		position: relative;
 		flex: 1;
 
-		margin: 0 0.5%;
+		margin: 1em 0.5%;
 		border: 1px solid #ccc;
 		
 		/*width: 15.5%;

features/searchPane/index.html

@@ -5,7 +5,7 @@
 		
 		<title>DataTables search pane example</title>
 
-		<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
+		<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
 		<link rel="stylesheet" type="text/css" href="dataTables.searchPane.css">
 		<style type="text/css">
 body {
@@ -17,8 +17,8 @@ body {
 }
 		</style>
 
-		<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
-		<script type="text/javascript" language="javascript" src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
+		<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
+		<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
 		<script type="text/javascript" language="javascript" src="dataTables.searchPane.js"></script>
 		<script type="text/javascript" charset="utf-8">
 			$(document).ready( function () {
@@ -35,6 +35,8 @@ body {
 		<div class="container">
 			<p style="text-align:center">Space for banner etc</p>
 
+			<div id="grouping" style="height: 200px;"> </div>
+
 			<table id="example" class="display nowrap" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -517,7 +519,6 @@ body {
 					</tr>
 				</tbody>
 			</table>
-			<div id="grouping" style="height: 200px;"/>
 			
 		</div>
 	</body>