Structured content links (#2089)

* Update CSS to JSON converter to generalize the remove-property comment

* Fix navigation not being updated when _clearContent is run

* Add structured content schema for link tags

* Add test links

* Add external-link icon

* Pass Display instance to DisplayContentManager

* Update structured content generation

* Update link styles

1 files changed, 45 insertions, 1 deletions

diff --git a/ext/js/display/display-content-manager.js b/ext/js/display/display-content-manager.js
index 0818f915..0b91b40c 100644
--- a/ext/js/display/display-content-manager.js
+++ b/ext/js/display/display-content-manager.js
@@ -37,11 +37,14 @@
 class DisplayContentManager {
     /**
      * Creates a new instance of the class.
+     * @param {Display} display The display instance that owns this object.
      */
-    constructor() {
+    constructor(display) {
+        this._display = display;
         this._token = {};
         this._mediaCache = new Map();
         this._loadMediaData = [];
+        this._eventListeners = new EventListenerCollection();
     }
 
     /**
@@ -77,6 +80,23 @@ class DisplayContentManager {
         this._mediaCache.clear();
 
         this._token = {};
+
+        this._eventListeners.removeAllEventListeners();
+    }
+
+    /**
+     * Sets up attributes and events for a link element.
+     * @param {Element} element The link element.
+     * @param {string} href The URL.
+     * @param {boolean} internal Whether or not the URL is an internal or external link.
+     */
+    prepareLink(element, href, internal) {
+        element.href = href;
+        if (!internal) {
+            element.target = '_blank';
+            element.rel = 'noreferrer noopener';
+        }
+        this._eventListeners.addEventListener(element, 'click', this._onLinkClick.bind(this));
     }
 
     async _loadMedia(path, dictionary, onLoad, onUnload) {
@@ -127,4 +147,28 @@ class DisplayContentManager {
         }
         return cachedData;
     }
+
+    _onLinkClick(e) {
+        const {href} = e.currentTarget;
+        if (typeof href !== 'string') { return; }
+
+        const baseUrl = new URL(location.href);
+        const url = new URL(href, baseUrl);
+        const internal = (url.protocol === baseUrl.protocol && url.host === baseUrl.host);
+        if (!internal) { return; }
+
+        e.preventDefault();
+
+        const params = {};
+        for (const [key, value] of url.searchParams.entries()) {
+            params[key] = value;
+        }
+        this._display.setContent({
+            historyMode: 'new',
+            focus: false,
+            params,
+            state: null,
+            content: null
+        });
+    }
 }