jenkins-bot has submitted this change and it was merged.
Change subject: Improvements to add discussion on talk page
......................................................................
Improvements to add discussion on talk page
* Use right top button to add a new discussion, instead of button in
content-header (same as in editor "continue").
* reload page after the new discussion is saved
* Ask for confirmation when leave the Add discussion overlay and
content is in the textfields.
* Add QUnit tests for TalkSectionAddOverlay
* Remove the try to hide parent Overlay when a new comment was saved to
a discussion (prevent TypeError)
Bug: 69763
Change-Id: I2a31a8b704adc2401e1b2c030cfe54a0eb7c771e
---
M i18n/en.json
M i18n/qqq.json
M includes/Resources.php
M javascripts/modules/talk/TalkOverlay.js
M javascripts/modules/talk/TalkSectionAddOverlay.js
M templates/modules/talk/talk.hogan
A templates/modules/talk/talkHeader.hogan
A tests/qunit/modules/talk/test_TalkSectionAddOverlay.js
8 files changed, 129 insertions(+), 27 deletions(-)
Approvals:
Jdlrobson: Looks good to me, approved
jenkins-bot: Verified
diff --git a/i18n/en.json b/i18n/en.json
index 4439c74..0644aa8 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -280,6 +280,7 @@
"mobile-frontend-talk-reply-info": "Note your reply will be automatically
signed with your username.",
"mobile-frontend-talk-reply-success": "Your reply was successfully saved
to the talk page.",
"mobile-frontend-talk-topic-feedback": "New topic added to talk page!",
+ "mobile-frontend-talk-topic-error": "The topic can't be added. Error: $1",
"mobile-frontend-terms-text": "Terms of Use",
"mobile-frontend-terms-url": "",
"mobile-frontend-thanked-notice": "$1 was told that you liked
{{GENDER:$2|his|her|their}} edit.",
diff --git a/i18n/qqq.json b/i18n/qqq.json
index 24e2120..8103f57 100644
--- a/i18n/qqq.json
+++ b/i18n/qqq.json
@@ -306,6 +306,7 @@
"mobile-frontend-talk-reply-info": "Inform the user their talk reply
will be automatically signed.",
"mobile-frontend-talk-reply-success": "Toast message when you have
saved a reply successfully.",
"mobile-frontend-talk-topic-feedback": "Feedback when a topic has been
added to talk page.",
+ "mobile-frontend-talk-topic-error": "Error message when topic could not
be added. $1 - contains error details",
"mobile-frontend-terms-text": "\"Terms of use\" link text at the bottom
of every page.\n{{Identical|Terms of use}}",
"mobile-frontend-terms-url": "Terms of use URL. Do not localise",
"mobile-frontend-thanked-notice": "{{doc-singularthey}}\nPop-up message
that is displayed after a user has thanked another user for their
edit.\n\nParameters:\n* $1 - the username of the user that was thanked\n* $2 -
the gender of the user that was thanked",
diff --git a/includes/Resources.php b/includes/Resources.php
index fc911e8..27e1c2c 100644
--- a/includes/Resources.php
+++ b/includes/Resources.php
@@ -503,6 +503,7 @@
'templates' => array(
// talk.js
'modules/talk/talk.hogan',
+ 'modules/talk/talkHeader.hogan',
'modules/talk/talkSectionAdd.hogan',
'modules/talk/talkSectionAddHeader.hogan',
'modules/talk/talkSection.hogan',
@@ -520,8 +521,10 @@
'mobile-frontend-talk-reply',
'mobile-frontend-talk-reply-info',
'mobile-frontend-talk-topic-feedback',
+ 'mobile-frontend-talk-topic-error',
// @todo FIXME: Gets loaded twice if editor and talk
both loaded.
'mobile-frontend-editor-cancel',
+ 'mobile-frontend-editor-cancel-confirm',
'mobile-frontend-editor-licensing',
'mobile-frontend-editor-licensing-with-terms',
),
diff --git a/javascripts/modules/talk/TalkOverlay.js
b/javascripts/modules/talk/TalkOverlay.js
index 8f0eaa1..4858056 100644
--- a/javascripts/modules/talk/TalkOverlay.js
+++ b/javascripts/modules/talk/TalkOverlay.js
@@ -7,20 +7,28 @@
TalkSectionAddOverlay = M.require(
'modules/talk/TalkSectionAddOverlay' ),
TalkSectionOverlay = M.require(
'modules/talk/TalkSectionOverlay' ),
user = M.require( 'user' ),
+ /**
+ * @extends Overlay
+ * @class TalkOverlay
+ */
TalkOverlay = Overlay.extend( {
+ template: M.template.get( 'modules/talk/talk.hogan' ),
templatePartials: {
- content: M.template.get(
'modules/talk/talk.hogan' )
+ header: M.template.get(
'modules/talk/talkHeader.hogan' )
},
defaults: {
addTopicLabel: mw.msg(
'mobile-frontend-talk-add-overlay-submit' ),
heading: '<strong>' + mw.msg(
'mobile-frontend-talk-overlay-header' ) + '</strong>',
leadHeading: mw.msg(
'mobile-frontend-talk-overlay-lead-header' )
},
+
postRender: function( options ) {
this._super( options );
this.$board = this.$( '.board' );
this._loadContent( options );
+ this._showHidden( '.initial-header' );
},
+
/**
* Show a loading spinner
* @method
@@ -62,7 +70,7 @@
window.location =
mw.util.getUrl( options.title );
}
} ).done( function( pageData ) {
- self._addContent( pageData );
+ self._addContent( pageData, options );
} );
},
@@ -70,14 +78,12 @@
* Adds the content received from _loadContent to the
Overlay
* @method
*/
- _addContent: function( pageData ) {
+ _addContent: function( pageData, options ) {
var $add = this.$( 'button.add' ), page,
sections, self = this;
// API request was successful so show the talk
page content
page = new Page( pageData );
- // used for TalkSectionOverlay to access page
sections
+ // FIXME: just for tests
this.page = page;
-
- this.$content = this.$( '.overlay-content' );
// clear actual content, if any
this.$( '.page-list.actionable'
).empty().prepend(
@@ -88,7 +94,7 @@
sections = page.getSubSections();
// Add content header explanation
- this.$( '.content-header' ).prepend(
+ this.$( '.content-header' ).text(
sections.length > 0 ? mw.msg(
'mobile-frontend-talk-explained' ) :
mw.msg(
'mobile-frontend-talk-explained-empty' )
);
@@ -105,20 +111,25 @@
// content is there, hide the spinner
this.clearSpinner();
- // FIXME: Make the add button work again. bug
69763
- $add.remove();
if ( !user.isAnon() ) {
+ $add.removeClass( 'hidden' );
$add.click( function() {
var overlay = new
TalkSectionAddOverlay( {
- parent: self,
title: page.title
} );
overlay.show();
- overlay.on( 'hide', function() {
+ overlay.on(
'talk-discussion-added', function() {
+ // reload the content
+ self._loadContent(
options );
+ } ).on( 'hide', function() {
// re-enable
TalkOverlay (it's closed by hide event (in Overlay)
// from
TalkSectionAddOverlay)
self.show();
} );
+ // When closing this overlay,
also close the child section overlay
+ self.on( 'hide', function() {
+ overlay.remove();
+ } );
} );
} else {
$add.remove();
diff --git a/javascripts/modules/talk/TalkSectionAddOverlay.js
b/javascripts/modules/talk/TalkSectionAddOverlay.js
index aabdeec..9fc479f 100644
--- a/javascripts/modules/talk/TalkSectionAddOverlay.js
+++ b/javascripts/modules/talk/TalkSectionAddOverlay.js
@@ -33,8 +33,10 @@
);
}
this._super( options );
- this.talkOverlay = options.parent;
this.title = options.title;
+ // Variable to indicate, if the overlay will be closed
by the save function or by the user. If this is false and there is content in
the input fields,
+ // the user will be asked, if he want to abandon his
changes before we close the Overlay, otherwise the Overlay will be closed
without any question.
+ this._saveHit = false;
},
postRender: function( options ) {
var self = this;
@@ -43,19 +45,45 @@
this.confirm = this.$( 'button.confirm-save' );
this.confirm.on( 'click', function() {
if ( !$( this ).prop( 'disabled' ) ) {
- self.save();
+ self.save().done( function( status ) {
+ if ( status === 'ok' ) {
+
M.pageApi.invalidatePage( self.title );
+ toast.show( mw.msg(
'mobile-frontend-talk-topic-feedback' ), 'toast' );
+ self.emit(
'talk-discussion-added' );
+ self.hide();
+ }
+ } ).fail( function( error ) {
+ self.confirm.prop( 'disabled',
false );
+ toast.show(
+ mw.msg(
'mobile-frontend-talk-topic-error', error.details ),
+ 'toast error'
+ );
+ } );
}
} );
+ },
+ hide: function() {
+ var confirmMessage = mw.msg(
'mobile-frontend-editor-cancel-confirm' ), empty;
+ empty = ( !this.$( '.summary' ).val() && !this.$(
'.wikitext-editor' ).val() );
+ if ( this._saveHit || empty || window.confirm(
confirmMessage ) ) {
+ return this._super();
+ } else {
+ return false;
+ }
},
save: function() {
var $subject = this.$( 'input' ),
$ta = this.$( 'textarea' ),
heading = $subject.val(),
self = this,
- text = $ta.val();
+ text = $ta.val(),
+ result = $.Deferred();
$ta.removeClass( 'error' );
$subject.removeClass( 'error' );
if ( text && heading ) {
+ // propagate, that we save an edit and want to
close the Overlay without any interruption (user questions e.g.)
+ this._saveHit = true;
+
this.confirm.prop( 'disabled', true );
this.$( '.content' ).empty().addClass(
'loading' );
this.$( '.buttonBar' ).hide();
@@ -69,10 +97,12 @@
summary: mw.msg(
'mobile-frontend-talk-edit-summary', heading ),
text: text + ' ~~~~'
} ).done( function() {
- self.hide();
- M.pageApi.invalidatePage(
self.title );
- toast.show( mw.msg(
'mobile-frontend-talk-topic-feedback' ), 'toast' );
+ result.resolve( 'ok' );
+ } ).fail( function( msg ) {
+ result.reject( { type: 'error',
details: msg } );
} );
+ } ).fail( function( msg ) {
+ result.reject( { type: 'error',
details: msg } );
} );
} else {
if ( !text ) {
@@ -81,7 +111,9 @@
if ( !heading ) {
$subject.addClass( 'error' );
}
+ result.reject( { type: 'error', details: 'empty
message or heading' } );
}
+ return result;
}
} );
diff --git a/templates/modules/talk/talk.hogan
b/templates/modules/talk/talk.hogan
index 00d4bd6..6670d00 100644
--- a/templates/modules/talk/talk.hogan
+++ b/templates/modules/talk/talk.hogan
@@ -1,12 +1,17 @@
-<div class="board">
- <p class="content-header">{{explanation}}<br>
- <button class="add mw-ui-button
mw-ui-progressive">{{addTopicLabel}}</button>
- </p>
- <ul class="page-list actionable">
- <li class="lead-discussion">
- <a data-id="0">{{leadHeading}}</a>
- </li>
- </ul>
+<div class="overlay-header-container position-fixed">
+ {{>header}}
</div>
-<div class="spinner loading"></div>
+
+<div class="overlay-content">
+ <div class="board">
+ <p class="content-header">
+ {{explanation}}
+ </p>
+ <ul class="page-list actionable">
+ <li class="lead-discussion">
+ <a data-id="0">{{leadHeading}}</a>
+ </li>
+ </ul>
+ </div>
+ <div class="spinner loading"></div>
</div>
diff --git a/templates/modules/talk/talkHeader.hogan
b/templates/modules/talk/talkHeader.hogan
new file mode 100644
index 0000000..b10881b
--- /dev/null
+++ b/templates/modules/talk/talkHeader.hogan
@@ -0,0 +1,11 @@
+<div class="overlay-header initial-header hideable hidden">
+ <ul>
+ <li><button class="cancel icon
icon-back">{{closeMsg}}</button></li>
+ </ul>
+ <div class="overlay-title">
+ <h2>{{{heading}}}</h2>
+ </div>
+ <div class="overlay-action">
+ <button class="add continue hidden">{{addTopicLabel}}</button>
+ </div>
+</div>
\ No newline at end of file
diff --git a/tests/qunit/modules/talk/test_TalkSectionAddOverlay.js
b/tests/qunit/modules/talk/test_TalkSectionAddOverlay.js
new file mode 100644
index 0000000..2dec0b1
--- /dev/null
+++ b/tests/qunit/modules/talk/test_TalkSectionAddOverlay.js
@@ -0,0 +1,38 @@
+( function ( M ) {
+
+ var TalkSectionAddOverlay = M.require(
'modules/talk/TalkSectionAddOverlay' );
+
+ QUnit.module( 'MobileFrontend TalkSectionAddOverlay', {
+ setup: function() {
+ // tokens for anonymous users only when anonymous
editing is allowed
+ this.anonEditing = mw.config.get(
'wgMFAnonymousEditing' );
+ mw.config.set( 'wgMFAnonymousEditing', true );
+ },
+ teardown: function() {
+ // restore old value of wgMFAnonymousEditing
+ mw.config.set( 'wgMFAnonymousEditing', this.anonEditing
);
+ }
+ } );
+
+ QUnit.test( 'Test "add new discussion" Overlay and save process', 4,
function( assert ) {
+ var overlay = new TalkSectionAddOverlay( { title: 'Talk:No
exist' } );
+ // set the content of the new discussion
+ overlay.$( 'input' ).val( 'Testtitle' );
+ overlay.$( 'textarea' ).val( 'Testcontent' );
+ // Check the values
+ assert.strictEqual( overlay.$( 'input' ).val(), 'Testtitle',
'Testtitle set' );
+ assert.strictEqual( overlay.$( 'textarea' ).val(),
'Testcontent', 'Testcontent set' );
+ // Test the save of the new dicsussion
+ QUnit.stop();
+ overlay.save().done( function( status ) {
+ assert.strictEqual( status, 'ok', 'The new discussion
was saved' );
+ QUnit.start();
+ } ).fail( function( error ) {
+ assert.strictEqual( error, 'ok', 'The new discussion
was saved' );
+ QUnit.start();
+ } );
+ // check, if the save was recognized (so the overlay can hide
without confirmation of the user)
+ assert.strictEqual( overlay._saveHit, true, 'The save was
recognized' );
+ } );
+
+}( mw.mobileFrontend, jQuery ) );
\ No newline at end of file
--
To view, visit https://gerrit.wikimedia.org/r/153957
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I2a31a8b704adc2401e1b2c030cfe54a0eb7c771e
Gerrit-PatchSet: 14
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: JGonera <[email protected]>
Gerrit-Reviewer: Jdlrobson <[email protected]>
Gerrit-Reviewer: Kaldari <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
