Merge pull request #826 from Patternslib/core-fixes

Patternslib different enhancements and additions

Author: thet

CHANGES.md

@@ -29,6 +29,7 @@
 
 ### Features
 
+-   core registry: Do not scan patterns within trees with attribute ``hidden`` or class ``cant-touch-this``.
 -   Implenent lazy loading for external libraries via dynamic imports. Leads to significantly reduced bundle sizes.
 -   Upgrade pat-calendar to use latest fullcalendar version (5.3.0).
 -   pat calendar: Add fullcalendar list views.
@@ -48,6 +49,7 @@
 -   Allow overriding the public path from outside via the definition of a ``window.__patternslib_public_path__`` global variable.
 -   Introduce new ``core/dom`` module for DOM manipulation and traversing.
     ``core/dom`` includes methods which help transition from jQuery to the JavaScript DOM API.
+-   core dom: Add ``get_parents`` to return all parent elements from a given DOM node.
 -   core dom: Add ``toNodeArray`` to return an array of DOM nodes if a NodeList, single DOM node or a jQuery object was passed.
 -   core dom: Add ``querySelectorAllAndMe`` to do a querySelectorAll including the starter element.
 -   core dom: Add ``wrap`` wrap an element with a wrapper element.
@@ -72,6 +74,9 @@
 
 ### Technical
 
+-   core polyfills: Add polyfill for Node.closest method.
+-   Core Base: ``await`` for initalization in the base class constructor, so that the ``init`` event is really thrown after initialization is done.
+-   pat calendar: Explicitly import JavaScript language files to avoid missing Webpack TypeScript loader errors.
 -   Use Babel for all files, allowing latest JavaScript features everywhere.
 -   Add example `minimalpattern`.
 -   Replace `slave` terminology with `dependent`.
@@ -101,6 +106,7 @@
 
 ### Fixes
 
+-   core dom is_visible: Mock in tests to check only for hidden to avoid unavailable offsetWidth/offsetHeight in Jest.
 -   pat calendar, pat checklist, pat datetime-picker: Dispatch DOM events with bubbling and canceling features enabled, as real DOM events do.
     Fixes a problem where calendar categories did not show their initial state correctly.
 -   pat inject: Make sure that nested pat-inject element have the correct context for target ``self``. Fixes: https://github.com/quaive/ploneintranet.prototype/issues/1164

src/core/base.js

@@ -11,7 +11,7 @@
  * Older Patternslib patterns on the other hand have a single global scope for
  * all DOM elements.
  */
-
+import "regenerator-runtime/runtime"; // needed for ``await`` support
 import $ from "jquery";
 import Registry from "./registry";
 import logging from "./logging";
@@ -41,14 +41,14 @@ const initBasePattern = function ($el, options, trigger) {
     return pattern;
 };
 
