logo

blog

My little blog can’t be this cute!
commit: 4b43d55cf35063a782cfb771dd87244780d0731d
parent: b055f5fde90c6992ad8f7ac6debf6377ba63ffd6
Author: Haelwenn (lanodan) Monnier <contact@hacktivis.me>
Date:   Mon, 24 Dec 2018 02:35:39 +0100

animelist: use my sorttable.js

Diffstat:

Manimelist.shtml14++++++++------
Acss/sorttable.css13+++++++++++++
Ajavascript/sorttable.js95+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
3 files changed, 116 insertions(+), 6 deletions(-)

diff --git a/animelist.shtml b/animelist.shtml @@ -3,13 +3,14 @@ <head> <!--#include file="templates/head.shtml" --> <title>lanodan’s cyber-home — Anime List</title> + <link rel="stylesheet" href="css/sorttable.css"/> </head> <body> <!--#set var="feedUrl" value='http://gitlab.com/lanodan/blog/commits/master/animelist.shtml.atom' --><!--#include file="/templates/en/nav.shtml" --> <!-- Sorted by Name --> <section> <h2 id="Planned">Planned</h2> - <table> + <table class="sortable"> <thead> <tr><th>Name</th><th>English Name</th><th>Comment</th></tr> </thead> @@ -29,7 +30,7 @@ <section> <!-- Reverse-Sorted by Last Update --> <h2 id="Watching">Watching</h2> - <table> + <table class="sortable"> <thead> <tr><th>Name</th><th>English Name</th><th>Started</th><th>Progress</th><th>Comment</th><th>Tags</th></tr> </thead> @@ -58,9 +59,9 @@ </section> <section> <h2 id="Dropped">Dropped</h2> - <table> + <table class="sortable"> <thead> - <tr><th>Name</th><th>English Name</th><th>Started</th><th>Progress</th><th>Comment</th><th>Tags</th></tr> + <tr><th class="sorttable_sorted">Name</th><th>English Name</th><th>Started</th><th>Progress</th><th>Comment</th><th>Tags</th></tr> </thead> <tbody> <tr><td>.hack//Beyond the world</td><td><td><td></td><td>Breaks the .hack and anime style</td></tr> @@ -73,9 +74,9 @@ </section> <section> <h2 id="Watched">Watched</h2> - <table> + <table class="sortable"> <thead> - <tr><th>Name</th><th>English Name</th><th>Started</th><th>Finnished</th><th>Comment</th><td>Tags</td></tr> + <tr><th class="sorttable_sorted">Name</th><th>English Name</th><th>Started</th><th>Finnished</th><th>Comment</th><td>Tags</td></tr> </thead> <tbody> <!--<tr><td>Steins;Gate: Oukoubakko no Poriomania</td></tr>--> @@ -304,5 +305,6 @@ </table> </section> <!--#include file="templates/en/footer.html" --> + <script src="javascript/sorttable.js"></script> </body> </html> diff --git a/css/sorttable.css b/css/sorttable.css @@ -0,0 +1,13 @@ +table.sortable th.made_sortable { + cursor: pointer; +} +table.sortable th.made_sortable:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort)::after { + content: "⭥"; + opacity: 0.5; +} +table.sortable th.made_sortable.sorttable_sorted:not(.sorttable_sorted_reverse):not(.sorttable_nosort)::after { + content: "⭣"; +} +table.sortable th.made_sortable.sorttable_sorted_reverse:not(.sorttable_sorted):not(.sorttable_nosort)::after { + content: "⭡"; +} diff --git a/javascript/sorttable.js b/javascript/sorttable.js @@ -0,0 +1,95 @@ +/* + * Copyright 2007 Stuart Langridge http://www.kryogenix.org/code/browser/sorttable/ + * Distributed under the terms of the X11 license + * + * Copyright 2018 Haelwenn (lanodan) Monnier <contact@hacktivis.me> + * Distributed under the terms of the CC-BY 4.0 License + */ + +/* Usage: + * Add <script src="sorttable.js"></script> to your HTML pages + * Add class="sortable" to any table you'd like to make sortable + * See sorttable.css for an example of styling + */ + +sorttable = { + done : false, + init : function() { + // quit if this function has already been called + if (sorttable.done) return; + // flag this function so we don't do the same thing twice + sorttable.done = true; + + var sortableElements = document.getElementsByClassName("sortable"); + Array.prototype.filter.call(sortableElements, function(sortableElement) { + if (sortableElement.nodeName == "TABLE") { sorttable.makeSortable(sortableElement); } + }); + }, + + makeSortable : function(table) { + // Only one thead row is supported + if (table.tHead.rows.length != 1) return; + // work through each column and calculate its type + headrow = table.tHead.rows[0].cells; + for (var i = 0; i < headrow.length; i++) { + if (!headrow[i].classList.contains("sorttable_nosort")) { // skip this col + // make it clickable to sort + headrow[i].sorttable_columnindex = i; + headrow[i].sorttable_tbody = table.tBodies[0]; + headrow[i].addEventListener("click", sorttable.innerSortFunction); + headrow[i].classList.add('made_sortable'); + } + } + }, + + innerSortFunction : function(e) { + if (this.classList.contains("sorttable_sorted")) { + sorttable.reverse(this.sorttable_tbody); + this.classList.replace('sorttable_sorted', 'sorttable_sorted_reverse'); + } else if (this.classList.contains("sorttable_sorted_reverse")) { + sorttable.reverse(this.sorttable_tbody); + this.classList.replace('sorttable_sorted_reverse', 'sorttable_sorted'); + } else { + // remove sorttable_sorted classes + theadRow = this.parentNode; + theadRow.childNodes.forEach(function(cell) { + cell.classList.remove('sorttable_sorted_reverse', 'sorttable_sorted'); + }); + // build an array to sort. This is a Schwartzian transform thing, + // i.e., we "decorate" each row with the actual sort key, + // sort based on the sort keys, and then put the rows back in order + // which is a lot faster because you only do getInnerText once per row + row_array = []; + col = this.sorttable_columnindex; + rows = this.sorttable_tbody.rows; + for (var j = 0; j < rows.length; j++) { + row_array[row_array.length] = [ sorttable.getElementValue(rows[j].cells[col]), rows[j] ]; + } + row_array.sort().reverse(); + tb = this.sorttable_tbody; + row_array.forEach(function(row) { tb.appendChild(row[1]); }); + delete row_array; + this.classList.add('sorttable_sorted'); + } + }, + + // Use data-value="" attribute if you want to override innerHTML + // Example: <td data-value="1337">Leet</td> + getElementValue : function(element) { + if (element.dataset.value) { + return element.dataset.value; + } else { + return element.innerText; + } + }, + + reverse : function(tbody) { + // reverse the rows in a tbody + newrows = []; + for (var i = 0; i < tbody.rows.length; i++) { newrows[newrows.length] = tbody.rows[i]; } + for (var i = newrows.length - 1; i >= 0; i--) { tbody.appendChild(newrows[i]); } + delete newrows; + } +}; + +sorttable.init()