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:
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()
