# HG changeset patch # User Laurens Holst # Date 1610893437 -3600 # Sun Jan 17 15:23:57 2021 +0100 # Node ID 47b22215f51a41339f0eaba14cbc978bf0c35063 # Parent 17fc9ea81b8560604ad10633bd2694f0ddc68fc2 z80instr: Update script to HTML5. diff --git a/js/tablesort.js b/resources/z80instr.js rename from js/tablesort.js rename to resources/z80instr.js --- a/js/tablesort.js +++ b/resources/z80instr.js @@ -1,169 +1,43 @@ -// -// Sortable tables script (by Grauw) -// ====================== -// Using standard DOM methods working in an XHTML environment. -// -// License: Public Domain (but feel free to mention my name ;)) -// -// Usage: -// * Include the script in your document head: -// * Put xmlns:g="http://www.grauw.nl/g" on your document tag (or elsewhere in scope). -// * Put the attribute g:sort="yes" on all tags you want to sort the column of. -// * Put onload="registerSort();" on your tag. -// -// Notes: -// * The g:sort attribute also accepts 'asc' and 'desc' as values, indicating the initial sort order. -// * The sort-text must be direct children of the table cells. -// * The script doesn't take colspan in account -// * This makes the page not validate anymore. Adding to the !DOCTYPE is possible, but cumbersome and -// pretty involved. The XHTML spec acknowledges this, but says work to address that is in progress. -// Personally, I suggest not to bother with it, and accept that the page is formally invalid. -// DTDs don't work well with namespaces anyway. -// -// - -var ns_g = "http://www.grauw.nl/g"; - -// -// Registers sort handler -// -function registerSort() { - // check if browser supports the script - elem = document.documentElement; - if (elem.hasAttributeNS && elem.getAttributeNS && elem.setAttributeNS && - elem.addEventListener && elem.replaceChild) { - var x = document.getElementsByTagName('th'); - for (var i=0; i < x.length; i++) { - if (x[i].hasAttributeNS(ns_g, 'sort')) { - x[i].addEventListener("click", doSort, false); - x[i].style.cursor = 'pointer'; - if (!x[i].hasAttribute('title')) { - x[i].setAttribute('title','Click to sort'); - } - } +for (const input of document.querySelectorAll("input.filter")) { + input.onchange = input.onkeyup = event => { + for (const table of document.querySelectorAll(input.dataset.target)) { + filter(table, input); } - } else { - window.status = "This page has sortable tables, however your browser does not support it. Get Mozilla, Firefox or Opera 8 for this functionality."; } } -function hasAttributeNS(obj, ns, attr) { - if (x[i].hasAttributeNS) { - return x[i].hasAttributeNS(ns_g, 'sort'); - } else { - return x[i].hasAttribute('g:sort'); +function filter(table, input) { + const upperQuery = input.value.toUpperCase(); + for (let i = 1; i < table.rows.length; i++) { + const row = table.rows[i]; + const match = row.textContent.toUpperCase().indexOf(upperQuery) != -1; + row.style.display = match ? "table-row" : "none"; } } -// -// Function which is triggered when a sortable table head is clicked -// -function doSort(e) { - var curelem = e.currentTarget; - var asc; - - if (curelem.getAttributeNS(ns_g, 'sort') != 'desc') { - asc = true; - curelem.setAttributeNS(ns_g, 'sort', 'desc'); - } else { - asc = false; - curelem.setAttributeNS(ns_g, 'sort', 'asc'); - } - - var sortpos = getElemPosition(curelem); - - // Find containing table element - var table = curelem.parentNode; - while (table.nodeName != 'table') { - table = table.parentNode; - } - - var sortlist = getSortList(table, sortpos); - var oldlist = getSortList(table, sortpos); - - if (asc) sortlist.sort(doCompareElem); - else sortlist.sort(doCompareElemDesc); - - for (var i=0; i < sortlist.length; i++) { - oldlist[i].parentNode.parentNode.replaceChild( - sortlist[i].parentNode.cloneNode(true), - oldlist[i].parentNode - ); - } -} - - -// -// Retrieves the position of the given element within its parent -// @param1 = element node -// -function getElemPosition(elem) { - var s = elem.parentNode.childNodes; - var a = 0; - for (var i=0; i < s.length; i++) { - if (s[i] == elem) return a; - if (s[i].nodeType == Node.ELEMENT_NODE) a++; +for (const table of document.querySelectorAll("table#instructiontable")) { + for (const th of table.querySelectorAll("th")) { + if (th.dataset.sort) { + th.style.cursor = "pointer"; + th.title = th.title || "Click to sort"; + th.onclick = event => sort(table, th); + } } } - -// -// Gets a list of the td's to be sorted -// @param1 = table node -// @param2 = column nr. to sort -// -function getSortList(table, sortpos) { - // if is present, only sort elements inside ... - if (table.getElementsByTagName('tbody').length > 0) - table = table.getElementsByTagName('tbody')[0]; - - var s = table.getElementsByTagName('tr'); - var nodelist = new Array(); - var nodelistpos = 0; - for (var i=0; i < s.length; i++) { - var a = 0; - var p = s[i].childNodes; - for (var j=0; j 0 ? "asc" : "desc"; + const column = th.cellIndex; + const collator = new Intl.Collator("en", { + numeric: th.dataset.type == "number", + sensitivity: "accent" + }); + for (const tbody of table.tBodies) { + const rows = Array.from(tbody.rows); + rows.sort((a, b) => collator.compare(a.cells[column].textContent, b.cells[column].textContent) * order); + for (const row of rows) { + tbody.appendChild(row); } } - return nodelist; } - - -// -// Interface which compares the two parameter elements -// -function doCompareElem(a, b) { - text1 = getTextForCompare(a); - text2 = getTextForCompare(b); - - if (text1 == text2) return 0; - else if (text1 > text2) return 1; - else return -1; -} - - -// -// Same as above, but reverse order -// -function doCompareElemDesc(a, b) { - return doCompareElem(b, a); -} - - -// -// This function retrieves the text inside an element, for comparison. -// -function getTextForCompare(elem) { - return elem.innerHTML.replace(/<.*?>/g, ''); -} - - - diff --git a/resources/z80instr.php b/resources/z80instr.php --- a/resources/z80instr.php +++ b/resources/z80instr.php @@ -1,27 +1,12 @@ - + Z80 / R800 instruction set - + - - - + @@ -50,19 +35,18 @@

Instruction set

-

Filter:

+

Filter:

- - - - - - - + + + + + + +
InstructionTiming
Z80
Timing
Z80+M1
Timing
R800
Timing
R800 +
- wait¹
OpcodeSizeInstructionTiming
Z80
Timing
Z80+M1
Timing
R800
Timing
R800 +
wait¹
OpcodeSize