#26 Make glitch(.) idempotent to allow successive glitch calls on the…

… same query selector
7PH · May 30, 2024 · a41bf28 · a41bf28
1 parent c61233d
commit a41bf28
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 12 deletions.
diff --git a/src/index.ts b/src/index.ts
@@ -448,6 +448,7 @@ const glitchElement = (element: HTMLElement, layers: LayerDefinition[], options:
 
     // Base layer
     const baseLayer = glitched.cloneNode(true) as HTMLElement;
+    baseLayer.dataset.islayer = 'true';
     // Stack this layer
     baseLayer.style.gridArea = '1/1/-1/-1';
     baseLayer.style.userSelect = 'none';
@@ -564,7 +565,18 @@ const glitch = (elOrSelector: GlitchableElement = '.powerglitch', userOptions: G
     const layers = generateLayers(options);
 
     // Animate each div element
-    const entries = elements.map(element => glitchElement(element, layers, options));
+    const entries = elements
+        /**
+         * When calling glitch(..) multiple times on the same element, user may attempt to mistakenly glitch all the layers,
+         * since the query selector will match all the layers. We filter out non-root glitch layers so only the base element is glitched.
+         */
+        .filter(element => ! element.dataset.islayer)
+        /**
+         * Glitch each element with the same layer definitions
+         */
+        .map((element) =>
+            glitchElement(element, layers, options)
+        );
 
     // Return list of containers and glitch control functions
     return {

diff --git a/test/powerglitch.test.ts b/test/powerglitch.test.ts
@@ -122,17 +122,36 @@ describe('Given one or multiple element(s) to glitch', () => {
 });
 
 describe('Given glitching more than once the same element', () => {
-    /**
-     * Glitching twice an element should reset its animation
-     */
-    testAllElementTypes('overrides glitch on second call', async elementType => {
-        const { element } = init(ELEMENTS[elementType]);
-        const { containers: containers1 } = PowerGlitch.glitch(element, { ...baseOptions, slice: { count: 10 } });
-        expect(containers1.length).toBe(1);
-        expect(containers1[0].firstElementChild?.children.length).toBe(11);
-        const { containers: containers2 } = PowerGlitch.glitch(element, { ...baseOptions, slice: { count: 20 } });
-        expect(containers2.length).toBe(1);
-        expect(containers2[0].firstElementChild?.children.length).toBe(21);
+    describe('overrides options on successive call', () => {
+        testAllElementTypes('using element reference', async elementType => {
+            const { element } = init(ELEMENTS[elementType]);
+            const { containers: containers1 } = PowerGlitch.glitch(element, { ...baseOptions, slice: { count: 10 } });
+            expect(containers1.length).toBe(1);
+            expect(containers1[0].firstElementChild?.children.length).toBe(11);
+
+            const { containers: containers2 } = PowerGlitch.glitch(element, { ...baseOptions, slice: { count: 20 } });
+            expect(containers2.length).toBe(1);
+            expect(containers2[0].firstElementChild?.children.length).toBe(21);
+
+            const { containers: containers3 } = PowerGlitch.glitch(element, { ...baseOptions, slice: { count: 15 } });
+            expect(containers3.length).toBe(1);
+            expect(containers3[0].firstElementChild?.children.length).toBe(16);
+        });
+
+        testAllElementTypes('using query selector', async elementType => {
+            init(ELEMENTS[elementType]);
+            const { containers: containers1 } = PowerGlitch.glitch('.glitch', { ...baseOptions, slice: { count: 10 } });
+            expect(containers1.length).toBe(1);
+            expect(containers1[0].firstElementChild?.children.length).toBe(11);
+
+            const { containers: containers2 } = PowerGlitch.glitch('.glitch', { ...baseOptions, slice: { count: 20 } });
+            expect(containers2.length).toBe(1);
+            expect(containers2[0].firstElementChild?.children.length).toBe(21);
+
+            const { containers: containers3 } = PowerGlitch.glitch('.glitch', { ...baseOptions, slice: { count: 15 } });
+            expect(containers3.length).toBe(1);
+            expect(containers3[0].firstElementChild?.children.length).toBe(16);
+        });
     });
 });