Feature - search pane: Small styling tweaks and tidy up

pull/355/head
Allan Jardine 7 years ago
parent d63f22010b
commit f5a02ca6f2

@ -12,8 +12,7 @@ div.dt-searchPanes div.pane {
flex: 1;
margin: 1em 0.5%;
border: 1px solid #ccc;
/*width: 15.5%;
margin: 0 0.583333333%;*/
border-radius: 3px;
}
div.dt-searchPanes div.pane button[type=button] {
display: none;
@ -25,7 +24,7 @@ div.dt-searchPanes div.pane.filtering button[type=button] {
top: 6px;
border: 1px solid #999;
background: rgba(0, 0, 0, 0.1);
border-radius: 3px;
border-radius: 16px;
cursor: pointer;
}
div.dt-searchPanes div.pane.filtering button[type=button]:hover {
@ -33,15 +32,15 @@ div.dt-searchPanes div.pane.filtering button[type=button]:hover {
}
div.dt-searchPanes div.pane div.title {
box-sizing: border-box;
height: 30px;
padding: 0.35em;
height: 36px;
padding: 9px 0.35em;
font-size: 1.1em;
background-color: rgba(0, 0, 0, 0.075);
border-bottom: 1px solid #ddd;
background-color: #e8e9eb;
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
div.dt-searchPanes div.pane div.scroller {
position: absolute;
top: 30px;
top: 36px;
bottom: 0;
left: 0;
right: 0;
@ -80,8 +79,7 @@ div.dt-searchPanes div.pane div.scroller ul li span.count {
width: 14%;
margin-right: 1%;
font-size: 0.8em;
color: white;
text-align: center;
background-color: #3276b1;
background-color: rgba(50, 118, 177, 0.5);
border-radius: 3px;
}

@ -1,8 +1,23 @@
// TODO
// - Styling for selected
// - Styling for container / header
// - Styling for clear option
/*! SearchPane 0.0.1
* 2017 SpryMedia Ltd - datatables.net/license
*/
/**
* @summary SearchPane
* @description Search Panes for DataTables columns
* @version 0.0.1
* @author SpryMedia Ltd (www.sprymedia.co.uk)
* @copyright Copyright 2017 SpryMedia Ltd.
*
* This source file is free software, available under the following license:
* MIT license - http://datatables.net/license/mit
*
* This source file is distributed in the hope that it will be useful, but
* WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
* or FITNESS FOR A PARTICULAR PURPOSE. See the license files for details.
*
* For details please refer to: http://www.datatables.net
*/
(function(factory) {
if (typeof define === 'function' && define.amd) {
// AMD
@ -40,7 +55,7 @@
container: $('<div/>').addClass(this.classes.container)
};
this.c = $.extend( true, {}, SearchPanes.defaults, opts );
this.c = $.extend(true, {}, SearchPanes.defaults, opts);
this.s = {
dt: table
@ -67,7 +82,7 @@
}
$.extend(SearchPanes.prototype, {
rebuild: function () {
rebuild: function() {
var that = this;
this.s.dt
@ -78,17 +93,15 @@
});
},
_attach: function () {
_attach: function() {
var container = this.c.container;
var host = typeof container === 'function' ?
container( this.s.dt ) :
container;
var host =
typeof container === 'function' ? container(this.s.dt) : container;
if ( this.c.insert === 'prepend' ) {
$(this.dom.container).prependTo( host );
}
else {
$(this.dom.container).appendTo( host );
if (this.c.insert === 'prepend') {
$(this.dom.container).prependTo(host);
} else {
$(this.dom.container).appendTo(host);
}
},
@ -133,16 +146,14 @@
var bins = this._binData(column.data().flatten());
// Don't show the pane if there isn't enough variance in the data
if ( this._variance(bins) < this.c.threshold ) {
if (this._variance(bins) < this.c.threshold) {
return;
}
// On initialisation, do we need to set a filtering value from a
// saved state or init option?
var search = column.search();
search = search
? search.substr(1, search.length - 2).split('|')
: [];
search = search ? search.substr(1, search.length - 2).split('|') : [];
var data = column
.data()
@ -163,10 +174,10 @@
.html(bins[data[i]])
);
if ( search.length ) {
var escaped = data[i].replace ?
$.fn.dataTable.util.escapeRegex( data[i] ) :
data[i];
if (search.length) {
var escaped = data[i].replace
? $.fn.dataTable.util.escapeRegex(data[i])
: data[i];
if ($.inArray(escaped, search) !== -1) {
li.addClass(itemClasses.selected);
@ -198,19 +209,16 @@
);
var container = this.dom.container;
var replace = container.children().map( function () {
if ( $(this).data('column') == idx ) {
var replace = container.children().map(function() {
if ($(this).data('column') == idx) {
return this;
}
} );
console.log( replace );
});
if ( replace.length ) {
replace.replaceWith( pane );
}
else {
$(container).append( pane );
if (replace.length) {
replace.replaceWith(pane);
} else {
$(container).append(pane);
}
},
@ -236,10 +244,14 @@
table
.column(pane.data('column'))
.search(
'^'+$.map(filters, function(filter) {
var d = $(filter).data('filter').toString();
return $.fn.dataTable.util.escapeRegex( d );
}).join('|')+'$',
'^' +
$.map(filters, function(filter) {
var d = $(filter)
.data('filter')
.toString();
return $.fn.dataTable.util.escapeRegex(d);
}).join('|') +
'$',
true,
false
)
@ -247,25 +259,25 @@
}
},
_variance: function ( d ) {
var data = $.map( d, function (val, key) {
_variance: function(d) {
var data = $.map(d, function(val, key) {
return val;
} );
});
var count = data.length;
var sum = 0;
for ( var i=0, ien=count ; i<ien ; i++ ) {
for (var i = 0, ien = count; i < ien; i++) {
sum += data[i];
}
var mean = sum / count;
var varSum = 0;
for ( var i=0, ien=count ; i<ien ; i++ ) {
varSum += Math.pow( mean - data[i], 2 );
for (var i = 0, ien = count; i < ien; i++) {
varSum += Math.pow(mean - data[i], 2);
}
return varSum / (count-1);
},
return varSum / (count - 1);
}
});
SearchPanes.classes = {
@ -285,7 +297,7 @@
};
SearchPanes.defaults = {
container: function ( dt ) {
container: function(dt) {
return dt.table().container();
},
columns: undefined,
@ -293,22 +305,18 @@
threshold: 0.5
};
SearchPanes.version = "0.0.1";
SearchPanes.version = '0.0.1';
$.fn.dataTable.SearchPanes = SearchPanes;
$.fn.DataTable.SearchPanes = SearchPanes;
DataTable.Api.register( 'searchPanes.rebuild()', function () {
return this.iterator( 'table', function (ctx) {
if ( ctx.searchPane ) {
DataTable.Api.register('searchPanes.rebuild()', function() {
return this.iterator('table', function(ctx) {
if (ctx.searchPane) {
ctx.searchPane.rebuild();
}
} );
} );
});
});
$(document).on('init.dt', function(e, settings, json) {
if (e.namespace !== 'dt') {

@ -1 +1 @@
div.dt-searchPane{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-around;align-content:flex-start;align-items:stretch;height:100%;margin:1em 0}div.dt-searchPane div.pane{position:relative;flex:1;margin:0 0.5%;border:1px solid #ccc}div.dt-searchPane div.pane button[type=button]{display:none}div.dt-searchPane div.pane.filtering button[type=button]{display:block;position:absolute;right:6px;top:6px;border:1px solid #999;background:rgba(0,0,0,0.1);border-radius:3px;cursor:pointer}div.dt-searchPane div.pane.filtering button[type=button]:hover{background:rgba(0,0,0,0.2)}div.dt-searchPane div.pane div.title{box-sizing:border-box;height:30px;padding:0.35em;font-size:1.1em;background-color:rgba(0,0,0,0.075);border-bottom:1px solid #ddd}div.dt-searchPane div.pane div.scroller{position:absolute;top:30px;bottom:0;left:0;right:0;overflow:auto}div.dt-searchPane div.pane div.scroller ul{list-style:none;margin:0;padding:0}div.dt-searchPane 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){background:rgba(0,0,0,0.03)}div.dt-searchPane div.pane div.scroller ul li.selected{background:#3276b1;color:white}div.dt-searchPane div.pane div.scroller ul li span.label{display:inline-block;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:85%;vertical-align:middle;padding:0.2em 0.3em}div.dt-searchPane div.pane div.scroller ul li span.count{display:inline-block;width:14%;margin-right:1%;font-size:0.8em;color:white;text-align:center;background-color:#3276b1;border-radius:3px}
div.dt-searchPanes{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-around;align-content:flex-start;align-items:stretch;height:200px}div.dt-searchPanes div.pane{position:relative;flex:1;margin:1em 0.5%;border:1px solid #ccc;border-radius:3px}div.dt-searchPanes div.pane button[type=button]{display:none}div.dt-searchPanes div.pane.filtering button[type=button]{display:block;position:absolute;right:6px;top:6px;border:1px solid #999;background:rgba(0,0,0,0.1);border-radius:16px;cursor:pointer}div.dt-searchPanes div.pane.filtering button[type=button]:hover{background:rgba(0,0,0,0.2)}div.dt-searchPanes div.pane div.title{box-sizing:border-box;height:36px;padding:9px 0.35em;font-size:1.1em;background-color:#e8e9eb;border-bottom:1px solid rgba(0,0,0,0.15)}div.dt-searchPanes div.pane div.scroller{position:absolute;top:36px;bottom:0;left:0;right:0;overflow:auto}div.dt-searchPanes div.pane div.scroller ul{list-style:none;margin:0;padding:0}div.dt-searchPanes div.pane div.scroller ul li{position:relative;margin:0;padding:0;cursor:pointer}div.dt-searchPanes div.pane div.scroller ul li:nth-child(odd){background:rgba(0,0,0,0.03)}div.dt-searchPanes div.pane div.scroller ul li.selected{background:#3276b1;color:white}div.dt-searchPanes div.pane div.scroller ul li span.label{display:inline-block;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:85%;vertical-align:middle;padding:0.2em 0.3em}div.dt-searchPanes div.pane div.scroller ul li span.count{display:inline-block;width:14%;margin-right:1%;font-size:0.8em;text-align:center;background-color:rgba(50,118,177,0.5);border-radius:3px}

@ -1,8 +1,25 @@
var $jscomp=$jscomp||{};$jscomp.scope={};$jscomp.findInternal=function(a,b,c){a instanceof String&&(a=String(a));for(var d=a.length,e=0;e<d;e++){var f=a[e];if(b.call(c,f,e,a))return{i:e,v:f}}return{i:-1,v:void 0}};$jscomp.ASSUME_ES5=!1;$jscomp.ASSUME_NO_NATIVE_MAP=!1;$jscomp.ASSUME_NO_NATIVE_SET=!1;$jscomp.defineProperty=$jscomp.ASSUME_ES5||"function"==typeof Object.defineProperties?Object.defineProperty:function(a,b,c){a!=Array.prototype&&a!=Object.prototype&&(a[b]=c.value)};
$jscomp.getGlobal=function(a){return"undefined"!=typeof window&&window===a?a:"undefined"!=typeof global&&null!=global?global:a};$jscomp.global=$jscomp.getGlobal(this);$jscomp.polyfill=function(a,b,c,d){if(b){c=$jscomp.global;a=a.split(".");for(d=0;d<a.length-1;d++){var e=a[d];e in c||(c[e]={});c=c[e]}a=a[a.length-1];d=c[a];b=b(d);b!=d&&null!=b&&$jscomp.defineProperty(c,a,{configurable:!0,writable:!0,value:b})}};
/*!
Copyright 2017 SpryMedia Ltd.
This source file is free software, available under the following license:
MIT license - http://datatables.net/license/mit
This source file is distributed in the hope that it will be useful, but
WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
or FITNESS FOR A PARTICULAR PURPOSE. See the license files for details.
For details please refer to: http://www.datatables.net
SearchPane 0.0.1
2017 SpryMedia Ltd - datatables.net/license
*/
var $jscomp=$jscomp||{};$jscomp.scope={};$jscomp.findInternal=function(a,e,c){a instanceof String&&(a=String(a));for(var g=a.length,d=0;d<g;d++){var l=a[d];if(e.call(c,l,d,a))return{i:d,v:l}}return{i:-1,v:void 0}};$jscomp.ASSUME_ES5=!1;$jscomp.ASSUME_NO_NATIVE_MAP=!1;$jscomp.ASSUME_NO_NATIVE_SET=!1;$jscomp.defineProperty=$jscomp.ASSUME_ES5||"function"==typeof Object.defineProperties?Object.defineProperty:function(a,e,c){a!=Array.prototype&&a!=Object.prototype&&(a[e]=c.value)};
$jscomp.getGlobal=function(a){return"undefined"!=typeof window&&window===a?a:"undefined"!=typeof global&&null!=global?global:a};$jscomp.global=$jscomp.getGlobal(this);$jscomp.polyfill=function(a,e,c,g){if(e){c=$jscomp.global;a=a.split(".");for(g=0;g<a.length-1;g++){var d=a[g];d in c||(c[d]={});c=c[d]}a=a[a.length-1];g=c[a];e=e(g);e!=g&&null!=e&&$jscomp.defineProperty(c,a,{configurable:!0,writable:!0,value:e})}};
$jscomp.polyfill("Array.prototype.find",function(a){return a?a:function(a,c){return $jscomp.findInternal(this,a,c).v}},"es6-impl","es3");
(function(a){"function"===typeof define&&define.amd?define(["jquery","datatables.net"],function(b){return a(b,window,document)}):"object"===typeof exports?module.exports=function(b,c){b||(b=window);c&&c.fn.dataTable||(c=require("datatables.net")(b,c).$);return a(c,b,b.document)}:a(jQuery,window,document)})(function(a,b,c,d){function e(c,b){var p=this,k=new f.Api(c),e=a('<div class="dt-searchPane"/>').appendTo(b.container);k.columns(b.columns).eq(0).each(function(c){for(var b=k.column(c),m=a("<ul/>"),
d=a(b.header()).hasClass("tags"),n=p._binData(b.data().flatten(),d),g=b.search(),g=g.length&&g[0]?g[0].substr(1,g[0].length-2).split("|"):[],d=d?k.ajax.json().tags:b.data().unique().sort().toArray(),h=0,f=d.length;h<f;h++)if(d[h]){var l=a("<li/>").html('<span class="label">'+d[h]+"</span>").data("filter",d[h]).append(a('<span class="count" />').html(n[d[h]]));-1!==a.inArray(d[h],g)&&l.addClass("selected");m.append(l)}a(e).append(a('<div class="pane"/>').data("column",c).addClass(g.length?"filtering":
"").append('<button type="button" class="close">&times;</button>').append(a('<div class="title"/>').html(a(b.header()).text())).append(a('<div class="scroller"/>').append(m)))});a(e).on("click","li",function(){a(this).hasClass("selected")?a(this).removeClass("selected"):a(this).addClass("selected");var b=a(this).closest("div.pane"),c=b.find("li.selected");0===c.length?(b.removeClass("filtering"),k.column(b.data("column")).search("").draw()):(b.addClass("filtering"),k.column(b.data("column")).search(a.map(c,
function(b){return a(b).data("filter")}).join("|"),!0,!1).draw())});a(e).on("click","button.close",function(){var b=a(this).closest("div.pane");b.find("li.selected").removeClass("selected");b.removeClass("filtering");k.column(b.data("column")).search("").draw()})}var f=a.fn.dataTable;a.extend(e.prototype,{_binData:function(a,b){var c={};a.each(function(a){if(a)if(b){a=a.split(",");for(var d=0,e=a.length;d<e;d++){var f=a[d];c[f]?c[f]++:c[f]=1}}else c[a]?c[a]++:c[a]=1});return c}});a(c).on("init.dt",
function(b,c,d){"dt"===b.namespace&&(b=c.oInit.searchPane,d=f.defaults.searchPane,b||d)&&(d=a.extend({},b,d),!1!==b&&new e(c,d))})});
(function(a){"function"===typeof define&&define.amd?define(["jquery","datatables.net"],function(e){return a(e,window,document)}):"object"===typeof exports?module.exports=function(e,c){e||(e=window);c&&c.fn.dataTable||(c=require("datatables.net")(e,c).$);return a(c,e,e.document)}:a(jQuery,window,document)})(function(a,e,c,g){function d(b,h){var f=this;b=new l.Api(b);this.classes=a.extend(!0,{},d.classes);this.dom={container:a("<div/>").addClass(this.classes.container)};this.c=a.extend(!0,{},d.defaults,
h);this.s={dt:b};b.settings()[0].searchPane=this;b.columns(this.c.columns).eq(0).each(function(a){f._pane(a)});a(this.dom.container).on("click","li",function(){f._toggle(this)}).on("click","button."+this.classes.clear,function(){f._clear(a(this).closest("div."+f.classes.pane.container))});this._attach()}var l=a.fn.dataTable;a.extend(d.prototype,{rebuild:function(){var a=this;this.s.dt.columns(this.c.columns).eq(0).each(function(b){a._pane(b)})},_attach:function(){var b=this.c.container,b="function"===
typeof b?b(this.s.dt):b;"prepend"===this.c.insert?a(this.dom.container).prependTo(b):a(this.dom.container).appendTo(b)},_binData:function(a){var b={};a.each(function(a){a&&(b[a]?b[a]++:b[a]=1)});return b},_clear:function(a){var b=this.classes,f=b.item.selected;a.find("li."+f).removeClass(f);a.removeClass(b.pane.active);this.s.dt.column(a.data("column")).search("").draw()},_pane:function(b){var h=this.classes,f=h.item,h=h.pane,c=this.s.dt.column(b),e=a("<ul/>"),d=this._binData(c.data().flatten());
if(!(this._variance(d)<this.c.threshold)){for(var g=c.search(),g=g?g.substr(1,g.length-2).split("|"):[],m=c.data().unique().sort().toArray(),k=0,l=m.length;k<l;k++)if(m[k]){var n=a("<li/>").html('<span class="'+f.label+'">'+m[k]+"</span>").data("filter",m[k]).append(a("<span/>").addClass(f.count).html(d[m[k]]));if(g.length){var p=m[k].replace?a.fn.dataTable.util.escapeRegex(m[k]):m[k];-1!==a.inArray(p,g)&&n.addClass(f.selected)}e.append(n)}f=a("<div/>").data("column",b).addClass(h.container).addClass(g.length?
h.active:"").append(a('<button type="button">&times;</button>').addClass(this.classes.clear)).append(a("<div/>").addClass(h.title).html(a(c.header()).text())).append(a("<div/>").addClass(h.scroller).append(e));h=this.dom.container;c=h.children().map(function(){if(a(this).data("column")==b)return this});c.length?c.replaceWith(f):a(h).append(f)}},_toggle:function(b){var c=this.classes,f=c.item.selected,e=this.s.dt;b=a(b);var d=b.closest("div."+c.pane.container);b.toggleClass(f,!b.hasClass(f));b=d.find("li."+
f);0===b.length?(d.removeClass(c.pane.active),e.column(d.data("column")).search("").draw()):(d.addClass(c.pane.active),e.column(d.data("column")).search("^"+a.map(b,function(b){b=a(b).data("filter").toString();return a.fn.dataTable.util.escapeRegex(b)}).join("|")+"$",!0,!1).draw())},_variance:function(b){b=a.map(b,function(a,b){return a});for(var c=b.length,f=0,d=0,e=c;d<e;d++)f+=b[d];for(var f=f/c,g=0,d=0,e=c;d<e;d++)g+=Math.pow(f-b[d],2);return g/(c-1)}});d.classes={container:"dt-searchPanes",clear:"clear",
pane:{active:"filtering",container:"pane",title:"title",scroller:"scroller"},item:{selected:"selected",label:"label",count:"count"}};d.defaults={container:function(a){return a.table().container()},columns:g,insert:"prepend",threshold:.5};d.version="0.0.1";a.fn.dataTable.SearchPanes=d;a.fn.DataTable.SearchPanes=d;l.Api.register("searchPanes.rebuild()",function(){return this.iterator("table",function(a){a.searchPane&&a.searchPane.rebuild()})});a(c).on("init.dt",function(b,c,e){"dt"===b.namespace&&(b=
c.oInit.searchPane,e=l.defaults.searchPane,b||e)&&(e=a.extend({},b,e),!1!==b&&new d(c,e))})});

@ -14,6 +14,7 @@ div.dt-searchPanes {
margin: 1em 0.5%;
border: 1px solid #ccc;
border-radius: 3px;
button[type=button] {
display: none;
@ -27,7 +28,7 @@ div.dt-searchPanes {
top: 6px;
border: 1px solid #999;
background: rgba(0,0,0,0.1);
border-radius: 3px;
border-radius: 16px;
cursor: pointer;
&:hover {
@ -38,16 +39,16 @@ div.dt-searchPanes {
div.title {
box-sizing: border-box;
height: 30px;
padding: 0.35em;
height: 36px;
padding: 9px 0.35em;
font-size: 1.1em;
background-color: rgba(0,0,0,0.075);
border-bottom: 1px solid #ddd;
background-color: #e8e9eb;
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
div.scroller {
position: absolute;
top: 30px;
top: 36px;
bottom: 0;
left: 0;
right: 0;
@ -89,9 +90,8 @@ div.dt-searchPanes {
width: 14%;
margin-right: 1%;
font-size: 0.8em;
color: white;
text-align: center;
background-color: #3276b1;
background-color: rgba(50,118,177, 0.5);
border-radius: 3px;
}
}

@ -31,8 +31,6 @@ body {
</head>
<body>
<div class="container">
<p style="text-align:center">Space for banner etc</p>
<table id="example" class="display nowrap" cellspacing="0" width="100%">
<thead>
<tr>

@ -52,8 +52,7 @@ div.searchTable {
$(document).ready( function () {
$('#example').DataTable( {
searchPane: {
container: '.searchPanes',
columns: [1, 2, 4]
container: '.searchPanes'
}
} );
} );
@ -61,8 +60,6 @@ div.searchTable {
</head>
<body>
<div class="container">
<p style="text-align:center">Space for banner etc</p>
<div class="searchGrid">
<div class="searchTable">
<table id="example" class="display nowrap" cellspacing="0" width="100%">

Loading…
Cancel
Save