summaryrefslogtreecommitdiff
path: root/ext/mixed/js
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2020-11-15 14:12:48 -0500
committerGitHub <noreply@github.com>2020-11-15 14:12:48 -0500
commit2e3169f68ced13f437982a67d468b6e18cfb6825 (patch)
treef22c21b24fd83e3eaded51c2a33f24c8be8856b4 /ext/mixed/js
parent37af524015ce900af2f9ac2a7cb4efe9a79a55ee (diff)
Popup navigation style updates (#1035)
* Add close function to Display * Add new sidebar with navigation and close buttons * Set up new navigation functionality * Remove old navigation
Diffstat (limited to 'ext/mixed/js')
-rw-r--r--ext/mixed/js/display.js43
1 files changed, 31 insertions, 12 deletions
diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js
index f79ba303..2ee5b608 100644
--- a/ext/mixed/js/display.js
+++ b/ext/mixed/js/display.js
@@ -90,6 +90,10 @@ class Display extends EventDispatcher {
this._contentScrollBodyElement = document.querySelector('#content-body');
this._contentScrollFocusElement = document.querySelector('#content-scroll-focus');
this._windowScroll = new WindowScroll(this._contentScrollElement);
+ this._contentSidebar = document.querySelector('#content-sidebar');
+ this._closeButton = document.querySelector('#close-button');
+ this._navigationPreviousButton = document.querySelector('#navigate-previous-button');
+ this._navigationNextButton = document.querySelector('#navigate-next-button');
this.registerActions([
['close', () => { this.onEscape(); }],
@@ -406,6 +410,10 @@ class Display extends EventDispatcher {
return query;
}
+ close() {
+ // NOP
+ }
+
// Message handlers
_onMessage({action, params}, sender, callback) {
@@ -543,6 +551,11 @@ class Display extends EventDispatcher {
this.setContent(details);
}
+ _onCloseButtonClick(e) {
+ e.preventDefault();
+ this.close();
+ }
+
_onSourceTermView(e) {
e.preventDefault();
this._sourceTermView();
@@ -769,16 +782,16 @@ class Display extends EventDispatcher {
this._interactive = interactive;
if (interactive) {
- const actionPrevious = document.querySelector('.action-previous');
- const actionNext = document.querySelector('.action-next');
-
this._persistentEventListeners.addEventListener(document, 'keydown', this.onKeyDown.bind(this), false);
this._persistentEventListeners.addEventListener(document, 'wheel', this._onWheel.bind(this), {passive: false});
- if (actionPrevious !== null) {
- this._persistentEventListeners.addEventListener(actionPrevious, 'click', this._onSourceTermView.bind(this));
+ if (this._closeButton !== null) {
+ this._persistentEventListeners.addEventListener(this._closeButton, 'click', this._onCloseButtonClick.bind(this));
+ }
+ if (this._navigationPreviousButton !== null) {
+ this._persistentEventListeners.addEventListener(this._navigationPreviousButton, 'click', this._onSourceTermView.bind(this));
}
- if (actionNext !== null) {
- this._persistentEventListeners.addEventListener(actionNext, 'click', this._onNextTermView.bind(this));
+ if (this._navigationNextButton !== null) {
+ this._persistentEventListeners.addEventListener(this._navigationNextButton, 'click', this._onNextTermView.bind(this));
}
} else {
this._persistentEventListeners.removeAllEventListeners();
@@ -943,7 +956,7 @@ class Display extends EventDispatcher {
errorExtensionUnloaded.hidden = false;
}
- this._updateNavigation(null, null);
+ this._updateNavigation(false, false);
this._setNoContentVisible(false);
this._setTitleText('');
}
@@ -984,10 +997,16 @@ class Display extends EventDispatcher {
}
_updateNavigation(previous, next) {
- if (this._navigationHeader === null) { return; }
- this._navigationHeader.hidden = !(previous || next);
- this._navigationHeader.dataset.hasPrevious = `${!!previous}`;
- this._navigationHeader.dataset.hasNext = `${!!next}`;
+ if (this._contentSidebar !== null) {
+ this._contentSidebar.dataset.hasNavigationPrevious = `${previous}`;
+ this._contentSidebar.dataset.hasNavigationNext = `${next}`;
+ }
+ if (this._navigationPreviousButton !== null) {
+ this._navigationPreviousButton.disabled = !previous;
+ }
+ if (this._navigationNextButton !== null) {
+ this._navigationNextButton.disabled = !next;
+ }
}
async _updateAdderButtons(token, isTerms, definitions) {