Florianschmidtwelzow has uploaded a new change for review.
https://gerrit.wikimedia.org/r/192095
Change subject: WIP: Move Editor Cta to the end of the editing process
......................................................................
WIP: Move Editor Cta to the end of the editing process
* Added mw.notify to Editor for not-logged-in users to inform, that
not-logged-in
user edits will be saved with the IP adress publicly.
* Added one-line warning message (same as for mw.notify) to the preview page
* Moved Cta from start to the end of the editing process asking the user to
login or
register (the first option is a "No, thanks" button).
Bug: T87508
Change-Id: I7c1b476c8674399257ccc76502d5d67254485397
---
M i18n/en.json
M i18n/qqq.json
M includes/Resources.php
M javascripts/modules/editor/EditorOverlay.js
M javascripts/modules/editor/EditorOverlayBase.js
M javascripts/modules/editor/VisualEditorOverlay.js
A templates/modules/editor/EditorOverlayAnonNotice.hogan
D templates/modules/editor/EditorOverlayAnonWarning.hogan
M templates/modules/editor/EditorOverlayBase.hogan
M templates/modules/editor/content.hogan
A templates/modules/editor/saveSuccessHeader.hogan
M tests/qunit/modules/editor/test_EditorOverlay.js
12 files changed, 129 insertions(+), 74 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/95/192095/1
diff --git a/i18n/en.json b/i18n/en.json
index 4a523b7..d1c4455 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -60,7 +60,11 @@
"mobile-frontend-editor-abusefilter-read-more": "Read more",
"mobile-frontend-editor-abusefilter-warning": "Warning: Are you sure
you want to save this edit? There may be an issue with it.",
"mobile-frontend-editor-anon": "Edit without logging in",
- "mobile-frontend-editor-anonwarning": "<strong>Warning</strong>: You
are not logged in. Your IP address will be publicly visible if you make any
edits. If you <strong>log in</strong> or <strong>create an account</strong>,
your edits will be attributed to your username, along with other benefits.",
+ "mobile-frontend-editor-anonwarninglink": "<strong>Warning</strong>:
You are not logged in. Your IP address will be publicly visible if you make any
edits. If you <a href='$1'>log in</a> or <a href='$2'>create an account</a>,
your edits will be attributed to your username, along with other benefits.",
+ "mobile-frontend-editor-taptoclose": "Tap to close.",
+ "mobile-frontend-editor-anonwarning-morelink": "Read more",
+ "mobile-frontend-editor-successmsg": "You successfully edited the page
<strong>$1</strong>. You're currently not logged in and your edits are
attributed to your IP address. If you <strong>log in</strong> or <strong>create
an account</strong>, your edits will be attributed to your username, along with
other benefits.",
+ "mobile-frontend-editor-anonnothanks": "No, thanks",
"mobile-frontend-editor-blocked": "Your account is blocked from
editing.",
"mobile-frontend-editor-cancel": "Cancel",
"mobile-frontend-editor-cancel-confirm": "Do you really want to abandon
your edit?",
diff --git a/i18n/qqq.json b/i18n/qqq.json
index eb4f901..1b06ad5 100644
--- a/i18n/qqq.json
+++ b/i18n/qqq.json
@@ -88,7 +88,11 @@
"mobile-frontend-editor-abusefilter-read-more": "A caption for the
button allowing the user to read more about the problems with their
edit.\n{{Identical|Read more}}",
"mobile-frontend-editor-abusefilter-warning": "A message telling the
user that their edit triggered an AbuseFilter warning.",
"mobile-frontend-editor-anon": "Title for link to edit a page without
logging in.",
- "mobile-frontend-editor-anonwarning": "Warning message, when user want
to edit without logging in.",
+ "mobile-frontend-editor-anonwarninglink": "Warning message, when user
want to edit without logging in.\nParameters:\n\n* $1 - Link to login page\n*
$2 - Link to signup page",
+ "mobile-frontend-editor-taptoclose": "Note, how to close an
notification (tap on it)",
+ "mobile-frontend-editor-anonwarning-morelink": "Linklabel for truncated
text to show the full one.",
+ "mobile-frontend-editor-successmsg": "Success message after an edit was
saved for an not-logged-in user with the notice, that edits will be attributed
to the IP address, and that he can login or register to attribute them to a
username.\nParameters:\n\n* $1 - Title of the page",
+ "mobile-frontend-editor-anonnothanks": "Link label used for a button to
skip the registration or login redirect after an edit of a not-logged-in user.",
"mobile-frontend-editor-blocked": "Toast message that appears when a
user is unable to edit a page due to being blocked and clicks edit icon.",
"mobile-frontend-editor-cancel": "Caption for cancel button on edit
form.\n{{Identical|Cancel}}",
"mobile-frontend-editor-cancel-confirm": "Question asking user if they
are positive about abandoning unsaved edit.",
diff --git a/includes/Resources.php b/includes/Resources.php
index 6215f80..b295554 100644
--- a/includes/Resources.php
+++ b/includes/Resources.php
@@ -461,8 +461,9 @@
'editHeader.hogan' =>
'templates/modules/editor/editHeader.hogan',
'previewHeader.hogan' =>
'templates/modules/editor/previewHeader.hogan',
'saveHeader.hogan' =>
'templates/modules/editor/saveHeader.hogan',
+ 'saveSuccessHeader.hogan' =>
'templates/modules/editor/saveSuccessHeader.hogan',
+ 'anonNotice.hogan' =>
'templates/modules/editor/EditorOverlayAnonNotice.hogan',
'EditorOverlayBase.hogan' =>
'templates/modules/editor/EditorOverlayBase.hogan',
- 'EditorOverlayAnonWarning.hogan' =>
'templates/modules/editor/EditorOverlayAnonWarning.hogan',
),
'messages' => array(
// modules/editor/EditorOverlay.js
@@ -495,7 +496,11 @@
'mobile-frontend-editor-visual-editor',
'mobile-frontend-editor-source-editor',
'mobile-frontend-editor-switch-editor',
- 'mobile-frontend-editor-anonwarning',
+ 'mobile-frontend-editor-anonwarninglink',
+ 'mobile-frontend-editor-taptoclose',
+ 'mobile-frontend-editor-anonwarning-morelink',
+ 'mobile-frontend-editor-successmsg',
+ 'mobile-frontend-editor-anonnothanks',
),
),
diff --git a/javascripts/modules/editor/EditorOverlay.js
b/javascripts/modules/editor/EditorOverlay.js
index 810f856..c7b2d49 100644
--- a/javascripts/modules/editor/EditorOverlay.js
+++ b/javascripts/modules/editor/EditorOverlay.js
@@ -20,24 +20,24 @@
EditorOverlay = EditorOverlayBase.extend( {
templatePartials: $.extend( {},
EditorOverlayBase.prototype.templatePartials, {
content: mw.template.get( 'mobile.editor.overlay',
'content.hogan' ),
- anonWarning: mw.template.get( 'mobile.editor.common',
'EditorOverlayAnonWarning.hogan' )
+ anonNotice: mw.template.get( 'mobile.editor.common',
'anonNotice.hogan' )
} ),
/**
* @inheritdoc
* @cfg {Object} defaults Default options hash.
* @cfg {String} defaults.loginCaption A link with label to
login page.
* @cfg {String} defaults.signupCaption A link with label to
sign up page.
- * @cfg {String} defaults.anonLabel Title for link to edit a
page without logging in.
+ * @cfg {String} defaults.anonNoThanks Title for link to not
login or register after save.
* @cfg {String} defaults.anonSelector CSS class name of the
defaults.anonLabel wrapper.
- * @cfg {String} defaults.anonMsg Warning message, when user
want to edit without
+ * @cfg {String} defaults.anonMsgMoreLink Read more link label.
* logging in.
*/
defaults: $.extend( {}, EditorOverlayBase.prototype.defaults, {
loginCaption: mw.msg(
'mobile-frontend-watchlist-cta-button-login' ),
signupCaption: mw.msg(
'mobile-frontend-watchlist-cta-button-signup' ),
- anonLabel: mw.msg( 'mobile-frontend-editor-anon' ),
- anonSelector: 'continue',
- anonMsg: mw.msg( 'mobile-frontend-editor-anonwarning' )
+ anonNoThanks: mw.msg(
'mobile-frontend-editor-anonnothanks' ),
+ anonSelector: 'reload',
+ anonMsgMoreLink: mw.msg(
'mobile-frontend-editor-anonwarning-morelink' )
} ),
editor: 'SourceEditor',
sectionLine: '',
@@ -74,16 +74,19 @@
options.editingMsg = mw.msg(
'mobile-frontend-editor-editing-page', options.title );
}
if ( options.isAnon ) {
- // add required data for anonymous editing
warning
- options = this._prepareAnonWarning( options );
+ options = this._getAnonWarningMsg( options );
}
// be explicit here. This may have been initialized
from VE.
options.isVisualEditor = false;
options.previewingMsg = mw.msg(
'mobile-frontend-editor-previewing-page', options.title );
+ options.successMsg = mw.msg(
'mobile-frontend-editor-successmsg', options.title );
+ options.saveSuccessHeaderMsg = mw.msg(
'mobile-frontend-editor-success', options.title );
EditorOverlayBase.prototype.initialize.apply( this,
arguments );
},
events: $.extend( {}, EditorOverlayBase.prototype.events, {
- 'input .wikitext-editor': 'onInputWikitextEditor'
+ 'input .wikitext-editor': 'onInputWikitextEditor',
+ 'click .anon-msg-morelink': 'onReadMoreClick',
+ 'click .reload,.login-link,.signup-link':
'onAnonSaveComplete'
} ),
/**
* Wikitext Editor input handler
@@ -95,20 +98,17 @@
/**
* @inheritdoc
*/
- onClickContinue: function () {
- // handle the click on "Edit without logging in"
- if ( this.options.isAnon ) {
- this._showEditorAfterWarning();
- return false;
- }
- EditorOverlayBase.prototype.onClickContinue.apply(
this, arguments );
- },
- /**
- * @inheritdoc
- */
onClickBack: function () {
EditorOverlayBase.prototype.onClickBack.apply( this,
arguments );
this._hidePreview();
+ },
+ /**
+ * Handler for "Read more" link click for anonymous users
+ * @param {jQuery.Event} ev Event object
+ */
+ onReadMoreClick: function ( ev ) {
+ this.$( '.anon-msg.truncated-text' ).removeClass(
'truncated-text' );
+ this.$( ev.target ).hide();
},
/** @inheritdoc **/
postRender: function ( options ) {
@@ -140,11 +140,13 @@
this.$preview = this.$( '.preview' );
this.$content = this.$( '.wikitext-editor' );
if ( options.isAnon ) {
- this.$anonWarning = this.$( '.anonwarning' );
- this.$content.hide();
- // the user has to click login, signup or edit
without login, disable "Next" button on top right
- this.$anonHiddenButtons = this.$(
'.overlay-header .continue, .editor-switcher' ).hide();
- this.clearSpinner();
+ mw.notify(
+ $( '<span>' + options.anonMsg + ' ' +
mw.msg( 'mobile-frontend-editor-taptoclose' ) + '</span>' ),
+ {
+ autoHide: false,
+ tag: 'editor-anonwarning'
+ }
+ );
}
// make license links open in separate tabs
this.$( '.license a' ).attr( 'target', '_blank' );
@@ -156,9 +158,7 @@
this.$content.prop( 'readonly', true );
}
- if ( !options.isAnon ) {
- this._loadContent();
- }
+ this._loadContent();
},
/**
@@ -166,35 +166,27 @@
* @method
* @private
* @param {Object} options object
- * @return {Object} Object with all options
+ * @return {String} Html formatted warning message
*/
- _prepareAnonWarning: function ( options ) {
+ _getAnonWarningMsg: function ( options ) {
var params = $.extend( {
- // use wgPageName as this includes the
namespace if outside Main
- returnto: options.returnTo || mw.config.get(
'wgPageName' ),
- returntoquery: 'action=edit§ion=' +
options.sectionId
- }, options.queryParams ),
- signupParams = $.extend( {
- type: 'signup'
- }, options.signupQueryParams );
+ // use wgPageName as this includes the
namespace if outside Main
+ returnto: options.returnTo ||
mw.config.get( 'wgPageName' ),
+ returntoquery: 'action=edit§ion=' +
options.sectionId
+ }, options.queryParams ),
+ signupParams = $.extend( {
+ type: 'signup'
+ }, options.signupQueryParams );
options.loginUrl = mw.util.getUrl( 'Special:UserLogin',
params );
options.signupUrl = mw.util.getUrl(
'Special:UserLogin', $.extend( params, signupParams ) );
+ options.anonMsg = mw.msg(
+ 'mobile-frontend-editor-anonwarninglink',
+ options.loginUrl,
+ options.signupUrl
+ );
return options;
- },
-
- /**
- * Handles click on "Edit without login" in anonymous editing
warning.
- * @method
- * @private
- */
- _showEditorAfterWarning: function () {
- this.showSpinner();
- this.$anonWarning.hide();
- // reenable "Next" button
- this.$anonHiddenButtons.show();
- this._loadContent();
},
/**
@@ -323,6 +315,31 @@
},
/**
+ * Generates an anonymous user-only notice page, that they can
register or login to attribute
+ * changes to their usernamens instead of IP-adresses.
+ */
+ _showAnonNotice: function () {
+ // FIXME: Don't call a private method that is outside
the class.
+ this._showHidden( '.save-success-header' );
+ this.$preview.hide();
+ this.$( '.anon-notice' ).removeClass( 'hidden' );
+ },
+
+ /**
+ * Completes the save process for anonymous users.
+ * @param {jQuery.Event} ev Event object
+ */
+ onAnonSaveComplete: function ( ev ) {
+ if ( $( ev.target ).data( 'href' ) ) {
+ // complete save process and redirect to the
href location
+ this.onSaveComplete( $( ev.target ).data(
'href' ) );
+ } else {
+ // complete save process and reload page
+ this.onSaveComplete( mw.util.getUrl(
this.options.title ) );
+ }
+ },
+
+ /**
* Executed when the editor clicks the save button. Handles
logging and submitting
* the save action to the editor API.
* @inheritdoc
@@ -357,7 +374,11 @@
return;
}
- self.onSaveComplete();
+ if ( self.options.isAnon ) {
+ self._showAnonNotice( options );
+ } else {
+ self.onSaveComplete(
mw.util.getUrl( title ) );
+ }
} )
.fail( function ( data, code, response ) {
var msg,
diff --git a/javascripts/modules/editor/EditorOverlayBase.js
b/javascripts/modules/editor/EditorOverlayBase.js
index 978c76a..7a33c25 100644
--- a/javascripts/modules/editor/EditorOverlayBase.js
+++ b/javascripts/modules/editor/EditorOverlayBase.js
@@ -65,7 +65,8 @@
templatePartials: {
editHeader: mw.template.get( 'mobile.editor.common',
'editHeader.hogan' ),
previewHeader: mw.template.get( 'mobile.editor.common',
'previewHeader.hogan' ),
- saveHeader: mw.template.get( 'mobile.editor.common',
'saveHeader.hogan' )
+ saveHeader: mw.template.get( 'mobile.editor.common',
'saveHeader.hogan' ),
+ saveSuccessHeader: mw.template.get(
'mobile.editor.common', 'saveSuccessHeader.hogan' )
},
/** @inheritdoc **/
template: mw.template.get( 'mobile.editor.common',
'EditorOverlayBase.hogan' ),
@@ -110,11 +111,12 @@
}
},
/**
- * Executed when page save is complete. Handles reloading the
page, showing toast
- * messages, and setting mobile edit cookie.
+ * Executed when page save is complete. Handles showing toast
+ * messages setting mobile edit cookie and redirect to the URL
passed in location param.
+ * @param {String} location URL to redirect the user to
* @method
*/
- onSaveComplete: function () {
+ onSaveComplete: function ( location ) {
var msg,
title = this.options.title,
self = this;
@@ -140,7 +142,7 @@
}
$( window ).off( 'beforeunload.mfeditorwarning'
);
- window.location = mw.util.getUrl( title );
+ window.location = location;
} );
// Set a cookie for 30 days indicating that this user
has edited from
diff --git a/javascripts/modules/editor/VisualEditorOverlay.js
b/javascripts/modules/editor/VisualEditorOverlay.js
index 7e33dd7..cf03956 100644
--- a/javascripts/modules/editor/VisualEditorOverlay.js
+++ b/javascripts/modules/editor/VisualEditorOverlay.js
@@ -76,7 +76,7 @@
this.target.activating = true;
this.target.load();
this.target.connect( this, {
- save: 'onSaveComplete',
+ save: 'onSave',
saveAsyncBegin: 'showSpinner',
saveAsyncComplete: 'clearSpinner',
saveErrorEmpty: 'onSaveError',
@@ -209,6 +209,12 @@
overlayManager.replaceCurrent( new
EditorOverlay( options ) );
} );
},
+ /**
+ * Handles actions after save process.
+ */
+ onSave: function () {
+ this.onSaveComplete( mw.util.getUrl( this.options.title
) );
+ },
/** @inheritdoc **/
onSaveComplete: function () {
EditorOverlayBase.prototype.onSaveComplete.apply( this,
arguments );
diff --git a/templates/modules/editor/EditorOverlayAnonNotice.hogan
b/templates/modules/editor/EditorOverlayAnonNotice.hogan
new file mode 100644
index 0000000..bb4a14d
--- /dev/null
+++ b/templates/modules/editor/EditorOverlayAnonNotice.hogan
@@ -0,0 +1,8 @@
+<div class="alert">
+ <p class="anonNoticeMsg">{{{successMsg}}}</p>
+ <div class="actions">
+ <a class="mw-ui-button mw-ui-block mw-ui-progressive
{{anonSelector}}">{{anonNoThanks}}</a>
+ <a class="mw-ui-button mw-ui-block login-link"
data-href="{{loginUrl}}">{{loginCaption}}</a>
+ <a class="mw-ui-button mw-ui-block signup-link"
data-href="{{signupUrl}}">{{signupCaption}}</a>
+ </div>
+</div>
\ No newline at end of file
diff --git a/templates/modules/editor/EditorOverlayAnonWarning.hogan
b/templates/modules/editor/EditorOverlayAnonWarning.hogan
deleted file mode 100644
index f79dfc0..0000000
--- a/templates/modules/editor/EditorOverlayAnonWarning.hogan
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="alert">
- <p class="anonMsg alert warning">{{{anonMsg}}}</p>
- <div class="actions">
- <a class="mw-ui-button mw-ui-block mw-ui-progressive
{{anonSelector}}">{{anonLabel}}</a>
- <a class="mw-ui-button mw-ui-block"
href="{{loginUrl}}">{{loginCaption}}</a>
- <a class="mw-ui-button mw-ui-block"
href="{{signupUrl}}">{{signupCaption}}</a>
- </div>
-</div>
\ No newline at end of file
diff --git a/templates/modules/editor/EditorOverlayBase.hogan
b/templates/modules/editor/EditorOverlayBase.hogan
index 7aff9b5..02f5da4 100644
--- a/templates/modules/editor/EditorOverlayBase.hogan
+++ b/templates/modules/editor/EditorOverlayBase.hogan
@@ -2,6 +2,7 @@
{{>editHeader}}
{{>previewHeader}}
{{>saveHeader}}
+ {{>saveSuccessHeader}}
</div>
<div class="overlay-content">
@@ -10,6 +11,10 @@
<p class="summary-request">{{{summaryRequestMsg}}}</p>
<textarea rows="2" class="mw-ui-input summary"
placeholder="{{summaryMsg}}"></textarea>
{{#licenseMsg}}<p
class="license">{{{licenseMsg}}}</p>{{/licenseMsg}}
+ {{#anonMsg}}<div class="anon-msg alert warning">
+ <p class="anon-msg
truncated-text">{{{anonMsg}}}</p>
+ <a
class="anon-msg-morelink">{{anonMsgMoreLink}}</a>
+ </div>{{/anonMsg}}
</div>
<div class="captcha-panel panel hideable hidden">
<div class="captcha-box">
diff --git a/templates/modules/editor/content.hogan
b/templates/modules/editor/content.hogan
index 691957a..1b9adfc 100644
--- a/templates/modules/editor/content.hogan
+++ b/templates/modules/editor/content.hogan
@@ -1,9 +1,9 @@
<div lang="{{contentLang}}" dir="{{contentDir}}">
<textarea class="wikitext-editor" cols="40" rows="10"
placeholder="{{placeholder}}"></textarea>
<div class="preview content"></div>
- {{#loginUrl}}
- <div class="anonwarning content">
- {{>anonWarning}}
+ {{#isAnon}}
+ <div class="anon-notice content hidden">
+ {{>anonNotice}}
</div>
- {{/loginUrl}}
+ {{/isAnon}}
</div>
diff --git a/templates/modules/editor/saveSuccessHeader.hogan
b/templates/modules/editor/saveSuccessHeader.hogan
new file mode 100644
index 0000000..a26f491
--- /dev/null
+++ b/templates/modules/editor/saveSuccessHeader.hogan
@@ -0,0 +1,8 @@
+<div class="overlay-header save-success-header hideable hidden">
+ <ul>
+ <li>{{{cancelButton}}}</li>
+ </ul>
+ <div class="overlay-title">
+ <h2>{{{saveSuccessHeaderMsg}}}</h2>
+ </div>
+</div>
diff --git a/tests/qunit/modules/editor/test_EditorOverlay.js
b/tests/qunit/modules/editor/test_EditorOverlay.js
index 82d58d1..73b7d0b 100644
--- a/tests/qunit/modules/editor/test_EditorOverlay.js
+++ b/tests/qunit/modules/editor/test_EditorOverlay.js
@@ -78,6 +78,6 @@
isAnon: true
} );
- assert.ok( editorOverlay.$anonWarning.length > 0,
'Editorwarning (IP will be saved) visible.' );
+ assert.ok( editorOverlay.options.anonMsg.length > 0,
'Editorwarning (IP will be saved) visible.' );
} );
}( mw.mobileFrontend, jQuery ) );
--
To view, visit https://gerrit.wikimedia.org/r/192095
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I7c1b476c8674399257ccc76502d5d67254485397
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Florianschmidtwelzow <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
