Patternslib · thet · Dec 16, 2020 · Dec 10, 2020 · Dec 15, 2020 · Dec 9, 2020
diff --git a/CHANGES.md b/CHANGES.md
@@ -48,11 +48,13 @@
 -   core dom: Add ``find_parents`` to find all parents of an element matching a CSS selector.
 -   core dom: Add ``find_scoped`` to search for elements matching the given selector within the current scope of the given element
 -   core dom: Add ``is_visible`` to check if an element is visible or not.
+-   core dom: Add ``create_from_string`` to create a DOM Element from a string.
     unless an ``id`` selector is given - in that case the search is done globally.
 -   pat date picker: Support updating a date if it is before another dependent date.
 -   pat tabs: Refactor based on ``ResizeObserver`` and fix problems calculating the with with transitions.
 -   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.
 
 ### Technical
 

diff --git a/src/core/dom.js b/src/core/dom.js
@@ -80,6 +80,13 @@ const is_visible = (el) => {
     return el.offsetWidth > 0 && el.offsetHeight > 0;
 };
 
+const create_from_string = (string) => {
+    // Create a DOM element from a string.
+    const div = document.createElement("div");
+    div.innerHTML = string.trim();
+    return div.firstChild;
+};
+
 const dom = {
     toNodeArray: toNodeArray,
     querySelectorAllAndMe: querySelectorAllAndMe,
@@ -89,6 +96,7 @@ const dom = {
     find_parents: find_parents,
     find_scoped: find_scoped,
     is_visible: is_visible,
+    create_from_string: create_from_string,
 };
 
 export default dom;
diff --git a/src/core/dom.test.js b/src/core/dom.test.js
@@ -249,4 +249,33 @@ describe("core.dom tests", () => {
             done();
         });
     });
+
+    describe("create_from_string", () => {
+        it("Creates a DOM element from a string", (done) => {
+            let res = dom.create_from_string(`
+                <section id="section1">
+                    <span class='yo'>does work.</span>
+                </section>`);
+
+            expect(res.getAttribute("id")).toEqual("section1");
+            expect(res.querySelector("span.yo").textContent).toEqual(
+                "does work."
+            );
+
+            res = dom.create_from_string(`
+                <section id="section1"></section>
+                <section id="section2"></section>
+            `);
+            // Section 2 is not returned.
+            expect(res.getAttribute("id")).toEqual("section1");
+
+            // TD elements or others which can not be direct children of a
+            // <div> are not yet supported.
+            // Also see: https://stackoverflow.com/a/494348/1337474
+            res = dom.create_from_string(`<td></td>`);
+            expect(res).toBeFalsy();
+
+            done();
+        });
+    });
 });
diff --git a/src/core/utils.js b/src/core/utils.js
@@ -536,9 +536,8 @@ const debounce = (func, ms) => {
     return function () {
         clearTimeout(timer);
         const args = arguments;
-        const context = this;
         timer = setTimeout(() => {
-            func.apply(context, args);
+            func.apply(this, args);
         }, ms);
     };
 };

diff --git a/src/pat/inject/documentation.md b/src/pat/inject/documentation.md
@@ -323,6 +323,21 @@ After injection was triggered:
 
     <a class="pat-inject" href="modal-source.html" data-pat-inject="type: modal">
 
+### Configurable error pages.
+
+In cases of AJAX errors, you can provide custom error pages by providing custom meta tags.
+For example, if you add this meta tag to the html ``<head>``:
+
+    <meta name="pat-inject-404" content="/test_404.html" />
+
+Then, in case of a ``404`` error, it will try to retrieve the error page and replace the document body contents with the body contents of the error page.
+The code looks for a meta tag with the name ``pat-inject-`` plus the HTTP status code.
+
+Another example: You can present the user with a login page in case the session has expired (``401`` error).
+
+You can disable this behavior for debugging by adding the following parameter to the query string:
+``pat-inject-errorhandler.off``.
+
 ### Options reference
 
 You can customise the behaviour of injection through options in the `data-pat-inject` attribute.

diff --git a/src/pat/inject/index.html b/src/pat/inject/index.html
@@ -8,6 +8,7 @@
         <meta name="patterns-push-login" content="guest" />
         <meta name="patterns-push-password" content="guest" />
         <meta name="patterns-push-user-id" content="allan_neece" />
+        <meta name="pat-inject-404" content="./test_404.html" />
         <title>Injection pattern</title>
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
         <script
@@ -400,6 +401,18 @@ <h2>Inject and scroll demos</h2>
             </ul>
         </section>
 
+        <section>
+          <h3>Shows a fallback message on error</h3>
+          <a
+              type="button"
+              class="pat-inject"
+              href="./i-do-not-exist.html"
+              data-pat-inject="target: self::element"
+          >
+            Show me some error!
+          </a>
+        </section>
+
         <div id="inject-demo__content-wrapper" style="display: none">
           <section id="inject-demo__content">Liked</section>
         </div>