svelte-common 4.8.1 → 4.11.0

package/README.md

@@ -28,8 +28,10 @@ or the [live example](https://arlac77.github.io/components/svelte-common/example
 
 *   [initializeServiceWorker](#initializeserviceworker)
     *   [Parameters](#parameters)
-*   [toggleOrdeBy](#toggleordeby)
+*   [toggleOrderBy](#toggleorderby)
     *   [Parameters](#parameters-1)
+*   [sortable](#sortable)
+    *   [Parameters](#parameters-2)
 
 ## initializeServiceWorker
 
@@ -42,15 +44,27 @@ Create a store holding a service worker
 
 Returns **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** store holding the service worker
 
-## toggleOrdeBy
+## toggleOrderBy
 
 Deliver next value in the order by cycle.
+SORT\_NONE -> SORT\_ASCENDING -> SORT\_DESCENDING -> SORT\_NONE ...
 
 ### Parameters
 
-*   `orderBy` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** 
+*   `orderBy` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** 
 
-Returns **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** new order either SORT_NONE, SORT_ASCENDING or SORT_DESCENDING
+Returns **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** new order either SORT\_NONE, SORT\_ASCENDING or SORT\_DESCENDING
+
+## sortable
+
+Add sortable toggle to a node.
+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.8.1",
+  "version": "4.11.0",
   "publishConfig": {
     "access": "public"
   },
@@ -32,24 +32,24 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "svelte-command": "^1.1.23",
+    "svelte-command": "^1.1.24",
     "svelte-entitlement": "^1.2.30"
   },
   "devDependencies": {
     "@semantic-release/commit-analyzer": "^9.0.2",
     "@semantic-release/exec": "^6.0.3",
     "@semantic-release/release-notes-generator": "^10.0.3",
-    "@sveltejs/vite-plugin-svelte": "^1.0.1",
+    "@sveltejs/vite-plugin-svelte": "^1.0.2",
     "ava": "^4.3.1",
-    "documentation": "^13.2.5",
-    "mf-styling": "^1.2.45",
+    "documentation": "^14.0.0",
+    "mf-styling": "^1.3.1",
     "npm-pkgbuild": "^10.14.8",
-    "semantic-release": "^19.0.3",
-    "stylelint": "^14.10.0",
-    "stylelint-config-standard": "^27.0.0",
+    "semantic-release": "^19.0.4",
+    "stylelint": "^14.11.0",
+    "stylelint-config-standard": "^28.0.0",
     "svelte": "^3.49.0",
     "testcafe": "^1.20.1",
-    "vite": "^3.0.8"
+    "vite": "^3.0.9"
   },
   "optionalDependencies": {
     "mf-hosting": "^1.7.2"

package/src/index.svelte

@@ -46,8 +46,8 @@
   } from "./util.mjs";
   export {
     sortable,
-    toggleOrdeBy,
-    orderByCycle, 
+    toggleOrderBy,
+    orderByCycle,
     SORT_NONE,
     SORT_ASCENDING,
     SORT_DESCENDING

package/src/sorting.mjs

@@ -1,6 +1,7 @@
 export const SORT_NONE = "none";
 export const SORT_ASCENDING = "ascending";
 export const SORT_DESCENDING = "descending";
+export const SORT_OTHER = "other";
 
 export const orderByCycle = {
   [SORT_NONE]: SORT_ASCENDING,
@@ -11,16 +12,51 @@ export const orderByCycle = {
 /**
  * Deliver next value in the order by cycle.
  * SORT_NONE -> SORT_ASCENDING -> SORT_DESCENDING -> SORT_NONE ...
- * @param {string} orderBy 
+ * @param {string} orderBy
  * @returns {string} new order either SORT_NONE, SORT_ASCENDING or SORT_DESCENDING
  */
-export function toggleOrdeBy(orderBy) { return orderByCycle[orderBy] || "none"; }
-
+export function toggleOrderBy(orderBy) {
+  return orderByCycle[orderBy] || SORT_NONE;
+}
 
 /**
  * Add sortable toggle to a node.
+ * Synchronizes store value with node sortable attribute.
  * @param {Node} node
+ * @param {Store} where to keep in sync with sorting properties
  */
-export function sortable(node) {
-  node.click = () => { node.sortable = toggleOrderBy(node.sortable); };
+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) {
+      const sort = peer.getAttribute("aria-sort");
+
+      if (sort) {
+        if (peer !== node) {
+          if (sort !== SORT_NONE) {
+            peer.setAttribute("aria-sort", SORT_NONE);
+          }
+        }
+
+        orderBy[peer.id] = sort;
+      }
+    }
+    store.set(orderBy);
+  };
 }