Patternslib improvements

src/core/registry.js

@@ -133,13 +133,24 @@ const registry = {
     },
 
     orderPatterns(patterns) {
+        // Resort patterns and set those with `sort_early` to the beginning.
+        // NOTE: Only use when necessary and it's not guaranteed that a pattern
+        // with `sort_early` is set to the beginning. Last come, first serve.
+        for (const name of [...patterns]) {
+            if (registry[name]?.sort_early) {
+                patterns.splice(patterns.indexOf(name), 1);
+                patterns.unshift(name);
+            }
+        }
+
         // Always add pat-validation as first pattern, so that it can prevent
         // other patterns from reacting to submit events if form validation
         // fails.
         if (patterns.includes("validation")) {
             patterns.splice(patterns.indexOf("validation"), 1);
             patterns.unshift("validation");
         }
+
         // Add clone-code to the very beginning - we want to copy the markup
         // before any other patterns changed the markup.
         if (patterns.includes("clone-code")) {
@@ -180,17 +191,16 @@ const registry = {
         );
         matches = matches.filter((el) => {
             // Filter out patterns:
-            // - with class ``.disable-patterns``
-            // - wrapped in ``.disable-patterns`` elements
+            // - with class ``.disable-patterns`` or wrapped within.
             // - wrapped in ``<pre>`` elements
             // - wrapped in ``<template>`` elements
             return (
-                !el.matches(".disable-patterns") &&
-                !el?.parentNode?.closest?.(".disable-patterns") &&
+                !el?.closest?.(".disable-patterns") &&
                 !el?.parentNode?.closest?.("pre") &&
-                !el?.parentNode?.closest?.("template") && // NOTE: not strictly necessary. Template is a DocumentFragment and not reachable except for IE.
-                !el.matches(".cant-touch-this") && // BBB. TODO: Remove with next major version.
-                !el?.parentNode?.closest?.(".cant-touch-this") // BBB. TODO: Remove with next major version.
+                // BBB. TODO: Remove with next major version.
+                !el?.closest?.(".cant-touch-this")
+                // NOTE: templates are not reachabne anyways.
+                //!el?.parentNode?.closest?.("template")
             );
         });
 

src/lib/input-change-events.js

@@ -1,17 +1,18 @@
 // helper functions to make all input elements
 import $ from "jquery";
 import logging from "../core/logging";
-var namespace = "input-change-events";
+
+const namespace = "input-change-events";
 const log = logging.getLogger(namespace);
 
-var _ = {
-    setup: function ($el, pat) {
+const _ = {
+    setup($el, pat) {
         if (!pat) {
             log.error("The name of the calling pattern has to be set.");
             return;
         }
         // list of patterns that installed input-change-event handlers
-        var patterns = $el.data(namespace) || [];
+        const patterns = $el.data(namespace) || [];
         log.debug("setup handlers for " + pat);
 
         if (!patterns.length) {
@@ -28,53 +29,63 @@ var _ = {
         }
     },
 
-    setupInputHandlers: function ($el) {
-        if (!$el.is(":input")) {
-            // We've been given an element that is not a form input. We
-            // therefore assume that it's a container of form inputs and
-            // register handlers for its children.
-            $el.findInclusive(":input").each(_.registerHandlersForElement);
-        } else {
+    setupInputHandlers($el) {
+        if ($el.is(":input")) {
             // The element itself is an input, se we simply register a
             // handler fot it.
             _.registerHandlersForElement.bind($el)();
+        } else {
+            // We've been given an element that is not a form input. We
+            // therefore assume that it's a container of form inputs and
+            // register handlers for its children.
+            for (const _el of $el[0].closest("form").elements) {
+                // Search for all form elements, also those outside the form
+                // container.
+                _.registerHandlersForElement.bind(_el)();
+            }
         }
     },
 
-    registerHandlersForElement: function () {
-        var $el = $(this),
-            isNumber = $el.is("input[type=number]"),
-            isText = $el.is("input:text, input[type=search], textarea");
+    registerHandlersForElement() {
+        let el_within_form = true;
+        const $form = $(this.form);
+        if (this.closest("form") !== this.form) {
+            el_within_form = false;
+        }
+
+        const $el = $(this);
+        const isNumber = $el.is("input[type=number]");
+        const isText = $el.is("input:text, input[type=search], textarea");
 
         if (isNumber) {
             // for <input type="number" /> we want to trigger the change
             // on keyup
             if ("onkeyup" in window) {
                 $el.on("keyup." + namespace, function () {
                     log.debug("translating keyup");
-                    $el.trigger("input-change");
+                    (el_within_form ? $el : $form).trigger("input-change");
                 });
             }
         }
         if (isText || isNumber) {
             $el.on("input." + namespace, function () {
                 log.debug("translating input");
-                $el.trigger("input-change");
+                (el_within_form ? $el : $form).trigger("input-change");
             });
         } else {
             $el.on("change." + namespace, function () {
                 log.debug("translating change");
-                $el.trigger("input-change");
+                (el_within_form ? $el : $form).trigger("input-change");
             });
         }
 
         $el.on("blur", function () {
-            $el.trigger("input-defocus");
+            (el_within_form ? $el : $form).trigger("input-defocus");
         });
     },
 
-    remove: function ($el, pat) {
-        var patterns = $el.data(namespace) || [];
+    remove($el, pat) {
+        let patterns = $el.data(namespace) || [];
         if (patterns.indexOf(pat) === -1) {
             log.warn("input-change-events were never installed for " + pat);
         } else {