aboutsummaryrefslogtreecommitdiff
path: root/ext/js/display/display-content-manager.js
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2022-03-17 19:01:59 -0400
committerGitHub <noreply@github.com>2022-03-17 19:01:59 -0400
commit7a2ab866099edffaba471ad808593f67ee796b21 (patch)
treeddfe746ed76e16d80e0ac6e3029e2bc1049544d2 /ext/js/display/display-content-manager.js
parent8aa060337cea2bb8fce7864d509d07df4688f1c2 (diff)
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
Diffstat (limited to 'ext/js/display/display-content-manager.js')
-rw-r--r--ext/js/display/display-content-manager.js46
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
+ });
+ }
}