jenkins-bot has submitted this change and it was merged.
Change subject: Story 839: Save from preview in editor
......................................................................
Story 839: Save from preview in editor
Remove PreviewOverlay and treat preview as the last stage of the
EditorOverlay. Add summary to EditorApi.
Change-Id: Icac5b5f1418528ef08acfb6b5047d7d24e0e924e
---
M MobileFrontend.i18n.php
M includes/Resources.php
M javascripts/modules/editor/EditorApi.js
M javascripts/modules/editor/EditorOverlay.js
D javascripts/modules/editor/PreviewOverlay.js
M less/common/notifications.less
M less/common/overlays.less
M less/modules/editor.less
M stylesheets/common/notifications.css
M stylesheets/common/overlays.css
M stylesheets/modules/editor.css
D templates/overlays/editPreview.html
M templates/overlays/editor.html
M tests/javascripts/modules/editor/test_EditorApi.js
14 files changed, 146 insertions(+), 147 deletions(-)
Approvals:
Jdlrobson: Looks good to me, approved
jenkins-bot: Verified
diff --git a/MobileFrontend.i18n.php b/MobileFrontend.i18n.php
index 3fd18d6..6f1d171 100644
--- a/MobileFrontend.i18n.php
+++ b/MobileFrontend.i18n.php
@@ -241,17 +241,18 @@
// edit
'mobile-frontend-editor-cta' => 'You must be logged in to edit pages on
mobile.',
'mobile-frontend-editor-edit' => 'Edit',
+ 'mobile-frontend-editor-continue' => 'Continue',
'mobile-frontend-editor-save' => 'Save',
'mobile-frontend-editor-cancel' => 'Cancel',
- 'mobile-frontend-editor-confirm' => 'Confirm',
- 'mobile-frontend-editor-license' => 'By clicking "Confirm", you agree
to our [//wikimediafoundation.org/wiki/Terms_of_use Terms of Use] and agree to
release your text under the [//creativecommons.org/licenses/by-sa/3.0/ Creative
Commons Attribution-ShareAlike 3.0 License].',
+ 'mobile-frontend-editor-keep-editing' => 'Keep editing',
+ 'mobile-frontend-editor-license' => 'By clicking "Save", you agree to
our [//wikimediafoundation.org/wiki/Terms_of_use Terms of Use] and agree to
release your text under the [//creativecommons.org/licenses/by-sa/3.0/ Creative
Commons Attribution-ShareAlike 3.0 License].',
+ 'mobile-frontend-editor-summary-placeholder' => 'Tell us what you
changed (optional)',
'mobile-frontend-editor-cancel-confirm' => 'Do you really want to
abandon your edit?',
'mobile-frontend-editor-wait' => 'Saving edit, please wait.',
'mobile-frontend-editor-success' => 'Success! Your edit was saved.',
'mobile-frontend-editor-error' => 'Error, edit not saved.',
'mobile-frontend-editor-error-conflict' => 'Error, another user has
edited this page.',
'mobile-frontend-editor-error-loading' => 'Error, can\'t load section.',
- 'mobile-frontend-editor-preview' => 'Preview',
'mobile-frontend-editor-preview-explanation' => 'A preview of this edit
will be shown below.',
'mobile-frontend-editor-error-preview' => 'Error, something unexpected
happened upon loading the preview. Please close and try again.',
@@ -657,16 +658,17 @@
'mobile-frontend-editor-cta' => "Caption for call to action when an
anonymous user clicks on edit icon. (Note the mobile site currently doesn't
allow anonymous editing.)",
'mobile-frontend-editor-edit' => 'Caption for the link showing edit
form.
{{Identical|Edit}}',
+ 'mobile-frontend-editor-continue' => 'Caption for the continue button
on edit form which takes you to the screen that shows a preview and license
information.',
'mobile-frontend-editor-save' => 'Caption for save button on edit form.
+
+Should be consistent with the following message:
+* {{msg-mw|mobile-frontend-editor-license}}
{{Identical|Save}}',
'mobile-frontend-editor-cancel' => 'Caption for cancel button on edit
form.
{{Identical|Cancel}}',
- 'mobile-frontend-editor-confirm' => 'Caption for confirm button on edit
form.
-
-Should be consistent with the following message:
-* {{msg-mw|Mobile-frontend-editor-license}}
-{{Identical|Confirm}}',
+ 'mobile-frontend-editor-keep-editing' => 'Caption for a button that
takes you back to editing from edit preview screen.',
'mobile-frontend-editor-license' => 'Text notifying user of license
that text will be published under. You can change the URL to a "local"
Wikipedia URL, but you cannot make it point to the country specific CC BY-SA
3.0 license. See also: {{msg-mw|mobile-frontend-editor-confirm}}.',
+ 'mobile-frontend-editor-summary-placeholder' => 'A placeholder for the
summary input field asking user what they changed (the field is optional).',
'mobile-frontend-editor-cancel-confirm' => 'Question asking user if
they are positive about abandoning unsaved edit.',
'mobile-frontend-editor-wait' => 'Text that displays while a page edit
is being saved.',
'mobile-frontend-editor-success' => 'Text that displays when a page
edit has been successfully saved.
@@ -681,8 +683,6 @@
'mobile-frontend-editor-error-loading' => 'Text that displays when
there have been errors when loading a page section in the editor.
Used as "toast" error message.',
- 'mobile-frontend-editor-preview' => 'Text shown on preview button in
edit overlay screen that when clicked launches a preview of the associated
wikitext
-{{Identical|Preview}}',
'mobile-frontend-editor-preview-explanation' => 'A summary explaining
that the preview is being prepared and will appear below.',
'mobile-frontend-editor-error-preview' => 'Error message for when a
preview fails to load for an unknown reason',
'tag-mobile_edit' => 'Short change tag name that appears e.g. in
[[Special:RecentChanges]].
diff --git a/includes/Resources.php b/includes/Resources.php
index 1d21baa..827ad59 100644
--- a/includes/Resources.php
+++ b/includes/Resources.php
@@ -219,7 +219,6 @@
'localTemplateBasePath' => $localBasePath . '/templates',
'templates' => array(
'overlays/editor',
- 'overlays/editPreview',
'section',
// talk.js
'overlays/talk',
@@ -233,10 +232,13 @@
// editor.js
'mobile-frontend-editor-cta',
'mobile-frontend-editor-edit',
+ // modules/editor/EditorOverlay.js
+ 'mobile-frontend-editor-continue',
'mobile-frontend-editor-save',
'mobile-frontend-editor-cancel',
- 'mobile-frontend-editor-confirm',
+ 'mobile-frontend-editor-keep-editing',
'mobile-frontend-editor-license' => array( 'parse' ),
+ 'mobile-frontend-editor-summary-placeholder',
'mobile-frontend-editor-cancel-confirm',
'mobile-frontend-editor-wait',
'mobile-frontend-editor-success',
@@ -244,9 +246,6 @@
'mobile-frontend-editor-error',
'mobile-frontend-editor-error-conflict',
'mobile-frontend-editor-error-loading',
-
- // modules/editor/EditorOverlay.js
- 'mobile-frontend-editor-preview',
// modules/editor/PreviewOverlay.js
'mobile-frontend-editor-error-preview',
'mobile-frontend-editor-preview-explanation',
@@ -289,7 +288,6 @@
),
'scripts' => array(
'javascripts/modules/editor/EditorApi.js',
- 'javascripts/modules/editor/PreviewOverlay.js',
'javascripts/modules/editor/EditorOverlay.js',
'javascripts/modules/editor/editor.js',
'javascripts/modules/mf-toggle-dynamic.js',
diff --git a/javascripts/modules/editor/EditorApi.js
b/javascripts/modules/editor/EditorApi.js
index 63403d4..06cc38a 100644
--- a/javascripts/modules/editor/EditorApi.js
+++ b/javascripts/modules/editor/EditorApi.js
@@ -69,7 +69,7 @@
} ).length;
},
- save: function() {
+ save: function( summary ) {
var self = this, result = $.Deferred(),
sections = $.map( this._sectionStage, function(
section ) {
return section;
@@ -87,6 +87,7 @@
title: self.title,
section: section.id,
text: section.content,
+ summary: summary,
token: token,
basetimestamp: section.timestamp,
starttimestamp: section.timestamp
diff --git a/javascripts/modules/editor/EditorOverlay.js
b/javascripts/modules/editor/EditorOverlay.js
index 483a4b1..2cacf95 100644
--- a/javascripts/modules/editor/EditorOverlay.js
+++ b/javascripts/modules/editor/EditorOverlay.js
@@ -3,17 +3,19 @@
var Overlay = M.require( 'Overlay' ),
Page = M.require( 'page' ),
popup = M.require( 'notifications' ),
+ api = M.require( 'api' ),
+ Section = M.require( 'Section' ),
EditorApi = M.require( 'modules/editor/EditorApi' ),
- PreviewOverlay = M.require( 'modules/editor/PreviewOverlay' ),
EditorOverlay;
EditorOverlay = Overlay.extend( {
defaults: {
closeMsg: mw.msg( 'mobile-frontend-overlay-escape' ),
+ continueMsg: mw.msg( 'mobile-frontend-editor-continue'
),
saveMsg: mw.msg( 'mobile-frontend-editor-save' ),
cancelMsg: mw.msg( 'mobile-frontend-editor-cancel' ),
- confirmMsg: mw.msg( 'mobile-frontend-editor-confirm' ),
- previewMsg: mw.msg( 'mobile-frontend-editor-preview' ),
+ keepEditingMsg: mw.msg(
'mobile-frontend-editor-keep-editing' ),
+ summaryMsg: mw.msg(
'mobile-frontend-editor-summary-placeholder' ),
licenseMsg: mw.msg( 'mobile-frontend-editor-license' ),
waitMsg: mw.msg( 'mobile-frontend-editor-wait' )
},
@@ -47,29 +49,28 @@
var self = this;
this._super( options );
- this.$( '.preview' ).on( 'click', function() {
- var overlay = new PreviewOverlay( {
- parent: self,
- title: options.title,
- wikitext: self.$( 'textarea' ).val()
- } );
- self.previewClicked = true;
- overlay.show();
- } );
this.$spinner = this.$( '.spinner' );
+ this.$preview = this.$( '.preview' );
this.$content = this.$( 'textarea' ).
on( 'input', function() {
self.api.stageSection( self.sectionId,
self.$content.val() );
- self.$( '.save' ).prop( 'disabled',
false );
+ self.$( '.continue' ).prop( 'disabled',
false );
self._resizeContent();
} );
- this.$( '.save' ).on( 'click', function() {
+ this.$( '.continue' ).on( 'click', function() {
// log save button click
self.log( 'save' );
+ self._showPreview();
self.$( '.initial-bar' ).hide();
- self.$( '.confirm-bar' ).show();
+ self.$( '.save-bar' ).show();
} );
- this.$( '.confirm-save' ).on( 'click', $.proxy( this,
'_save' ) );
+ this.$( '.back' ).on( 'click', function() {
+ self.$preview.hide();
+ self.$content.show();
+ self.$( '.save-bar' ).hide();
+ self.$( '.initial-bar' ).show();
+ } );
+ this.$( '.save' ).on( 'click', $.proxy( this, '_save' )
);
this.$( '.cancel' ).on( 'click', function() {
// log cancel attempt
self.log( 'cancel' );
@@ -101,6 +102,54 @@
} else {
return false;
}
+ },
+
+ _showPreview: function() {
+ var self = this;
+
+ this.$content.hide();
+ this.$spinner.show();
+
+ api.post( {
+ action: 'parse',
+ // Enable section preview mode to avoid errors
(bug 49218)
+ sectionpreview: true,
+ title: self.options.title,
+ text: self.$content.val(),
+ prop: 'text'
+ } ).then( function( resp ) {
+ // FIXME: Don't trust the api response
+ if ( resp && resp.parse && resp.parse.text ) {
+ return $.Deferred().resolve(
resp.parse.text['*'] );
+ } else {
+ return $.Deferred().reject();
+ }
+ } ).done( function( parsedText ) {
+ // FIXME: hacky
+ var $tmp = $( '<div>' ).html( parsedText ),
heading;
+ // FIXME: yuck.
+ $tmp.find( '.mw-editsection' ).remove();
+ // Extract the first heading
+ heading = $tmp.find( 'h2' ).eq( 0 ).text();
+ // remove heading from the parsed output
+ $tmp.find( 'h2' ).eq( 0 ).remove();
+
+ new Section( {
+ el: self.$preview,
+ index: 'preview',
+ // doesn't account for headings with
html inside
+ heading: heading,
+ content: $tmp.html()
+ // bug 49218: stop links from being clickable
(note user can still hold down to navigate to them)
+ } ).$( 'a' ).on( 'click', false );
+ // Emit event so we can perform enhancements to
page
+ M.emit( 'edit-preview', self );
+ } ).fail( function() {
+ self.$preview.addClass( 'error' ).text( mw.msg(
'mobile-frontend-editor-error-preview' ) );
+ } ).always( function() {
+ self.$spinner.hide();
+ self.$preview.show();
+ } );
},
_resizeContent: function() {
@@ -136,10 +185,10 @@
var self = this;
self.log( 'submit' );
- this.$( '.confirm-bar' ).hide();
+ this.$( '.save-bar' ).hide();
this.$( '.saving-bar' ).show();
- this.api.save().
+ this.api.save( this.$( '.summary' ).val() ).
done( function() {
var title = self.options.title;
// log success!
diff --git a/javascripts/modules/editor/PreviewOverlay.js
b/javascripts/modules/editor/PreviewOverlay.js
deleted file mode 100644
index bcd9905..0000000
--- a/javascripts/modules/editor/PreviewOverlay.js
+++ /dev/null
@@ -1,72 +0,0 @@
-( function( M, $ ) {
-
-var Overlay = M.require( 'Overlay' ),
- Section = M.require( 'Section' ),
- api = M.require( 'api' ),
- PreviewOverlay = Overlay.extend( {
- defaults: {
- // FIXME: currently heading is determined during
initialise
- heading: '',
- closeMsg: Overlay.prototype.defaults.closeMsg,
- explanation: mw.msg(
'mobile-frontend-editor-preview-explanation' )
- },
- template: M.template.get( 'overlays/editPreview' ),
- className: 'mw-mf-overlay editor-overlay',
-
- postRender: function( options ) {
- this._super( options );
- var self = this,
- d = $.Deferred(),
- $container = this.$( '.content' );
-
- this.$( '.preview-cancel' ).on( 'click', function() {
- self.hide();
- } );
- api.post( {
- action: 'parse',
- // Enable section preview mode to avoid errors
(bug 49218)
- sectionpreview: true,
- title: options.title,
- text: options.wikitext,
- prop: 'text'
- } ).then( function( resp ) {
- // FIXME: Don't trust the api response
- if ( resp && resp.parse && resp.parse.text ) {
- d.resolve( resp.parse.text['*'] );
- } else {
- d.reject();
- }
- } );
-
- d.done( function( parsedText ) {
- // FIXME: hacky
- var $tmp = $( '<div>' ).html( parsedText ),
heading;
- // FIXME: yuck.
- $tmp.find( '.mw-editsection' ).remove();
- // Extract the first heading
- heading = $tmp.find( 'h2' ).eq( 0 ).text();
-
- // remove heading from the parsed output
- $tmp.find( 'h2' ).eq( 0 ).remove();
-
- new Section( {
- el: $container,
- index: 'preview',
- // doesn't account for headings with
html inside
- heading: heading,
- content: $tmp.html()
- } );
- // bug 49218: stop links from being clickable
(note user can still hold down to navigate to them)
- $container.find( 'a' ).on( 'click', false );
- // Emit event so we can perform enhancements to
page
- M.emit( 'edit-preview', self );
- } ).fail( function() {
- $container.removeClass( 'loading' ).addClass(
'error' ).
- text( mw.msg(
'mobile-frontend-editor-error-preview' ) );
- } );
- }
- } );
-
- M.define( 'modules/editor/PreviewOverlay', PreviewOverlay );
-
-}( mw.mobileFrontend, jQuery ) );
diff --git a/less/common/notifications.less b/less/common/notifications.less
index 3407f06..d3600e0 100644
--- a/less/common/notifications.less
+++ b/less/common/notifications.less
@@ -143,6 +143,10 @@
p {
line-height: 1.2;
margin: 0 0 .5em;
+
+ &:last-child {
+ margin: 0;
+ }
}
.progress-bar {
diff --git a/less/common/overlays.less b/less/common/overlays.less
index b604c81..8ea8b9f 100644
--- a/less/common/overlays.less
+++ b/less/common/overlays.less
@@ -98,24 +98,22 @@
.buttonBar {
bottom: 0;
- width: 100%;
+ left: 0;
+ right: 0;
border-top: 1px solid #ccc;
background-color: #f3f3f3;
text-align: center;
+ padding: 0 1em;
button {
- margin: 10px 5px;
+ margin: .7em .3em;
}
p {
- margin: 1em 16px 10px;
+ margin: .7em 0;
line-height: 1.3;
font-size: .9em;
text-align: left;
-
- &:first-child {
- margin-top: 1.2em;
- }
}
}
diff --git a/less/modules/editor.less b/less/modules/editor.less
index cbd511f..b74aae8 100644
--- a/less/modules/editor.less
+++ b/less/modules/editor.less
@@ -43,15 +43,29 @@
}
}
- .content {
- padding-bottom: 5em;
+ input {
+ margin: .7em 0 0;
+ width: 100%;
+ }
+
+ .preview {
+ display: none;
+ padding-bottom: 15em;
+ }
+
+ .license {
+ background: url('images/cc-by-sa.png') 0 .2em no-repeat;
+ background-size: auto 16px;
+ padding: 0 0 0 55px;
+ color: #707070;
+ font-size: .75em !important;
}
.buttonBar {
box-shadow: 0 -10px 10px 0 #fff;
}
- .confirm-bar, .saving-bar {
+ .save-bar, .saving-bar {
display: none;
}
diff --git a/stylesheets/common/notifications.css
b/stylesheets/common/notifications.css
index d8d8410..2e93776 100644
--- a/stylesheets/common/notifications.css
+++ b/stylesheets/common/notifications.css
@@ -139,6 +139,9 @@
line-height: 1.2;
margin: 0 0 .5em;
}
+#mf-notification p:last-child {
+ margin: 0;
+}
#mf-notification .progress-bar {
margin: .9em 0 0;
}
diff --git a/stylesheets/common/overlays.css b/stylesheets/common/overlays.css
index 346e8a9..b7c1513 100644
--- a/stylesheets/common/overlays.css
+++ b/stylesheets/common/overlays.css
@@ -76,22 +76,21 @@
}
.mw-mf-overlay .buttonBar {
bottom: 0;
- width: 100%;
+ left: 0;
+ right: 0;
border-top: 1px solid #ccc;
background-color: #f3f3f3;
text-align: center;
+ padding: 0 1em;
}
.mw-mf-overlay .buttonBar button {
- margin: 10px 5px;
+ margin: .7em .3em;
}
.mw-mf-overlay .buttonBar p {
- margin: 1em 16px 10px;
+ margin: .7em 0;
line-height: 1.3;
font-size: .9em;
text-align: left;
-}
-.mw-mf-overlay .buttonBar p:first-child {
- margin-top: 1.2em;
}
.mw-mf-overlay .mw-mf-overlay-footer,
.mw-mf-overlay .mw-mf-overlay-header {
diff --git a/stylesheets/modules/editor.css b/stylesheets/modules/editor.css
index e0cda68..b58c0ed 100644
--- a/stylesheets/modules/editor.css
+++ b/stylesheets/modules/editor.css
@@ -32,13 +32,25 @@
.editor-overlay textarea:focus {
outline: none;
}
-.editor-overlay .content {
- padding-bottom: 5em;
+.editor-overlay input {
+ margin: .7em 0 0;
+ width: 100%;
+}
+.editor-overlay .preview {
+ display: none;
+ padding-bottom: 15em;
+}
+.editor-overlay .license {
+ background: url('images/cc-by-sa.png') 0 0.2em no-repeat;
+ background-size: auto 16px;
+ padding: 0 0 0 55px;
+ color: #707070;
+ font-size: .75em !important;
}
.editor-overlay .buttonBar {
box-shadow: 0 -10px 10px 0 #ffffff;
}
-.editor-overlay .confirm-bar,
+.editor-overlay .save-bar,
.editor-overlay .saving-bar {
display: none;
}
diff --git a/templates/overlays/editPreview.html
b/templates/overlays/editPreview.html
deleted file mode 100644
index fe3a736..0000000
--- a/templates/overlays/editPreview.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<div class="header">
- <button class="cancel">{{closeMsg}}</button>
-</div>
-<div class="mw-mf-overlay-header">{{explanation}}</div>
-<div class="content">
- <div class="spinner loading"></div>
-</div>
-<div class="position-fixed buttonBar initial-bar">
- <button class="cancel">{{closeMsg}}</button>
-</div>
diff --git a/templates/overlays/editor.html b/templates/overlays/editor.html
index f0890ad..3b0b759 100644
--- a/templates/overlays/editor.html
+++ b/templates/overlays/editor.html
@@ -3,17 +3,17 @@
</div>
<div class="spinner loading"></div>
<textarea cols="40" rows="10"></textarea>
+<div class="preview content"></div>
<div class="position-fixed buttonBar initial-bar">
- <button class="cancel">{{cancelMsg}}</button>
- <button class="preview">{{previewMsg}}</button>
- <button class="save" disabled>{{saveMsg}}</button>
+ <button class="cancel inline">{{cancelMsg}}</button>
+ <button class="continue" disabled>{{continueMsg}}</button>
</div>
-<div class="position-fixed buttonBar confirm-bar">
- <p>{{{licenseMsg}}}</p>
- <button class="cancel">{{cancelMsg}}</button>
- <button class="preview">{{previewMsg}}</button>
- <button class="confirm-save">{{confirmMsg}}</button>
+<div class="position-fixed buttonBar save-bar">
+ <input class="summary" placeholder="{{summaryMsg}}" />
+ <button class="inline back">{{keepEditingMsg}}</button>
+ <button class="save">{{saveMsg}}</button>
+ <p class="license">{{{licenseMsg}}}</p>
</div>
<div class="position-fixed buttonBar saving-bar loading">
- <p>{{waitMsg}}</p>
+ <p>{{waitMsg}}</p>
</div>
diff --git a/tests/javascripts/modules/editor/test_EditorApi.js
b/tests/javascripts/modules/editor/test_EditorApi.js
index 48d82e8..316e351 100644
--- a/tests/javascripts/modules/editor/test_EditorApi.js
+++ b/tests/javascripts/modules/editor/test_EditorApi.js
@@ -87,12 +87,13 @@
editorApi.stageSection( 1, 'section 1' );
editorApi.getSection( 2 );
editorApi.stageSection( 2, 'section 2' );
- editorApi.save().done( function() {
+ editorApi.save( 'summary' ).done( function() {
assert.ok( editorApi.post.calledWith( {
action: 'edit',
title: 'test',
section: 1,
text: 'section 1',
+ summary: 'summary',
token: 'fake token',
basetimestamp: '2013-05-15T00:30:26Z',
starttimestamp: '2013-05-15T00:30:26Z'
@@ -102,6 +103,7 @@
title: 'test',
section: 2,
text: 'section 2',
+ summary: 'summary',
token: 'fake token',
basetimestamp: '2013-05-15T00:30:26Z',
starttimestamp: '2013-05-15T00:30:26Z'
@@ -117,12 +119,13 @@
editorApi.getSection( 0 );
editorApi.stageSection( 0, 'section 0' );
- editorApi.save().done( function() {
+ editorApi.save( 'summary' ).done( function() {
assert.ok( editorApi.post.calledWith( {
action: 'edit',
title: 'Talk:test',
section: 0,
text: 'section 0',
+ summary: 'summary',
token: 'fake token',
basetimestamp: undefined,
starttimestamp: undefined
--
To view, visit https://gerrit.wikimedia.org/r/72640
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Icac5b5f1418528ef08acfb6b5047d7d24e0e924e
Gerrit-PatchSet: 5
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: JGonera <[email protected]>
Gerrit-Reviewer: Jdlrobson <[email protected]>
Gerrit-Reviewer: jenkins-bot
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
