Theopolisme has uploaded a new change for review.
https://gerrit.wikimedia.org/r/108300
Change subject: [WIP] Allow users to adjust the font size
......................................................................
[WIP] Allow users to adjust the font size
The font size control is available to alpha users via
Special:MobileOptions.
Bug: 48946
Change-Id: If774f09ce5254a9dda8db30cbaca68b1a6cd00da
---
M MobileFrontend.i18n.php
M includes/MobileContext.php
M includes/skins/MinervaTemplateAlpha.php
M includes/skins/SkinMinervaAlpha.php
M includes/specials/SpecialMobileOptions.php
M javascripts/specials/mobileoptions.js
M less/mixins.less
M less/specials/mobileoptions.less
8 files changed, 190 insertions(+), 10 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/00/108300/1
diff --git a/MobileFrontend.i18n.php b/MobileFrontend.i18n.php
index f4ee4d2..e5a8ce1 100644
--- a/MobileFrontend.i18n.php
+++ b/MobileFrontend.i18n.php
@@ -72,9 +72,13 @@
'mobile-frontend-enable-images' => 'Enable images on mobile site',
'mobile-frontend-expand-sections-status' => 'Expand all sections',
'mobile-frontend-expand-sections-description' => 'Always expand all
sections when navigating to a new page.',
+ 'mobile-frontend-fontsize-status' => 'Relative text size',
+ 'mobile-frontend-fontsize-description' => 'Increase or decrease the
text size of page content on the mobile site.',
'mobile-frontend-missing-image' => 'Image',
'mobile-frontend-off' => 'OFF',
'mobile-frontend-on' => 'ON',
+ 'mobile-frontend-plus' => '+', # do not translate or duplicate this
message to other languages
+ 'mobile-frontend-minus' => '-', # do not translate or duplicate this
message to other languages
'mobile-frontend-featured-article' => 'Today\'s featured content',
'mobile-frontend-news-items' => 'In The News',
@@ -530,6 +534,8 @@
* {{msg-mw|Mobile-frontend-disable-images}}',
'mobile-frontend-expand-sections-status' => 'On settings page label for
turning on/off expansion of all sections on page load.',
'mobile-frontend-expand-sections-description' => 'On settings page
description for turning on/off expansion of all sections on page load.',
+ 'mobile-frontend-fontsize-status' => 'On settings page, label for
changing the content font size.',
+ 'mobile-frontend-fontsize-description' => 'On settings page,
description for changing the content font size',
'mobile-frontend-missing-image' => 'When the mobile site removes images
it replaces them with a link to the image and the alt text of the image. If no
alt text is provided this string is shown to inform the user it is an image.
{{Identical|Image}}',
'mobile-frontend-off' => 'On settings page signals that a feature will
be turned off. Appears in {{msg-mw|Mobile-frontend-toggle-images}}.',
diff --git a/includes/MobileContext.php b/includes/MobileContext.php
index 2427584..98e6339 100644
--- a/includes/MobileContext.php
+++ b/includes/MobileContext.php
@@ -5,6 +5,7 @@
protected $mobileMode;
protected $contentFormat = '';
protected $disableImages;
+ protected $fontSize;
protected $useFormat;
protected $blacklistedPage;
@@ -109,6 +110,22 @@
return 'WML';
}
return 'HTML';
+ }
+
+ /**
+ * Gets the relative font size for the content
+ * @return float user-set font size; false if not set
+ */
+ public function getCustomFontSize() {
+ if ( is_null( $this->fontSize ) ) {
+ $fontCookie = (float)$this->getRequest()->getCookie(
'fontSize' );
+ if ( $fontCookie && $fontCookie !== 1.0 ) {
+ $this->fontSize = $fontCookie;
+ } else {
+ $this->fontSize = false;
+ }
+ }
+ return $this->fontSize;
}
public function imagesDisabled() {
@@ -482,6 +499,13 @@
}
/**
+ * @param $size float
+ */
+ public function setMobileFontSize( $size ) {
+ $this->getRequest()->response()->setcookie( 'fontSize', $size );
+ }
+
+ /**
* @return string
*/
public function getBaseDomain() {
diff --git a/includes/skins/MinervaTemplateAlpha.php
b/includes/skins/MinervaTemplateAlpha.php
index 7a34d37..6142c91 100644
--- a/includes/skins/MinervaTemplateAlpha.php
+++ b/includes/skins/MinervaTemplateAlpha.php
@@ -21,4 +21,12 @@
$this->renderCategories();
parent::renderMetaSections();
}
+
+ protected function renderContent( $data ) {
+ // Render <style> with custom content css if necessary
+ if ( isset( $data['custom_content_style'] ) ) {
+ echo $data['custom_content_style'];
+ }
+ parent::renderContent( $data );
+ }
}
diff --git a/includes/skins/SkinMinervaAlpha.php
b/includes/skins/SkinMinervaAlpha.php
index 92ea8ee..4a9dd56 100644
--- a/includes/skins/SkinMinervaAlpha.php
+++ b/includes/skins/SkinMinervaAlpha.php
@@ -16,10 +16,18 @@
protected function prepareQuickTemplate() {
$tpl = parent::prepareQuickTemplate();
+ $this->prepareCustomContentStyle( $tpl );
$this->prepareTalkLabel( $tpl );
return $tpl;
}
+ protected function prepareCustomContentStyle( BaseTemplate $tpl ) {
+ $size = $this->mobileContext->getCustomFontSize();
+ if ( $size ) {
+ $tpl->set( 'custom_content_style', Html::inlineStyle(
'.content { font-size: ' . $size . 'em; }' ) );
+ }
+ }
+
protected function prepareTalkLabel( BaseTemplate $tpl ) {
$title = $this->getTitle();
$isSpecialPage = $title->isSpecialPage();
diff --git a/includes/specials/SpecialMobileOptions.php
b/includes/specials/SpecialMobileOptions.php
index 267115a..1e926b3 100644
--- a/includes/specials/SpecialMobileOptions.php
+++ b/includes/specials/SpecialMobileOptions.php
@@ -121,20 +121,51 @@
HTML;
}
+ $imageSetting = <<<HTML
+ <li>
+ <div class="option-name">
+ {$disableMsg}
+ <span class="mw-mf-checkbox-css3" id="enable-images-toggle">
+ <input type="checkbox" name="enableImages"
+ {$imagesChecked}>{$onoff}
+ </span>
+ </div>
+ </li>
+HTML;
+
+ $fontSizeSetting = '';
+
+ if ( $alphaEnabled ) {
+
+ $currentFontSize = $context->getCustomFontSize() || 1;
+ $fontSizeMsg = $this->msg(
'mobile-frontend-fontsize-status' )->text();
+ $fontSizeDescription = $this->msg(
'mobile-frontend-fontsize-description' )->text();
+ $deincrementMsg = $this->msg( 'mobile-frontend-minus'
)->text();
+ $incrementMsg = $this->msg( 'mobile-frontend-plus'
)->text();
+
+ $fontSizeSetting = <<<HTML
+ <li>
+ <div class="option-name">
+ {$fontSizeMsg}
+ <div class="mw-mf-range">
+ <input type="range" name="fontSize" min="0.5"
max="2" step="0.25" value="{$currentFontSize}">
+ <span class="range-control
mw-mf-settings-deincrement">{$deincrementMsg}</span><span class="range-control
mw-mf-settings-increment">{$incrementMsg}</span>
+ </div>
+ </div>
+ <div class="option-description">
+ {$fontSizeDescription}
+ </div>
+ </li>
+HTML;
+ }
+
$html .= <<<HTML
<p>
{$aboutMessage}
</p>
<ul>
- <li>
- <div class="option-name">
- {$disableMsg}
- <span class="mw-mf-checkbox-css3"
id="enable-images-toggle">
- <input type="checkbox" name="enableImages"
- {$imagesChecked}>{$onoff}
- </span>
- </div>
- </li>
+ {$imageSetting}
+ {$fontSizeSetting}
{$betaSetting}
{$alphaSetting}
<li>
@@ -221,6 +252,11 @@
$imagesDisabled = !$request->getBool( 'enableImages' );
$context->setDisableImagesCookie( $imagesDisabled );
+ $fontSize = $request->getText( 'fontSize' );
+ if ( $fontSize ) {
+ $context->setMobileFontSize( $fontSize );
+ }
+
$returnToTitle = Title::newFromText( $request->getText(
'returnto' ) );
if ( $returnToTitle ) {
$url = $returnToTitle->getFullURL();
diff --git a/javascripts/specials/mobileoptions.js
b/javascripts/specials/mobileoptions.js
index 5301d43..f6eb7c5 100644
--- a/javascripts/specials/mobileoptions.js
+++ b/javascripts/specials/mobileoptions.js
@@ -30,6 +30,58 @@
} );
}
+ function enhanceRanges() {
+
+ function clickRangeButton() {
+ var newval, endoftheline,
+ $button = $( this ),
+ $parent = $button.parent(),
+ $input = $parent.find( 'input' ),
+ val = parseFloat( $input.val() ),
+ step = parseFloat( $input.attr( 'step' ) );
+
+ if ( $button.hasClass( 'disabled' ) ) {
+ return;
+ }
+
+ // Undisable everything
+ $parent.children( '.disabled' ).removeClass( 'disabled'
);
+
+ if ( $button.hasClass( 'mw-mf-settings-increment' ) ) {
+ newval = val + step;
+ endoftheline = newval + step > parseFloat(
$input.attr( 'max' ) );
+ } else {
+ newval = val - step;
+ endoftheline = newval - step < parseFloat(
$input.attr( 'min' ) );
+ }
+
+ $button.toggleClass( 'disabled', endoftheline );
+ $input.val( newval ).trigger( 'change' );
+ }
+
+ $( '.mw-mf-range' ).each( function( i, el ) {
+ var $parent = $( el ),
+ $input = $parent.find( 'input[type=range]' ),
+ val = parseFloat( $input.val() ),
+ step = parseFloat( $input.attr( 'step' ) ),
+ eventName = supportsTouchEvents() ?
'touchstart' : 'click';
+
+ $parent.find( '.mw-mf-settings-increment' )
+ .toggleClass( 'disabled', val + step >
parseFloat( $input.attr( 'max' ) ) )
+ .on( eventName, clickRangeButton );
+
+ $parent.find( '.mw-mf-settings-deincrement' )
+ .toggleClass( 'disabled', val - step <
parseFloat( $input.attr( 'min' ) ) )
+ .on( eventName, clickRangeButton );
+ } );
+
+ }
+
+ function enhanceSettings() {
+ $( enhanceCheckboxes );
+ $( enhanceRanges );
+ }
+
Checkbox = View.extend( {
template: M.template.get( 'specials/mobileoptions/checkbox' ),
tagName: 'li',
@@ -60,6 +112,14 @@
}
}
+ function initFontSizeControl() {
+ // Set up dynamic rendering
+ $( 'input[name=fontSize]' ).on( 'change', function () {
+ $( '.content' ).css( 'font-size', this.value + 'em' );
+ } );
+ }
+
+ $( initFontSizeControl );
$( initLocalStorageCheckboxes );
- $( enhanceCheckboxes );
+ $( enhanceSettings );
}( mw.mobileFrontend, jQuery ) );
diff --git a/less/mixins.less b/less/mixins.less
index 39fb187..69a4380 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -60,3 +60,12 @@
-webkit-animation: @args;
animation: @args;
}
+
+.user-select ( @value ) {
+ -webkit-touch-callout: @value;
+ -webkit-user-select: @value;
+ -khtml-user-select: @value;
+ -moz-user-select: @value;
+ -ms-user-select: @value;
+ user-select: @value;
+}
diff --git a/less/specials/mobileoptions.less b/less/specials/mobileoptions.less
index 5bd64d8..b0e95a4 100644
--- a/less/specials/mobileoptions.less
+++ b/less/specials/mobileoptions.less
@@ -23,6 +23,7 @@
.page-loading {
#content_wrapper form.mw-mf-settings ul li {
.mw-mf-checkbox-css3,
+ .mw-mf-range,
#mw-mf-settings-save {
/* hide when still loading to avoid screen flash */
display: none;
@@ -81,6 +82,11 @@
position: relative;
border: solid 1px @btngrey;
}
+
+ .range-control {
+ // If JavaScript is enabled, we'll use these to display
a nicer selector
+ display: none;
+ }
}
.option-description {
@@ -96,6 +102,29 @@
ul {
li {
+ .mw-mf-range {
+ position: absolute;
+ top: 0;
+ right: 0;
+ font-size: 1.5em;
+
+ input {
+ display: none;
+ }
+
+ .range-control {
+ display: inline;
+ cursor: pointer;
+ color: @btnblue;
+ padding-right: 1px;
+ .user-select( none );
+
+ &.disabled {
+ color: @btngrey;
+ }
+ }
+ }
+
.mw-mf-checkbox-css3 {
border: none;
.checkboxBtn();
--
To view, visit https://gerrit.wikimedia.org/r/108300
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: If774f09ce5254a9dda8db30cbaca68b1a6cd00da
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Theopolisme <theopolismew...@gmail.com>
Gerrit-Reviewer: jenkins-bot
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
