jenkins-bot has submitted this change and it was merged.
Change subject: Interstitial design overhaul for DTAC
......................................................................
Interstitial design overhaul for DTAC
Revamp charge warning interstitial to allow for custom
overrides per partner
Change-Id: I292b062b1544a28523de8e0a88b718247c9fc941
---
M ZeroBanner.php
M i18n/en.json
M i18n/qqq.json
M includes/PageRendering.php
M includes/ZeroConfig.php
M modules/ZeroOverlay.js
M modules/banner.css
M modules/interstitial.js
A modules/interstitial.less
M templates/interstitial.hogan
10 files changed, 155 insertions(+), 88 deletions(-)
Approvals:
Yurik: Looks good to me, approved
jenkins-bot: Verified
diff --git a/ZeroBanner.php b/ZeroBanner.php
index 048da73..52737c6 100644
--- a/ZeroBanner.php
+++ b/ZeroBanner.php
@@ -81,14 +81,20 @@
'interstitial.hogan' => 'templates/interstitial.hogan',
'zeroinfo.hogan' => 'templates/zeroinfo.hogan'
),
- 'targets' => array( 'mobile' ),
+ 'targets' => array(
+ 'mobile'
+ ),
'scripts' => array(
'modules/banner.js',
'modules/interstitial.js',
'modules/ZeroInfo.js',
'modules/ZeroOverlay.js'
),
+ 'styles' => array(
+ 'modules/interstitial.less'
+ ),
'messages' => array(
+ 'cancel',
'zero-charge-auth',
'zero-file-auth',
'zero-accept',
@@ -106,7 +112,7 @@
'zero-info-https',
'zero-info-proxy',
'zero-info-geek'
- )
+ ),
);
$wgResourceModules['zerobanner.special.scripts'] = array(
diff --git a/i18n/en.json b/i18n/en.json
index fd73671..6f7ce3d 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -32,9 +32,9 @@
"zero-search": "Search {{SITENAME}}",
"zero-charge-auth": "You are about to leave Zero-rated (free)
{{SITENAME}}. Standard data charges may apply.",
"zero-file-auth": "Images for {{SITENAME}} are not offered for free by
your mobile carrier. Standard data charges may apply.",
- "zero-dont-ask": "Do not warn me about potential charges in the future",
+ "zero-dont-ask": "Continue and don't warn again",
"zero-go-back": "Go back",
- "zero-accept": "Accept",
+ "zero-accept": "Continue",
"zero-no-https": "Free data temporarily unavailable",
"zero-click-to-view-image": "Click to view image of \"$1\"...",
"zero-dismiss-notification": "dismiss this notification",
diff --git a/i18n/qqq.json b/i18n/qqq.json
index c739274..61336a3 100644
--- a/i18n/qqq.json
+++ b/i18n/qqq.json
@@ -49,7 +49,7 @@
"zero-search": "Search button shown to Wikipedia Zero users on landing
page\n{{Identical|Search}}",
"zero-charge-auth": "Data charges authorization question to user before
following redirect to an external site.",
"zero-file-auth": "Data charges authorization question to user before
images are displayed.",
- "zero-dont-ask": "Shown next to a checkbox that allows user to always
skip the following warning:\n* {{msg-mw|Zero-charge-auth}}",
+ "zero-dont-ask": "Shown on a button that allows user to always skip the
following warning:\n* {{msg-mw|Zero-charge-auth}}",
"zero-go-back": "Text for going back (in browser
history).\n{{Identical|Go back}}",
"zero-accept": "Text for accepting (e.g.
charges).\n{{Identical|Accept}}",
"zero-no-https": "Text concisely explaining that encrypted data (HTTPS)
is not zero-rated. \"Temporarily\" means that the user can go back to HTTP,
which is zero-rated.",
diff --git a/includes/PageRendering.php b/includes/PageRendering.php
index 8696589..2e6074e 100644
--- a/includes/PageRendering.php
+++ b/includes/PageRendering.php
@@ -132,6 +132,10 @@
$cfg['bannerUrl'] = $config->bannerUrl();
$cfg['bannerWarning'] = $config->bannerWarning();
+ if ( $config->partnerInfoUrl() ) {
+ $cfg['partnerInfoUrl'] =
$config->partnerInfoUrl();
+ }
+
$lang = $ctxSrc->getLanguage();
$cfg['name'] = self::pickLocalizedString(
$config->name(), $lang ) ?: '?';
@@ -140,6 +144,11 @@
$cfg['exitWarning'] =
$exitWarnings[$lang->getCode()];
}
+ $partnerInfoText = $config->partnerInfoText();
+ if ( array_key_exists( $lang->getCode(),
$partnerInfoText ) ) {
+ $cfg['partnerInfoText'] =
$partnerInfoText[$lang->getCode()];
+ }
+
if ( $config->testInfoScreen() ) {
$cfg['testInfoScreen'] = true;
}
diff --git a/includes/ZeroConfig.php b/includes/ZeroConfig.php
index d6d5007..07da756 100644
--- a/includes/ZeroConfig.php
+++ b/includes/ZeroConfig.php
@@ -119,6 +119,14 @@
return $this->getDataWithDefaults()->banner;
}
+ public function partnerInfoText() {
+ return $this->getDataWithDefaults()->partnerInfoText;
+ }
+
+ public function partnerInfoUrl() {
+ return $this->getDataWithDefaults()->partnerInfoUrl;
+ }
+
public function exitWarnings() {
return $this->getDataWithDefaults()->exitWarnings;
}
@@ -228,6 +236,10 @@
$this->test( 'banner', self::getLangToStrValidator() );
// Map of localized exit interstitial warning texts
$this->test( 'exitWarnings', self::getLangToStrValidator() );
+ // Map of localized exit interstitial custom url button text
+ $this->test( 'partnerInfoText', self::getLangToStrValidator() );
+ // Partner custom button URL, do not link by default
+ $this->test( 'partnerInfoUrl', JCValidators::useDefault( '',
false ), JCValidators::isUrl() );
// Partner URL, do not link by default
$this->test( 'bannerUrl', JCValidators::useDefault( '', false
), JCValidators::isUrl() );
// List of language codes to show on Zero page
diff --git a/modules/ZeroOverlay.js b/modules/ZeroOverlay.js
index 29e49ec..6c10fca 100644
--- a/modules/ZeroOverlay.js
+++ b/modules/ZeroOverlay.js
@@ -1,75 +1,71 @@
-/* global mw, OO, jQuery */
+/* global mw, jQuery */
( function( M, $ ) {
'use strict';
var settings = M.require( 'settings' ),
router = M.require( 'router' ),
+ ContentOverlay = M.require( 'ContentOverlay' ),
ZeroOverlay,
- windowManager;
+ cfg = window && window.zeroGlobalConfig || false;
- ZeroOverlay = function ( options ) {
- this.windowManager = windowManager = new OO.ui.WindowManager();
-
- function ProcessDialog( config ) {
- ProcessDialog.super.call( this, config );
+ ZeroOverlay = ContentOverlay.extend({
+ className: ContentOverlay.prototype.className + '
zero-interstitial',
+ closeOnContentTap: false,
+ fullScreen: false,
+ fixedHeader: false,
+ defaults: {
+ heading: mw.msg( 'zero-interstitial-title' ),
+ continueBtn: mw.msg( 'zero-accept' ),
+ cancelBtn: mw.msg( 'cancel' ),
+ customBtn: cfg.partnerInfoText,
+ dontWarnBtn: mw.msg( 'zero-dont-ask' )
+ },
+ templatePartials: $.extend( {},
ContentOverlay.prototype.templatePartials, {
+ content: mw.template.get( 'zerobanner',
'interstitial.hogan' )
+ } ),
+ events: {
+ 'click .zero-button-custom': 'onCustomButtonClick',
+ 'click .zero-button-dontwarn': 'onDontWarnButtonClick',
+ 'click .zero-button-continue': 'onContinueButtonClick',
+ 'click .zero-button-cancel': 'onCancelButtonClick'
+ },
+ initialize: function ( options ) {
+ options.warning = cfg && cfg.exitWarning ?
cfg.exitWarning :
+ mw.msg( options.image ? 'zero-file-auth' :
'zero-charge-auth' );
+ ContentOverlay.prototype.initialize.call( this, options
);
+ },
+ onContinueButtonClick: function () {
+ window.location.href = this.options.url;
+ },
+ onCancelButtonClick: function () {
+ this.hide(); // Close dialog
+ window.history.back();
+ },
+ onDontWarnButtonClick: function () {
+ settings.save( 'zerodontask', true, true );
+ window.location.href = this.options.url;
+ },
+ onCustomButtonClick: function () {
+ // Open partner url in new tab/window
+ var win = window.open(cfg.partnerInfoUrl, '_blank');
+ win.focus();
}
-
- OO.inheritClass( ProcessDialog, OO.ui.ProcessDialog );
- ProcessDialog.static.title = mw.msg( 'zero-interstitial-title'
);
- ProcessDialog.static.actions = [
- { label: 'X', flags: 'safe' },
- { label: mw.msg( 'zero-accept' ), flags: 'primary',
action: 'open' }
- ];
- ProcessDialog.prototype.initialize = function () {
- ProcessDialog.super.prototype.initialize.apply( this,
arguments );
-
- var tplData = {
- dontask: mw.msg( 'zero-dont-ask' ),
- warning: mw.msg( options.image ?
'zero-file-auth' : 'zero-charge-auth' )
- };
-
- $.extend(tplData, options);
-
- var content = mw.template.get( 'zerobanner',
'interstitial.hogan' ).render( tplData );
-
- this.$body.append( content );
- $('#zerodontask').on( 'click', function () {
- settings.save('zerodontask', this.checked,
true);
- } );
- };
- ProcessDialog.prototype.getActionProcess = function ( action ) {
- if ( action === 'open' ) {
- window.location.href = options.url;
- }
- // Fallback to parent handler
- return
ProcessDialog.super.prototype.getActionProcess.call( this, action );
- };
- ProcessDialog.prototype.getTeardownProcess = function ( data ) {
- // Parent method
- return
ProcessDialog.super.prototype.getTeardownProcess.call( this, data )
- .first( function () {
- if (
window.location.hash.indexOf('#/zerosite') > -1 ||
-
window.location.hash.indexOf('#/zerofile') > -1 ) {
- history.replaceState('',
document.title, window.location.pathname + location.search);
- }
- }, this );
- };
-
- $( 'body' ).append( this.windowManager.$element );
- var dialog = new ProcessDialog();
- this.windowManager.addWindows( [dialog] );
- this.windowManager.openWindow( dialog );
-
- // Listen to router and hide dialog on URL change
- router.once( 'route', function () {
- windowManager.clearWindows();
- } );
- };
+ });
router.route( /^\/zerosite\/(.*)/, function( url ) {
- return new ZeroOverlay( { url: url, image: false } );
+ if ( settings.get( 'zerodontask', true ) ) {
+ window.history.replaceState('', document.title,
window.location.pathname);
+ } else {
+ var overlay = new ZeroOverlay( { url: url, image: false
} );
+ overlay.show();
+ }
} );
router.route( /^\/zerofile\/(.*)/, function( url ) {
- return new ZeroOverlay( { url: url, image: true } );
+ if ( settings.get( 'zerodontask', true ) ) {
+ window.history.replaceState('', document.title,
window.location.pathname);
+ } else {
+ var overlay = new ZeroOverlay( { url: url, image: true
} );
+ overlay.show();
+ }
} );
M.define( 'ZeroOverlay', ZeroOverlay );
diff --git a/modules/banner.css b/modules/banner.css
index 704be35..67b18f7 100644
--- a/modules/banner.css
+++ b/modules/banner.css
@@ -85,15 +85,3 @@
margin-right: 0.5em;
}
-/* Overrides for OO-UI windows */
-.oo-ui-windowManager * {
- box-sizing: initial;
-}
-
-.oo-ui-window {
- z-index: 6;
-}
-
-.oo-ui-window .content {
- padding-top: 0;
-}
\ No newline at end of file
diff --git a/modules/interstitial.js b/modules/interstitial.js
index 7272a36..557f487 100644
--- a/modules/interstitial.js
+++ b/modules/interstitial.js
@@ -160,7 +160,6 @@
function navigate( warn ) {
if ( warn ) {
- M.require( 'ZeroOverlay' );
window.location.hash = ( isImage ?
'#/zerofile/' : '#/zerosite/' ) + toUrl;
} else {
// Navigate directly to the target
bypassing a server hit
diff --git a/modules/interstitial.less b/modules/interstitial.less
new file mode 100644
index 0000000..da04562
--- /dev/null
+++ b/modules/interstitial.less
@@ -0,0 +1,57 @@
+/* mixins */
+.box-shadow (@string) {
+ -webkit-box-shadow: @string;
+ -moz-box-shadow: @string;
+ box-shadow: @string;
+}
+.drop-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) {
+ -webkit-box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha);
+ -moz-box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha);
+ box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha);
+}
+.border-radius (@radius: 5px) {
+ -webkit-border-radius: @radius;
+ -moz-border-radius: @radius;
+ border-radius: @radius;
+
+ -moz-background-clip: padding;
+ -webkit-background-clip: padding-box;
+ background-clip: padding-box;
+}
+/* end mixins */
+
+.zero-interstitial {
+ padding: 25px 0;
+ max-width: 70%;
+ max-height: 70%;
+ left: 15%;
+ right: 15%;
+ top: 15%;
+ bottom: 15%;
+ margin: auto;
+ border: 1px solid #AAA;
+ .drop-shadow(@y: 4px);
+ .border-radius(25px);
+
+ .overlay-content {
+ height: 100%;
+ text-align: center;
+
+ .button-bar {
+ width: 100%;
+ position: absolute;
+ bottom: 0;
+
+ button {
+ width: 100%;
+ display: block;
+ border: none;
+ border-top: 1px solid #CCC;
+ }
+ button:last-of-type {
+ border-bottom-left-radius: 25px;
+ border-bottom-right-radius: 25px;
+ }
+ }
+ }
+}
diff --git a/templates/interstitial.hogan b/templates/interstitial.hogan
index bc80776..b699f97 100644
--- a/templates/interstitial.hogan
+++ b/templates/interstitial.hogan
@@ -1,9 +1,9 @@
-<div class="content">
- <p>{{warning}}</p>
- <p>
- <form>
- <input type="checkbox" id="zerodontask">
- <label for="zerodontask">{{dontask}}</label>
- </form>
- </p>
-</div>
\ No newline at end of file
+<h2>{{heading}}</h2>
+<br /><br />
+<p>{{warning}}</p>
+<p class="button-bar">
+ <button class="mw-ui-button
zero-button-continue">{{continueBtn}}</button>
+ <button class="mw-ui-button
zero-button-dontwarn">{{dontWarnBtn}}</button>
+ <button class="mw-ui-button zero-button-cancel">{{cancelBtn}}</button>
+ {{#customBtn}}<button class="mw-ui-button
zero-button-custom">{{customBtn}}</button>{{/customBtn}}
+</p>
--
To view, visit https://gerrit.wikimedia.org/r/235267
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I292b062b1544a28523de8e0a88b718247c9fc941
Gerrit-PatchSet: 3
Gerrit-Project: mediawiki/extensions/ZeroBanner
Gerrit-Branch: master
Gerrit-Owner: Jhobs <jhob...@wikimedia.org>
Gerrit-Reviewer: Jhobs <jhob...@wikimedia.org>
Gerrit-Reviewer: Robmoen <rm...@wikimedia.org>
Gerrit-Reviewer: Yurik <yu...@wikimedia.org>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