-const Base = function ($el, options, trigger) {
+const Base = async function ($el, options, trigger) {
     if (!$el.jquery) {
         $el = $($el);
     }
     this.$el = $el;
     this.el = $el[0];
     this.options = $.extend(true, {}, this.defaults || {}, options || {});
-    this.init($el, options, trigger);
+    await this.init($el, options, trigger);
     this.emit("init");
 };
 

src/core/base.test.js

@@ -1,6 +1,7 @@
 import registry from "./registry";
 import $ from "jquery";
 import Base from "./base";
+import utils from "./utils";
 import _ from "underscore";
 
 describe("pat-base: The Base class for patterns", function () {
@@ -17,7 +18,6 @@ describe("pat-base: The Base class for patterns", function () {
     it("can be extended and used in similar way as classes", function () {
         var Tmp = Base.extend({
             name: "example",
-            trigger: "pat-example",
             some: "thing",
             init: function () {
                 expect(this.$el.hasClass("pat-example")).toEqual(true);
@@ -35,7 +35,6 @@ describe("pat-base: The Base class for patterns", function () {
     it("Accepts jQuery objects on initialization", function () {
         const Tmp = Base.extend({
             name: "example",
-            trigger: "pat-example",
             init: () => {},
         });
         const $el = $('<div class="pat-example"/>');
@@ -48,7 +47,6 @@ describe("pat-base: The Base class for patterns", function () {
     it("Accepts plain DOM nodes on initialization", function () {
         const Tmp = Base.extend({
             name: "example",
-            trigger: "pat-example",
             init: () => {},
         });
         const node = document.createElement("div");
@@ -108,7 +106,6 @@ describe("pat-base: The Base class for patterns", function () {
     it("can be extended multiple times", function () {
         var Tmp1 = Base.extend({
             name: "thing",
-            trigger: "pat-thing",
             something: "else",
             init: function () {
                 expect(this.some).toEqual("thing3");
@@ -117,7 +114,6 @@ describe("pat-base: The Base class for patterns", function () {
         });
         var Tmp2 = Tmp1.extend({
             name: "thing",
-            trigger: "pat-thing",
             some: "thing2",
             init: function () {
                 expect(this.some).toEqual("thing3");
@@ -129,7 +125,6 @@ describe("pat-base: The Base class for patterns", function () {
         });
         var Tmp3 = Tmp2.extend({
             name: "thing",
-            trigger: "pat-thing",
             some: "thing3",
             init: function () {
                 expect(this.some).toEqual("thing3");
@@ -157,4 +152,30 @@ describe("pat-base: The Base class for patterns", function () {
             })
         );
     });
+
+    it("triggers the init event after init has finished.", async function (done) {
+        const Tmp = Base.extend({
+            name: "example",
+            init: async function () {
+                // await to actually give the Base constructor a chance to
+                // throw it's event before we throw it here.
+                await utils.timeout(1);
+                this.el.dispatchEvent(new Event("init_done"));
+            },
+        });
+        const node = document.createElement("div");
+        node.setAttribute("class", "pat-example");
+        const event_list = [];
+        node.addEventListener("init_done", () => event_list.push("pat init"));
+        $(node).on("init.example.patterns", () => event_list.push("base init"));
+        new Tmp(node);
+
+        // await until all asyncs are settled. 1 event loop should be enough.
+        await utils.timeout(1);
+
+        expect(event_list[0]).toBe("pat init");
+        expect(event_list[1]).toBe("base init");
+
+        done();
+    });
 });

src/core/dom.js

@@ -57,12 +57,11 @@ const find_parents = (el, selector) => {
     // This matches against all parents but not the element itself.
     // The order of elements is from the search starting point up to higher
     // DOM levels.
-    let parent =
-        (el?.parentNode?.closest && el.parentNode.closest(selector)) || null;
     const ret = [];
+    let parent = el?.parentNode?.closest?.(selector);
     while (parent) {
         ret.push(parent);
-        parent = parent.parentNode?.closest(selector) || null;
+        parent = parent.parentNode?.closest?.(selector);
     }
     return ret;
 };
@@ -75,6 +74,19 @@ const find_scoped = (el, selector) => {
     );
 };
 
+const get_parents = (el) => {
+    // Return all HTMLElement parents of el, starting from the direct parent of el.
+    // The document itself is excluded because it's not a real DOM node.
+    const parents = [];
+    let parent = el?.parentNode;
+    while (parent) {
+        parents.push(parent);
+        parent = parent?.parentNode;
+        parent = parent instanceof HTMLElement ? parent : null;
+    }
+    return parents;
+};
+
 const is_visible = (el) => {
     // Check, if element is visible in DOM.
     // https://stackoverflow.com/a/19808107/1337474
@@ -96,6 +108,7 @@ const dom = {
     show: show,
     find_parents: find_parents,
     find_scoped: find_scoped,
+    get_parents: get_parents,
     is_visible: is_visible,
     create_from_string: create_from_string,
 };

src/core/dom.test.js

@@ -184,7 +184,6 @@ describe("core.dom tests", () => {
         it("don't break with DocumentFragment without a parent.", (done) => {
             const el = new DocumentFragment();
             el.innerHTML = `<div class="starthere"></div>`;
-            console.log(el.parentNode);
             const res = dom.find_parents(
                 el.querySelector(".starthere"),
                 ".findme"
@@ -242,6 +241,46 @@ describe("core.dom tests", () => {
         });
     });
 
+    describe("get_parents", () => {
+        it("it finds all parents of an element except document itself.", (done) => {
+            document.body.innerHTML = `
+                <div class="level1">
+                    <div class="level2">
+                        <div class="level3">
+                            <div class="level4">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            `;
+            const res = dom.get_parents(document.querySelector(".level4"));
+
+            expect(res.length).toEqual(5);
+            expect(res[0]).toEqual(document.querySelector(".level3"));
+            expect(res[1]).toEqual(document.querySelector(".level2"));
+            expect(res[2]).toEqual(document.querySelector(".level1"));
+            expect(res[3]).toEqual(document.body);
+            expect(res[4]).toEqual(document.body.parentNode); // html
+
+            done();
+        });
+        it("don't break with no element.", (done) => {
+            const res = dom.get_parents(null);
+            expect(res.length).toEqual(0);
+
+            done();
+        });
+        it("don't break with DocumentFragment without a parent.", (done) => {
+            const el = new DocumentFragment();
+            el.innerHTML = `<div class="starthere"></div>`;
+            console.log(el.parentNode);
+            const res = dom.get_parents(el.querySelector(".starthere"));
+            expect(res.length).toEqual(0);
+
+            done();
+        });
+    });
+
     describe("is_visible", () => {
         it.skip("checks, if an element is visible or not.", (done) => {
             const div1 = document.createElement("div");

src/core/registry.js

@@ -145,11 +145,16 @@ const registry = {
             selectors.map((it) => it.trim().replace(/,$/, "")).join(",")
         );
         matches = matches.filter((el) => {
-            // Filter out code examples wrapped in <pre> elements.
-            // Also filter special class ``.cant-touch-this``
+            // Filter out patterns:
+            // - with class ``.cant-touch-this``
+            // - wrapped in ``.cant-touch-this`` elements
+            // - wrapped in ``hidden`` elements
+            // - wrapped in ``<pre>`` elements
             return (
-                dom.find_parents(el, "pre").length === 0 &&
-                !el.matches(".cant-touch-this")
+                !el.matches(".cant-touch-this") &&
+                !el?.parentNode?.closest?.(".cant-touch-this") &&
+                !el?.parentNode?.closest?.("[hidden]") &&
+                !el?.parentNode?.closest?.("pre")
             );
         });
 

src/core/registry.test.js

@@ -0,0 +1,99 @@
+import Base from "./base";
+import registry from "./registry";
+
+describe("pat-registry: The registry for patterns", function () {
+    const patterns = registry.patterns;
+
+    beforeEach(function () {
+        registry.clear();
+    });
+
+    afterEach(function () {
+        registry.patterns = patterns;
+    });
+
+    it("Does initialize a simple pattern when scanning a DOM tree", function () {
+        // Base extend also registers the pattern.
+        Base.extend({
+            name: "example",
+            trigger: ".pat-example",
+            init: function () {
+                this.el.innerHTML = "initialized";
+            },
+        });
+
+        const tree = document.createElement("div");
+        tree.setAttribute("class", "pat-example");
+        registry.scan(tree);
+        expect(tree.textContent).toBe("initialized");
+    });
+
+    it("Does initialize a tree of simple patterns when scanning a DOM tree", function () {
+        Base.extend({
+            name: "example1",
+            trigger: ".pat-example1",
+            init: function () {
+                this.el.innerHTML = "initialized1";
+            },
+        });
+
+        Base.extend({
+            name: "example2",
+            trigger: ".pat-example2",
+            init: function () {
+                this.el.innerHTML = "initialized2";
+            },
+        });
+
+        const tree = document.createElement("div");
+        tree.innerHTML = `
+            <div class="e1 pat-example1"></div>
+            <div class="e2 pat-example2"></div>
+            <div class="e3 pat-example1"></div>
+            <div class="e4 pat-example2"></div>
+        `;
+        registry.scan(tree);
+        expect(tree.querySelector(".e1").textContent).toBe("initialized1");
+        expect(tree.querySelector(".e2").textContent).toBe("initialized2");
+        expect(tree.querySelector(".e3").textContent).toBe("initialized1");
+        expect(tree.querySelector(".e4").textContent).toBe("initialized2");
+    });
+
+    it("Does not initialize patterns matching a filter", function () {
+        Base.extend({
+            name: "example",
+            trigger: ".pat-example",
+            init: function () {
+                this.el.innerHTML = "initialized";
+            },
+        });
+
+        const tree = document.createElement("div");
+        tree.innerHTML = `
+            <div class="e1 pat-example"></div>
+            <div class="e2 cant-touch-this pat-example"></div>
+            <div class="cant-touch-this">
+                <div class="e3 pat-example"></div>
+            </div>
+            <div hidden>
+                <div class="e4 pat-example"></div>
+            </div>
+            <div hidden="hidden">
+                <div class="e5 pat-example"></div>
+            </div>
+            <pre>
+                <div>
+                    <div class="e6 pat-example"></div>
+                </div>
+            </pre>
+        `;
+        registry.scan(tree);
+
+        expect(tree.querySelector(".e1").textContent).toBe("initialized");
+        expect(tree.querySelector(".e2").textContent).toBe("");
+        expect(tree.querySelector(".e3").textContent).toBe("");
+        expect(tree.querySelector(".e4").textContent).toBe("");
+        expect(tree.querySelector(".e5").textContent).toBe("");
+        expect(tree.querySelector(".e6").textContent).toBe("");
+    });
+});

src/pat/calendar/calendar.js

@@ -165,7 +165,9 @@ export default Base.extend({
         // we don't support any country-specific language variants, always use first 2 letters
         lang = lang.substr(0, 2).toLowerCase();
         if (lang !== "en") {
-            const locale = await import(`@fullcalendar/core/locales/${lang}`);
+            const locale = await import(
+                `@fullcalendar/core/locales/${lang}.js`
+            );
             config.locale = locale.default;
             console.log("loaded cal locale for " + lang);
         }