Jdlrobson has uploaded a new change for review.

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

Change subject: WIP: Add Grade C browser support
......................................................................

WIP: Add Grade C browser support

Placeholders are instantly shown to grade-c browsers to avoid jumpy content
but are hidden to real no-javascript browsers

A script tag is added to the bottom of the page.

For some reason window.NORLQ method is not working.
More investigation needed.

Depends-On: I981e3f74dd577dc67eea6c3d49a67591d02b5f04
Change-Id: I5ca4b4eb63bdf02743b8ba95c59279735c240e46
---
M extension.json
M includes/MobileFormatter.php
M includes/MobileFrontend.hooks.php
M includes/MobileFrontend.skin.hooks.php
M resources/skins.minerva.base.styles/images.less
5 files changed, 43 insertions(+), 1 deletion(-)


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

diff --git a/extension.json b/extension.json
index 9301256..09eaef7 100644
--- a/extension.json
+++ b/extension.json
@@ -1822,6 +1822,9 @@
                "OutputPageBeforeHTML": [
                        "MobileFrontendHooks::onOutputPageBeforeHTML"
                ],
+               "SkinAfterBottomScripts": [
+                       "MobileFrontendHooks::onSkinAfterBottomScripts"
+               ],
                "SkinTemplateOutputPageBeforeExec": [
                        
"MobileFrontendHooks::onSkinTemplateOutputPageBeforeExec"
                ],
diff --git a/includes/MobileFormatter.php b/includes/MobileFormatter.php
index 1d42530..5aec81f 100644
--- a/includes/MobileFormatter.php
+++ b/includes/MobileFormatter.php
@@ -100,6 +100,30 @@
        }
 
        /**
+        * Adds support for grade C images
+        */
+       public static function gradeCImageSupport() {
+               $js = <<<HTML
+window.NORLQ = (window.NORLQ || []).push(function(){
+       var i, img, p,
+               ps = document.getElementsByClassName('lazy-image-placeholder');
+
+       for(i = 0; i < ps.length; i++) {
+               p = ps[i];
+               img = document.createElement('img');
+               img.setAttribute('src',p.getAttribute('data-src' ));
+               img.setAttribute('width',p.getAttribute('data-width' ));
+               img.setAttribute('height',p.getAttribute('data-height'));
+               img.setAttribute('alt',p.getAttribute('data-alt'));
+               p.parentNode.replaceChild(img,p);
+       }
+});
+HTML;
+               $html = Html::inlineScript( $js );
+               return $html;
+       }
+
+       /**
         * Removes content inappropriate for mobile devices
         * @param bool $removeDefaults Whether default settings at 
$wgMFRemovableClasses should be used
         * @param bool $removeReferences Whether to remove references from the 
output
diff --git a/includes/MobileFrontend.hooks.php 
b/includes/MobileFrontend.hooks.php
index a377a11..5fc9645 100644
--- a/includes/MobileFrontend.hooks.php
+++ b/includes/MobileFrontend.hooks.php
@@ -182,6 +182,18 @@
                return true;
        }
 
+       public static function onSkinAfterBottomScripts( $sk, &$text ) {
+               $context = MobileContext::singleton();
+               $mfLazyLoadImages = $context->getMFConfig()->get( 
'MFLazyLoadImages' );
+
+               $removeImages = $mfLazyLoadImages['base'] ||
+                       ( $context->isBetaGroupMember() && 
$mfLazyLoadImages['beta'] );
+               if ( $removeImages ) {
+                       $text .= MobileFormatter::gradeCImageSupport();
+               }
+               return true;
+       }
+
        /**
         * OutputPageBeforeHTML hook handler
         * @see https://www.mediawiki.org/wiki/Manual:Hooks/OutputPageBeforeHTML
diff --git a/includes/MobileFrontend.skin.hooks.php 
b/includes/MobileFrontend.skin.hooks.php
index 7df881e..126d02a 100644
--- a/includes/MobileFrontend.skin.hooks.php
+++ b/includes/MobileFrontend.skin.hooks.php
@@ -1,7 +1,6 @@
 <?php
 
 class MobileFrontendSkinHooks {
-
        /**
         * Returns HTML of terms of use link or null if it shouldn't be 
displayed
         * Note: This is called by a hook in the WikimediaMessages extension.
diff --git a/resources/skins.minerva.base.styles/images.less 
b/resources/skins.minerva.base.styles/images.less
index 95b0324..5dbb9df 100644
--- a/resources/skins.minerva.base.styles/images.less
+++ b/resources/skins.minerva.base.styles/images.less
@@ -10,6 +10,10 @@
                display: none;
        }
 
+       .client-gradec-js & {
+               display: inline-block;
+       }
+
        background-color: @colorGray14;
        border: 1px solid @colorGray11;
        // offset the borders to avoid pushing down content by 2px border on 
load

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

Gerrit-MessageType: newchange
Gerrit-Change-Id: I5ca4b4eb63bdf02743b8ba95c59279735c240e46
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