Page MenuHomeWickedGov Phorge
Files F4113002

ve.init.mw.ViewportZoomHandler.js
No OneTemporary
Actions

Size
4 KB
Referenced Files
None
Subscribers
None

ve.init.mw.ViewportZoomHandler.js
View Options

/*!
* VisualEditor MediaWiki Initialization ViewportZoomHandler class.
*
* @copyright See AUTHORS.txt
* @license The MIT License (MIT); see LICENSE.txt
*/
/**
* Prevent iOS browsers from wrongly zooming in the page when the surface is focussed. (T216446)
*
* When the user places a cursor for text input anywhere on the page, iOS browsers zoom in the page
* to ensure the text size is legible and the cursor can be comfortably placed in the right place
* with a finger.
*
* There's a browser bug that, on some devices (e.g. iPhone XS, but not iPhone SE), causes this
* zoom to occur even though our text is already using the required minimum font size (16px).
* Additionally, the zoom occurs when placing the cursor in image captions, which intentionally
* use a smaller font size.
*
* In both cases the zoom is more problematic than helpful, because it causes parts of the toolbar
* to disappear outside the viewport.
*
* To prevent it, temporarily add a tag like `<meta name="viewport" content="maximum-scale=1.0">`
* to the page when the user is about to focus the editing surface. However, on iOS Chrome, this
* also prevents intentional pinch-zoom. To avoid this, immediately remove the tag again after
* focussing, or if it looks like the user is trying to zoom (used multi-touch or caused a scroll).
*
* @class
* @constructor
*/
ve.init.mw.ViewportZoomHandler = function VeInitMwViewportZoomHandler() {
// eslint-disable-next-line no-jquery/no-global-selector
this.$viewportMeta = $( 'meta[name="viewport"]' );
if ( !this.$viewportMeta.length ) {
this.$viewportMeta = $( '<meta>' ).attr( 'name', 'viewport' ).appendTo( document.head );
}
this.origViewportMetaContent = this.$viewportMeta.attr( 'content' );
this.onTouchStartHandler = this.onTouchStart.bind( this );
this.onTouchMoveHandler = this.onTouchMove.bind( this );
this.onTouchEndHandler = this.onTouchEnd.bind( this );
};
/* Methods */
/**
* Change the `<meta name="viewport">` tag to prevent automatic zooming.
*/
ve.init.mw.ViewportZoomHandler.prototype.preventZoom = function () {
this.$viewportMeta.attr( 'content', ( i, val ) => {
// Remove existing maximum-scale, if any, and add 'maximum-scale=1.0'. Don't change other values.
if ( val ) {
val = val.replace( /maximum-scale=[\d.]+(,\s*|$)/, '' );
val += ', ';
} else {
val = '';
}
return val + 'maximum-scale=1.0';
} );
};
/**
* Change the `<meta name="viewport">` tag to allow automatic zooming once again.
*/
ve.init.mw.ViewportZoomHandler.prototype.allowZoom = function () {
this.$viewportMeta.attr( 'content', this.origViewportMetaContent );
};
/**
* Start listening to events and preventing zooming.
*
* @param {ve.ui.Surface} surface
*/
ve.init.mw.ViewportZoomHandler.prototype.attach = function ( surface ) {
this.surface = surface;
this.surface.getView().$element.on( {
touchstart: this.onTouchStartHandler,
touchmove: this.onTouchMoveHandler,
touchend: this.onTouchEndHandler
} );
this.surface.getModel().connect( this, {
focus: 'onFocus'
} );
};
/**
* Stop listening to events.
*/
ve.init.mw.ViewportZoomHandler.prototype.detach = function () {
this.surface.getView().$element.off( {
touchstart: this.onTouchStartHandler,
touchmove: this.onTouchMoveHandler,
touchend: this.onTouchEndHandler
} );
this.surface.getModel().disconnect( this, {
focus: 'onFocus'
} );
this.surface = null;
};
/**
* Handle touch start events.
*
* @param {jQuery.Event} e Touch start event
*/
ve.init.mw.ViewportZoomHandler.prototype.onTouchStart = function ( e ) {
if ( e.touches.length === 1 ) {
this.wasMoved = false;
}
this.allowZoom();
};
/**
* Handle touch move events.
*
* @param {jQuery.Event} e Touch move event
*/
ve.init.mw.ViewportZoomHandler.prototype.onTouchMove = function () {
this.wasMoved = true;
};
/**
* Handle touch end events.
*
* @param {jQuery.Event} e Touch end event
*/
ve.init.mw.ViewportZoomHandler.prototype.onTouchEnd = function ( e ) {
if ( e.touches.length === 0 && !this.wasMoved ) {
// There was a single touch point, that hasn't moved, and now it's gone.
// Looks like we're going to focus the surface, so prevent automatic zoom.
this.preventZoom();
} else {
// Otherwise, allow zoom, so that the user can pinch-zoom
this.allowZoom();
}
};
/**
* Handle surface model focus events.
*/
ve.init.mw.ViewportZoomHandler.prototype.onFocus = function () {
this.allowZoom();
};

File Metadata

Mime Type
text/plain
Expires
Tue, Aug 18, 23:09 (1 d, 6 h)
Storage Engine
local-disk
Storage Format
Raw Data
Storage Handle
b8/03/b5bcb1df804053a6c335e2df70b9
Default Alt Text
ve.init.mw.ViewportZoomHandler.js (4 KB)

Event Timeline