@@ -744,60 +744,72 @@ html_header = """
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
+const triangleUp = String.fromCodePoint(32, 9652);
+const triangleDown = String.fromCodePoint(32, 9662);
+var lastColumnName = false;
+
function sortGrid(sortLabel){
+ let i = 0;
let pkgSortArray = [], sortedPkgArray = [], pkgStringSortArray = [], pkgNumSortArray = [];
- let columnValues = Array.from(document.getElementsByClassName(sortLabel));
-
- columnValues.shift();
- columnValues.forEach((listing) => {
- let sortArr = [];
- sortArr[0] = listing.id.replace(sortLabel+"_", "");
- if (!listing.innerText){
- sortArr[1] = -1;
- } else {
- sortArr[1] = listing.innerText;
- };
- pkgSortArray.push(sortArr);
- })
- pkgSortArray.forEach((listing) => {
- if ( isNaN(parseInt(listing[1], 10)) ){
- pkgStringSortArray.push(listing);
- } else {
- listing[1] = parseFloat(listing[1]);
- pkgNumSortArray.push(listing);
- };
- })
- sortedStringPkgArray = pkgStringSortArray.sort(function(a, b) {
- const nameA = a[1].toUpperCase(); // ignore upper and lowercase
- const nameB = b[1].toUpperCase(); // ignore upper and lowercase
- if (nameA < nameB) { return -1; };
- if (nameA > nameB) { return 1; };
- return 0; // names must be equal
- });
- sortedNumPkgArray = pkgNumSortArray.sort(function(a, b) {
- return a[1] - b[1];
- });
-
- let triangleUp = String.fromCodePoint(32, 9652);
- let triangleDown = String.fromCodePoint(32, 9662);
- let columnName = document.getElementById(sortLabel);
-
- if (columnName.lastElementChild.innerText == triangleDown) {
- columnName.lastElementChild.innerText = triangleUp;
- sortedStringPkgArray.reverse();
- sortedNumPkgArray.reverse();
- sortedPkgArray = sortedNumPkgArray.concat(sortedStringPkgArray)
- } else {
- columnName.lastElementChild.innerText = triangleDown;
- sortedPkgArray = sortedStringPkgArray.concat(sortedNumPkgArray)
- }
-
- sortedPkgArray.forEach((listing) => {
- let row = Array.from(document.getElementsByClassName(listing[0]));
- let packageGrid = document.getElementById("package-grid");
- row.forEach((element) => { packageGrid.append(element)});
- })
-}
+ const columnValues = Array.from(document.getElementsByClassName(sortLabel));
+ const columnName = document.getElementById(sortLabel);
+ let lastStyle = document.getElementById("sort-css");
+
+ if (lastStyle){
+ lastStyle.disable = true;
+ lastStyle.remove();
+ };
+ const styleElement = document.createElement('style');
+ styleElement.id = "sort-css";
+ document.head.appendChild(styleElement);
+ const styleSheet = styleElement.sheet;
+
+ columnValues.shift();
+ columnValues.forEach((listing) => {
+ let sortArr = [];
+ sortArr[0] = listing.id.replace(sortLabel+"_", "");
+ if (!listing.innerText){
+ sortArr[1] = -1;
+ } else {
+ sortArr[1] = listing.innerText;
+ };
+ pkgSortArray.push(sortArr);
+ });
+ pkgSortArray.forEach((listing) => {
+ if ( isNaN(parseInt(listing[1], 10)) ){
+ pkgStringSortArray.push(listing);
+ } else {
+ listing[1] = parseFloat(listing[1]);
+ pkgNumSortArray.push(listing);
+ };
+ });
+
+ let sortedStringPkgArray = pkgStringSortArray.sort((a, b) => {
+ if (a[1].toUpperCase() < b[1].toUpperCase()) { return -1; };
+ if (a[1].toUpperCase() > b[1].toUpperCase()) { return 1; };
+ return 0;
+ });
+ let sortedNumPkgArray = pkgNumSortArray.sort((a, b) => a[1] - b[1]);
+
+ if (columnName.lastElementChild.innerText == triangleDown) {
+ columnName.lastElementChild.innerText = triangleUp;
+ sortedStringPkgArray.reverse();
+ sortedNumPkgArray.reverse();
+ sortedPkgArray = sortedNumPkgArray.concat(sortedStringPkgArray);
+ } else {
+ columnName.lastElementChild.innerText = triangleDown;
+ sortedPkgArray = sortedStringPkgArray.concat(sortedNumPkgArray);
+ };
+
+ if (lastColumnName && lastColumnName != columnName){lastColumnName.lastElementChild.innerText = ""};
+ lastColumnName = columnName;
+ sortedPkgArray.unshift(["label"]);
+ sortedPkgArray.forEach((listing) => {
+ i++;
+ let rule = "." + listing[0] + " { grid-row: " + i + "; }";
+ styleSheet.insertRule(rule);
+ });
+};
</script>
<style>
sortGrid() has been rewritten to dynamically generate stylesheets with explicit grid-row properties to re-order the rows, instead of removing and reinserting the cells. Performance *should* now be comperable to sorttable.js. Signed-off-by: Sen Hastings <sen@phobosdpl.com> --- support/scripts/pkg-stats | 116 +++++++++++++++++++++----------------- 1 file changed, 64 insertions(+), 52 deletions(-)