maint(pat-content-mirror): Rework for class based pattern.

Note: the event binding on the propertychange event is removed as this dates
back to IE times and is not supported by any modern browser.

Author: thet

package.json

@@ -5,7 +5,7 @@
     "license": "MIT",
     "main": "./src/pat-content-mirror.js",
     "dependencies": {
-        "@patternslib/patternslib": "*",
+        "@patternslib/patternslib": ">=9.10.1-alpha.0",
         "jquery": "^3.6.0"
     },
     "devDependencies": {

src/pat-content-mirror.js

@@ -1,39 +1,57 @@
-import $ from "jquery";
-import Base from "@patternslib/patternslib/src/core/base";
+import { BasePattern } from "@patternslib/patternslib/src/core/basepattern";
+import events from "@patternslib/patternslib/src/core/events";
 import Parser from "@patternslib/patternslib/src/core/parser";
+import registry from "@patternslib/patternslib/src/core/registry";
 
 const parser = new Parser("content-mirror");
 parser.addArgument("target", "p.content-mirror .text");
 
-export default Base.extend({
-    name: "content-mirror",
-    trigger: ".pat-content-mirror",
+class Pattern extends BasePattern {
+    static name = "content-mirror";
+    static trigger = ".pat-content-mirror";
+    static parser = parser;
 
-    init: function content_mirror_init($el) {
-        this.options = parser.parse(this.el, this.options);
-        const $mirror = $(this.options.target).parents("p.content-mirror").first();
-        $el.on(
-            "input propertychange",
-            $.proxy(this.updateMirror, this, this.options.target)
+    async init() {
+        this.target = document.querySelector(this.options.target);
+        events.add_event_listener(
+            this.el,
+            "input",
+            "pat-content-mirror--update-mirror",
+            this.update_mirror.bind(this)
         );
-        $el.parents("form")
-            .first()
-            .on("reset", function () {
-                $el.val("");
-                $mirror.html($mirror.html());
-            });
-        $(".placeholder", this.options.target).text($el.attr("placeholder") || "");
-    },
-
-    updateMirror: function updateMirror(target, ev) {
-        const $el = $(ev.target);
-        const the_mirror = $(target);
-        the_mirror.text($el.val());
-        if (!$el.val().length) {
-            const placeholder = $el.attr("placeholder");
+
+        const form = this.el.form || this.el.closest("form");
+        events.add_event_listener(
+            form,
+            "reset",
+            `pat-content-mirror--reset--${this.uuid}`,
+            () => {
+                this.el.value = "";
+                this.el.dispatchEvent(events.input_event());
+            }
+        );
+
+        const placeholder = this.target.querySelector(".placeholder");
+        if (placeholder) {
+            placeholder.textContent = this.el.getAttribute("placeholder") || "";
+        }
+    }
+
+    update_mirror(ev) {
+        const el = ev.target;
+        const the_mirror = this.target;
+        const value = el.value;
+        the_mirror.textContent = value;
+        if (!value) {
+            const placeholder = this.el.getAttribute("placeholder");
             if (placeholder) {
-                the_mirror.html('<em class="placeholder">' + placeholder + "</em>");
+                the_mirror.innerHTML = `<em class="placeholder">${placeholder}</em>`;
             }
         }
-    },
-});
+    }
+}
+
+registry.register(Pattern);
+
+export default Pattern;
+export { Pattern };

src/pat-content-mirror.test.js

@@ -1,5 +1,5 @@
-import pattern from "./pat-content-mirror";
-import utils from "@patternslib/patternslib/src/core/utils";
+import Pattern from "./pat-content-mirror";
+import events from "@patternslib/patternslib/src/core/events";
 
 describe("pat-content-mirror", () => {
     beforeEach(() => {
@@ -14,8 +14,8 @@ describe("pat-content-mirror", () => {
                 data-pat-content-mirror="target:.mirror .text"></textarea>
         `;
 
-        pattern.init(document.querySelector(".pat-content-mirror"));
-        await utils.timeout(1);
+        const instance = new Pattern(document.querySelector(".pat-content-mirror"));
+        await events.await_pattern_init(instance);
 
         const textarea = document.querySelector("textarea");
         textarea.value = "this is a test text.";
@@ -25,4 +25,40 @@ describe("pat-content-mirror", () => {
             "this is a test text."
         );
     });
+
+    it("works with multiple content mirrors.", async () => {
+        document.body.innerHTML = `
+    	    <p class="mirror-1"><span class="text"></span></p>
+	    	<textarea
+                class="txt-1 pat-content-mirror"
+                data-pat-content-mirror="target:.mirror-1 .text"></textarea>
+
+    	    <p class="mirror-2"><span class="text"></span></p>
+	    	<textarea
+                class="txt-2 pat-content-mirror"
+                data-pat-content-mirror="target:.mirror-2 .text"></textarea>
+        `;
+
+        const txt1 = document.querySelector(".txt-1");
+        const txt2 = document.querySelector(".txt-2");
+
+        const mirror1 = document.querySelector(".mirror-1 .text");
+        const mirror2 = document.querySelector(".mirror-2 .text");
+
+        const instance1 = new Pattern(txt1);
+        const instance2 = new Pattern(txt2);
+
+        await events.await_pattern_init(instance1);
+        await events.await_pattern_init(instance2);
+
+        txt1.value = "this is a test text 1.";
+        txt2.value = "this is a test text 2.";
+
+        txt1.dispatchEvent(new Event("input"));
+        txt2.dispatchEvent(new Event("input"));
+
+        expect(mirror1.textContent).toBe("this is a test text 1.");
+        expect(mirror2.textContent).toBe("this is a test text 2.");
+    });
+
 });