jenkins-bot has submitted this change and it was merged.
Change subject: Alpha: Add possibility to change font size of the content
......................................................................
Alpha: Add possibility to change font size of the content
Added a fontchanger to Special:MobileMenu for alpha group members,
where they can change the font size from with the use os three
fixed sizes.
The value is saved with LocalStorage (or cookie as fallback) and is set
to the content via JavaScript.
Bug: T50946
Change-Id: I7f4fe3957505ebad0dc17bdf6a99a42d61847283
---
M i18n/en.json
M i18n/qqq.json
M includes/Resources.php
M includes/skins/SkinMinervaAlpha.php
M javascripts/Drawer.js
M javascripts/loggingSchemas/init.js
A javascripts/modules/fontchanger/FontChanger.js
A javascripts/modules/fontchanger/init.js
A less/modules/fontchanger/FontChanger.less
A templates/modules/fontchanger/FontChanger.hogan
10 files changed, 219 insertions(+), 1 deletion(-)
Approvals:
Jdlrobson: Looks good to me, approved
jenkins-bot: Verified
diff --git a/i18n/en.json b/i18n/en.json
index 97d8ef4..839e028 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -98,6 +98,8 @@
"mobile-frontend-enable-images": "Enable images on mobile site",
"mobile-frontend-expand-sections-description": "Always expand all
sections when navigating to a new page.",
"mobile-frontend-expand-sections-status": "Expand all sections",
+ "mobile-frontend-fontchanger-link": "Font size",
+ "mobile-frontend-fontchanger-desc": "Increase or decrease the size of
the text for readability.",
"mobile-frontend-featured-article": "Today's featured content",
"mobile-frontend-first-upload-wizard-new-page-1": "Images on
{{SITENAME}} come from Wikimedia Commons",
"mobile-frontend-first-upload-wizard-new-page-1-header": "Contribute
your images. Help {{SITENAME}} come to life!",
diff --git a/i18n/qqq.json b/i18n/qqq.json
index 159de11..30e19f1 100644
--- a/i18n/qqq.json
+++ b/i18n/qqq.json
@@ -125,6 +125,8 @@
"mobile-frontend-enable-images": "Unused at this time.\n\nSee also:\n*
{{msg-mw|Mobile-frontend-disable-images}}",
"mobile-frontend-expand-sections-description": "On settings page
description for turning on/off expansion of all sections on page load.\n\nSee
also:\n* {{msg-mw|Mobile-frontend-expand-sections-status}}",
"mobile-frontend-expand-sections-status": "On settings page label for
turning on/off expansion of all sections on page load.\n\nSee also:\n*
{{msg-mw|Mobile-frontend-expand-sections-description}}",
+ "mobile-frontend-fontchanger-desc": "Link to open the font size change
menu out of [[Special:MobileMenu]]..",
+ "mobile-frontend-fontchanger-description": "Description of the font
size setting on [[Special:MobileOptions]] to decrease and increase the font
size of content in mobile skin.",
"mobile-frontend-featured-article": "The title that will appear before
the element with the mf-tfa selector.",
"mobile-frontend-first-upload-wizard-new-page-1": "Informative
statement about where images come from.",
"mobile-frontend-first-upload-wizard-new-page-1-header": "Call to
action asking the user to upload an image",
diff --git a/includes/Resources.php b/includes/Resources.php
index e370c25..fa83c6c 100644
--- a/includes/Resources.php
+++ b/includes/Resources.php
@@ -1011,6 +1011,29 @@
'position' => 'top',
),
+ 'mobile.fontchanger' => $wgMFResourceFileModuleBoilerplate + array(
+ 'dependencies' => array(
+ 'mobile.startup',
+ 'mobile.settings',
+ 'mobile.templates',
+ 'mobile.drawers',
+ ),
+ 'scripts' => array(
+ 'javascripts/modules/fontchanger/FontChanger.js',
+ 'javascripts/modules/fontchanger/init.js',
+ ),
+ 'styles' => array(
+ 'less/modules/fontchanger/FontChanger.less'
+ ),
+ 'templates' => array(
+ 'FontChanger.hogan' =>
'templates/modules/fontchanger/FontChanger.hogan',
+ ),
+ 'messages' => array(
+ 'mobile-frontend-fontchanger-desc'
+ ),
+ 'position' => 'top',
+ ),
+
// Custom ResourceLoaderModule classes
'mobile.site' => array(
'dependencies' => array( 'mobile.startup' ),
@@ -1299,6 +1322,7 @@
// Feature modules that should be loaded in alpha
should be listed below here.
'mobile.infobox',
'mobile.bannerImage',
+ 'mobile.fontchanger',
),
'scripts' => array(
'javascripts/modules/infobox/init.js',
diff --git a/includes/skins/SkinMinervaAlpha.php
b/includes/skins/SkinMinervaAlpha.php
index 9e79271..9327969 100644
--- a/includes/skins/SkinMinervaAlpha.php
+++ b/includes/skins/SkinMinervaAlpha.php
@@ -62,6 +62,26 @@
}
/**
+ * Prepare site links in footer
+ * @param BaseTemplate $tpl
+ */
+ protected function prepareSiteLinks( BaseTemplate $tpl ) {
+ parent::prepareSiteLinks( $tpl );
+ $urls = $tpl->get( 'site_urls' );
+ $msg = $this->msg( 'mobile-frontend-fontchanger-link' );
+ // Don't add elements, where the message does not exist
+ if ( !$msg->isDisabled() ) {
+ $urls[] = array(
+ 'href' => '#',
+ 'text'=> $msg->text(),
+ // hide the link, fontchanger works only with
JS enabled (hidden will be removed with JS)
+ 'class' => 'fontchanger link hidden'
+ );
+ }
+ $tpl->set( 'site_urls', $urls );
+ }
+
+ /**
* Get various skin specific configuration.
* @return array
*/
diff --git a/javascripts/Drawer.js b/javascripts/Drawer.js
index 2954576..65b2922 100644
--- a/javascripts/Drawer.js
+++ b/javascripts/Drawer.js
@@ -11,6 +11,7 @@
Drawer = Panel.extend( {
className: 'drawer position-fixed',
appendToElement: '#notifications',
+ closeOnScroll: true,
postRender: function () {
var self = this;
@@ -18,7 +19,9 @@
this.on( 'show', function () {
setTimeout( function () {
$( 'body' ).one( 'click.drawer',
$.proxy( self, 'hide' ) );
- $( window ).one( 'scroll.drawer',
$.proxy( self, 'hide' ) );
+ if ( self.closeOnScroll ) {
+ $( window ).one(
'scroll.drawer', $.proxy( self, 'hide' ) );
+ }
// can't use 'body' because the drawer
will be closed when
// tapping on it and clicks will be
prevented
$( '#mw-mf-page-center' ).one(
'click.drawer', $.proxy( self, 'hide' ) );
diff --git a/javascripts/loggingSchemas/init.js
b/javascripts/loggingSchemas/init.js
index 05d1baa..0131bc1 100644
--- a/javascripts/loggingSchemas/init.js
+++ b/javascripts/loggingSchemas/init.js
@@ -49,6 +49,10 @@
'lastmodified-history' );
MobileWebClickTracking.hijackLink( $profileLink,
'lastmodified-profile' );
MobileWebClickTracking.hijackLink( '.nearby-button',
'nearby-button' );
+ MobileWebClickTracking.hijackLink( '.fontchanger.link',
'fontchaner-menu' );
+ MobileWebClickTracking.hijackLink( '.fontchanger-size1',
'fontchanger-size1' );
+ MobileWebClickTracking.hijackLink( '.fontchanger-size2',
'fontchanger-size2' );
+ MobileWebClickTracking.hijackLink( '.fontchanger-size3',
'fontchanger-size3' );
} );
MobileWebClickTracking.logPastEvent();
diff --git a/javascripts/modules/fontchanger/FontChanger.js
b/javascripts/modules/fontchanger/FontChanger.js
new file mode 100644
index 0000000..c49ac8b
--- /dev/null
+++ b/javascripts/modules/fontchanger/FontChanger.js
@@ -0,0 +1,90 @@
+( function ( M, $ ) {
+ var FontChanger,
+ Drawer = M.require( 'Drawer' ),
+ Icon = M.require( 'Icon' ),
+ settings = M.require( 'settings' );
+
+ /**
+ * FontChanger wrapper
+ * @class FontChanger
+ * @extends Drawer
+ */
+ FontChanger = Drawer.extend( {
+ defaults: {
+ cancelButton: new Icon( {
+ name: 'cancel',
+ additionalClassNames: 'cancel',
+ label: mw.msg( 'mobile-frontend-overlay-close' )
+ } ).toHtmlString(),
+ descriptionMsg: mw.msg(
'mobile-frontend-fontchanger-desc' )
+ },
+ className: 'drawer position-fixed fontchanger',
+ 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
+ */
+ 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 );
+ },
+
+ /**
+ * @inheritdoc
+ */
+ postRender: function () {
+ var self = this;
+
+ Drawer.prototype.postRender.apply( this, arguments );
+
+ // set handler for clicks on the size buttons
+ this.$( '.sizes' ).find( 'div' ).each( function () {
+ var $el = $( this );
+
+ $el.on( 'click', function () {
+ self.setNewSize( $el );
+ } );
+ } );
+ },
+
+ /**
+ * Set a new font size and change the drawer content
+ * @param {JQuery} $el Clicked font size element
+ */
+ 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' );
+ }
+ } );
+
+ M.define( 'modules/fontchanger/FontChanger', FontChanger );
+
+}( mw.mobileFrontend, jQuery ) );
diff --git a/javascripts/modules/fontchanger/init.js
b/javascripts/modules/fontchanger/init.js
new file mode 100644
index 0000000..bb3f761
--- /dev/null
+++ b/javascripts/modules/fontchanger/init.js
@@ -0,0 +1,32 @@
+( function ( M, $ ) {
+ var settings = M.require( 'settings' ),
+ mainmenu = M.require( 'mainmenu' ),
+ userFontSize = settings.get( 'userFontSize', true ),
+ FontChanger = M.require( 'modules/fontchanger/FontChanger' ),
+ size1,
+ size2,
+ size3;
+
+ // 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 options = {
+ size1: size1,
+ size2: size2,
+ size3: size3
+ }, fcDrawer = new FontChanger( options );
+
+ // close the main menu drawer
+ mainmenu.closeNavigationDrawers();
+
+ // show the fontchanger drawer
+ fcDrawer.show();
+ } );
+}( mw.mobileFrontend, jQuery ) );
diff --git a/less/modules/fontchanger/FontChanger.less
b/less/modules/fontchanger/FontChanger.less
new file mode 100644
index 0000000..e80e36e
--- /dev/null
+++ b/less/modules/fontchanger/FontChanger.less
@@ -0,0 +1,33 @@
+.fontchanger {
+ .cancel {
+ padding: 10px;
+ float: right;
+ }
+
+ // 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%;
+ }
+}
diff --git a/templates/modules/fontchanger/FontChanger.hogan
b/templates/modules/fontchanger/FontChanger.hogan
new file mode 100644
index 0000000..382f184
--- /dev/null
+++ b/templates/modules/fontchanger/FontChanger.hogan
@@ -0,0 +1,8 @@
+{{{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>
+</div>
+<div style="clear:both"></div>
--
To view, visit https://gerrit.wikimedia.org/r/176961
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I7f4fe3957505ebad0dc17bdf6a99a42d61847283
Gerrit-PatchSet: 11
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Florianschmidtwelzow <[email protected]>
Gerrit-Reviewer: Awjrichards <[email protected]>
Gerrit-Reviewer: Florianschmidtwelzow <[email protected]>
Gerrit-Reviewer: Jdlrobson <[email protected]>
Gerrit-Reviewer: Siebrand <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
