Code: sorting: remembered per color set

SAKryukov · Nov 6, 2023 · 6bab6c6 · 6bab6c6
1 parent 888e681
commit 6bab6c6
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 7 deletions.
diff --git a/code/js/colors/sorting.js b/code/js/colors/sorting.js
@@ -2,7 +2,7 @@
 
 const orderSet = (() => {
 
-    const sort = (colorMapMetadata, sort, inverted) => {
+    const sort = (colorMapMetadata, sort, reverse) => {
 
         if (!colorMapMetadata.isRemapped) return;
 
@@ -14,13 +14,13 @@ const orderSet = (() => {
             right = colorMapMetadata.map.get(right).color;
             const leftHsl = conversionSet.rgbToHsl(left[0], left[1], left[2], left[3]);
             const rightHsl = conversionSet.rgbToHsl(right[0], right[1], right[2], right[3]);
-            const sign = inverted ? -1 : 1;
+            const sign = reverse ? -1 : 1;
             return sign * (hslToFactor(rightHsl) - hslToFactor(leftHsl));
         }; //compare
 
         const nameCompare = (left, right) => {
             if (left == right) return 0;
-            return right > left ? (inverted ? 1 : -1) : (inverted ? -1 : 1);
+            return right > left ? (reverse ? 1 : -1) : (reverse ? -1 : 1);
         } //nameCompare
 
         colorMapMetadata.source.sort(sort ? compare : nameCompare);

diff --git a/code/js/index.html b/code/js/index.html
@@ -25,7 +25,7 @@
             header { background-color: aliceBlue; }
             footer { background-color: beige; }
             header, footer, main { padding: var(--padding); }
-            header p > * { vertical-align: middle; }
+            header p > * { vertical-align: bottom; }
             header p select { margin-left: var(--deltaX); font-size: 100%; padding-left: var(--padding-horizontal); padding-right: var(--padding-horizontal); }
             main { border-top: solid thin gray; border-bottom: solid thin gray; }
             input[type=radio]:last-of-type { margin-left: var(--deltaX); }

diff --git a/code/js/ui/main.js b/code/js/ui/main.js
@@ -5,8 +5,8 @@ window.onload = () => {
     const elements = getElements();
     elements.metadata.copyright.textContent = definitionSet.metadata.copyright;
     elements.metadata.version.textContent = definitionSet.metadata.version;
-    const cssColorMapMetadata = { source: cssColorNames, map: new Map(), isRemapped: false };
-    const wpfColorMapMetadata = { source: wpfColorNames, map: new Map(), isRemapped: false };
+    const cssColorMapMetadata = { source: cssColorNames, map: new Map(), orderIndex: 0, isRemapped: false };
+    const wpfColorMapMetadata = { source: wpfColorNames, map: new Map(), orderIndex: 0, isRemapped: false };
 
     const remap = colorMapMetadata => {
         if (colorMapMetadata.isRemapped) return;
@@ -22,6 +22,7 @@ window.onload = () => {
         const dataSourceHandler = (event, colorMapMetadata) => {
             if (event.target.checked) {
                 populate(colorMapMetadata);
+                elements.sort.selectedIndex = colorMapMetadata.orderIndex;
                 if (colorMapMetadata.isRemapped) return
                 const remapPromise = new Promise(resolve => resolve(colorMapMetadata));
                 remapPromise.then(metadata => {
@@ -150,9 +151,10 @@ window.onload = () => {
         select(currentCell, true);
     }; //populate
     populate(cssColorMapMetadata);
-;
+
     elements.sort.onchange = event => {
         let sort; let inverted;
+        currentColorMapMetadata.orderIndex = event.target.selectedIndex;
         switch (event.target.selectedIndex) {
             case 0: sort = undefined; inverted = false; break;
             case 1: sort = undefined; inverted = true; break;