JGonera has uploaded a new change for review.
https://gerrit.wikimedia.org/r/90450
Change subject: Story 1281: Promote section level editing tutorial A/B test to
stable
......................................................................
Story 1281: Promote section level editing tutorial A/B test to stable
Adding a funnel requires a corresponding change to mediawiki-config.
Change-Id: I0323a6ae739515bc3157114eac40c62ecf66823f
---
M includes/Resources.php
M javascripts/common/CtaDrawer.js
M javascripts/modules/editor/EditorOverlay.js
M javascripts/modules/editor/editor.js
A javascripts/modules/tutorials/LeadPhotoTutorialOverlay.js
M javascripts/modules/tutorials/PageActionOverlay.js
D javascripts/modules/tutorials/newbie.js
A javascripts/modules/tutorials/newbieEditor.js
A javascripts/modules/tutorials/newbieUploads.js
M less/common/pageactions.less
M less/modules/tutorials.less
R templates/modules/tutorials/PageActionOverlay.html
12 files changed, 114 insertions(+), 112 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/50/90450/1
diff --git a/includes/Resources.php b/includes/Resources.php
index a25a471..1e79834 100644
--- a/includes/Resources.php
+++ b/includes/Resources.php
@@ -271,16 +271,11 @@
'templates' => array(
// NotificationsOverlay.js
'overlays/notifications',
- // page.js
- 'pageActionTutorial',
),
'dependencies' => array(
'mobile.stable.common',
'mobile.loggingSchemas',
'mobile.templates',
- ),
- 'scripts' => array(
- 'javascripts/common/ContentOverlay.js',
),
'messages' => array(
// LanguageOverlay.js
@@ -337,10 +332,10 @@
'javascripts/modules/talk/talk.js',
'javascripts/modules/search/pageImages.js',
'javascripts/modules/languages/preferred.js',
- 'javascripts/modules/tutorials/PageActionOverlay.js',
- 'javascripts/modules/tutorials/newbie.js',
'javascripts/modules/lastModifiedBeta.js',
'javascripts/modules/keepgoing/keepgoing.js',
+
'javascripts/modules/tutorials/LeadPhotoTutorialOverlay.js',
+ 'javascripts/modules/tutorials/newbieUploads.js',
),
'position' => 'bottom',
'messages' => array(
@@ -348,18 +343,16 @@
'mobile-frontend-show-button',
'mobile-frontend-hide-button',
- // newbie.js
- 'mobile-frontend-lead-image-tutorial-summary',
- 'mobile-frontend-lead-image-tutorial-confirm',
- 'mobile-frontend-editor-tutorial-summary',
- 'mobile-frontend-editor-tutorial-confirm',
-
// for talk.js
'mobile-frontend-talk-overlay-header',
// notifications.js (defined in Echo)
'echo-none',
'notifications',
+
+ // newbieUploads.js
+ 'mobile-frontend-lead-image-tutorial-summary',
+ 'mobile-frontend-lead-image-tutorial-confirm',
),
),
@@ -478,6 +471,7 @@
'ctaDrawer',
// mf-references.js
'ReferencesDrawer',
+ 'modules/tutorials/PageActionOverlay',
),
'scripts' => array(
'javascripts/common/View.js',
@@ -544,6 +538,9 @@
'javascripts/modules/search/search.js',
'javascripts/modules/mf-watchstar.js',
'javascripts/modules/mf-references.js',
+ 'javascripts/common/ContentOverlay.js',
+ 'javascripts/modules/tutorials/PageActionOverlay.js',
+ 'javascripts/modules/tutorials/newbieEditor.js',
),
'messages' => array(
// for mf-toggle.js
@@ -579,6 +576,10 @@
// for search.js
'mobile-frontend-search-help',
'mobile-frontend-search-noresults',
+
+ // newbieEditor.js
+ 'mobile-frontend-editor-tutorial-summary',
+ 'mobile-frontend-editor-tutorial-confirm',
),
),
diff --git a/javascripts/common/CtaDrawer.js b/javascripts/common/CtaDrawer.js
index 0201dd6..37ce407 100644
--- a/javascripts/common/CtaDrawer.js
+++ b/javascripts/common/CtaDrawer.js
@@ -17,10 +17,11 @@
var params = $.extend( {
// use wgPageName as this includes the
namespace if outside Main
returnto: options.returnTo || mw.config.get(
'wgPageName' )
- }, options.queryParams );
+ }, options.queryParams ),
+ signupParams = $.extend( { type: 'signup' },
options.signupQueryParams );
options.loginUrl = mw.util.wikiGetlink(
'Special:UserLogin', params );
- options.signupUrl = mw.util.wikiGetlink(
'Special:UserLogin', $.extend( params, { type: 'signup' } ) );
+ options.signupUrl = mw.util.wikiGetlink(
'Special:UserLogin', $.extend( params, signupParams ) );
}
} );
diff --git a/javascripts/modules/editor/EditorOverlay.js
b/javascripts/modules/editor/EditorOverlay.js
index d5cd6aa..b4e3217 100644
--- a/javascripts/modules/editor/EditorOverlay.js
+++ b/javascripts/modules/editor/EditorOverlay.js
@@ -46,7 +46,8 @@
pageId: mw.config.get( 'wgArticleId' ),
username: mw.config.get( 'wgUserName' ),
mobileMode: mw.config.get( 'wgMFMode' ),
- userAgent: window.navigator.userAgent
+ userAgent: window.navigator.userAgent,
+ funnel: this.funnel
};
if ( errorText ) {
data.errorText = errorText;
@@ -64,6 +65,7 @@
this.isNewEditor = options.isNewEditor;
this.editCount = mw.config.get( 'wgUserEditCount' );
this.isFirstEdit = this.editCount === 0;
+ this.funnel = options.funnel;
this._super( options );
},
diff --git a/javascripts/modules/editor/editor.js
b/javascripts/modules/editor/editor.js
index 5edfa1d..620b644 100644
--- a/javascripts/modules/editor/editor.js
+++ b/javascripts/modules/editor/editor.js
@@ -10,6 +10,7 @@
queryParams: {
campaign: 'mobile_editPageActionCta'
},
+ signupQueryParams: { returntoquery:
'article_action=signup-edit' },
content: mw.msg( 'mobile-frontend-editor-cta' )
} );
@@ -19,7 +20,7 @@
prependTo( container );
}
- function makeCta( $el, hash, returnToQuery ) {
+ function makeCta( $el, hash ) {
$el.
// FIXME change when micro.tap.js in stable
on( M.tapEvent( 'mouseup' ), function( ev ) {
@@ -28,10 +29,7 @@
ev.stopPropagation();
// need to use toggle() because we do
ev.stopPropagation() (in addEditButton())
drawer.
- render( { queryParams: {
- returnto: mw.config.get(
'wgPageName' ) + hash,
- returntoquery: returnToQuery
- } } ).
+ render( { queryParams: { returnto:
mw.config.get( 'wgPageName' ) + hash } } ).
toggle();
} ).
// needed until we use tap everywhere to prevent the
link from being followed
@@ -43,7 +41,7 @@
if ( M.query.undo ) {
window.alert( mw.msg(
'mobile-frontend-editor-undo-unsupported' ) );
}
- M.router.route( /^editor\/(\d+)$/, function( sectionId ) {
+ M.router.route( /^editor\/(\d+)\/?([^\/]*)$/, function(
sectionId, funnel ) {
var loadingOverlay = new LoadingOverlay();
loadingOverlay.show();
@@ -59,7 +57,8 @@
title: ns ? ns + ':' + title : title,
isNew: isNew,
isNewEditor: mw.config.get(
'wgUserEditCount' ) === 0,
- sectionId: mw.config.get(
'wgPageContentModel' ) === 'wikitext' ? sectionId : null
+ sectionId: mw.config.get(
'wgPageContentModel' ) === 'wikitext' ? sectionId : null,
+ funnel: funnel || 'article'
} ).show();
} );
} );
@@ -79,22 +78,24 @@
// prevent folding section when clicking Edit
ev.stopPropagation();
} );
+
+ // FIXME: remove when edit AB test is done
+ if ( M.query.article_action === 'signup-edit' ) {
+ $( '.edit-page' ).each( function() {
+ $( this ).attr( 'href', $( this ).attr( 'href'
) + '/ctaSignup' );
+ } );
+ }
}
function initCta() {
// FIXME change when micro.tap.js in stable
$( '#ca-edit' ).addClass( 'enabled' ).on( M.tapEvent( 'click'
), function() {
- drawer.render( { queryParams :{ returntoquery:
'article_action=edit' } } ).show();
+ drawer.render().show();
} );
$( '.edit-page' ).each( function() {
var $a = $( this ), anchor = '#' + $( this
).parent().find( '[id]' ).attr( 'id' );
-
- if ( mw.config.get( 'wgMFMode' ) === 'stable' ) {
- makeCta( $a, anchor );
- } else {
- makeCta( $a, anchor, 'article_action=edit' );
- }
+ makeCta( $a, anchor );
} );
}
diff --git a/javascripts/modules/tutorials/LeadPhotoTutorialOverlay.js
b/javascripts/modules/tutorials/LeadPhotoTutorialOverlay.js
new file mode 100644
index 0000000..ef9527a
--- /dev/null
+++ b/javascripts/modules/tutorials/LeadPhotoTutorialOverlay.js
@@ -0,0 +1,23 @@
+( function( M ) {
+ var LeadPhotoUploaderButton = M.require(
'modules/uploads/LeadPhotoUploaderButton' ),
+ PageActionOverlay = M.require(
'modules/tutorials/PageActionOverlay' ),
+ LeadPhotoTutorialOverlay;
+
+ LeadPhotoTutorialOverlay = PageActionOverlay.extend( {
+ defaults: {
+ className: 'slide active photo-upload',
+ summary: mw.msg(
'mobile-frontend-lead-image-tutorial-summary' ),
+ cancelMsg: mw.msg( 'cancel' )
+ },
+ postRender: function( options ) {
+ this._super( options );
+ new LeadPhotoUploaderButton( {
+ el: this.$( '.button' ),
+ label: mw.msg(
'mobile-frontend-lead-image-tutorial-confirm' ),
+ pageTitle: mw.config.get( 'wgTitle' ),
insertInPage: true } );
+ }
+ } );
+
+ M.define( 'modules/tutorials/LeadPhotoTutorialOverlay',
LeadPhotoTutorialOverlay );
+
+}( mw.mobileFrontend ) );
diff --git a/javascripts/modules/tutorials/PageActionOverlay.js
b/javascripts/modules/tutorials/PageActionOverlay.js
index a027cbb..83198e6 100644
--- a/javascripts/modules/tutorials/PageActionOverlay.js
+++ b/javascripts/modules/tutorials/PageActionOverlay.js
@@ -1,34 +1,15 @@
( function( M ) {
var ContentOverlay = M.require( 'ContentOverlay' ),
- LeadPhotoUploaderButton = M.require(
'modules/uploads/LeadPhotoUploaderButton' ),
- LeadPhotoTutorialOverlay,
PageActionOverlay;
PageActionOverlay = ContentOverlay.extend( {
- template: M.template.get( 'pageActionTutorial' ),
+ template: M.template.get( 'modules/tutorials/PageActionOverlay'
),
defaults: {
cancelMsg: mw.msg( 'cancel' ),
className: 'slide active'
}
} );
- LeadPhotoTutorialOverlay = PageActionOverlay.extend( {
- template: M.template.get( 'pageActionTutorial' ),
- defaults: {
- className: 'slide active photo-upload',
- summary: mw.msg(
'mobile-frontend-lead-image-tutorial-summary' ),
- cancelMsg: mw.msg( 'cancel' )
- },
- postRender: function( options ) {
- this._super( options );
- new LeadPhotoUploaderButton( {
- el: this.$( '.button' ),
- label: mw.msg(
'mobile-frontend-lead-image-tutorial-confirm' ),
- pageTitle: mw.config.get( 'wgTitle' ),
insertInPage: true } );
- }
- } );
-
- M.define( 'tutorials/PageActionOverlay', PageActionOverlay );
- M.define( 'tutorials/LeadPhotoTutorialOverlay',
LeadPhotoTutorialOverlay );
+ M.define( 'modules/tutorials/PageActionOverlay', PageActionOverlay );
}( mw.mobileFrontend ) );
diff --git a/javascripts/modules/tutorials/newbie.js
b/javascripts/modules/tutorials/newbie.js
deleted file mode 100644
index cc0e02d..0000000
--- a/javascripts/modules/tutorials/newbie.js
+++ /dev/null
@@ -1,60 +0,0 @@
-( function( M, $ ) {
- var LeadPhotoTutorialOverlay = M.require(
'tutorials/LeadPhotoTutorialOverlay' ),
- PageActionOverlay = M.require( 'tutorials/PageActionOverlay' ),
- action = M.query.article_action,
- escapeHash = M.require( 'toggle' ).escapeHash;
-
- function shouldShowUploadTutorial() {
- // FIXME: Limit audience to only users with low edit count
- return $( '#ca-upload' ).hasClass( 'enabled' ) &&
- action === 'photo-upload';
- }
-
- function shouldShowEditTutorial() {
- // FIXME: Limit audience to only users with low edit count
- return $( '#ca-edit' ).hasClass( 'enabled' ) &&
- action === 'edit';
- }
-
- $( function() {
- var photoOverlay, editOverlay, target;
-
- if ( !M.isLoggedIn() ) {
- return;
- } else if ( shouldShowEditTutorial() ) {
- if ( window.location.hash ) {
- target = escapeHash( window.location.hash ) + '
~ .edit-page';
- } else {
- target = '#ca-edit .edit-page';
- }
-
- if ( mw.config.get( 'wgMFMode' ) !== 'stable' &&
window.location.hash && M.isTestA ) {
- // go straight to the editor if in beta/alpha,
editing a section and in bucket A
- window.location.href = $( target ).attr( 'href'
);
- } else {
- editOverlay = new PageActionOverlay( {
- target: target,
- className: 'slide active editing',
- summary: mw.msg(
'mobile-frontend-editor-tutorial-summary', mw.config.get( 'wgTitle' ) ),
- confirmMsg: mw.msg(
'mobile-frontend-editor-tutorial-confirm' )
- } );
- editOverlay.show();
- $( '#ca-edit' ).on( 'mousedown', $.proxy(
editOverlay, 'hide' ) );
- editOverlay.$( '.actionable' ).on( M.tapEvent(
'click' ), function() {
- // Hide the tutorial
- editOverlay.hide();
- // Load the editing interface
- window.location.href = $( target
).attr( 'href' );
- } );
- }
- } else if ( shouldShowUploadTutorial() ) {
- photoOverlay = new LeadPhotoTutorialOverlay( {
- target: $( '#ca-upload input' ),
- funnel: 'newbie'
- } );
- photoOverlay.show();
- $( '#ca-upload' ).on( 'mousedown', $.proxy(
photoOverlay, 'hide' ) );
- }
- } );
-
-}( mw.mobileFrontend, jQuery ) );
diff --git a/javascripts/modules/tutorials/newbieEditor.js
b/javascripts/modules/tutorials/newbieEditor.js
new file mode 100644
index 0000000..e8155f7
--- /dev/null
+++ b/javascripts/modules/tutorials/newbieEditor.js
@@ -0,0 +1,35 @@
+( function( M, $ ) {
+ var PageActionOverlay = M.require(
'modules/tutorials/PageActionOverlay' ),
+ escapeHash = M.require( 'toggle' ).escapeHash,
+ shouldShowEditTutorial = $( '#ca-edit' ).hasClass( 'enabled' )
&& M.query.article_action === 'signup-edit',
+ editOverlay, target;
+
+ if ( M.isLoggedIn() && shouldShowEditTutorial ) {
+ if ( window.location.hash ) {
+ target = escapeHash( window.location.hash ) + ' ~
.edit-page';
+ } else {
+ target = '#ca-edit .edit-page';
+ }
+
+ if ( M.isTestA ) {
+ // go straight to the editor if in bucket A
+ window.location.href = $( target ).attr( 'href' );
+ } else {
+ editOverlay = new PageActionOverlay( {
+ target: target,
+ className: 'slide active editing',
+ summary: mw.msg(
'mobile-frontend-editor-tutorial-summary', mw.config.get( 'wgTitle' ) ),
+ confirmMsg: mw.msg(
'mobile-frontend-editor-tutorial-confirm' )
+ } );
+ editOverlay.show();
+ $( '#ca-edit' ).on( 'mousedown', $.proxy( editOverlay,
'hide' ) );
+ editOverlay.$( '.actionable' ).on( M.tapEvent( 'click'
), function() {
+ // Hide the tutorial
+ editOverlay.hide();
+ // Load the editing interface
+ window.location.href = $( target ).attr( 'href'
);
+ } );
+ }
+ }
+
+}( mw.mobileFrontend, jQuery ) );
diff --git a/javascripts/modules/tutorials/newbieUploads.js
b/javascripts/modules/tutorials/newbieUploads.js
new file mode 100644
index 0000000..ef134f6
--- /dev/null
+++ b/javascripts/modules/tutorials/newbieUploads.js
@@ -0,0 +1,15 @@
+( function( M, $ ) {
+ var LeadPhotoTutorialOverlay = M.require(
'modules/tutorials/LeadPhotoTutorialOverlay' ),
+ shouldShowUploadTutorial = $( '#ca-upload' ).hasClass(
'enabled' ) && M.query.article_action === 'photo-upload',
+ photoOverlay;
+
+ if ( M.isLoggedIn() && shouldShowUploadTutorial ) {
+ photoOverlay = new LeadPhotoTutorialOverlay( {
+ target: $( '#ca-upload input' ),
+ funnel: 'newbie'
+ } );
+ photoOverlay.show();
+ $( '#ca-upload' ).on( 'mousedown', $.proxy( photoOverlay,
'hide' ) );
+ }
+
+}( mw.mobileFrontend, jQuery ) );
diff --git a/less/common/pageactions.less b/less/common/pageactions.less
index 6bb7c59..8b3a394 100644
--- a/less/common/pageactions.less
+++ b/less/common/pageactions.less
@@ -47,6 +47,8 @@
display: block;
width: 100%;
height: 100%;
+ // needed for ContentOverlay pointer arrow
+ margin: 0 0 @verticalMargin;
}
}
}
diff --git a/less/modules/tutorials.less b/less/modules/tutorials.less
index 9b7f968..92c90e9 100644
--- a/less/modules/tutorials.less
+++ b/less/modules/tutorials.less
@@ -47,7 +47,8 @@
.button {
// FIXME: without this the cloaked input seems to
interfere making cancel button start upload
position: relative;
- background-color: white;
+ // use background to override gradient in other buttons
+ background: #fff;
color: @colorTutorial;
padding: 12px;
border: none;
diff --git a/templates/pageActionTutorial.html
b/templates/modules/tutorials/PageActionOverlay.html
similarity index 100%
rename from templates/pageActionTutorial.html
rename to templates/modules/tutorials/PageActionOverlay.html
--
To view, visit https://gerrit.wikimedia.org/r/90450
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I0323a6ae739515bc3157114eac40c62ecf66823f
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: JGonera <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
