Patternslib · thet · Dec 23, 2020 · Dec 17, 2020 · Dec 17, 2020 · Dec 17, 2020
diff --git a/CHANGES.md b/CHANGES.md
@@ -55,6 +55,8 @@
 -   pat tabs: When clicking on the ``extra-tabs`` element, toggle between ``open`` and ``closed`` classes to allow opening/closing an extra-tabs menu via CSS.
 -   pat autofocus: Do not autofocus in iframes. Fixes: #761.
 -   pat inject: Allow configurable error pages. Can be disabled by adding ``pat-inject-errorhandler.off`` to the URL's query string.
+-   core utils: Add ``jqToNode`` to return a DOM node if a jQuery node was passed.
+-   pat inject: Rebase URLs in pattern configuration attributes. This avoids URLs in pattern configuration to point to unreachable paths in the context where the result is injected into.
 
 ### Technical
 
@@ -82,7 +84,8 @@
     Configure ``style_loader`` to insert CSS at the TOP of the html ``<head>``
     Provide a webpack-helpers module with a ``top_head_insert`` function which can be reused in depending projects.
 -   Build infra: Switch the CI system to GitHub Actions and drop Travis CI.
-
+-   core base: Add the parser instance to pattern attributes if available.
+    We can then reuse the parser from registered patterns. This is used in the ``_rebaseHTML`` method of pat-inject to URL-rebase the pattern configuration.
 
 ### Fixes
 

diff --git a/src/core/base.js b/src/core/base.js
@@ -17,15 +17,15 @@ import Registry from "./registry";
 import logging from "./logging";
 import mockupParser from "./mockup-parser";
 
-var log = logging.getLogger("Patternslib Base");
+const log = logging.getLogger("Patternslib Base");
 
-var initBasePattern = function ($el, options, trigger) {
+const initBasePattern = function ($el, options, trigger) {
     if (!$el.jquery) {
         $el = $($el);
     }
-    var name = this.prototype.name;
-    var log = logging.getLogger("pat." + name);
-    var pattern = $el.data("pattern-" + name);
+    const name = this.prototype.name;
+    const plog = logging.getLogger(`pat.${name}`);
+    let pattern = $el.data(`pattern-${name}`);
     if (pattern === undefined && Registry.patterns[name]) {
         try {
             options =
@@ -34,14 +34,14 @@ var initBasePattern = function ($el, options, trigger) {
                     : options;
             pattern = new Registry.patterns[name]($el, options, trigger);
         } catch (e) {
-            log.error("Failed while initializing '" + name + "' pattern.", e);
+            plog.error(`Failed while initializing ${name} pattern.`, e);
         }
-        $el.data("pattern-" + name, pattern);
+        $el.data(`pattern-${name}`, pattern);
     }
     return pattern;
 };
 
-var Base = function ($el, options, trigger) {
+const Base = function ($el, options, trigger) {
     if (!$el.jquery) {
         $el = $($el);
     }
@@ -54,23 +54,23 @@ var Base = function ($el, options, trigger) {
 
 Base.prototype = {
     constructor: Base,
-    on: function (eventName, eventCallback) {
-        this.$el.on(eventName + "." + this.name + ".patterns", eventCallback);
+    on(eventName, eventCallback) {
+        this.$el.on(`${eventName}.${this.name}.patterns`, eventCallback);
     },
-    emit: function (eventName, args) {
+    emit(eventName, args) {
         // args should be a list
         if (args === undefined) {
             args = [];
         }
-        this.$el.trigger(eventName + "." + this.name + ".patterns", args);
+        this.$el.trigger(`${eventName}.${this.name}.patterns`, args);
     },
 };
 
 Base.extend = function (patternProps) {
     /* Helper function to correctly set up the prototype chain for new patterns.
      */
-    var parent = this;
-    var child;
+    const parent = this;
+    let child;
 
     // Check that the required configuration properties are given.
     if (!patternProps) {
@@ -97,6 +97,7 @@ Base.extend = function (patternProps) {
     child.init = initBasePattern;
     child.jquery_plugin = true;
     child.trigger = patternProps.trigger;
+    child.parser = patternProps?.parser || null;
 
     // Set the prototype chain to inherit from `parent`, without calling
     // `parent`'s constructor function.
@@ -120,10 +121,7 @@ Base.extend = function (patternProps) {
         );
     } else if (!patternProps.trigger) {
         log.warn(
-            "The pattern '" +
-                patternProps.name +
-                "' does not " +
-                "have a trigger attribute, it will not be registered."
+            `The pattern ${patternProps.name} does not have a trigger attribute, it will not be registered.`
         );
     } else {
         Registry.register(child, patternProps.name);

diff --git a/src/core/dom.js b/src/core/dom.js
@@ -57,7 +57,8 @@ 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(selector) || null;
+    let parent =
+        (el?.parentNode?.closest && el.parentNode.closest(selector)) || null;
     const ret = [];
     while (parent) {
         ret.push(parent);

diff --git a/src/core/dom.test.js b/src/core/dom.test.js
@@ -173,6 +173,24 @@ describe("core.dom tests", () => {
             expect(res[0]).toEqual(document.querySelector(".level3")); // inner dom levels first // prettier-ignore
             expect(res[1]).toEqual(document.querySelector(".level1"));
 
+            done();
+        });
+        it("don't break with no element.", (done) => {
+            const res = dom.find_parents(null, ".findme");
+            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.find_parents(
+                el.querySelector(".starthere"),
+                ".findme"
+            );
+            expect(res.length).toEqual(0);
+
             done();
         });
     });

diff --git a/src/core/mockup-parser.js b/src/core/mockup-parser.js
@@ -1,7 +1,7 @@
 import $ from "jquery";
 
 var parser = {
-    getOptions: function getOptions($el, patternName, options) {
+    getOptions($el, patternName, options) {
         /* This is the Mockup parser. An alternative parser for Patternslib
          * patterns.
          *
@@ -13,23 +13,23 @@ var parser = {
         options = options || {};
         // get options from parent element first, stop if element tag name is 'body'
         if ($el.length !== 0 && !$.nodeName($el[0], "body")) {
-            options = getOptions($el.parent(), patternName, options);
+            options = this.getOptions($el.parent(), patternName, options);
         }
         // collect all options from element
-        var elOptions = {};
+        let elOptions = {};
         if ($el.length !== 0) {
             elOptions = $el.data("pat-" + patternName);
             if (elOptions) {
                 // parse options if string
                 if (typeof elOptions === "string") {
-                    var tmpOptions = {};
+                    const tmpOptions = {};
                     $.each(elOptions.split(";"), function (i, item) {
                         item = item.split(":");
                         item.reverse();
-                        var key = item.pop();
+                        let key = item.pop();
                         key = key.replace(/^\s+|\s+$/g, ""); // trim
                         item.reverse();
-                        var value = item.join(":");
+                        let value = item.join(":");
                         value = value.replace(/^\s+|\s+$/g, ""); // trim
                         tmpOptions[key] = value;
                     });