Merge pull request #993 from Patternslib/disable-patterns

feat: Introduce ``disable-patterns`` class to prevent from initializing.

Author: thet

src/core/registry.js

@@ -146,15 +146,17 @@ const registry = {
         );
         matches = matches.filter((el) => {
             // Filter out patterns:
-            // - with class ``.cant-touch-this``
-            // - wrapped in ``.cant-touch-this`` elements
+            // - with class ``.disable-patterns``
+            // - wrapped in ``.disable-patterns`` elements
             // - wrapped in ``<pre>`` elements
             // - wrapped in ``<template>`` elements
             return (
-                !el.matches(".cant-touch-this") &&
-                !el?.parentNode?.closest?.(".cant-touch-this") &&
+                !el.matches(".disable-patterns") &&
+                !el?.parentNode?.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?.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.
             );
         });
 

src/core/registry.test.js

@@ -71,8 +71,8 @@ describe("pat-registry: The registry for patterns", function () {
         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="e2 disable-patterns pat-example"></div>
+            <div class="disable-patterns">
                 <div class="e3 pat-example"></div>
             </div>
             <pre>

src/pat/clone/clone.js

@@ -57,7 +57,7 @@ export default Base.extend({
                 : $(this.template).safeClone();
 
         const ids = ($clone.attr("id") || "").split(" ").filter((it) => it);
-        $clone.removeAttr("id").removeClass("cant-touch-this");
+        $clone.removeAttr("id").removeClass("disable-patterns");
         $.each(
             ids,
             function (idx, id) {

src/pat/clone/clone.test.js

@@ -294,7 +294,7 @@ describe("pat-clone", function () {
             ).toBe("initializedinitialized");
         });
 
-        it("will not initialize patterns in the template wrapped in cant-touch-this.", function () {
+        it("will not initialize patterns in the template wrapped in disable-patterns.", function () {
             Base.extend({
                 name: "example",
                 trigger: ".pat-example",
@@ -304,7 +304,7 @@ describe("pat-clone", function () {
             });
 
             document.body.innerHTML = `
-                <div id="template" class="cant-touch-this">
+                <div id="template" class="disable-patterns">
                     <div class="pat-example"></div>
                 </div>
                 <div class="pat-clone" data-pat-clone="template: #template">

src/pat/clone/documentation.md

@@ -86,10 +86,10 @@ The markup below would have exactly the same effect as the first example, but us
 ### Example with a hidden template which includes a pattern
 
 Patterns in templates are initialized after cloning.
-However, the patterns in the template itself are not initialized if the template has the attribute ``hidden`` or the class ``cant-touch-this``.
+However, the patterns in the template itself are not initialized if the template has the attribute ``hidden`` or the class ``disable-patterns``.
 This is to prevent double-initialization within the template and after being cloned.
 
-    <div id="template" class="cant-touch-this" hidden>
+    <div id="template" class="disable-patterns" hidden>
       <input name="date-1" type="date" class="pat-date-picker" />
     </fieldset>
 

src/pat/legend/legend.js

@@ -24,7 +24,7 @@ var legend = {
 
     transform: function ($root) {
         const root = utils.jqToNode($root);
-        const all = dom.querySelectorAllAndMe(root, "legend:not(.cant-touch-this)");
+        const all = dom.querySelectorAllAndMe(root, "legend:not(.disable-patterns)");
         for (const el of all) {
             $(el).replaceWith("<p class='legend'>" + $(el).html() + "</p>");
         }