aboutsummaryrefslogtreecommitdiff
path: root/ext/js
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2021-02-28 17:13:11 -0500
committerGitHub <noreply@github.com>2021-02-28 17:13:11 -0500
commit90da87f37828fd631d037709f2847966a7673f6d (patch)
tree4c6134338d8e5ef8653c2cd61acb342a1fa26fbb /ext/js
parentc192b4a4c1b99be67d7503f084ff5f165e965735 (diff)
Add support for resizing the popup window using touch events (#1471)
Diffstat (limited to 'ext/js')
-rw-r--r--ext/js/display/display.js56
1 files changed, 56 insertions, 0 deletions
diff --git a/ext/js/display/display.js b/ext/js/display/display.js
index a6f61dad..d584db11 100644
--- a/ext/js/display/display.js
+++ b/ext/js/display/display.js
@@ -108,6 +108,7 @@ class Display extends EventDispatcher {
this._definitionTextScanner = null;
this._frameResizeToken = null;
this._frameResizeHandle = document.querySelector('#frame-resizer-handle');
+ this._frameResizeTouchIdentifier = null;
this._frameResizeStartSize = null;
this._frameResizeStartOffset = null;
this._frameResizeEventListeners = new EventListenerCollection();
@@ -245,6 +246,7 @@ class Display extends EventDispatcher {
if (this._frameResizeHandle !== null) {
this._frameResizeHandle.addEventListener('mousedown', this._onFrameResizerMouseDown.bind(this), false);
+ this._frameResizeHandle.addEventListener('touchstart', this._onFrameResizerTouchStart.bind(this), false);
}
}
@@ -1784,6 +1786,11 @@ class Display extends EventDispatcher {
this._startFrameResize(e);
}
+ _onFrameResizerTouchStart(e) {
+ e.preventDefault();
+ this._startFrameResizeTouch(e);
+ }
+
_onFrameResizerMouseUp() {
this._stopFrameResize();
}
@@ -1802,6 +1809,24 @@ class Display extends EventDispatcher {
}
}
+ _onFrameResizerTouchEnd(e) {
+ if (this._getTouch(e.changedTouches, this._frameResizeTouchIdentifier) === null) { return; }
+ this._stopFrameResize();
+ }
+
+ _onFrameResizerTouchCancel(e) {
+ if (this._getTouch(e.changedTouches, this._frameResizeTouchIdentifier) === null) { return; }
+ this._stopFrameResize();
+ }
+
+ _onFrameResizerTouchMove(e) {
+ if (this._frameResizeStartSize === null) { return; }
+ const primaryTouch = this._getTouch(e.changedTouches, this._frameResizeTouchIdentifier);
+ if (primaryTouch === null) { return; }
+ const {clientX: x, clientY: y} = primaryTouch;
+ this._updateFrameSize(x, y);
+ }
+
_getSearchContext() {
return {optionsContext: this.getOptionsContext()};
}
@@ -1825,6 +1850,27 @@ class Display extends EventDispatcher {
this._initializeFrameResize(token);
}
+ _startFrameResizeTouch(e) {
+ if (this._frameResizeToken !== null) { return; }
+
+ const {clientX: x, clientY: y, identifier} = e.changedTouches[0];
+ const token = {};
+ this._frameResizeToken = token;
+ this._frameResizeStartOffset = {x, y};
+ this._frameResizeTouchIdentifier = identifier;
+ this._frameResizeEventListeners.addEventListener(window, 'touchend', this._onFrameResizerTouchEnd.bind(this), false);
+ this._frameResizeEventListeners.addEventListener(window, 'touchcancel', this._onFrameResizerTouchCancel.bind(this), false);
+ this._frameResizeEventListeners.addEventListener(window, 'blur', this._onFrameResizerWindowBlur.bind(this), false);
+ this._frameResizeEventListeners.addEventListener(window, 'touchmove', this._onFrameResizerTouchMove.bind(this), false);
+
+ const {documentElement} = document;
+ if (documentElement !== null) {
+ documentElement.dataset.isResizing = 'true';
+ }
+
+ this._initializeFrameResize(token);
+ }
+
async _initializeFrameResize(token) {
const size = await this._invokeContentOrigin('getFrameSize');
if (this._frameResizeToken !== token) { return; }
@@ -1837,6 +1883,7 @@ class Display extends EventDispatcher {
this._frameResizeEventListeners.removeAllEventListeners();
this._frameResizeStartSize = null;
this._frameResizeStartOffset = null;
+ this._frameResizeTouchIdentifier = null;
this._frameResizeToken = null;
const {documentElement} = document;
@@ -1855,6 +1902,15 @@ class Display extends EventDispatcher {
await this._invokeContentOrigin('setFrameSize', {width, height});
}
+ _getTouch(touchList, identifier) {
+ for (const touch of touchList) {
+ if (touch.identifier === identifier) {
+ return touch;
+ }
+ }
+ return null;
+ }
+
_updateHotkeys(options) {
this._hotkeyHandler.setHotkeys(this._pageType, options.inputs.hotkeys);
}