@stackoverflow/stacks 1.0.0 → 1.2.0

package/lib/ts/controllers/s-table.ts

@@ -1,220 +1,220 @@
-import * as Stacks from "../stacks";
-
-export class TableController extends Stacks.StacksController {
-    static targets = ["column"];
-    readonly columnTarget!: Element;
-    readonly columnTargets!: Element[];
-
-    setCurrentSort(headElem: Element, direction: "asc" | "desc" | "none") {
-        if (["asc", "desc", "none"].indexOf(direction) < 0) {
-            throw "direction must be one of asc, desc, or none"
-        }
-        var controller = this;
-        this.columnTargets.forEach(function (target) {
-            var isCurrrent = target === headElem;
-
-            target.classList.toggle("is-sorted", isCurrrent && direction !== "none");
-
-            target.querySelectorAll(".js-sorting-indicator").forEach(function (icon) {
-                var visible = isCurrrent ? direction : "none";
-                icon.classList.toggle("d-none", !icon.classList.contains("js-sorting-indicator-" + visible));
-            });
-
-            if (!isCurrrent || direction === "none") {
-                controller.removeElementData(target, "sort-direction");
-            } else {
-                controller.setElementData(target, "sort-direction", direction);
-            }
-        });
-    };
-
-    sort(evt: Event) {
-        var controller = this;
-        var colHead = evt.currentTarget;
-        if (!(colHead instanceof HTMLTableCellElement)) {
-            throw "invalid event target";
-        }
-        var table = this.element as HTMLTableElement;
-        var tbody = table.tBodies[0];
-
-        // the column slot number of the clicked header
-        var colno = getCellSlot(colHead);
-
-        if (colno < 0) { // this shouldn't happen if the clicked element is actually a column head
-            return;
-        }
-
-        // an index of the <tbody>, so we can find out for each row which <td> element is
-        // in the same column slot as the header
-        var slotIndex = buildIndex(tbody);
-
-        // the default behavior when clicking a header is to sort by this column in ascending
-        // direction, *unless* it is already sorted that way
-        var direction = this.getElementData(colHead, "sort-direction") === "asc" ? -1 : 1;
-
-        var rows = Array.from(table.tBodies[0].rows);
-
-        // if this is still false after traversing the data, that means all values are integers (or empty)
-        // and thus we'll sort numerically.
-        var anyNonInt = false;
-
-        // data will be a list of tuples [value, rowNum], where value is what we're sorting by
-        var data: [string | number, number][] = [];
-        var firstBottomRow: HTMLTableRowElement;
-        rows.forEach(function (row, index) {
-            var force = controller.getElementData(row, "sort-to");
-            if (force === "top") {
-                return; // rows not added to the list will automatically end up at the top
-            } else if (force === "bottom") {
-                if (!firstBottomRow) {
-                    firstBottomRow = row;
-                }
-                return;
-            }
-            var cell = slotIndex[index][colno];
-            if (!cell) {
-                data.push(["", index]);
-                return;
-            }
-
-            // unless the to-be-sorted-by value is explicitly provided on the element via this attribute,
-            // the value we're using is the cell's text, trimmed of any whitespace
-            var explicit = controller.getElementData(cell, "sort-val");
-            var d = typeof explicit === "string" ? explicit : cell.textContent!.trim();
-
-            if ((d !== "") && (parseInt(d, 10) + "" !== d)) {
-                anyNonInt = true;
-            }
-            data.push([d, index]);
-        });
-
-        // If all values were integers (or empty cells), sort numerically, with empty cells treated as
-        // having the lowest possible value (i.e. sorted to the top if ascending, bottom if descending)
-        if (!anyNonInt) {
-            data.forEach(function (tuple) {
-                tuple[0] = tuple[0] === "" ? Number.MIN_VALUE : parseInt(tuple[0] as string, 10);
-            });
-        }
-
-        // We don't sort an array of <tr>, but instead an arrays of row *numbers*, because this way we
-        // can enforce stable sorting, i.e. rows that compare equal are guaranteed to remain in the same
-        // order (the JS standard does not gurantee this for sort()).
-        data.sort(function (a, b) {
-            // first compare the values (a[0])
-            if (a[0] > b[0]) {
-                return 1 * direction;
-            } else if (a[0] < b[0]) {
-                return -1 * direction;
-            } else {
-                // if the values are equal, compare the row numbers (a[1]) to guarantee stable sorting
-                // (note that this comparison is independent of the sorting direction)
-                return a[1] > b[1] ? 1 : -1;
-            }
-        });
-
-        // this is the actual reordering of the table rows
-        data.forEach(function (tup) {
-            var row = rows[tup[1]];
-            row.parentElement!.removeChild(row);
-            if (firstBottomRow) {
-                tbody.insertBefore(row, firstBottomRow);
-            } else {
-                tbody.appendChild(row);
-            }
-        });
-
-        // update the UI and set the `data-sort-direction` attribute if appropriate, so that the next click
-        // will cause sorting in descending direction
-        this.setCurrentSort(colHead, direction === 1 ? "asc" : "desc");
-    }
-
-}
-
-function buildIndex(section: HTMLTableSectionElement): HTMLTableCellElement[][] {
-    const result = buildIndexOrGetCellSlot(section);
-    if (!(result instanceof Array)) {
-        throw "shouldn't happen"
-    }
-    return result;
-}
-
-function getCellSlot(cell: HTMLTableCellElement): number {
-    if (!(cell.parentElement && cell.parentElement.parentElement instanceof HTMLTableSectionElement)) {
-        throw "invalid table"
-    }
-    const result = buildIndexOrGetCellSlot(cell.parentElement.parentElement, cell);
-    if (typeof result !== "number") {
-        throw "shouldn't happen"
-    }
-    return result
-}
-
-// Just because a <td> is the 4th *child* of its <tr> doesn't mean it belongs to the 4th *column*
-// of the table. Previous cells may have a colspan; cells in previous rows may have a rowspan.
-// Because we need to know which header cells and data cells belong together, we have to 1) find out
-// which column number (or "slot" as we call it here) the header cell has, and 2) for each row find
-// out which <td> cell corresponds to this slot (because those are the rows we're sorting by).
-//
-// That's what the following function does. If the second argument is not given, it returns an index
-// of the table, which is an array of arrays. Each of the sub-arrays corresponds to a table row. The
-// indices of the sub-array correspond to column slots; the values are the actual table cell elements.
-// For example index[4][3] is the <td> or <th> in row 4, column 3 of the table section (<tbody> or <thead>).
-// Note that this element is not necessarily even in the 4th (zero-based) <tr> -- if it has a rowSpan > 1,
-// it may also be in a previous <tr>.
-//
-// If the second argument is given, it's a <td> or <th> that we're trying to find, and the algorithm
-// stops as soon as it has found it and the function returns its slot number.
-function buildIndexOrGetCellSlot(section: HTMLTableSectionElement, findCell?: HTMLTableCellElement) {
-    var index = [];
-    var curRow = section.children[0];
-
-    // the elements of these two arrays are synchronized; the first array contains table cell elements,
-    // the second one contains a number that indicates for how many more rows this elements will
-    // exist (i.e. the value is initially one less than the cell's rowspan, and will be decreased for each row)
-    var growing: HTMLTableCellElement[] = [];
-    var growingRowsLeft: number[] = [];
-
-    // continue while we have actual <tr>'s left *or* we still have rowspan'ed elements that aren't done
-    while (curRow || growingRowsLeft.some(function (e) { return e !== 0; })) {
-        var curIndexRow: HTMLTableCellElement[] = [];
-        index.push(curIndexRow);
-
-        var curSlot = 0;
-        if (curRow) {
-            for (var curCellInd = 0; curCellInd < curRow.children.length; curCellInd++) {
-                while (growingRowsLeft[curSlot]) {
-                    growingRowsLeft[curSlot]--;
-                    curIndexRow[curSlot] = growing[curSlot];
-                    curSlot++;
-                }
-                var cell = curRow.children[curCellInd];
-                if (!(cell instanceof HTMLTableCellElement)) {
-                    throw "invalid table"
-                }
-                if (getComputedStyle(cell).display === "none") {
-                    continue;
-                }
-                if (cell === findCell) {
-                    return curSlot;
-                }
-                var nextFreeSlot = curSlot + cell.colSpan;
-                for (; curSlot < nextFreeSlot; curSlot++) {
-                    growingRowsLeft[curSlot] = cell.rowSpan - 1; // if any of these is already growing, the table is broken -- no guarantees of anything
-                    growing[curSlot] = cell;
-                    curIndexRow[curSlot] = cell;
-                }
-            }
-        }
-        while (curSlot < growing.length) {
-            if (growingRowsLeft[curSlot]) {
-                growingRowsLeft[curSlot]--;
-                curIndexRow[curSlot] = growing[curSlot];
-            }
-            curSlot++;
-        }
-        if (curRow) {
-            curRow = curRow.nextElementSibling!;
-        }
-    }
-    return findCell ? -1 : index; /* if findCell was given but we end up here, that means it isn't in this section */
-}
+import * as Stacks from "../stacks";
+
+export class TableController extends Stacks.StacksController {
+    static targets = ["column"];
+    readonly columnTarget!: Element;
+    readonly columnTargets!: Element[];
+
+    setCurrentSort(headElem: Element, direction: "asc" | "desc" | "none") {
+        if (["asc", "desc", "none"].indexOf(direction) < 0) {
+            throw "direction must be one of asc, desc, or none"
+        }
+        var controller = this;
+        this.columnTargets.forEach(function (target) {
+            var isCurrrent = target === headElem;
+
+            target.classList.toggle("is-sorted", isCurrrent && direction !== "none");
+
+            target.querySelectorAll(".js-sorting-indicator").forEach(function (icon) {
+                var visible = isCurrrent ? direction : "none";
+                icon.classList.toggle("d-none", !icon.classList.contains("js-sorting-indicator-" + visible));
+            });
+
+            if (!isCurrrent || direction === "none") {
+                controller.removeElementData(target, "sort-direction");
+            } else {
+                controller.setElementData(target, "sort-direction", direction);
+            }
+        });
+    };
+
+    sort(evt: Event) {
+        var controller = this;
+        var colHead = evt.currentTarget;
+        if (!(colHead instanceof HTMLTableCellElement)) {
+            throw "invalid event target";
+        }
+        var table = this.element as HTMLTableElement;
+        var tbody = table.tBodies[0];
+
+        // the column slot number of the clicked header
+        var colno = getCellSlot(colHead);
+
+        if (colno < 0) { // this shouldn't happen if the clicked element is actually a column head
+            return;
+        }
+
+        // an index of the <tbody>, so we can find out for each row which <td> element is
+        // in the same column slot as the header
+        var slotIndex = buildIndex(tbody);
+
+        // the default behavior when clicking a header is to sort by this column in ascending
+        // direction, *unless* it is already sorted that way
+        var direction = this.getElementData(colHead, "sort-direction") === "asc" ? -1 : 1;
+
+        var rows = Array.from(table.tBodies[0].rows);
+
+        // if this is still false after traversing the data, that means all values are integers (or empty)
+        // and thus we'll sort numerically.
+        var anyNonInt = false;
+
+        // data will be a list of tuples [value, rowNum], where value is what we're sorting by
+        var data: [string | number, number][] = [];
+        var firstBottomRow: HTMLTableRowElement;
+        rows.forEach(function (row, index) {
+            var force = controller.getElementData(row, "sort-to");
+            if (force === "top") {
+                return; // rows not added to the list will automatically end up at the top
+            } else if (force === "bottom") {
+                if (!firstBottomRow) {
+                    firstBottomRow = row;
+                }
+                return;
+            }
+            var cell = slotIndex[index][colno];
+            if (!cell) {
+                data.push(["", index]);
+                return;
+            }
+
+            // unless the to-be-sorted-by value is explicitly provided on the element via this attribute,
+            // the value we're using is the cell's text, trimmed of any whitespace
+            var explicit = controller.getElementData(cell, "sort-val");
+            var d = typeof explicit === "string" ? explicit : cell.textContent!.trim();
+
+            if ((d !== "") && (parseInt(d, 10) + "" !== d)) {
+                anyNonInt = true;
+            }
+            data.push([d, index]);
+        });
+
+        // If all values were integers (or empty cells), sort numerically, with empty cells treated as
+        // having the lowest possible value (i.e. sorted to the top if ascending, bottom if descending)
+        if (!anyNonInt) {
+            data.forEach(function (tuple) {
+                tuple[0] = tuple[0] === "" ? Number.MIN_VALUE : parseInt(tuple[0] as string, 10);
+            });
+        }
+
+        // We don't sort an array of <tr>, but instead an arrays of row *numbers*, because this way we
+        // can enforce stable sorting, i.e. rows that compare equal are guaranteed to remain in the same
+        // order (the JS standard does not gurantee this for sort()).
+        data.sort(function (a, b) {
+            // first compare the values (a[0])
+            if (a[0] > b[0]) {
+                return 1 * direction;
+            } else if (a[0] < b[0]) {
+                return -1 * direction;
+            } else {
+                // if the values are equal, compare the row numbers (a[1]) to guarantee stable sorting
+                // (note that this comparison is independent of the sorting direction)
+                return a[1] > b[1] ? 1 : -1;
+            }
+        });
+
+        // this is the actual reordering of the table rows
+        data.forEach(function (tup) {
+            var row = rows[tup[1]];
+            row.parentElement!.removeChild(row);
+            if (firstBottomRow) {
+                tbody.insertBefore(row, firstBottomRow);
+            } else {
+                tbody.appendChild(row);
+            }
+        });
+
+        // update the UI and set the `data-sort-direction` attribute if appropriate, so that the next click
+        // will cause sorting in descending direction
+        this.setCurrentSort(colHead, direction === 1 ? "asc" : "desc");
+    }
+
+}
+
+function buildIndex(section: HTMLTableSectionElement): HTMLTableCellElement[][] {
+    const result = buildIndexOrGetCellSlot(section);
+    if (!(result instanceof Array)) {
+        throw "shouldn't happen"
+    }
+    return result;
+}
+
+function getCellSlot(cell: HTMLTableCellElement): number {
+    if (!(cell.parentElement && cell.parentElement.parentElement instanceof HTMLTableSectionElement)) {
+        throw "invalid table"
+    }
+    const result = buildIndexOrGetCellSlot(cell.parentElement.parentElement, cell);
+    if (typeof result !== "number") {
+        throw "shouldn't happen"
+    }
+    return result
+}
+
+// Just because a <td> is the 4th *child* of its <tr> doesn't mean it belongs to the 4th *column*
+// of the table. Previous cells may have a colspan; cells in previous rows may have a rowspan.
+// Because we need to know which header cells and data cells belong together, we have to 1) find out
+// which column number (or "slot" as we call it here) the header cell has, and 2) for each row find
+// out which <td> cell corresponds to this slot (because those are the rows we're sorting by).
+//
+// That's what the following function does. If the second argument is not given, it returns an index
+// of the table, which is an array of arrays. Each of the sub-arrays corresponds to a table row. The
+// indices of the sub-array correspond to column slots; the values are the actual table cell elements.
+// For example index[4][3] is the <td> or <th> in row 4, column 3 of the table section (<tbody> or <thead>).
+// Note that this element is not necessarily even in the 4th (zero-based) <tr> -- if it has a rowSpan > 1,
+// it may also be in a previous <tr>.
+//
+// If the second argument is given, it's a <td> or <th> that we're trying to find, and the algorithm
+// stops as soon as it has found it and the function returns its slot number.
+function buildIndexOrGetCellSlot(section: HTMLTableSectionElement, findCell?: HTMLTableCellElement) {
+    var index = [];
+    var curRow = section.children[0];
+
+    // the elements of these two arrays are synchronized; the first array contains table cell elements,
+    // the second one contains a number that indicates for how many more rows this elements will
+    // exist (i.e. the value is initially one less than the cell's rowspan, and will be decreased for each row)
+    var growing: HTMLTableCellElement[] = [];
+    var growingRowsLeft: number[] = [];
+
+    // continue while we have actual <tr>'s left *or* we still have rowspan'ed elements that aren't done
+    while (curRow || growingRowsLeft.some(function (e) { return e !== 0; })) {
+        var curIndexRow: HTMLTableCellElement[] = [];
+        index.push(curIndexRow);
+
+        var curSlot = 0;
+        if (curRow) {
+            for (var curCellInd = 0; curCellInd < curRow.children.length; curCellInd++) {
+                while (growingRowsLeft[curSlot]) {
+                    growingRowsLeft[curSlot]--;
+                    curIndexRow[curSlot] = growing[curSlot];
+                    curSlot++;
+                }
+                var cell = curRow.children[curCellInd];
+                if (!(cell instanceof HTMLTableCellElement)) {
+                    throw "invalid table"
+                }
+                if (getComputedStyle(cell).display === "none") {
+                    continue;
+                }
+                if (cell === findCell) {
+                    return curSlot;
+                }
+                var nextFreeSlot = curSlot + cell.colSpan;
+                for (; curSlot < nextFreeSlot; curSlot++) {
+                    growingRowsLeft[curSlot] = cell.rowSpan - 1; // if any of these is already growing, the table is broken -- no guarantees of anything
+                    growing[curSlot] = cell;
+                    curIndexRow[curSlot] = cell;
+                }
+            }
+        }
+        while (curSlot < growing.length) {
+            if (growingRowsLeft[curSlot]) {
+                growingRowsLeft[curSlot]--;
+                curIndexRow[curSlot] = growing[curSlot];
+            }
+            curSlot++;
+        }
+        if (curRow) {
+            curRow = curRow.nextElementSibling!;
+        }
+    }
+    return findCell ? -1 : index; /* if findCell was given but we end up here, that means it isn't in this section */
+}