commit: 060661ac604bb3e423c0bbb876c56f2e41e586e7
parent e2a1a87742082a026e701bb37c58b076ea937cd8
Author: Haelwenn (lanodan) Monnier <contact@hacktivis.me>
Date: Thu, 9 Mar 2023 05:07:42 +0100
javascript/sorttable.js: Declare functions outside object
Diffstat:
5 files changed, 107 insertions(+), 80 deletions(-)
diff --git a/animelist.shtml b/animelist.shtml
@@ -4,7 +4,7 @@
<!--#include file="templates/head.shtml" -->
<title>Anime List — lanodan’s cyber-home</title>
<link rel="stylesheet" href="css/sorttable.css?serial=2020091801"/>
- <script defer="" src="javascript/sorttable.js?serial=2020091801"></script>
+ <script defer="" src="javascript/sorttable.js?serial=2023030901"></script>
</head>
<body>
<!--#include file="/templates/en/nav.shtml" -->
diff --git a/javascript/sorttable.js b/javascript/sorttable.js
@@ -11,88 +11,115 @@
*/
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;
+ done : false
+};
+
+sorttable.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" || sortableElement.nodeName == "table")
+ {
+ sorttable.makeSortable(sortableElement);
+ }
+ });
+};
- var sortableElements = document.getElementsByClassName("sortable");
- Array.prototype.filter.call(sortableElements, function(sortableElement) {
- if (sortableElement.nodeName == "TABLE" || sortableElement.nodeName == "table") { sorttable.makeSortable(sortableElement); }
- });
- },
+sorttable.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++)
+ {
+ // skip this col
+ if(!headrow[i].classList.contains("sorttable_nosort"))
+ {
+ // make it clickable to sort
+ headrow[i].sorttable_columnindex = i;
+ headrow[i].sorttable_tbody = table.tBodies[0];
+ headrow[i].addEventListener("click", event => {
+ if(event.target)
+ {
+ sorttable.innerSortFunction(event.target)
+ }
+ });
+ headrow[i].addEventListener("keydown", event => {
+ if(event.target && (event.key && event.key == "Enter"))
+ {
+ sorttable.innerSortFunction(event.target);
+ }
+ });
+ headrow[i].setAttribute("tabindex", "0");
+ headrow[i].classList.add('made_sortable');
+ }
+ }
+};
- 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", event => { if(event.target){ sorttable.innerSortFunction(event.target) } });
- headrow[i].addEventListener("keydown", event => { if(event.target && (event.key && event.key == "Enter")){ sorttable.innerSortFunction(event.target); } });
- headrow[i].setAttribute("tabindex", "0");
- headrow[i].classList.add('made_sortable');
- }
- }
- },
+sorttable.innerSortFunction = function(tr) {
+ if(tr.classList.contains("sorttable_sorted"))
+ {
+ sorttable.reverse(tr.sorttable_tbody);
+ tr.classList.replace('sorttable_sorted', 'sorttable_sorted_reverse');
+ }
+ else if(tr.classList.contains("sorttable_sorted_reverse"))
+ {
+ sorttable.reverse(tr.sorttable_tbody);
+ tr.classList.replace('sorttable_sorted_reverse', 'sorttable_sorted');
+ }
+ else
+ {
+ // remove sorttable_sorted classes
+ theadRow = tr.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 = tr.sorttable_columnindex;
+ rows = tr.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 = tr.sorttable_tbody;
+ row_array.forEach(function(row) { tb.appendChild(row[1]); });
+ tr.classList.add('sorttable_sorted');
+ }
+};
- innerSortFunction : function(tr) {
- if (tr.classList.contains("sorttable_sorted")) {
- sorttable.reverse(tr.sorttable_tbody);
- tr.classList.replace('sorttable_sorted', 'sorttable_sorted_reverse');
- } else if (tr.classList.contains("sorttable_sorted_reverse")) {
- sorttable.reverse(tr.sorttable_tbody);
- tr.classList.replace('sorttable_sorted_reverse', 'sorttable_sorted');
- } else {
- // remove sorttable_sorted classes
- theadRow = tr.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 = tr.sorttable_columnindex;
- rows = tr.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 = tr.sorttable_tbody;
- row_array.forEach(function(row) { tb.appendChild(row[1]); });
- tr.classList.add('sorttable_sorted');
- }
- },
+// - Use data-value="" attribute if you want to override innerHTML
+// Example: <td data-value="1337">Leet</td>
+sorttable.getElementValue = function(element) {
+ if(element === undefined)
+ {
+ return "\u0000"; // null
+ console.log("Warning: Empty cells found");
+ };
- // Use data-value="" attribute if you want to override innerHTML
- // Example: <td data-value="1337">Leet</td>
- getElementValue : function(element) {
- if(element === undefined) {
- return "\u0000"; // null
- console.log("Warning: Empty cells found");
- }
- if (element.dataset.value) {
- return element.dataset.value;
- } else {
- return element.innerText;
- }
- },
+ return element.dataset.value ? element.dataset.value : 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.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()
diff --git a/mangalist.shtml b/mangalist.shtml
@@ -4,7 +4,7 @@
<!--#include file="templates/head.shtml" -->
<title>Manga List — lanodan’s cyber-home</title>
<link rel="stylesheet" href="css/sorttable.css?serial=2020091801"/>
- <script defer="" src="javascript/sorttable.js?serial=2020091801"></script>
+ <script defer="" src="javascript/sorttable.js?serial=2023030901"></script>
</head>
<body>
<!--#include file="/templates/en/nav.shtml" -->
diff --git a/notes/index.xhtml b/notes/index.xhtml
@@ -58,6 +58,6 @@
</table>
</main>
<!--#include file="/templates/en/footer.shtml" -->
- <script src="/javascript/sorttable.js?serial=2023030201"></script>
+ <script src="/javascript/sorttable.js?serial=2023030901"></script>
</body>
</html>
diff --git a/notes_index.pm b/notes_index.pm
@@ -65,7 +65,7 @@ print ' </tbody>
</table>
</main>
<!--#include file="/templates/en/footer.shtml" -->
- <script src="/javascript/sorttable.js?serial=2023030201"></script>
+ <script src="/javascript/sorttable.js?serial=2023030901"></script>
</body>
</html>
';
