Jdlrobson has uploaded a new change for review.

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


Change subject: Bug 46906: Load mobile options at top of page
......................................................................

Bug 46906: Load mobile options at top of page

Remove dependency to mw.mobileFrontend and add dependency
to jQuery (rewrite in jQuery)

Change-Id: I70dd777fb208439baf17066104cd7cb95a3e23dd
---
M MobileFrontend.php
A javascripts/common/findonpage.js
M javascripts/specials/mobileoptions.js
M less/specials/mobileoptions.less
M stylesheets/specials/mobileoptions.css
5 files changed, 93 insertions(+), 108 deletions(-)


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

diff --git a/MobileFrontend.php b/MobileFrontend.php
index 3c331f6..3006348 100644
--- a/MobileFrontend.php
+++ b/MobileFrontend.php
@@ -520,7 +520,8 @@
                'stylesheets/specials/mobileoptions.css',
        ),
 );
-$wgResourceModules['mobile.mobileoptions.scripts'] = 
$wgMFMobileSpecialPageResourceScriptBoilerplate + array(
+$wgResourceModules['mobile.mobileoptions.scripts'] = 
$wgMFMobileSpecialPageResourceBoilerplate + array(
+       'position' => 'top',
        'scripts' => array(
                'javascripts/specials/mobileoptions.js',
        ),
diff --git a/javascripts/common/findonpage.js b/javascripts/common/findonpage.js
new file mode 100644
index 0000000..aa53350
--- /dev/null
+++ b/javascripts/common/findonpage.js
@@ -0,0 +1,11 @@
+( function( $ ) {
+
+// Find on page might have been run
+var $alreadyOpen;
+
+$( window ).on( 'blur', function(){
+       $alreadyOpen = $( 'h2.openSection' );
+       $( 'h2' ).click();
+} );
+
+} )( jQuery );
diff --git a/javascripts/specials/mobileoptions.js 
b/javascripts/specials/mobileoptions.js
index 2172059..d5b1d83 100644
--- a/javascripts/specials/mobileoptions.js
+++ b/javascripts/specials/mobileoptions.js
@@ -1,47 +1,28 @@
-( function( M ) {
-
-var m = ( function() {
+( function( $ ) {
 
        function enhanceCheckboxes() {
 
-               var inputs = document.getElementsByTagName( 'input' ), i, el, 
special,
-                       u = M.utils;
-
-               u( document.body ).addClass( 'mw-mf-checkboxes' );
                function clickChkBox() {
-                       var parent = this,
-                               box = parent.getElementsByTagName( 'input' )[ 0 
];
+                       var $parent = $( this ),
+                               box = $parent.children( 'input' )[ 0 ];
 
-                       if( !u( parent ).hasClass( 'checked' ) ) {
-                               u( parent ).addClass( 'checked' );
-                               box.checked = true;
-                       } else {
-                               u( parent ).removeClass( 'checked' );
+                       if( $parent.hasClass( 'checked' ) ) {
+                               $parent.removeClass( 'checked' );
                                box.checked = false;
+                       } else {
+                               $parent.addClass( 'checked' );
+                               box.checked = true;
                        }
                }
 
-               for( i = 0; i < inputs.length; i++ ) {
-                       el = inputs[i];
-                       special = u( el.parentNode ).hasClass( 
'mw-mf-checkbox-css3' );
-                       if( el.getAttribute( 'type' ) === 'checkbox' && special 
) {
-                               u( el.parentNode ).bind( 'click', clickChkBox );
-                               if( el.checked ) {
-                                       u( el.parentNode ).addClass( 'checked 
');
-                               }
+               $( '.mw-mf-checkbox-css3 > input[type=checkbox]' ).each( 
function( i, el ) {
+                       var $parent = $( el ).parent();
+                       $parent.on( 'click', clickChkBox );
+                       if ( el.checked ) {
+                               $parent.addClass( 'checked ');
                        }
-               }
+               } );
        }
 
-       function init() {
-               enhanceCheckboxes();
-       }
-
-       return {
-               init: init
-       };
-}() );
-
-M.define( 'mobileoptions', m );
-
-}( mw.mobileFrontend ) );
+       $( enhanceCheckboxes );
+}( jQuery ) );
diff --git a/less/specials/mobileoptions.less b/less/specials/mobileoptions.less
index 74aaa72..f26e7e5 100644
--- a/less/specials/mobileoptions.less
+++ b/less/specials/mobileoptions.less
@@ -105,81 +105,73 @@
 
 }
 
-.mw-mf-checkboxes {
-       form.mw-mf-settings {
 
-               ul {
-                       li {
-                               .mw-mf-checkbox-css3 {
-                                       border: none;
+form.mw-mf-settings {
+
+       ul {
+               li {
+                       .mw-mf-checkbox-css3 {
+                               border: none;
+                               .checkboxBtn();
+
+                               input {
                                        .checkboxBtn();
+                                       display: none;
+                                       z-index: 6;
+                               }
 
-                                       input {
-                                               .checkboxBtn();
-                                               display: none;
-                                               z-index: 6;
+                               span {
+                                       .checkboxBtn();
+                                       &::before { /* small 'sliding' switch 
for checkboxes */
+                                               content: "";
+                                               width: 30%;
+                                               border: solid 1px white;
+                                               border-top: none;
+                                               border-bottom: solid 1px #aaa;
+                                               .gradient(top, #EEE, #EBEBEB);
+                                               border-radius: 8px;
+                                               position: absolute;
+                                               bottom: 0;
+                                               top: 0;
                                        }
+                               }
 
-                                       span {
-                                               .checkboxBtn();
-                                               &::before { /* small 'sliding' 
switch for checkboxes */
-                                                       content: "";
-                                                       width: 30%;
-                                                       border: solid 1px white;
-                                                       border-top: none;
-                                                       border-bottom: solid 
1px #aaa;
-                                                       .gradient(top, #EEE, 
#EBEBEB);
-                                                       border-radius: 8px;
-                                                       position: absolute;
-                                                       bottom: 0;
-                                                       top: 0;
-                                               }
+                               .mw-mf-settings-on {
+                                       display: none;
+                                       &::before {
+                                               right: 0;
+                                               left: auto;
                                        }
+                               }
+
+                               .mw-mf-settings-off {
+                                       padding-right: 8px;
+                                       padding-left: 8px;
+                                       display: inline-block;
+                                       &::before {
+                                               left: 0;
+                                               right: auto;
+                                       }
+                               }
+
+                               &.checked {
+                                       border: none;
 
                                        .mw-mf-settings-on {
-                                               display: none;
-                                               &::before {
-                                                       right: 0;
-                                                       left: auto;
-                                               }
+                                               display: inline-block;
+                                               text-align: left;
+                                               padding-left: 8px;
+                                               padding-right: 8px;
+                                               text-decoration: none;
+                                               background-color: @btnblue;
+                                               background: @btnblue;
                                        }
 
                                        .mw-mf-settings-off {
-                                               padding-right: 8px;
-                                               padding-left: 8px;
-                                               display: inline-block;
-                                               &::before {
-                                                       left: 0;
-                                                       right: auto;
-                                               }
-                                       }
-                                       
-                                       &.checked {
-                                               border: none;
-
-                                               .mw-mf-settings-on {
-                                                       display: inline-block;
-                                                       text-align: left;
-                                                       padding-left: 8px;
-                                                       padding-right: 8px;
-                                                       text-decoration: none;
-                                                       background-color: 
@btnblue;
-                                                       background: @btnblue;
-                                               }
-
-                                               .mw-mf-settings-off {
-                                                       display: none;
-                                               }
+                                               display: none;
                                        }
                                }
                        }
                }
        }
 }
-
-
-
-
-
-
-
diff --git a/stylesheets/specials/mobileoptions.css 
b/stylesheets/specials/mobileoptions.css
index 09c78b7..32853de 100644
--- a/stylesheets/specials/mobileoptions.css
+++ b/stylesheets/specials/mobileoptions.css
@@ -79,7 +79,7 @@
   font-weight: normal;
   padding-right: 8px;
 }
-.mw-mf-checkboxes form.mw-mf-settings ul li .mw-mf-checkbox-css3 {
+form.mw-mf-settings ul li .mw-mf-checkbox-css3 {
   border: none;
   min-width: 76px;
   display: block;
@@ -88,7 +88,7 @@
   top: 0;
   text-transform: lowercase;
 }
-.mw-mf-checkboxes form.mw-mf-settings ul li .mw-mf-checkbox-css3 input {
+form.mw-mf-settings ul li .mw-mf-checkbox-css3 input {
   min-width: 76px;
   display: block;
   position: absolute;
@@ -98,7 +98,7 @@
   display: none;
   z-index: 6;
 }
-.mw-mf-checkboxes form.mw-mf-settings ul li .mw-mf-checkbox-css3 span {
+form.mw-mf-settings ul li .mw-mf-checkbox-css3 span {
   min-width: 76px;
   display: block;
   position: absolute;
@@ -106,7 +106,7 @@
   top: 0;
   text-transform: lowercase;
 }
-.mw-mf-checkboxes form.mw-mf-settings ul li .mw-mf-checkbox-css3 span::before {
+form.mw-mf-settings ul li .mw-mf-checkbox-css3 span::before {
   /* small 'sliding' switch for checkboxes */
 
   content: "";
@@ -123,26 +123,26 @@
   bottom: 0;
   top: 0;
 }
-.mw-mf-checkboxes form.mw-mf-settings ul li .mw-mf-checkbox-css3 
.mw-mf-settings-on {
+form.mw-mf-settings ul li .mw-mf-checkbox-css3 .mw-mf-settings-on {
   display: none;
 }
-.mw-mf-checkboxes form.mw-mf-settings ul li .mw-mf-checkbox-css3 
.mw-mf-settings-on::before {
+form.mw-mf-settings ul li .mw-mf-checkbox-css3 .mw-mf-settings-on::before {
   right: 0;
   left: auto;
 }
-.mw-mf-checkboxes form.mw-mf-settings ul li .mw-mf-checkbox-css3 
.mw-mf-settings-off {
+form.mw-mf-settings ul li .mw-mf-checkbox-css3 .mw-mf-settings-off {
   padding-right: 8px;
   padding-left: 8px;
   display: inline-block;
 }
-.mw-mf-checkboxes form.mw-mf-settings ul li .mw-mf-checkbox-css3 
.mw-mf-settings-off::before {
+form.mw-mf-settings ul li .mw-mf-checkbox-css3 .mw-mf-settings-off::before {
   left: 0;
   right: auto;
 }
-.mw-mf-checkboxes form.mw-mf-settings ul li .mw-mf-checkbox-css3.checked {
+form.mw-mf-settings ul li .mw-mf-checkbox-css3.checked {
   border: none;
 }
-.mw-mf-checkboxes form.mw-mf-settings ul li .mw-mf-checkbox-css3.checked 
.mw-mf-settings-on {
+form.mw-mf-settings ul li .mw-mf-checkbox-css3.checked .mw-mf-settings-on {
   display: inline-block;
   text-align: left;
   padding-left: 8px;
@@ -151,6 +151,6 @@
   background-color: #57a7f2;
   background: #57a7f2;
 }
-.mw-mf-checkboxes form.mw-mf-settings ul li .mw-mf-checkbox-css3.checked 
.mw-mf-settings-off {
+form.mw-mf-settings ul li .mw-mf-checkbox-css3.checked .mw-mf-settings-off {
   display: none;
 }

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

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

Reply via email to