Azaki
/
Plugins
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Feature - searchPanes: Class names can be defined

Browse Source
pull/355/head
Allan Jardine 7 years ago
parent e221ce9c3d
commit 797c3e6f90
3 changed files with 71 additions and 58 deletions
Show Stats Download Patch File Download Diff File

28
features/searchPane/dataTables.searchPane.css
Unescape View File

@ -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%;

99
features/searchPane/dataTables.searchPane.js
Unescape View File

@ -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
@ -44,14 +43,17 @@ function SearchPanes ( settings, opts ) {
var that = this;
var table = new DataTable.Api( settings );
this.s = {
dt: table
};
this.classes = $.extend( true, {}, SearchPanes.classes );
this.dom = {
container: $('<div class="dt-searchPane"/>')
container: $('<div/>')
.addClass( this.classes.container )
.appendTo( opts.container )
}
};
this.s = {
dt: table
};
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<ien ; i++ ) {
add( a[i] );
}
if ( ! out[ d ] ) {
out[ d ] = 1;
}
else {
add( d );
out[ d ]++;
}
} );
@ -99,8 +90,11 @@ $.extend( SearchPanes.prototype, {
},
_clear: function ( pane ) {
pane.find( 'li.selected' ).removeClass( 'selected' );
pane.removeClass('filtering');
var classes = this.classes;
var itemSelected = classes.item.selected;
pane.find( 'li.'+itemSelected ).removeClass( itemSelected );
pane.removeClass( classes.pane.active );
this.s.dt
.column( pane.data('column') )
@ -109,11 +103,13 @@ $.extend( SearchPanes.prototype, {
},
_pane: function ( idx ) {
var classes = this.classes;
var itemClasses = classes.item;
var paneClasses = classes.pane;
var table = this.s.dt;
var column = table.column( idx );
var list = $('<ul/>');
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<ien ; i++ ) {
if ( data[i] ) {
var li = $('<li/>')
.html( '<span class="label">'+data[i]+'</span>' )
.html( '<span class="'+itemClasses.label+'">'+data[i]+'</span>' )
.data( 'filter', data[i] )
.append( $('<span class="count" />').html( bins[ data[i] ] ) );
.append( $('<span/>').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(
$('<div class="pane"/>')
$('<div/>')
.data( 'column', idx )
.addClass( search.length ? 'filtering' : '' )
.append( '<button type="button" class="close">&times;</button>' )
.append( $('<div class="title"/>').html( $(column.header()).text() ) )
.append( $('<div class="scroller"/>').append( list ) )
.addClass( paneClasses.container )
.addClass( search.length ? paneClasses.active : '' )
.append( $('<button type="button">&times;</button>').addClass(this.classes.clear) )
.append( $('<div/>').addClass(paneClasses.title).html( $(column.header()).text() ) )
.append( $('<div/>').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) {

2
features/searchPane/dataTables.searchPane.scss
Unescape View File

@ -1,5 +1,5 @@
div.dt-searchPane {
div.dt-searchPanes {
display:flex;
flex-direction: row;
flex-wrap: nowrap;

Write Preview
Loading…
Cancel
Save