mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-05-01 03:14:43 +00:00
A new utility: $.mobile.zoom, which as 3 members: enabled [bool], disable [function], and enable [function].
This simple utility is used to disable user scaling in devices like iOS. The disable() method disables user-scaling. The enable() method enables user-scaling. The enabled property keeps track of state. Two other utilites are included here as well. First, there's zoom.iosfocusfix.js, which disables zoom as a select or input element is focused, preventing iOS from zooming into that element and cropping the viewport. Zoom is restored just after the focus event fires (a half second timeout). Then there's zoom.iosorientationfix.js, which is intended to fix the iOS orientationchange zoom bug, following the approach from this project https://github.com/scottjehl/iOS-Orientationchange-Fix. This may not be working yet. Needs testing, and it may require that we change the values of the meta content to use maximum-scale instead of user-scalable. Lastly, fixedtoolbar, once it lands, should use this utility to disable/enable zoom, rather than the one that's currently included in its own source.
This commit is contained in:
parent
7f2e50430e
commit
66be09d2de
4 changed files with 87 additions and 0 deletions
|
|
@ -40,6 +40,10 @@ define([
|
|||
'jquery.mobile.controlGroup',
|
||||
'jquery.mobile.links',
|
||||
'jquery.mobile.fixedToolbar'
|
||||
'jquery.mobile.fixedToolbar',
|
||||
'jquery.mobile.zoom',
|
||||
'jquery.mobile.zoom.iosfocusfix',
|
||||
'jquery.mobile.zoom.iosorientationfix'
|
||||
], function() {
|
||||
require( [ 'jquery.mobile.init' ] );
|
||||
});
|
||||
|
|
|
|||
20
js/jquery.mobile.zoom.iosfocusfix.js
Normal file
20
js/jquery.mobile.zoom.iosfocusfix.js
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
|
||||
//>>description: Prevents iOS from zooming into form fields on focus
|
||||
//>>label: Prevent form focus zoom
|
||||
|
||||
define( [ "jquery", "jquery.mobile.core", "jquery.mobile.zoom" ], function( $ ) {
|
||||
//>>excludeEnd("jqmBuildExclude");
|
||||
( function( $, window ) {
|
||||
|
||||
$( document )
|
||||
.bind( "focusin.iosfocusfix vmousedown.iosfocusfix", function( e ){
|
||||
if( $( e.target ).is( "select, input" ) ){
|
||||
$.mobile.zoom.disable();
|
||||
setTimeout( $.mobile.zoom.enable, 500 );
|
||||
}
|
||||
} );
|
||||
|
||||
}( jQuery, this ));
|
||||
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
|
||||
});
|
||||
//>>excludeEnd("jqmBuildExclude");
|
||||
35
js/jquery.mobile.zoom.iosorientationfix.js
Normal file
35
js/jquery.mobile.zoom.iosorientationfix.js
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
|
||||
//>>description: Fixes the iOS orientation change bug using a jQM version of this technique https://github.com/scottjehl/iOS-Orientationchange-Fix
|
||||
//>>label: iOS orientation change bugfix
|
||||
|
||||
define( [ "jquery", "jquery.mobile.core", "jquery.mobile.zoom" ], function( $ ) {
|
||||
//>>excludeEnd("jqmBuildExclude");
|
||||
( function( $, window ) {
|
||||
var orientation = window.orientation,
|
||||
rotation = 0;
|
||||
|
||||
function checkTilt( e ){
|
||||
e = e.originalEvent;
|
||||
orientation = Math.abs( window.orientation );
|
||||
rotation = Math.abs( e.gamma );
|
||||
|
||||
if( rotation > 8 && orientation === 0 ){
|
||||
if( $.mobile.zoom.enabled ){
|
||||
$.mobile.zoom.disable();
|
||||
}
|
||||
}
|
||||
else {
|
||||
if( !$.mobile.zoom.enabled ){
|
||||
$.mobile.zoom.enable();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$( window )
|
||||
.bind( "orientationchange", $.mobile.zoom.enable )
|
||||
.bind( "deviceorientation", checkTilt );
|
||||
|
||||
}( jQuery, this ));
|
||||
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
|
||||
});
|
||||
//>>excludeEnd("jqmBuildExclude");
|
||||
28
js/jquery.mobile.zoom.js
Normal file
28
js/jquery.mobile.zoom.js
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
|
||||
//>>description: Utility methods for enabling and disabling user scaling (pinch zoom)
|
||||
//>>label: zoomhandling
|
||||
|
||||
define( [ "jquery", "jquery.mobile.core" ], function( $ ) {
|
||||
//>>excludeEnd("jqmBuildExclude");
|
||||
( function( $ ) {
|
||||
var meta = $( "meta[name=viewport]" ),
|
||||
initialContent = meta.attr( "content" ),
|
||||
disabledZoom = initialContent + ",user-scalable=no",
|
||||
enabledZoom = initialContent + ",user-scalable=yes";
|
||||
|
||||
$.mobile.zoom = $.extend( {}, {
|
||||
enabled: true,
|
||||
disable: function() {
|
||||
meta.attr( "content", disabledZoom );
|
||||
$.mobile.zoom.enabled = false;
|
||||
},
|
||||
enable: function() {
|
||||
meta.attr( "content", enabledZoom );
|
||||
$.mobile.zoom.enabled = true;
|
||||
}
|
||||
});
|
||||
|
||||
}( jQuery ));
|
||||
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
|
||||
});
|
||||
//>>excludeEnd("jqmBuildExclude");
|
||||
Loading…
Reference in a new issue