mirror of
https://github.com/evilhero/mylar
synced 2025-03-09 21:33:42 +00:00
IMP: Add alphabetical index selector to main page
IMP: Add alphabetical index selector to main page. *** TESTED WITH SAFARI ONLY, needs further testing ***
This commit is contained in:
Barbeque Sauce
evilhero
parent
5ac745eda7
commit
ad64c31b36
3 changed files with 185 additions and 3 deletions
83
data/css/dataTables.alphabetSearch.css
Normal file
83
data/css/dataTables.alphabetSearch.css
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
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,18 +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">
|
||||
</%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>
|
||||
|
||||
function initThisPage() {
|
||||
$.fn.DataTable.ext.pager.numbers_length = 3;
|
||||
$('#series_table').dataTable( {
|
||||
var table = $('#series_table').dataTable( {
|
||||
"destroy": true,
|
||||
"sDom": '<"clear"f><"clear"lp><"clear">rt<"clear"ip>',
|
||||
"sDom": '<"clear"Af><"clear"lp><"clear">rt<"clear"ip>',
|
||||
"columnDefs": [
|
||||
{ "orderable": false, "targets": [5, 7, 10] },
|
||||
{ "visible": false, "targets": [5, 7, 10] },
|
||||
|
|
@ -132,7 +134,10 @@
|
|||
"search" : ""},
|
||||
"stateSave": true,
|
||||
"pageLength": 25,
|
||||
"pagingType": "simple_numbers"
|
||||
"pagingType": "simple_numbers",
|
||||
alphabetSearch: {
|
||||
column:1
|
||||
}
|
||||
});
|
||||
resetFilters("comic");
|
||||
}
|
||||
|
|
|
|||
94
data/js/dataTables.alphabetSearch.min.js
vendored
Normal file
94
data/js/dataTables.alphabetSearch.min.js
vendored
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
/*! 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 (/\d/.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 (/\d/.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…
Add table
Reference in a new issue