mirror of https://github.com/evilhero/mylar
Merge 79ebaa8d2c
into 389621476c
This commit is contained in:
commit
05819406d4
|
@ -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;
|
||||
}
|
|
@ -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;
|
||||
}
|
|
@ -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");
|
||||
}
|
||||
|
|
|
@ -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'
|
||||
} );
|
||||
|
||||
|
||||
}());
|
|
@ -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" }); }());
|
||||
|
||||
|
Loading…
Reference in New Issue