feat(pat gallery): Reinitialize the triggers when new elements are loadded into the gallery area.

Author: thet

src/pat/gallery/gallery.js

@@ -45,6 +45,14 @@ export default Base.extend({
             document.body.appendChild(this.template);
         }
 
+        const gallery_observer = new MutationObserver(
+            this.initialize_trigger.bind(this)
+        );
+        gallery_observer.observe(this.el, {
+            subtree: true,
+            childList: true,
+        });
+
         this.initialize_trigger();
     },
 

src/pat/gallery/gallery.test.js

@@ -42,7 +42,49 @@ describe("pat-gallery", function () {
             const ev = new Event("click");
             ev.tagName = "A";
             const spy_preventDefault = jest.spyOn(ev, "preventDefault");
-            document.querySelector("a").dispatchEvent(ev);
+            document.querySelector(".a1").dispatchEvent(ev);
+
+            expect(spy_init_gallery).toHaveBeenCalled();
+            expect(spy_preventDefault).toHaveBeenCalled();
+        });
+
+        it("Reinitializes when new items are added.", async function () {
+            document.body.innerHTML = `
+              <section
+                  class="pat-gallery"
+                  data-pat-gallery="item-selector: a">
+                <a class="a1" href="full-1.jpg" title="title a1">
+                  <img src="thumb-1.jpg" title="title img1" />
+                </a>
+              </section>
+            `;
+            const el = document.querySelector(".pat-gallery");
+
+            const instance = new pattern(el);
+
+            const spy_init_trigger = jest.spyOn(instance, "initialize_trigger");
+            const spy_init_gallery = jest.spyOn(instance, "initialize_gallery");
+
+            await utils.timeout(1);
+
+            expect(spy_init_trigger).toHaveBeenCalledTimes(1);
+
+            const item = document.createElement("div");
+            item.innerHTML = `
+                <a class="a2" href="full-2.jpg">
+                  <img src="thumb-2.jpg" />
+                </a>
+            `;
+
+            el.appendChild(item.querySelector(".a2"));
+            await utils.timeout(1); // wait for MutationObserver
+
+            expect(spy_init_trigger).toHaveBeenCalledTimes(2);
+
+            const ev = new Event("click");
+            ev.tagName = "A";
+            const spy_preventDefault = jest.spyOn(ev, "preventDefault");
+            document.querySelector(".a2").dispatchEvent(ev);
 
             expect(spy_init_gallery).toHaveBeenCalled();
             expect(spy_preventDefault).toHaveBeenCalled();