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

Feature - searchPanes: Code style with Prettier

Browse Source
pull/355/head
Allan Jardine 7 years ago
parent 797c3e6f90
commit e9c4e4a8ea
1 changed files with 194 additions and 175 deletions
Show Stats Download Patch File Download Diff File

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

@ -8,208 +8,227 @@
// - State saving integration // - State saving integration
// - Fix regex characters - (CEO) for example // - Fix regex characters - (CEO) for example
(function(factory) {
(function( factory ){ if (typeof define === 'function' && define.amd) {
if ( typeof define === 'function' && define.amd ) {
// AMD // AMD
define( ['jquery', 'datatables.net'], function ( $ ) { define(['jquery', 'datatables.net'], function($) {
return factory( $, window, document ); return factory($, window, document);
} ); });
} } else if (typeof exports === 'object') {
else if ( typeof exports === 'object' ) {
// CommonJS // CommonJS
module.exports = function (root, $) { module.exports = function(root, $) {
if ( ! root ) { if (!root) {
root = window; root = window;
} }
if ( ! $ || ! $.fn.dataTable ) { if (!$ || !$.fn.dataTable) {
$ = require('datatables.net')(root, $).$; $ = require('datatables.net')(root, $).$;
} }
return factory( $, root, root.document ); return factory($, root, root.document);
}; };
} } else {
else {
// Browser // Browser
factory( jQuery, window, document ); factory(jQuery, window, document);
} }
}(function( $, window, document, undefined ) { })(function($, window, document, undefined) {
'use strict'; 'use strict';
var DataTable = $.fn.dataTable; 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: $('<div/>')
.addClass( this.classes.container )
.appendTo( opts.container )
};
this.s = { function SearchPanes(settings, opts) {
dt: table var that = this;
}; var table = new DataTable.Api(settings);
table.columns(opts.columns).eq(0).each( function ( idx ) { this.classes = $.extend(true, {}, SearchPanes.classes);
that._pane( idx );
} );
$(this.dom.container) this.dom = {
.on( 'click', 'li', function () { container: $('<div/>')
that._toggle( this ); .addClass(this.classes.container)
} ) .appendTo(opts.container)
.on( 'click', 'button.'+this.classes.clear, function () { };
that._clear( $(this).closest('div.'+that.classes.pane.container) );
} );
}
this.s = {
dt: table
};
$.extend( SearchPanes.prototype, { table
_binData: function ( data ) { .columns(opts.columns)
var out = {}; .eq(0)
.each(function(idx) {
that._pane(idx);
});
$(this.dom.container)
.on('click', 'li', function() {
that._toggle(this);
})
.on('click', 'button.' + this.classes.clear, function() {
that._clear($(this).closest('div.' + that.classes.pane.container));
});
}
data.each( function (d) { $.extend(SearchPanes.prototype, {
if ( ! d ) { _binData: function(data) {
return; var out = {};
}
if ( ! out[ d ] ) { data.each(function(d) {
out[ d ] = 1; if (!d) {
} return;
else {
out[ d ]++;
}
} );
return out;
},
_clear: function ( pane ) {
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') )
.search('')
.draw();
},
_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 bins = this._binData( column.data().flatten() );
// On initialisation, do we need to set a filtering value from a
// saved state or init option?
var search = column.search();
search = search.length && search[0] ?
search[0].substr( 1, search[0].length-2 ).split('|') :
[];
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="'+itemClasses.label+'">'+data[i]+'</span>' )
.data( 'filter', data[i] )
.append( $('<span/>').addClass( itemClasses.count ).html( bins[ data[i] ] ) );
if ( $.inArray( data[i], search ) !== -1 ) {
li.addClass(itemClasses.selected);
} }
list.append( li ); if (!out[d]) {
} out[d] = 1;
} } else {
out[d]++;
}
});
return out;
},
_clear: function(pane) {
var classes = this.classes;
var itemSelected = classes.item.selected;
pane.find('li.' + itemSelected).removeClass(itemSelected);
pane.removeClass(classes.pane.active);
$(this.dom.container).append( this.s.dt
$('<div/>') .column(pane.data('column'))
.data( 'column', idx )
.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.'+classes.pane.container);
li.toggleClass( itemSelected, ! li.hasClass( itemSelected ) );
var filters = pane.find( 'li.'+itemSelected );
if ( filters.length === 0 ) {
pane.removeClass( classes.pane.active );
table
.column( pane.data('column') )
.search('') .search('')
.draw(); .draw();
},
_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 bins = this._binData(column.data().flatten());
// On initialisation, do we need to set a filtering value from a
// saved state or init option?
var search = column.search();
search =
search.length && search[0]
? search[0].substr(1, search[0].length - 2).split('|')
: [];
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="' + itemClasses.label + '">' + data[i] + '</span>'
)
.data('filter', data[i])
.append(
$('<span/>')
.addClass(itemClasses.count)
.html(bins[data[i]])
);
if ($.inArray(data[i], search) !== -1) {
li.addClass(itemClasses.selected);
}
list.append(li);
}
}
$(this.dom.container).append(
$('<div/>')
.data('column', idx)
.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.' + classes.pane.container);
li.toggleClass(itemSelected, !li.hasClass(itemSelected));
var filters = pane.find('li.' + itemSelected);
if (filters.length === 0) {
pane.removeClass(classes.pane.active);
table
.column(pane.data('column'))
.search('')
.draw();
} else {
pane.addClass(classes.pane.active);
table
.column(pane.data('column'))
.search(
$.map(filters, function(filter) {
return $(filter).data('filter');
}).join('|'),
true,
false
)
.draw();
}
} }
else { });
pane.addClass( classes.pane.active );
table SearchPanes.classes = {
.column( pane.data('column') ) container: 'dt-searchPanes',
.search( $.map( filters, function (filter) { clear: 'clear',
return $(filter).data('filter'); pane: {
} ).join('|'), true, false ) active: 'filtering',
.draw(); container: 'pane',
title: 'title',
scroller: 'scroller'
},
item: {
selected: 'selected',
label: 'label',
count: 'count'
} }
} };
} );
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) { $(document).on('init.dt', function(e, settings, json) {
if ( e.namespace !== 'dt' ) { if (e.namespace !== 'dt') {
return; return;
} }
var init = settings.oInit.searchPane; var init = settings.oInit.searchPane;
var defaults = DataTable.defaults.searchPane; var defaults = DataTable.defaults.searchPane;
if ( init || defaults ) { if (init || defaults) {
var opts = $.extend( {}, init, defaults ); var opts = $.extend({}, init, defaults);
if ( init !== false ) { if (init !== false) {
new SearchPanes( settings, opts ); new SearchPanes(settings, opts);
}
} }
} });
} ); });
}));

Write Preview
Loading…
Cancel
Save