Jdlrobson has uploaded a new change for review.
https://gerrit.wikimedia.org/r/182291
Change subject: Hygiene: Move position fixed emulation / viewport classes to
skin
......................................................................
Hygiene: Move position fixed emulation / viewport classes to skin
Change-Id: I07883ec8650c7141fe81ea35582c426f156adcf9
---
M javascripts/Skin.js
M javascripts/application.js
2 files changed, 57 insertions(+), 49 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/91/182291/1
diff --git a/javascripts/Skin.js b/javascripts/Skin.js
index deac7a5..b3192c8 100644
--- a/javascripts/Skin.js
+++ b/javascripts/Skin.js
@@ -13,6 +13,7 @@
*/
Skin = View.extend( {
/**
+ * @inheritdoc
* @cfg {Object} defaults Default options hash.
* @cfg {Page} options.page page the skin is currently rendering
* @cfg {array} options.tabletModules modules to load when in
tablet
@@ -22,6 +23,44 @@
tabletModules: []
},
+ /**
+ * Setup position fixed emulation using position absolute.
+ */
+ setupPositionFixedEmulation: function () {
+ var $el = this.$el,
+ // FIXME: Move all the variables below to
Browser.js
+ ua = window.navigator.userAgent,
+ isIos = browser.isIos(),
+ isOldIPhone = isIos && /OS [4]_[0-2]|OS
[3]_/.test( ua );
+
+ $el.addClass( 'no-position-fixed' );
+ this.on( 'scroll', function () {
+ var scrollTop = $( window ).scrollTop(),
+ windowHeight = $( window ).height(),
+ activeElement = document.activeElement,
+ scrollBottom = scrollTop + windowHeight;
+ if ( isOldIPhone ) {
+ if ( activeElement.tagName ===
'TEXTAREA' || activeElement.tagName === 'INPUT' ) {
+ // add the height of the open
soft keyboard
+ scrollBottom -= 120;
+ } else {
+ // add the height of the
address bar
+ scrollBottom += 60;
+ }
+ }
+
+ if ( scrollTop === 0 ) {
+ // special case when we're at the
beginning of the page and many
+ // browsers (e.g. Android 2.x) return
wrong window height because
+ // of the URL bar
+ $el.add( '.overlay' ).height( '100%' );
+ } else {
+ // keep expanding the viewport until
the end of the page reached
+ // #notification has bottom: 0 and
sticks to the end of the viewport
+ $el.add( '.overlay' ).height(
scrollBottom );
+ }
+ } );
+ },
/**
* @inheritdoc
*/
@@ -52,6 +91,21 @@
M.on( 'resize', $.proxy( this, 'emit', '_resize' ) );
this.on( '_resize', loadWideScreenModules );
this.emit( '_resize' );
+ },
+ /**
+ * @inheritdoc
+ */
+ postRender: function () {
+ var $el = this.$el;
+ if ( browser.supportsAnimations() ) {
+ $el.addClass( 'animations' );
+ }
+ if ( !browser.supportsPositionFixed() ) {
+ this.setupPositionFixedEmulation();
+ }
+ if ( browser.supportsTouchEvents() ) {
+ $el.addClass( 'touch-events' );
+ }
}
} );
diff --git a/javascripts/application.js b/javascripts/application.js
index a02c2eb..db9548d 100644
--- a/javascripts/application.js
+++ b/javascripts/application.js
@@ -8,71 +8,25 @@
( function ( M, $ ) {
var currentPage, skin,
Router = M.require( 'Router' ),
- browser = M.require( 'browser' ),
OverlayManager = M.require( 'OverlayManager' ),
PageApi = M.require( 'PageApi' ),
pageApi = new PageApi(),
Page = M.require( 'Page' ),
router = new Router(),
- Skin = M.require( 'Skin' ),
- // FIXME: Move all the variables below to Browser.js
- ua = window.navigator.userAgent,
- isIos = browser.isIos(),
- isOldIPhone = isIos && /OS [4]_[0-2]|OS [3]_/.test( ua );
+ Skin = M.require( 'Skin' );
/**
* Initialize viewport
* @method
*/
function init() {
- var
- $viewport = $( '#mw-mf-viewport' );
-
- if ( browser.supportsAnimations() ) {
- $viewport.addClass( 'animations' );
- }
- if ( !browser.supportsPositionFixed() ) {
- $viewport.addClass( 'no-position-fixed' );
- }
- if ( browser.supportsTouchEvents() ) {
- $viewport.addClass( 'touch-events' );
- }
-
- // FIXME: Move to Browser.js
- if ( !browser.supportsPositionFixed() ) {
- $( window ).on( 'scroll', function () {
- var scrollTop = $( window ).scrollTop(),
- windowHeight = $( window ).height(),
- activeElement = document.activeElement,
- scrollBottom = scrollTop + windowHeight;
- if ( isOldIPhone ) {
- if ( activeElement.tagName ===
'TEXTAREA' || activeElement.tagName === 'INPUT' ) {
- // add the height of the open
soft keyboard
- scrollBottom -= 120;
- } else {
- // add the height of the
address bar
- scrollBottom += 60;
- }
- }
-
- if ( scrollTop === 0 ) {
- // special case when we're at the
beginning of the page and many
- // browsers (e.g. Android 2.x) return
wrong window height because
- // of the URL bar
- $viewport.add( '.overlay' ).height(
'100%' );
- } else {
- // keep expanding the viewport until
the end of the page reached
- // #notification has bottom: 0 and
sticks to the end of the viewport
- $viewport.add( '.overlay' ).height(
scrollBottom );
- }
- } );
- }
-
skin = new Skin( {
+ el: '#mw-mf-viewport',
tabletModules: mw.config.get( 'skin' ) === 'minerva' ?
[ 'tablet.scripts' ] : [],
page: getCurrentPage()
} );
$( window ).on( 'resize', $.proxy( M, 'emit', 'resize' ) );
+ $( window ).on( 'scroll', $.proxy( M, 'emit', 'scroll' ) );
}
/**
--
To view, visit https://gerrit.wikimedia.org/r/182291
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I07883ec8650c7141fe81ea35582c426f156adcf9
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Jdlrobson <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
