This commit is contained in:
barbequesauce 2018-08-22 21:35:45 +00:00 committed by GitHub
commit 05819406d4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 223 additions and 188 deletions

View File

@ -0,0 +1,39 @@
div.alphabet {
position: relative;
display: table;
width: 100%;
margin-bottom: 1em;
}
div.alphabet span {
display: table-cell;
color: #3174c7;
cursor: pointer;
text-align: center;
width: 3.5%
}
div.alphabet span:hover {
text-decoration: underline;
}
div.alphabet span.active {
color: black;
}
div.alphabet span.empty {
color: red;
}
div.alphabetInfo {
display: block;
position: absolute;
background-color: #111;
border-radius: 3px;
color: white;
top: 2em;
height: 1.8em;
padding-top: 0.4em;
text-align: center;
z-index: 1;
}

View File

@ -1,83 +0,0 @@
div.alphabet {
clear:both;
position:relative;
margin:0.5em 0;
}
@media screen and (max-width:963px){
div.alphabet {
text-align:center;
}
}
div.alphabet ul {
display:inline-block;
margin:0;
padding:0;
list-style:none;
}
div.alphabet li {
display:inline-block;
}
div.alphabet a {
display:inline-block;
cursor:pointer;
text-align:center;
text-decoration:none;
box-sizing:content-box;
padding:0.2em 0.1em;
min-width:1.3em;
color:#333 !important;
border:1px solid transparent;
border-radius:2px;
}
div.alphabet a:hover {
color:#FFF !important;
border:1px solid #111;
background-color:#585858;
background:linear-gradient(to bottom, #585858 0%, #111 100%);
}
div.alphabet a:active {
outline:none;
background-color:#2b2b2b;
background:linear-gradient(to bottom, #2b2b2b 0%, #0c0c0c 100%);
box-shadow:inset 0 0 3px #111;
}
div.alphabet a.empty {
color:#888 !important;
}
div.alphabet a.active,
div.alphabet a.active.empty {
color:#333 !important;
border:1px solid #979797;
background-color:#FFF;
background:linear-gradient(to bottom, #fff 0%, #dcdcdc 100%)
}
div.alphabet .alphabet-info-display {
margin-right:0.5em;
}
div.alphabet div.alphabet-info {
position:absolute;
border:1px solid #111;
background-color:#585858;
background:linear-gradient(to bottom, #585858 0%, #111 100%);
border-radius:2px;
color:#FFF;
margin-top:0.2em;
padding:0.2em 0.4em;
text-align:center;
opacity:0;
z-index:9999;
}
tr.alphabet-group, tr.alphabet-group:hover {
background-color:rgba(0,0,0,0.15) !important;
}

View File

@ -101,22 +101,20 @@
<%def name="headIncludes()">
<link rel="stylesheet" href="interfaces/default/css/data_table.css">
// <link type="text/css" href="css/dataTables.alphabetSearch.css" rel="stylesheet">
<link type="text/css" href="css/alphabetSearch.css" rel="stylesheet">
</%def>
<%def name="javascriptIncludes()">
<script src="js/libs/jquery.dataTables.min.js"></script>
<script src="js/libs/full_numbers_no_ellipses.js"></script>
// <script src="js/dataTables.alphabetSearch.min.js"></script>
<script src="js/alphabetSearch.js"></script>
<script>
function initThisPage() {
$.fn.DataTable.ext.pager.numbers_length = 3;
// var table = $('#series_table').dataTable( {
$('#series_table').dataTable( {
"destroy": true,
"sDom": '<"clear"f><"clear"lp><"clear">rt<"clear"ip>',
// "sDom": '<"clear"Af><"clear"lp><"clear">rt<"clear"ip>',
var table = $('#series_table').dataTable( {
"destroy": true,
"sDom": '<"clear"Af><"clear"lp><"clear">rt<"clear"ip>',
"columnDefs": [
{ "orderable": false, "targets": [5, 7, 10] },
{ "visible": false, "targets": [5, 7, 10] },
@ -136,10 +134,10 @@
"search" : ""},
"stateSave": true,
"pageLength": 25,
"pagingType": "simple_numbers"
// alphabetSearch: {
// column:1
// }
"pagingType": "simple_numbers",
alphabetSearch: {
column:1
}
});
resetFilters("comic");
}

175
data/js/alphabetSearch.js Normal file
View File

@ -0,0 +1,175 @@
/*! AlphabetSearch for DataTables v1.0.0
* 2014 SpryMedia Ltd - datatables.net/license
*/
/**
* @summary AlphabetSearch
* @description Show an alphabet aloneside a table providing search input options
* See http://datatables.net/blog/2014-09-22 for details
* @version 1.0.0
* @file dataTables.alphabetSearch.js
* @author SpryMedia Ltd (www.sprymedia.co.uk)
* @contact www.sprymedia.co.uk/contact
* @copyright Copyright 2014 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(){
// Search function
$.fn.dataTable.Api.register( 'alphabetSearch()', function ( searchTerm ) {
this.iterator( 'table', function ( context ) {
context.alphabetSearch = searchTerm;
} );
return this;
} );
// Recalculate the alphabet display for updated data
$.fn.dataTable.Api.register( 'alphabetSearch.recalc()', function ( searchTerm ) {
this.iterator( 'table', function ( context ) {
draw(
new $.fn.dataTable.Api( context ),
$('div.alphabet', this.table().container())
);
} );
return this;
} );
// Search plug-in
$.fn.dataTable.ext.search.push( function ( context, searchData ) {
// Ensure that there is a search applied to this table before running it
if ( ! context.alphabetSearch ) {
return true;
}
if ( context.alphabetSearch.match('nonalpha') && !(searchData[1].charAt(0).match(/^[a-zA-Z]/
return true;
}
if ( searchData[1].charAt(0) === context.alphabetSearch ) {
return true;
}
return false;
} );
// Private support methods
function bin ( data ) {
var letter, bins = {};
var nonalpha = 0;
bins['nonalpha'] = 0;
for ( var i=0, ien=data.length ; i<ien ; i++ ) {
letter = data[i].charAt(13).toUpperCase();
if ( !letter.match(/^[A-Z]/) ) {
bins['nonalpha']++;
}
else if ( bins[letter] ) {
bins[letter]++;
}
else {
bins[letter] = 1;
}
}
return bins;
}
function draw ( table, alphabet )
{
alphabet.empty();
alphabet.append( 'Search: ' );
var columnData = table.column(1).data();
var bins = bin( columnData );
$('<span class="clear active"/>')
.data( 'letter', '' )
.data( 'match-count', columnData.length )
.html( 'None' )
.appendTo( alphabet );
$('<span class="clear active"/>')
.data( 'letter', 'nonalpha' )
.data( 'match-count', bins['nonalpha'] || 0 )
.html( '0-9' )
.appendTo( alphabet );
for ( var i=0 ; i<26 ; i++ ) {
var letter = String.fromCharCode( 65 + i );
$('<span/>')
.data( 'letter', letter )
.data( 'match-count', bins[letter] || 0 )
.addClass( ! bins[letter] ? 'empty' : '' )
.html( letter )
.appendTo( alphabet );
}
$('<div class="alphabetInfo"></div>')
.appendTo( alphabet );
}
$.fn.dataTable.AlphabetSearch = function ( context ) {
var table = new $.fn.dataTable.Api( context );
var alphabet = $('<div class="alphabet"/>');
draw( table, alphabet );
// Trigger a search
alphabet.on( 'click', 'span', function () {
alphabet.find( '.active' ).removeClass( 'active' );
$(this).addClass( 'active' );
table
.alphabetSearch( $(this).data('letter') )
.draw();
} );
// Mouse events to show helper information
alphabet
.on( 'mouseenter', 'span', function () {
alphabet
.find('div.alphabetInfo')
.css( {
opacity: 1,
left: $(this).position().left,
width: $(this).width()
} )
.html( $(this).data('match-count') );
} )
.on( 'mouseleave', 'span', function () {
alphabet
.find('div.alphabetInfo')
.css('opacity', 0);
} );
// API method to get the alphabet container node
this.node = function () {
return alphabet;
};
};
$.fn.DataTable.AlphabetSearch = $.fn.dataTable.AlphabetSearch;
// Register a search plug-in
$.fn.dataTable.ext.feature.push( {
fnInit: function ( settings ) {
var search = new $.fn.dataTable.AlphabetSearch( settings );
return search.node();
},
cFeature: 'A'
} );
}());

View File

@ -1,94 +0,0 @@
/*! AlphabetSearch for DataTables v1.2.4
* 2014 SpryMedia Ltd - datatables.net/license
* Gyrocode - MIT License
*/
(function() { $.fn.dataTable.Api.register("alphabetSearch()", function(searchTerm) { this.iterator("table", function(context) { context.alphabetSearch.letter = searchTerm; }); return this; });
$.fn.dataTable.Api.register("alphabetSearch.recalc()", function() { this.iterator("table", function(context) { draw(new $.fn.dataTable.Api(context), $("div.alphabet", this.table()
.container()), context); }); return this; });
$.fn.dataTable.ext.search.push(function(context, searchData) { if (!context.hasOwnProperty("alphabetSearch")) { return true; } if (!context.alphabetSearch.letterSearch) { return true; } var letter = searchData[context.alphabetSearch.column].toString()
.replace(/<.*?>/g, "")
.charAt(0)
.toUpperCase(); if (context.alphabetSearch.letterSearch !== "#") { if (letter === context.alphabetSearch.letterSearch) { return true; } } else { if (/[^a-zA-Z]/.test(letter)) { return true; } } return false; });
$.fn.dataTable.ext.order["alphabetSearch"] = function(context, col) { var order_col = this.api()
.order()[0][0]; var order_method = this.api()
.order()[0][1]; if (order_col !== context.alphabetSearch.column) { context.alphabetSearch.pass = 0; } var data = this.api()
.column(col, { order: "index" })
.data()
.map(function(value, index) { var letter = value.replace(/<.*?>/g, "")
.charAt(0)
.toUpperCase(); return (order_col === context.alphabetSearch.column) ? ((!context.alphabetSearch.pass) ? "" : ((order_method === "asc") ? letter : String.fromCharCode(65535 - letter.charCodeAt(0)))) : letter; }); if (order_col === context.alphabetSearch.column) { if (!context.alphabetSearchPass) { context.alphabetSearch.pass = 0; } context.alphabetSearch.pass = (context.alphabetSearch.pass + 1) % 2; } return data; };
function bin(data) { var letter, bins = {}; for (var i = 0, ien = data.length; i < ien; i++) { letter = data[i].toString()
.replace(/<.*?>/g, "")
.charAt(0)
.toUpperCase(); if (/[^a-zA-Z]/.test(letter)) { letter = "#"; } if (bins[letter]) { bins[letter]++; } else { bins[letter] = 1; } } return bins; }
function draw(table, alphabet, context) { alphabet.empty(); if (context.oLanguage.alphabetSearch.infoDisplay !== "") { $('<span class="alphabet-info-display"></span>')
.html(context.oLanguage.alphabetSearch.infoDisplay)
.appendTo(alphabet); } var columnData = table.column(context.alphabetSearch.column, { search: "applied" })
.data(); var bins = bin(columnData); var alphabetList = $("<ul/>");
$("<a/>")
.attr("href", "javascript:;")
.data("letter", "")
.data("match-count", columnData.length)
.addClass(((!context.alphabetSearch.letter) ? "active" : ""))
.html("<span>" + context.oLanguage.alphabetSearch.infoAll + "</span>")
.wrap("<li/>")
.parent()
.appendTo(alphabetList); for (var i = 0; i < context.oLanguage.alphabetSearch.alphabet.length; i++) { var letter = context.oLanguage.alphabetSearch.alphabet[i];
$("<a/>")
.attr("href", "javascript:;")
.data("letter", letter)
.data("match-count", bins[letter] || 0)
.addClass((!bins[letter] ? "empty" : "") + ((context.alphabetSearch.letter === letter) ? " active" : ""))
.html("<span>" + letter + "</span>")
.wrap("<li/>")
.parent()
.appendTo(alphabetList); } alphabetList.appendTo(alphabet);
$('<div class="alphabet-info"></div>')
.appendTo(alphabet); if (context.alphabetSearch.letter) { context.alphabetSearch.letterSearch = context.alphabetSearch.letter;
table.draw();
context.alphabetSearch.letterSearch = ""; } table.one("search", function(e, context) { var api = new $.fn.dataTable.Api(context);
api.alphabetSearch.recalc(); }); } $.fn.dataTable.AlphabetSearch = function(context) { var table = new $.fn.dataTable.Api(context); var alphabet = $('<div class="alphabet"/>');
context.oLanguage.alphabetSearch = $.extend({ "alphabet": "#ABCDEFGHIJKLMNOPQRSTUVWXYZ", "infoDisplay": "Display:", "infoAll": "All" }, ((context.oLanguage.alphabetSearch) ? context.oLanguage.alphabetSearch : {}));
context.oLanguage.alphabetSearch.alphabet.toUpperCase();
context.alphabetSearch = $.extend({ column: 0 }, $.isPlainObject(context.oInit.alphabetSearch) ? context.oInit.alphabetSearch : {}, { letter: "", letterSearch: "", pass: 0 }); if (context.alphabetSearch.column >= 0 && context.alphabetSearch.column < context.aoColumns.length) { context.aoColumns[context.alphabetSearch.column].sSortDataType = "alphabetSearch"; } if (context.hasOwnProperty("aaSortingFixed") && typeof context.aaSortingFixed === "object") { if ($.isArray(context.aaSortingFixed)) { if (context.aaSortingFixed.length && !$.isArray(context.aaSortingFixed[0])) { context.aaSortingFixed = [
[context.alphabetSearch.column, "asc"], context.aaSortingFixed
]; } else { context.aaSortingFixed.unshift([context.alphabetSearch.column, "asc"]); } } else { if (!context.aaSortingFixed.hasOwnProperty("pre")) { context.aaSortingFixed.pre = []; } if (context.aaSortingFixed.pre.length && !$.isArray(context.aaSortingFixed.pre[0])) { context.aaSortingFixed.pre = [
[context.alphabetSearch.column, "asc"], context.aaSortingFixed.pre
]; } else { context.aaSortingFixed.pre.unshift([context.alphabetSearch.column, "asc"]); } } } else { context.aaSortingFixed = [context.alphabetSearch.column, "asc"]; } draw(table, alphabet, context);
alphabet.on("click", "a", function(e) { e.preventDefault();
alphabet.find(".active")
.removeClass("active");
$(this)
.addClass("active");
table.alphabetSearch($(this)
.data("letter"))
.draw(); });
alphabet.on("mouseenter", "a", function() { var $el = $(this); var el_pos = $el.position(); var $alphabet_info = $(".alphabet-info", alphabet);
$alphabet_info.html($el.data("match-count"));
$alphabet_info.css({ opacity: 1, left: el_pos.left + Math.round(($el.outerWidth() - $alphabet_info.outerWidth()) / 2), top: $(this)
.position()
.top + $el.outerHeight() }); })
.on("mouseleave", "a", function() { alphabet.find("div.alphabet-info")
.css("opacity", 0); });
table.on("draw", function(e, context) { var api = new $.fn.dataTable.Api(context); var col_total = api.columns()
.nodes()
.length; var rows = api.rows({ page: "current" })
.nodes(); var group_last = null;
api.column(context.alphabetSearch.column, { page: "current" })
.data()
.each(function(name, index) { var group = name.replace(/<.*?>/g, "")
.charAt(0)
.toUpperCase(); if (group_last !== group) { $(rows)
.eq(index)
.before('<tr class="alphabet-group" style="display:none;"><td colspan="' + col_total + '">' + group + "</td></tr>");
group_last = group; } }); if (!rows.length && context.alphabetSearch) { var letter = context.alphabetSearch.letter;
$(api.table()
.body())
.prepend('<tr class="alphabet-group" style="display:none;"><td colspan="' + col_total + '">' + letter + "</td></tr>"); } });
this.node = function() { return alphabet; }; };
$.fn.DataTable.AlphabetSearch = $.fn.dataTable.AlphabetSearch;
$.fn.dataTable.ext.feature.push({ fnInit: function(settings) { var search = new $.fn.dataTable.AlphabetSearch(settings); return search.node(); }, cFeature: "A" }); }());