Jdlrobson has uploaded a new change for review.

  https://gerrit.wikimedia.org/r/60820


Change subject: Move feature detection to top of page
......................................................................

Move feature detection to top of page

This prevents flashes of unstyled content.
Update application functions to read the classes on the html tag
so as not to interfere with existing modules

Change-Id: Ic5dfdf2d6aacfbcdffd49ccb006cbd5b7b6f4bb2
---
M MobileFrontend.php
A javascripts/common/feature-detect.js
M javascripts/common/mf-application.js
M stylesheets/common/ui.css
4 files changed, 51 insertions(+), 30 deletions(-)


  git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend 
refs/changes/20/60820/1

diff --git a/MobileFrontend.php b/MobileFrontend.php
index aeaaada..facbc74 100644
--- a/MobileFrontend.php
+++ b/MobileFrontend.php
@@ -213,6 +213,13 @@
        ),
 );
 
+$wgResourceModules['mobile.head'] = $wgMFMobileResourceBoilerplate + array(
+       'position' => 'top',
+       'scripts' => array(
+               'javascripts/common/feature-detect.js',
+       ),
+);
+
 $wgResourceModules['mobile.styles.page'] = $wgMFMobileResourceBoilerplate + 
array(
        'dependencies' => array( 'mobile.startup' ),
        'styles' => array(
@@ -235,7 +242,8 @@
 );
 
 $wgResourceModules['mobile.startup'] = $wgMFMobileResourceBoilerplate + array(
-       'styles' => array(
+       'dependencies' => array(
+               'mobile.head',
        ),
        'scripts' => array(
                'javascripts/common/polyfills.js',
diff --git a/javascripts/common/feature-detect.js 
b/javascripts/common/feature-detect.js
new file mode 100644
index 0000000..086a7a1
--- /dev/null
+++ b/javascripts/common/feature-detect.js
@@ -0,0 +1,36 @@
+( function( $ ) {
+       var $doc = $( 'html' );
+
+       // TODO: only apply to places that need it
+       // http://www.quirksmode.org/blog/archives/2010/12/the_fifth_posit.html
+       // https://github.com/Modernizr/Modernizr/issues/167
+       function supportsPositionFixed() {
+               // TODO: don't use device detection
+               var agent = navigator.userAgent,
+                       support = false,
+                       supportedAgents = [
+                       // match anything over Webkit 534
+                       /AppleWebKit\/(53[4-9]|5[4-9]\d?|[6-9])\d?\d?/,
+                       // Android 3+
+                       /Android [3-9]/
+               ];
+               supportedAgents.forEach( function( item ) {
+                       if( agent.match( item ) ) {
+                               support = true;
+                       }
+               } );
+               return support;
+       }
+
+       function supportsGeoLocation() {
+               return !!navigator.geolocation;
+       }
+
+       if( supportsPositionFixed() ) {
+               $doc.addClass( 'supports-position-fixed' );
+       }
+       if ( supportsGeoLocation() ) {
+               $doc.addClass( 'supports-geo-location' );
+       }
+
+}( jQuery ) );
diff --git a/javascripts/common/mf-application.js 
b/javascripts/common/mf-application.js
index 6a39598..7be72a0 100644
--- a/javascripts/common/mf-application.js
+++ b/javascripts/common/mf-application.js
@@ -6,6 +6,7 @@
                // just inherit from EventEmitter instead
                eventEmitter = new EventEmitter(),
                template,
+               $doc = $( 'html' ),
                templates = {},
                scrollY;
 
@@ -65,25 +66,8 @@
                return mw.msg( name, arg1 );
        }
 
-       // TODO: only apply to places that need it
-       // http://www.quirksmode.org/blog/archives/2010/12/the_fifth_posit.html
-       // https://github.com/Modernizr/Modernizr/issues/167
        function supportsPositionFixed() {
-               // TODO: don't use device detection
-               var agent = navigator.userAgent,
-                       support = false,
-                       supportedAgents = [
-                       // match anything over Webkit 534
-                       /AppleWebKit\/(53[4-9]|5[4-9]\d?|[6-9])\d?\d?/,
-                       // Android 3+
-                       /Android [3-9]/
-               ];
-               supportedAgents.forEach( function( item ) {
-                       if( agent.match( item ) ) {
-                               support = true;
-                       }
-               } );
-               return support;
+               return $doc.hasClass( 'supports-position-fixed' );
        }
 
        // Try to scroll and hide URL bar
@@ -99,26 +83,19 @@
        }
 
        function supportsGeoLocation() {
-               return !!navigator.geolocation;
+               return $doc.hasClass( 'supports-geo-location' );
        }
 
        // TODO: separate main menu navigation code into separate module
        function init() {
                // FIXME: use wgIsMainPage
-               var mainPage = document.getElementById( 'mainpage' ),
-                       $doc = $( 'html' );
+               var mainPage = document.getElementById( 'mainpage' );
 
                if ( mainPage ) {
                        emit( 'homepage-loaded' );
                }
 
                $doc.removeClass( 'page-loading' ); // FIXME: Kill with fire. 
This is here for historic reasons in case old HTML is cached
-               if( supportsPositionFixed() ) {
-                       $doc.addClass( 'supportsPositionFixed' );
-               }
-               if ( supportsGeoLocation() ) {
-                       $doc.addClass( 'supports-geo-location' );
-               }
 
                // when rotating to landscape stop page zooming on ios
                // allow disabling of transitions in android ics 4.0.2
diff --git a/stylesheets/common/ui.css b/stylesheets/common/ui.css
index dd1074d..1990a7a 100644
--- a/stylesheets/common/ui.css
+++ b/stylesheets/common/ui.css
@@ -200,10 +200,10 @@
   /* @embed */
   background-image: url(images/menu/loginout.png);
 }
-.supportsGeoLocation #mw-mf-menu-main li.icon-nearby {
+.supports-geo-location #mw-mf-menu-main li.icon-nearby {
   display: block;
 }
-.supportsGeoLocation #mw-mf-menu-main li.icon-nearby a {
+.supports-geo-location #mw-mf-menu-main li.icon-nearby a {
   /* @embed */
   background-image: url(images/menu/nearby.png);
 }

-- 
To view, visit https://gerrit.wikimedia.org/r/60820
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings

Gerrit-MessageType: newchange
Gerrit-Change-Id: Ic5dfdf2d6aacfbcdffd49ccb006cbd5b7b6f4bb2
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Jdlrobson <jrob...@wikimedia.org>

_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits

Reply via email to