diff --git a/CHANGES.md b/CHANGES.md index 41559e0b1..341b927bc 100644 --- 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 index 3514a1ed0..66f0c9052 100644 --- 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 index baf851fa4..b0f178262 100644 --- 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(` +
+ does work. +
`); + + expect(res.getAttribute("id")).toEqual("section1"); + expect(res.querySelector("span.yo").textContent).toEqual( + "does work." + ); + + res = dom.create_from_string(` +
+
+ `); + // Section 2 is not returned. + expect(res.getAttribute("id")).toEqual("section1"); + + // TD elements or others which can not be direct children of a + //
are not yet supported. + // Also see: https://stackoverflow.com/a/494348/1337474 + res = dom.create_from_string(``); + expect(res).toBeFalsy(); + + done(); + }); + }); }); diff --git a/src/core/utils.js b/src/core/utils.js index 5ae1eef47..02c0c238c 100644 --- 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 index 7e8995087..31892798f 100644 --- a/src/pat/inject/documentation.md +++ b/src/pat/inject/documentation.md @@ -323,6 +323,21 @@ After injection was triggered: +### 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 ````: + + + +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 index 02ebb413e..1ef25f6f0 100644 --- a/src/pat/inject/index.html +++ b/src/pat/inject/index.html @@ -8,6 +8,7 @@ + Injection pattern