svelte-common 4.9.0 → 4.12.0

package/README.md

@@ -58,11 +58,13 @@ Returns **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/G
 ## sortable
 
 Add sortable toggle to a node.
-cycles "aria-sort" though orderByCycle.
+Synchronizes store value with node sortable attribute.
 
 ### Parameters
 
 *   `node` **[Node](https://developer.mozilla.org/docs/Web/API/Node/nextSibling)** 
+*   `store`  
+*   `where` **Store** to keep in sync with sorting properties
 
 # install
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-common",
-  "version": "4.9.0",
+  "version": "4.12.0",
   "publishConfig": {
     "access": "public"
   },
@@ -42,7 +42,7 @@
     "@sveltejs/vite-plugin-svelte": "^1.0.2",
     "ava": "^4.3.1",
     "documentation": "^14.0.0",
-    "mf-styling": "^1.3.1",
+    "mf-styling": "^1.4.0",
     "npm-pkgbuild": "^10.14.8",
     "semantic-release": "^19.0.4",
     "stylelint": "^14.11.0",

package/src/index.svelte

@@ -45,8 +45,8 @@
     formatSecondsSinceEpoch
   } from "./util.mjs";
   export {
+    sorter,
     sortable,
-    sortableStore,
     toggleOrderBy,
     orderByCycle,
     SORT_NONE,

package/src/sorting.mjs

@@ -21,47 +21,59 @@ export function toggleOrderBy(orderBy) {
 
 /**
  * Add sortable toggle to a node.
- * cycles "aria-sort" though orderByCycle.
+ * Synchronizes store value with node "aria-sort" attribute.
  * @param {Node} node
- * @param {Store} where to put sorting info into
+ * @param {Store} to keep in sync with sorting properties
  */
 export function sortable(node, store) {
   node.setAttribute("aria-sort", SORT_NONE);
 
+  store.subscribe(orderBy => {
+    for (const peer of node.parentElement.children) {
+      if (peer.getAttribute("aria-sort")) {
+        peer.setAttribute("aria-sort", orderBy[peer.id] || SORT_NONE);
+      }
+    }
+  });
+
   node.onclick = () => {
     const orderBy = {};
+
     node.setAttribute(
       "aria-sort",
       toggleOrderBy(node.getAttribute("aria-sort"))
     );
 
     for (const peer of node.parentElement.children) {
-      if (peer !== node) {
-        if (peer.getAttribute("aria-sort") !== SORT_NONE) {
-          peer.setAttribute("aria-sort", SORT_NONE);
+      const sort = peer.getAttribute("aria-sort");
+
+      if (sort) {
+        if (peer !== node) {
+          if (sort !== SORT_NONE) {
+            peer.setAttribute("aria-sort", SORT_NONE);
+          }
         }
-      }
 
-      orderBy[peer.id] = peer.getAttribute("aria-sort");
+        orderBy[peer.id] = sort;
+      }
     }
     store.set(orderBy);
   };
 }
 
-export function sortableStore() {
-  const subscriptions = new Set();
-
-  let value = {};
-
-  return {
-    subscribe: cb => {
-      subscriptions.add(cb);
-      cb(value);
-      return () => subscriptions.delete(cb);
-    },
-    set(v) {
-      value = v;
-      subscriptions.forEach(subscription => subscription(value));
+/**
+ * Generate a sort function for a given sort by set.
+ * @param {Object} sortBy
+ * @return {Function} sorter
+ */
+export function sorter(sortBy)
+{
+  for(const [key,value] of Object.entries(sortBy)) {
+    switch(value) {
+      case SORT_ASCENDING: 
+        return (a,b) => a[key].localeCompare(b[key]);
+      case SORT_DESCENDING:
+        return (b,a) => a[key].localeCompare(b[key]);
     }
-  };
+  }
 }