diff options
| -rw-r--r-- | ext/js/display/display.js | 56 |
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); } |