From 797c3e6f90c66adcc2140c5ff870468ffd1248a5 Mon Sep 17 00:00:00 2001 From: Allan Jardine Date: Thu, 30 Nov 2017 11:36:53 +0000 Subject: [PATCH] Feature - searchPanes: Class names can be defined --- features/searchPane/dataTables.searchPane.css | 28 +++--- features/searchPane/dataTables.searchPane.js | 99 +++++++++++-------- .../searchPane/dataTables.searchPane.scss | 2 +- 3 files changed, 71 insertions(+), 58 deletions(-) diff --git a/features/searchPane/dataTables.searchPane.css b/features/searchPane/dataTables.searchPane.css index 574d0b0..097566a 100644 --- a/features/searchPane/dataTables.searchPane.css +++ b/features/searchPane/dataTables.searchPane.css @@ -1,4 +1,4 @@ -div.dt-searchPane { +div.dt-searchPanes { display: flex; flex-direction: row; flex-wrap: nowrap; @@ -8,18 +8,18 @@ div.dt-searchPane { height: 100%; margin: 1em 0; } -div.dt-searchPane div.pane { +div.dt-searchPanes div.pane { position: relative; flex: 1; - margin: 0 0.5%; + margin: 1em 0.5%; border: 1px solid #ccc; /*width: 15.5%; margin: 0 0.583333333%;*/ } -div.dt-searchPane div.pane button[type=button] { +div.dt-searchPanes div.pane button[type=button] { display: none; } -div.dt-searchPane div.pane.filtering button[type=button] { +div.dt-searchPanes div.pane.filtering button[type=button] { display: block; position: absolute; right: 6px; @@ -29,10 +29,10 @@ div.dt-searchPane div.pane.filtering button[type=button] { border-radius: 3px; cursor: pointer; } -div.dt-searchPane div.pane.filtering button[type=button]:hover { +div.dt-searchPanes div.pane.filtering button[type=button]:hover { background: rgba(0, 0, 0, 0.2); } -div.dt-searchPane div.pane div.title { +div.dt-searchPanes div.pane div.title { box-sizing: border-box; height: 30px; padding: 0.35em; @@ -40,7 +40,7 @@ div.dt-searchPane div.pane div.title { background-color: rgba(0, 0, 0, 0.075); border-bottom: 1px solid #ddd; } -div.dt-searchPane div.pane div.scroller { +div.dt-searchPanes div.pane div.scroller { position: absolute; top: 30px; bottom: 0; @@ -48,25 +48,25 @@ div.dt-searchPane div.pane div.scroller { right: 0; overflow: auto; } -div.dt-searchPane div.pane div.scroller ul { +div.dt-searchPanes div.pane div.scroller ul { list-style: none; margin: 0; padding: 0; } -div.dt-searchPane div.pane div.scroller ul li { +div.dt-searchPanes div.pane div.scroller ul li { position: relative; margin: 0; padding: 0; cursor: pointer; } -div.dt-searchPane div.pane div.scroller ul li:nth-child(odd) { +div.dt-searchPanes div.pane div.scroller ul li:nth-child(odd) { background: rgba(0, 0, 0, 0.03); } -div.dt-searchPane div.pane div.scroller ul li.selected { +div.dt-searchPanes div.pane div.scroller ul li.selected { background: #3276b1; color: white; } -div.dt-searchPane div.pane div.scroller ul li span.label { +div.dt-searchPanes div.pane div.scroller ul li span.label { display: inline-block; box-sizing: border-box; white-space: nowrap; @@ -76,7 +76,7 @@ div.dt-searchPane div.pane div.scroller ul li span.label { vertical-align: middle; padding: 0.2em 0.3em; } -div.dt-searchPane div.pane div.scroller ul li span.count { +div.dt-searchPanes div.pane div.scroller ul li span.count { display: inline-block; width: 14%; margin-right: 1%; diff --git a/features/searchPane/dataTables.searchPane.js b/features/searchPane/dataTables.searchPane.js index f433440..ab86201 100644 --- a/features/searchPane/dataTables.searchPane.js +++ b/features/searchPane/dataTables.searchPane.js @@ -1,5 +1,4 @@ // TODO -// - Tidy up class names // - 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 @@ -43,16 +42,19 @@ var DataTable = $.fn.dataTable; function SearchPanes ( settings, opts ) { var that = this; var table = new DataTable.Api( settings ); + + this.classes = $.extend( true, {}, SearchPanes.classes ); + + this.dom = { + container: $('
') + .addClass( this.classes.container ) + .appendTo( opts.container ) + }; this.s = { dt: table }; - this.dom = { - container: $('
') - .appendTo( opts.container ) - } - table.columns(opts.columns).eq(0).each( function ( idx ) { that._pane( idx ); } ); @@ -61,37 +63,26 @@ function SearchPanes ( settings, opts ) { .on( 'click', 'li', function () { that._toggle( this ); } ) - .on( 'click', 'button.close', function () { - that._clear( $(this).closest('div.pane') ); + .on( 'click', 'button.'+this.classes.clear, function () { + that._clear( $(this).closest('div.'+that.classes.pane.container) ); } ); } $.extend( SearchPanes.prototype, { - _binData: function ( data, tags ) { + _binData: function ( data ) { 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'); - var tags = $( column.header() ).hasClass('tags'); - var bins = this._binData( column.data().flatten(), tags ); + var bins = this._binData( column.data().flatten() ); // On initialisation, do we need to set a filtering value from a // saved state or init option? @@ -122,19 +118,17 @@ $.extend( SearchPanes.prototype, { search[0].substr( 1, search[0].length-2 ).split('|') : []; - var data = tags ? - table.ajax.json().tags : - column.data().unique().sort().toArray(); + var data = column.data().unique().sort().toArray(); for ( var i=0, ien=data.length ; i') - .html( ''+data[i]+'' ) + .html( ''+data[i]+'' ) .data( 'filter', data[i] ) - .append( $('').html( bins[ data[i] ] ) ); + .append( $('').addClass( itemClasses.count ).html( bins[ data[i] ] ) ); if ( $.inArray( data[i], search ) !== -1 ) { - li.addClass('selected'); + li.addClass(itemClasses.selected); } list.append( li ); @@ -142,33 +136,36 @@ $.extend( SearchPanes.prototype, { } $(this.dom.container).append( - $('
') + $('
') .data( 'column', idx ) - .addClass( search.length ? 'filtering' : '' ) - .append( '' ) - .append( $('
').html( $(column.header()).text() ) ) - .append( $('
').append( list ) ) + .addClass( paneClasses.container ) + .addClass( search.length ? paneClasses.active : '' ) + .append( $('').addClass(this.classes.clear) ) + .append( $('
').addClass(paneClasses.title).html( $(column.header()).text() ) ) + .append( $('
').addClass(paneClasses.scroller).append( list ) ) ); }, _toggle: function ( li ) { + var classes = this.classes; + var itemSelected = classes.item.selected; var table = this.s.dt; var li = $(li); - var pane = li.closest('div.pane'); + var pane = li.closest('div.'+classes.pane.container); - li.toggleClass( 'selected', ! li.hasClass( 'selected' ) ); + li.toggleClass( itemSelected, ! li.hasClass( itemSelected ) ); - var filters = pane.find( 'li.selected' ); + var filters = pane.find( 'li.'+itemSelected ); if ( filters.length === 0 ) { - pane.removeClass('filtering'); + pane.removeClass( classes.pane.active ); table .column( pane.data('column') ) .search('') .draw(); } else { - pane.addClass('filtering'); + pane.addClass( classes.pane.active ); table .column( pane.data('column') ) .search( $.map( filters, function (filter) { @@ -179,6 +176,22 @@ $.extend( SearchPanes.prototype, { } } ); +SearchPanes.classes = { + container: 'dt-searchPanes', + clear: 'clear', + pane: { + active: 'filtering', + container: 'pane', + title: 'title', + scroller: 'scroller' + }, + item: { + selected: 'selected', + label: 'label', + count: 'count' + } +}; + $(document).on( 'init.dt', function (e, settings, json) { diff --git a/features/searchPane/dataTables.searchPane.scss b/features/searchPane/dataTables.searchPane.scss index 28b3625..1776353 100644 --- a/features/searchPane/dataTables.searchPane.scss +++ b/features/searchPane/dataTables.searchPane.scss @@ -1,5 +1,5 @@ -div.dt-searchPane { +div.dt-searchPanes { display:flex; flex-direction: row; flex-wrap: nowrap;