Florianschmidtwelzow has uploaded a new change for review.
https://gerrit.wikimedia.org/r/229950
Change subject: Rewrite fontchanger to live in mobile settings now
......................................................................
Rewrite fontchanger to live in mobile settings now
Instead of adding alink to the mobile menu which opens a drawer
with three available font sizes, add a new option to mobile settings
to allow the user to set the font size (for the text only) between
10% and 200% of the normal font size.
Bug: T100729
Change-Id: I6d73a591ed9adb55de12f2e3e8315b8915cd87ed
---
M includes/Resources.php
A resources/mobile.fontchanger.init/init.js
M resources/mobile.fontchanger/FontChanger.hogan
M resources/mobile.fontchanger/FontChanger.js
M resources/mobile.fontchanger/FontChanger.less
D resources/mobile.fontchanger/init.js
M resources/mobile.special.mobileoptions.scripts/mobileoptions.js
7 files changed, 93 insertions(+), 138 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/50/229950/1
diff --git a/includes/Resources.php b/includes/Resources.php
index 6851bf4..154c26d 100644
--- a/includes/Resources.php
+++ b/includes/Resources.php
@@ -1384,7 +1384,17 @@
'position' => 'top',
),
- // FIXME: disable font changer, until there is a better place - see
task T95198
+ 'mobile.fontchanger.init' => $wgMFResourceFileModuleBoilerplate + array(
+ 'dependencies' => array(
+ 'mobile.startup',
+ 'mobile.settings',
+ ),
+ 'scripts' => array(
+ 'resources/mobile.fontchanger.init/init.js',
+ ),
+ 'position' => 'top',
+ ),
+
'mobile.fontchanger' => $wgMFResourceFileModuleBoilerplate + array(
'dependencies' => array(
'mobile.startup',
@@ -1394,7 +1404,6 @@
),
'scripts' => array(
'resources/mobile.fontchanger/FontChanger.js',
- 'resources/mobile.fontchanger/init.js',
),
'styles' => array(
'resources/mobile.fontchanger/FontChanger.less'
@@ -1403,10 +1412,11 @@
'FontChanger.hogan' =>
'resources/mobile.fontchanger/FontChanger.hogan',
),
'messages' => array(
- 'mobile-frontend-fontchanger-desc'
+ 'mobile-frontend-fontchanger-desc',
+ 'mobile-frontend-fontchanger-link',
),
- 'position' => 'top',
),
+
'mobile.infiniteScroll' => $wgMFResourceFileModuleBoilerplate + array(
'dependencies' => array(
'mobile.oo',
@@ -1551,6 +1561,7 @@
'dependencies' => array(
'mobile.startup',
'mobile.settings',
+ 'mobile.fontchanger',
),
'scripts' => array(
'resources/mobile.special.mobileoptions.scripts/mobileoptions.js',
@@ -1810,6 +1821,7 @@
// load code under certain conditions.
'mobile.bannerImage',
'mobile.search.beta',
+ 'mobile.fontchanger.init',
),
'scripts' => array(
'resources/skins.minerva.beta.scripts/bannerImage.js',
@@ -1823,7 +1835,6 @@
'mobile.infobox',
'mobile.errorReport',
'mobile.quickLookup',
- 'mobile.fontchanger',
),
'scripts' => array(
'resources/skins.minerva.alpha.scripts/commonsCategory.js',
diff --git a/resources/mobile.fontchanger.init/init.js
b/resources/mobile.fontchanger.init/init.js
new file mode 100644
index 0000000..49126c6
--- /dev/null
+++ b/resources/mobile.fontchanger.init/init.js
@@ -0,0 +1,8 @@
+( function ( M, $ ) {
+ var settings = M.require( 'settings' ),
+ userFontSize = settings.get( 'userFontSize', true );
+
+ if ( userFontSize !== 100 ) {
+ $( '.content' ).css( 'font-size', userFontSize + '%' );
+ }
+}( mw.mobileFrontend, jQuery ) );
diff --git a/resources/mobile.fontchanger/FontChanger.hogan
b/resources/mobile.fontchanger/FontChanger.hogan
index 382f184..c4bf269 100644
--- a/resources/mobile.fontchanger/FontChanger.hogan
+++ b/resources/mobile.fontchanger/FontChanger.hogan
@@ -1,8 +1,9 @@
-{{{cancelButton}}}
-<p>{{descriptionMsg}}</p>
-<div class="mw-ui-button-group sizes">
- <div class="mw-ui-button fontchanger-size1 {{size1}}" data-size="70">A</div>
- <div class="mw-ui-button fontchanger-size2 {{size2}}" data-size="100">A</div>
- <div class="mw-ui-button fontchanger-size3 {{size3}}" data-size="130">A</div>
+<span class="fontchanger enableMessage">{{enableMsg}}</span>
+<div class="mobileoption fontchanger">
+ <button class="mw-ui-button mw-ui-progressive fontchanger
minus">-</button>
+ <button class="mw-ui-button fontchanger-value">100%</button>
+ <button class="mw-ui-button mw-ui-progressive fontchanger
plus">+</button>
+ <div class="option-description">
+ {{descriptionMsg}}
+ </div>
</div>
-<div style="clear:both"></div>
diff --git a/resources/mobile.fontchanger/FontChanger.js
b/resources/mobile.fontchanger/FontChanger.js
index ca4e108..fa580dd 100644
--- a/resources/mobile.fontchanger/FontChanger.js
+++ b/resources/mobile.fontchanger/FontChanger.js
@@ -1,52 +1,22 @@
( function ( M, $ ) {
var FontChanger,
- Drawer = M.require( 'Drawer' ),
- Icon = M.require( 'Icon' ),
- settings = M.require( 'settings' ),
- MobileWebClickTracking = M.require(
'loggingSchemas/SchemaMobileWebClickTracking' ),
- uiSchema = new MobileWebClickTracking( {},
'MobileWebUIClickTracking' );
+ View = M.require( 'View' ),
+ settings = M.require( 'settings' );
/**
* FontChanger wrapper
* @class FontChanger
- * @extends Drawer
+ * @extends View
*/
- FontChanger = Drawer.extend( {
- defaults: {
- cancelButton: new Icon( {
- name: 'close',
- additionalClassNames: 'cancel',
- label: mw.msg( 'mobile-frontend-overlay-close' )
- } ).toHtmlString(),
- descriptionMsg: mw.msg(
'mobile-frontend-fontchanger-desc' )
- },
- className: 'drawer position-fixed fontchanger',
+ FontChanger = View.extend( {
+ /** @inheritdoc */
template: mw.template.get( 'mobile.fontchanger',
'FontChanger.hogan' ),
- // if the user wants to look at more then one text position,
close the drawer only
- // with a click on the close button
- closeOnScroll: false,
-
/**
- * @inheritdoc
+ * Save the actual font size setting.
+ * @method
*/
- initialize: function ( options ) {
- var enabled = 'mw-ui-progressive',
- userFontSize = settings.get( 'userFontSize',
true );
-
- switch ( userFontSize ) {
- case '70':
- options.size1 = enabled;
- break;
- case '130':
- options.size3 = enabled;
- break;
- default:
- // default = 100
- options.size2 = enabled;
- break;
- }
-
- Drawer.prototype.initialize.apply( this, arguments );
+ save: function () {
+ settings.save( this.options.name,
this.fontchanger.val(), true );
},
/**
@@ -55,39 +25,39 @@
postRender: function () {
var self = this;
- Drawer.prototype.postRender.apply( this );
+ this.fontchanger = this.$( '.fontchanger-value' );
+ this.changePlus = this.$( '.fontchanger.plus' );
+ this.changeMinus = this.$( '.fontchanger.minus' );
+ this.setPercentage( settings.get( this.options.name,
true ) || 100 );
- // set handler for clicks on the size buttons
- this.$( '.sizes' ).find( 'div' ).each( function () {
- var $el = $( this );
-
- $el.on( 'click', function () {
- self.setNewSize( $el );
-
- uiSchema.log( {
- name: 'fontchanger-font-change'
- } );
+ this.fontchanger.on( 'click', function () {
+ self.setPercentage( 100 );
+ return false;
} );
+
+ this.changeMinus.on( 'click', function () {
+ self.setPercentage( self.fontchanger.val() - 10
);
+ return false;
} );
+
+ this.changePlus.on( 'click', function () {
+ self.setPercentage( parseInt(
self.fontchanger.val() ) + 10 );
+ return false;
+ } );
+ $( 'form.mw-mf-settings' ).on( 'submit', $.proxy( this,
'save' ) );
},
/**
- * Set a new font size and change the drawer content
- * @param {jQuery.Object} $el Clicked font size element
+ * Set a new percentage (doesn't change the value higher then
200% and lower then 10%)
+ * @param {Number} percentage New percentage value
*/
- setNewSize: function ( $el ) {
- var fontSize = $el.data( 'size' );
-
- // save and change the new font size
- settings.save( 'userFontSize', fontSize, true );
- $( '.content' ).css( 'font-size', fontSize + '%' );
-
- // update drawer
- this.$( '.sizes' ).find( 'div' ).each( function () {
- $( this ).removeClass( 'mw-ui-progressive' );
- } );
- // add class to actual used size
- $el.addClass( 'mw-ui-progressive' );
+ setPercentage: function ( percentage ) {
+ // disallow changes under 10% and over 200%
+ if ( percentage > 9 && percentage < 201 ) {
+ this.fontchanger
+ .text( percentage + '%' )
+ .val( percentage );
+ }
}
} );
diff --git a/resources/mobile.fontchanger/FontChanger.less
b/resources/mobile.fontchanger/FontChanger.less
index e80e36e..0248f38 100644
--- a/resources/mobile.fontchanger/FontChanger.less
+++ b/resources/mobile.fontchanger/FontChanger.less
@@ -1,33 +1,16 @@
+.mobileoption {
+ &.fontchanger {
+ text-align: center;
+ }
+}
+
.fontchanger {
- .cancel {
- padding: 10px;
- float: right;
+ &.enableMessage {
+ font-size: 18px;
+ font-weight:bold;
}
- // FIXME: This shouldn't be needed
- .mw-ui-button-group {
- * {
- float: left !important;
- }
- max-width: 160px;
- height: 2.5em;
- margin: 0 auto;
- }
-
- .fontchanger-size1 {
- font-size: 70%;
- height: 100%;
- padding: 7%;
- }
-
- .fontchanger-size2 {
- font-size: 100%;
- height: 100%;
- }
-
- .fontchanger-size3 {
- font-size: 130%;
- height: 100%;
- padding: 2.5%;
+ .option-description {
+ padding-top: 1em;
}
}
diff --git a/resources/mobile.fontchanger/init.js
b/resources/mobile.fontchanger/init.js
deleted file mode 100644
index fda2c17..0000000
--- a/resources/mobile.fontchanger/init.js
+++ /dev/null
@@ -1,30 +0,0 @@
-( function ( M, $ ) {
- var settings = M.require( 'settings' ),
- mainMenu = M.require( 'skin' ).getMainMenu(),
- userFontSize = settings.get( 'userFontSize', true ),
- FontChanger = M.require( 'modules/fontchanger/FontChanger' ),
- MobileWebClickTracking = M.require(
'loggingSchemas/SchemaMobileWebClickTracking' ),
- uiSchema = new MobileWebClickTracking( {},
'MobileWebUIClickTracking' );
-
- // set the user font size if needed
- if ( userFontSize !== '100' ) {
- $( '.content' ).css( 'font-size', userFontSize + '%' );
- }
-
- // show and add handler to fontchanger link in Special:MobileMenu
- $( '.fontchanger.link' )
- .removeClass( 'hidden' )
- .on( 'click', function () {
- // the different sizes
- var fcDrawer = new FontChanger( {} );
-
- // close the main menu drawer
- mainMenu.closeNavigationDrawers();
-
- // show the fontchanger drawer
- fcDrawer.show();
- uiSchema.log( {
- name: 'fontchanger-menu'
- } );
- } );
-}( mw.mobileFrontend, jQuery ) );
diff --git a/resources/mobile.special.mobileoptions.scripts/mobileoptions.js
b/resources/mobile.special.mobileoptions.scripts/mobileoptions.js
index 2e3b43b..acc3e52 100644
--- a/resources/mobile.special.mobileoptions.scripts/mobileoptions.js
+++ b/resources/mobile.special.mobileoptions.scripts/mobileoptions.js
@@ -1,6 +1,8 @@
( function ( M, $ ) {
var Checkbox,
context = M.require( 'context' ),
+ FontChanger = M.require( 'modules/fontchanger/FontChanger' ),
+ context = M.require( 'context' ),
View = M.require( 'View' ),
settings = M.require( 'settings' );
@@ -28,12 +30,13 @@
} );
/**
- * Add a new 'expand sections' checkbox in alpha.
+ * Add features, that depends on localStorage, such as "exapnd all
sections" or "fontchanger".
* The checkbox is used for turning on/off expansion of all sections on
page load.
* @method
*/
- function initLocalStorageCheckboxes() {
+ function initLocalStorageElements() {
var cb,
+ fc,
saveLI = $( '#mw-mf-settings-save' );
if ( context.isAlphaGroupMember() ) {
@@ -44,7 +47,16 @@
} );
cb.insertBefore( saveLI );
}
+
+ if ( context.isBetaGroupMember() ) {
+ fc = new FontChanger( {
+ name: 'userFontSize',
+ enableMsg: mw.msg(
'mobile-frontend-fontchanger-link' ),
+ descriptionMsg: mw.msg(
'mobile-frontend-fontchanger-desc' )
+ } );
+ fc.insertBefore( saveLI );
+ }
}
- $( initLocalStorageCheckboxes );
+ $( initLocalStorageElements );
}( mw.mobileFrontend, jQuery ) );
--
To view, visit https://gerrit.wikimedia.org/r/229950
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I6d73a591ed9adb55de12f2e3e8315b8915cd87ed
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Florianschmidtwelzow <florian.schmidt.stargatewis...@gmail.com>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
