@woylie/doggo 0.15.0 → 0.16.0

package/README.md

@@ -21,7 +21,7 @@ The package can be installed by adding `doggo` to your list of dependencies in
 ```elixir
 def deps do
   [
-    {:doggo, "~> 0.15.0"}
+    {:doggo, "~> 0.16.0"}
   ]
 end
 ```
@@ -419,3 +419,10 @@ If you encounter any issues with a component, have suggestions for improvements,
 or need a component for a specific use case that isn't currently available,
 please don't hesitate to open a
 [Github issue](https://github.com/woylie/doggo/issues).
+
+## Related libraries
+
+- [ex_icon](https://github.com/woylie/ex_icon) - Generic icon library for
+  Phoenix LiveView.
+- [flop_phoenix](https://github.com/woylie/flop_phoenix) - Pagination, sortable
+  table and filter components for Flop.

package/assets/js/hooks/carousel.js

@@ -83,11 +83,17 @@ export function initCarousel(carousel) {
 
   const syncActiveState = () => setActiveIdx(getActiveIdx());
 
+  const SCROLL_SETTLE_MS = 100;
+
+  let pendingIdx = null;
+  let settleTimer = null;
+
   const scrollToIdx = (idx) => {
     const item = getItems()[idx];
 
     if (!item) return;
 
+    pendingIdx = idx;
     setActiveIdx(idx);
 
     const itemsContainer = getItemsContainer();
@@ -106,6 +112,8 @@ export function initCarousel(carousel) {
 
   // Auto rotation
   let isPaused = false;
+  let isHovered = false;
+  let isFocused = false;
 
   // Stop auto rotation if the last items does not wrap.
   const hasShowEnded = () =>
@@ -117,8 +125,11 @@ export function initCarousel(carousel) {
     syncPauseControl();
   };
 
+  const canRotate = () =>
+    isAutoRotationEnabled() && !isPaused && !isHovered && !isFocused;
+
   const startAutoRotation = () => {
-    if (!isAutoRotationEnabled() || isPaused) return;
+    if (!canRotate()) return;
     if (autoRotationTimer != null) return;
 
     if (hasShowEnded()) {
@@ -190,7 +201,15 @@ export function initCarousel(carousel) {
   carousel.addEventListener(
     "scroll",
     (e) => {
-      if (e.target === getItemsContainer()) syncActiveState();
+      if (e.target !== getItemsContainer()) return;
+
+      clearTimeout(settleTimer);
+      settleTimer = setTimeout(() => {
+        pendingIdx = null;
+        syncActiveState();
+      }, SCROLL_SETTLE_MS);
+
+      if (pendingIdx === null) syncActiveState();
     },
     true,
   );
@@ -246,12 +265,8 @@ export function initCarousel(carousel) {
   // Pause when hovering or focusing, resume when leaving, unless
   // rotation is paused with the pause button.
 
-  let isHovered = false;
-  let isFocused = false;
-
-  const resume = () => {
-    if (!isHovered && !isFocused) startAutoRotation();
-  };
+  const isPauseControl = (el) =>
+    el != null && el.closest?.(`.${baseClass}-pause`) != null;
 
   carousel.addEventListener("pointerenter", () => {
     isHovered = true;
@@ -260,12 +275,17 @@ export function initCarousel(carousel) {
 
   carousel.addEventListener("pointerleave", () => {
     isHovered = false;
-    resume();
+    startAutoRotation();
   });
 
-  carousel.addEventListener("focusin", () => {
-    isFocused = true;
-    stopAutoRotation();
+  carousel.addEventListener("focusin", (e) => {
+    isFocused = !isPauseControl(e.target);
+
+    if (isFocused) {
+      stopAutoRotation();
+    } else {
+      startAutoRotation();
+    }
   });
 
   carousel.addEventListener("focusout", (e) => {
@@ -274,7 +294,7 @@ export function initCarousel(carousel) {
     if (carousel.contains(e.relatedTarget)) return;
 
     isFocused = false;
-    resume();
+    startAutoRotation();
   });
 
   // Initialize
@@ -289,13 +309,18 @@ export function initCarousel(carousel) {
     // A patch can add or remove the pause button, and with it the
     // rotation. Starting is a no-op while it runs or is paused.
     if (isAutoRotationEnabled()) {
-      resume();
+      startAutoRotation();
     } else {
       stopAutoRotation();
     }
   };
 
-  return { update: syncAfterUpdate, destroy: stopAutoRotation };
+  const destroy = () => {
+    stopAutoRotation();
+    clearTimeout(settleTimer);
+  };
+
+  return { update: syncAfterUpdate, destroy };
 }
 
 export default {

package/assets/js/hooks/menu.js

@@ -64,20 +64,52 @@ export function initMenu(menu) {
   // through the `aria-controls` pointing at it. Compared rather than put in a
   // selector, because the id is the caller's and may hold characters that
   // would change what the selector matches.
-  const close = () => {
-    const button = Array.from(
-      document.querySelectorAll("[aria-controls]"),
-    ).find((el) => el.getAttribute("aria-controls") === menu.id);
+  const getButton = () =>
+    Array.from(document.querySelectorAll("[aria-controls]")).find(
+      (el) => el.getAttribute("aria-controls") === menu.id,
+    );
+
+  const close = ({ focusButton } = { focusButton: true }) => {
+    const button = getButton();
 
     if (!button) return false;
 
     menu.setAttribute("hidden", "");
     button.setAttribute("aria-expanded", "false");
-    button.focus();
+
+    if (focusButton) button.focus();
 
     return true;
   };
 
+  const closeOnClickOutside = (e) => {
+    if (menu.hidden) return;
+
+    const button = getButton();
+
+    if (!button) return;
+    if (menu.contains(e.target) || button.contains(e.target)) return;
+
+    close({ focusButton: false });
+  };
+
+  document.addEventListener("click", closeOnClickOutside);
+
+  const closeOnButtonEscape = (e) => {
+    if (e.key !== "Escape" || menu.hidden) return;
+
+    const button = getButton();
+
+    if (!button || !button.contains(e.target)) return;
+
+    if (close()) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  };
+
+  document.addEventListener("keydown", closeOnButtonEscape, true);
+
   menu.addEventListener("keydown", (e) => {
     const items = getItems();
     const currentIdx = items.indexOf(e.target.closest(ITEMS));
@@ -124,7 +156,12 @@ export function initMenu(menu) {
 
   restoreTabStop();
 
-  return { update: restoreTabStop };
+  const destroy = () => {
+    document.removeEventListener("click", closeOnClickOutside);
+    document.removeEventListener("keydown", closeOnButtonEscape, true);
+  };
+
+  return { update: restoreTabStop, destroy };
 }
 
 export default {
@@ -135,4 +172,8 @@ export default {
   updated() {
     this.instance.update();
   },
+
+  destroyed() {
+    this.instance.destroy();
+  },
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@woylie/doggo",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "description": "JavaScript hooks for the Doggo component library",
   "keywords": [
     "phoenix",