@slidy/core - add on:mutate event & auto reinit

Valexr · Aug 30, 2022 · ec03d72 · ec03d72
1 parent aa29141
commit ec03d72
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 12 deletions.
diff --git a/packages/core/README.MD b/packages/core/README.MD
@@ -188,10 +188,13 @@ If you need reversed flow use css rules on target node, like: `flex-flow: row-re
 
 ## Events
 
+Slidy instance reinit on every change childNodes.length in `on:mutate` event.
+
 | Name      | Detail              | Description |
 | :-------- | :------------------ | :---------- |
 | `mount`   | `{options}`         | Fires when `node.children.length` & node.children isConnected |
 | `resize`  | `{ROE}`             | Fires on resize target node `ROE: ResizeObserverEntry[]`|
+| `mutate`  | `{ML}`              | Fires on mutation `attributes` or `childNodes` in target node `ML: MutationRecord[]`|
 | `move`    | `{index,position}`  | Fires on any sliding |
 | `index`   | `{index}`           | Fires on each index change: `index === changed.index` |
 | `keys`    | `{e.key}`           | Fires if target node focusing and any key pressed. Predefined keys: `['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown']` is `defaultPrevented` & navigate `to(index + options.clamp)`. Focus not in core & can do programaticaly or with `tabindex` attribute on target node. |

diff --git a/packages/core/src/slidy.ts b/packages/core/src/slidy.ts
@@ -60,6 +60,16 @@ export function slidy(node: HTMLElement, opts?: Partial<Options>): SlidyInstance
         dispatch(node, 'resize', { ROE });
     });
 
+    const MO = new MutationObserver((ML) => {
+        loop(ML, (record) => {
+            const { type, addedNodes } = record
+            if (type === 'childList' && addedNodes.length > 1) {
+                destroy().then(() => init(node))
+            }
+        })
+        dispatch(node, 'mutate', { ML });
+    });
+
     function $() {
         return dom(node, options);
     }
@@ -70,19 +80,29 @@ export function slidy(node: HTMLElement, opts?: Partial<Options>): SlidyInstance
             : Math.abs(pos) >= SENSITY;
     }
 
-    mount(node)
-        .then(() => {
-            node.style.cssText += 'outline:0;overflow:hidden;user-select:none;-webkit-user-select:none;'
-            node.onwheel = throttle(onWheel, DURATION, CLAMP);
+    init(node)
 
-            POSITION = $().position();
+    function init(node: HTMLElement) {
+        mount(node)
+            .then(() => {
+                node.style.cssText += 'outline:0;overflow:hidden;user-select:none;-webkit-user-select:none;'
+                node.onwheel = throttle(onWheel, DURATION, CLAMP);
 
-            RO.observe(node);
-            listen(node, NODE_EVENTS);
-            listen(window, WINDOW_NATIVE_EVENTS);
-            dispatch(node, 'mount', { options });
-        })
-        .catch((error: Error) => console.error('Slidy:', error));
+                POSITION = $().position();
+
+                RO.observe(node);
+                MO.observe(node, {
+                    childList: true,
+                    attributes: true,
+                    subtree: true
+                });
+
+                listen(node, NODE_EVENTS);
+                listen(window, WINDOW_NATIVE_EVENTS);
+                dispatch(node, 'mount', { options });
+            })
+            .catch((error: Error) => console.error('Slidy:', error));
+    }
 
     function move(pos: number, index?: number): void {
         options.direction = Math.sign(pos);
@@ -278,7 +298,7 @@ export function slidy(node: HTMLElement, opts?: Partial<Options>): SlidyInstance
         });
     }
 
-    function destroy(): void {
+    async function destroy(): Promise<void> {
         clear();
         RO.disconnect();
         listen(node, NODE_EVENTS, false);