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.

Author: thet

CHANGES.md

@@ -56,6 +56,7 @@
 -   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
 

src/pat/inject/index.html

@@ -413,6 +413,18 @@ <h3>Shows a fallback message on error</h3>
           </a>
         </section>
 
+        <section id="rebase-url-demo">
+          <div>
+            <h3>Inject and fix URLs of options</h3>
+            <a
+                class="pat-inject"
+                data-pat-inject="url:./index.html#rebase-url-demo; target: self::element"
+            >
+              injection happens here!
+            </button>
+          </div>
+        </section>
+
         <div id="inject-demo__content-wrapper" style="display: none">
           <section id="inject-demo__content">Liked</section>
         </div>
@@ -667,6 +679,14 @@ <h3>
                     transform: scale(1);
                 }
             }
+
+            #rebase-url-demo a {
+                cursor: pointer;
+            }
+            #rebase-url-demo div div {
+              margin-left: 2em;
+              border: 1px solid black;
+            }
         </style>
     </body>
 </html>

src/pat/inject/inject.js

@@ -3,6 +3,7 @@ import "regenerator-runtime/runtime"; // needed for ``await`` support
 import $ from "jquery";
 import _ from "underscore";
 import ajax from "../ajax/ajax";
+import dom from "../../core/dom";
 import logging from "../../core/logging";
 import Parser from "../../core/parser";
 import registry from "../../core/registry";
@@ -867,6 +868,14 @@ const inject = {
         VIDEO: "data-pat-inject-rebase-src",
     },
 
+    _rebaseOptions: {
+        "data-pat-inject": ["url"],
+        "data-pat-calendar": ["url"],
+        "data-pat-date-picker": ["i18n"],
+        "data-pat-datetime-picker": ["i18n"],
+        "data-pat-collapsible": ["load-content"],
+    },
+
     _rebaseHTML(base, html) {
         if (html === "") {
             // Special case, source is none
@@ -901,6 +910,29 @@ const inject = {
                     $el_.attr(attrName, value);
                 }
             });
+
+        for (const [attr, opts] of Object.entries(this._rebaseOptions)) {
+            for (const el_ of dom.querySelectorAllAndMe(
+                $page[0],
+                `[${attr}]`
+            )) {
+                const val = el_.getAttribute(attr, false);
+                if (val) {
+                    let options = parser._parse(val);
+                    let changed = false;
+                    for (const opt of opts) {
+                        if (options[opt]) {
+                            options[opt] = utils.rebaseURL(base, options[opt]);
+                            changed = true;
+                        }
+                    }
+                    if (changed) {
+                        el_.setAttribute(attr, JSON.stringify(options));
+                    }
+                }
+            }
+        }
+
         // XXX: IE8 changes the order of attributes in html. The following
         // lines move data-pat-inject-rebase-src to src.
         $page.find("[data-pat-inject-rebase-src]").each((id, el_) => {