Jdlrobson has submitted this change and it was merged.
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
M javascripts/specials/mobileoptions.js
M less/specials/mobileoptions.less
M stylesheets/specials/mobileoptions.css
4 files changed, 82 insertions(+), 107 deletions(-)
Approvals:
Jdlrobson: Verified; Looks good to me, approved
diff --git a/MobileFrontend.php b/MobileFrontend.php
index e3a83a3..fa7fd94 100644
--- a/MobileFrontend.php
+++ b/MobileFrontend.php
@@ -522,7 +522,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/specials/mobileoptions.js
b/javascripts/specials/mobileoptions.js
index d5b7f61..57fd96e 100644
--- a/javascripts/specials/mobileoptions.js
+++ b/javascripts/specials/mobileoptions.js
@@ -1,46 +1,28 @@
-( function( M, $ ) {
-
-var m = ( function() {
+( function( $ ) {
function enhanceCheckboxes() {
- var inputs = document.getElementsByTagName( 'input' ), i, el,
special;
-
- $( 'body' ).addClass( 'mw-mf-checkboxes' );
function clickChkBox() {
- var parent = this,
- box = parent.getElementsByTagName( 'input' )[ 0
];
+ var $parent = $( this ),
+ box = $parent.children( 'input' )[ 0 ];
- if( !$( parent ).hasClass( 'checked' ) ) {
- $( parent ).addClass( 'checked' );
- box.checked = true;
- } else {
- $( 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 = $( el.parentNode ).hasClass(
'mw-mf-checkbox-css3' );
- if( el.getAttribute( 'type' ) === 'checkbox' && special
) {
- $( el.parentNode ).on( 'click', clickChkBox );
- if( el.checked ) {
- $( 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, jQuery ) );
+ $( 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: merged
Gerrit-Change-Id: I70dd777fb208439baf17066104cd7cb95a3e23dd
Gerrit-PatchSet: 3
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Jdlrobson <[email protected]>
Gerrit-Reviewer: JGonera <[email protected]>
Gerrit-Reviewer: Jdlrobson <[email protected]>
Gerrit-Reviewer: jenkins-bot
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
