aboutsummaryrefslogtreecommitdiff
path: root/ext/bg/js/settings/popup-elements.js
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2020-12-20 19:59:39 -0500
committerGitHub <noreply@github.com>2020-12-20 19:59:39 -0500
commit3ef1b9ebb27897ce76fcefc267fe8bf29bc90e02 (patch)
tree83341995415f3268ef8c8bd8e444cb02632c2642 /ext/bg/js/settings/popup-elements.js
parent8747a29f9f5141abec179b64f40951f589242e3e (diff)
Settings v2 modal size toggle (#1149)
* Add collapse/expand icons * Update header layout * Allow size animation * Add styles for modal header buttons * Support action buttons * Update modals to support size changing
Diffstat (limited to 'ext/bg/js/settings/popup-elements.js')
-rw-r--r--ext/bg/js/settings/popup-elements.js25
1 files changed, 24 insertions, 1 deletions
diff --git a/ext/bg/js/settings/popup-elements.js b/ext/bg/js/settings/popup-elements.js
index 15de91e8..930f02cd 100644
--- a/ext/bg/js/settings/popup-elements.js
+++ b/ext/bg/js/settings/popup-elements.js
@@ -112,16 +112,22 @@ class Modal extends PopupElement {
closingClassName: 'modal-container-closing',
closingAnimationDuration: 375 // Milliseconds; includes buffer
});
+ this._contentNode = null;
this._canCloseOnClick = false;
}
prepare() {
- const node = this._node;
+ const node = this.node;
+ this._contentNode = node.querySelector('.modal-content');
let dimmerNode = node.querySelector('.modal-content-dimmer');
if (dimmerNode === null) { dimmerNode = node; }
dimmerNode.addEventListener('mousedown', this._onModalContainerMouseDown.bind(this), false);
dimmerNode.addEventListener('mouseup', this._onModalContainerMouseUp.bind(this), false);
dimmerNode.addEventListener('click', this._onModalContainerClick.bind(this), false);
+
+ for (const actionNode of node.querySelectorAll('[data-modal-action]')) {
+ actionNode.addEventListener('click', this._onActionNodeClick.bind(this), false);
+ }
}
// Private
@@ -141,6 +147,23 @@ class Modal extends PopupElement {
if (e.currentTarget !== e.target) { return; }
this.setVisible(false);
}
+
+ _onActionNodeClick(e) {
+ const {modalAction} = e.currentTarget.dataset;
+ switch (modalAction) {
+ case 'expand':
+ this._setExpanded(true);
+ break;
+ case 'collapse':
+ this._setExpanded(false);
+ break;
+ }
+ }
+
+ _setExpanded(expanded) {
+ if (this._contentNode === null) { return; }
+ this._contentNode.classList.toggle('modal-content-full', expanded);
+ }
}
class StatusFooter extends PopupElement {