@acanto/components-locale-switch - npm Package Compare versions

Comparing version 0.0.5 to 0.0.6

index.js

@@ -1,29 +0,52 @@
-import { $$, forEach, on, getDataAttr } from "@acanto/core-dom";
+import { $, $$, forEach, getDataAttr, listen } from "@acanto/core-dom";
 import "./index.scss";
 
-/**
- * TODO: Locale switch component
- *
- * @param {string} [rootSelector=".LocaleSwitch:"]
- */
-export default function localeSwitch(rootSelector = ".LocaleSwitch:") {
-  // function handleSwitch($root) {
-  //   const locale = getDataAttr($root, "locale");
-  //   $root.classList.add("loading");
-  //   request
-  //     .then(({ data }) => {
-  //         location.href = data;
-  //       }
-  //     })
-  //     .catch(() => {
-  //       $root.classList.remove("loading");
-  //     });
-  // }
-  // forEach($$(rootSelector), ($root) => {
-  //   on($root, "click", () => {
-  //     if (!$root.classList.contains("is-active")) {
-  //       handleSwitch($root);
-  //     }
-  //   });
-  // });
+export default function localeSwitch() {
+  const $root = $(".LocaleSwitch:");
+  const domMap = {};
+
+  /**
+   * Build a map associating a locale to its link, this will be used to swap
+   * the links on route change
+   */
+  forEach($$("[data-locale]", $root), $link => {
+    const locale = getDataAttr($link, "locale");
+    domMap[locale] = $link;
+  });
+
+  listen("click", ".LocaleSwitch:item", event => {
+    const $link = event.target;
+
+    event.preventDefault();
+    
+    $root.classList.add("is-loading");
+
+    location.href = $link.href;
+  });
+
+  /**
+   * On route change update the localised links with the fresh data embedded
+   * as json in the HTML response
+   */
+  function assignLocalisedLinks() {
+    const langs = JSON.parse(getDataAttr($("#LocaleSwitch"), "langs"));
+
+    for (let i = 0; i < langs.length; i++) {
+      const { locale, url } = langs[i];
+      if (domMap[locale]) domMap[locale].setAttribute("href", url);
+    }
+  }
+
+
+  /**
+   * On route change update the localised links with the fresh data embedded
+   * as json in the HTML response
+   */
+  function onRouteChange() {
+    assignLocalisedLinks();
+  }
+
+  return {
+    onRouteChange
+  }
 }

package.json

 {
   "name": "@acanto/components-locale-switch",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "author": "Acanto <[e-mail]> (https://acanto.agency/)",
@@ -17,3 +17,3 @@ "license": "ISC",
   },
-  "gitHead": "53ff8e0240841f3243740f78fa6db7c029791266"
+  "gitHead": "561c0e0b0808f291fc6af2e97592e2f2adcf72cd"
 }

No alert changes

Improved metrics

Total package byte prevSize

3734

increased by55.2%

Lines of code

41

increased by46.43%

No dependency changes