Jdlrobson has uploaded a new change for review.
https://gerrit.wikimedia.org/r/66152
Change subject: Story 768: Add previews to editor
......................................................................
Story 768: Add previews to editor
* Add a preview button in between previous and next buttons
* Add a close button on the preview screen in same position to make it easy
to escape
* In preview window load a preview of article using Section view (now
exposed via define )
* Fix the overlay header to be aligned with the back arrow
* Adds edit-preview event, make use in toggle and cleanup templates module to
add
this to preview
Change-Id: I1f4bee08cf24c2ce2657d46b650b3e1a0532d408
---
M MobileFrontend.i18n.php
M includes/Resources.php
M javascripts/modules/editor/EditorOverlay.js
A javascripts/modules/editor/PreviewOverlay.js
M javascripts/modules/mf-cleanuptemplates.js
M javascripts/modules/mf-toggle.js
M javascripts/views/page.js
M less/common/overlays.less
M stylesheets/common/overlays.css
A templates/overlays/editPreview.html
M templates/overlays/editor.html
A templates/section.html
12 files changed, 146 insertions(+), 17 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/52/66152/1
diff --git a/MobileFrontend.i18n.php b/MobileFrontend.i18n.php
index 9ac9e8d..b79a0e0 100644
--- a/MobileFrontend.i18n.php
+++ b/MobileFrontend.i18n.php
@@ -247,6 +247,9 @@
'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.',
// Change tags
'tag-mobile_edit' => 'Mobile edit',
@@ -659,6 +662,10 @@
See also:
* {{msg-mw|tag-mobile_edit-description}}',
+ 'mobile-frontend-editor-preview' => 'Text shown on preview button in
edit overlay screen that when clicked launches a preview of the associated
wikitext',
+ '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-description' => 'Change tag description e.g. in
[[Special:Tags]], see also {{msg-mw|tag-mobile_edit}}',
'mobile-frontend-drawer-cancel' => 'Not visible, but the text label for
the cancel button inside a navigation overlay
{{Identical|Cancel}}',
diff --git a/includes/Resources.php b/includes/Resources.php
index ff5cf5f..3f470e9 100644
--- a/includes/Resources.php
+++ b/includes/Resources.php
@@ -201,6 +201,8 @@
'languageSection',
'overlays/languages',
'overlays/editor',
+ 'overlays/editPreview',
+ 'section'
),
'messages' => array(
// editor.js
@@ -219,6 +221,12 @@
'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',
),
'class' => 'MFResourceLoaderModule',
),
@@ -245,6 +253,7 @@
),
'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-languages.js',
diff --git a/javascripts/modules/editor/EditorOverlay.js
b/javascripts/modules/editor/EditorOverlay.js
index 7130f67..beb4703 100644
--- a/javascripts/modules/editor/EditorOverlay.js
+++ b/javascripts/modules/editor/EditorOverlay.js
@@ -3,6 +3,7 @@
var Overlay = M.require( 'navigation' ).Overlay,
popup = M.require( 'notifications' ),
EditorApi = M.require( 'modules/editor/EditorApi' ),
+ PreviewOverlay = M.require( 'modules/editor/PreviewOverlay' ),
EditorOverlay;
EditorOverlay = Overlay.extend( {
@@ -12,6 +13,7 @@
cancelMsg: mw.msg( 'mobile-frontend-editor-cancel' ),
confirmMsg: mw.msg( 'mobile-frontend-editor-confirm' ),
previousMsg: mw.msg ( 'mobile-frontend-editor-previous'
),
+ previewMsg: mw.msg( 'mobile-frontend-editor-preview' ),
nextMsg: mw.msg ( 'mobile-frontend-editor-next' ),
licenseMsg: mw.msg( 'mobile-frontend-editor-license' ),
waitMsg: mw.msg( 'mobile-frontend-editor-wait' )
@@ -24,6 +26,14 @@
this._super( options );
this.api = new EditorApi( { title: options.title,
isNew: options.isNew } );
+ this.$( '.preview' ).on( 'click', function() {
+ var overlay = new PreviewOverlay( {
+ parent: self,
+ title: options.title,
+ wikitext: self.$( 'textarea' ).val()
+ } );
+ overlay.show();
+ } );
this.sectionCount = options.sectionCount;
this.$spinner = this.$( '.spinner' );
this.$content = this.$( 'textarea' ).
diff --git a/javascripts/modules/editor/PreviewOverlay.js
b/javascripts/modules/editor/PreviewOverlay.js
new file mode 100644
index 0000000..151f809
--- /dev/null
+++ b/javascripts/modules/editor/PreviewOverlay.js
@@ -0,0 +1,69 @@
+( function( M, $ ) {
+
+var Overlay = M.require( 'navigation' ).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',
+
+ initialize: function( options ) {
+ this._super( options );
+ var self = this,
+ d = $.Deferred(),
+ $container = this.$( '.spinner' );
+
+ this.$( '.preview-cancel' ).on( 'click', function() {
+ self.hide();
+ } );
+ api.get( {
+ action: 'parse',
+ 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();
+ $container.removeClass( 'loading' );
+
+ // 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()
+ } );
+ // 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/javascripts/modules/mf-cleanuptemplates.js
b/javascripts/modules/mf-cleanuptemplates.js
index 54379a7..b4a7731 100644
--- a/javascripts/modules/mf-cleanuptemplates.js
+++ b/javascripts/modules/mf-cleanuptemplates.js
@@ -7,20 +7,22 @@
template: M.template.get( 'overlays/cleanup' )
} );
- function run() {
- var $metadata = $( '#content_0 table.ambox' ),
+ function run( $container, parentOverlay ) {
+ $container = $container || $( '#content_0' );
+ var $metadata = $container.find( 'table.ambox' ),
overlay,
- $container = $( '<div>' );
+ $tmp = $( '<div>' );
$metadata.each( function() {
if ( $( this ).find( 'table.ambox' ).length === 0 ) {
- $container.append( $( this ).clone() );
+ $tmp.append( $( this ).clone() );
}
} );
overlay = new CleanupOverlay( {
+ parent: parentOverlay,
heading: M.message(
'mobile-frontend-meta-data-issues-header' ),
- content: $container.html()
+ content: $tmp.html()
} );
$( '<a class="mw-mf-cleanup">' ).click( function() {
@@ -31,7 +33,13 @@
function init() {
run();
- M.on( 'page-loaded', run );
+ M.on( 'page-loaded', function() {
+ // don't page the page-loaded parameter to run.
+ run();
+ } );
+ M.on( 'edit-preview', function( overlay ) {
+ run( overlay.$el, overlay );
+ } );
}
return {
diff --git a/javascripts/modules/mf-toggle.js b/javascripts/modules/mf-toggle.js
index 6b60479..25819c3 100644
--- a/javascripts/modules/mf-toggle.js
+++ b/javascripts/modules/mf-toggle.js
@@ -16,7 +16,8 @@
}
}
- function init() {
+ function init( $el ) {
+ $el = $el || $( 'body' );
function openSectionHandler() {
var sectionName = this.id ? this.id.split( '_' )[1] :
-1;
if ( sectionName !== -1 ) {
@@ -25,8 +26,8 @@
}
$( 'html' ).addClass( 'togglingEnabled' );
- $( '.section_heading' ).on( 'mousedown', openSectionHandler );
- $( '.section_anchors' ).remove();
+ $el.find( '.section_heading' ).on( 'mousedown',
openSectionHandler );
+ $el.find( '.section_anchors' ).remove();
function checkHash() {
var hash = window.location.hash;
@@ -35,7 +36,7 @@
}
}
checkHash();
- $( '#content_wrapper a' ).on( 'click', checkHash );
+ $el.find( '#content_wrapper a' ).on( 'click', checkHash );
}
return {
@@ -48,4 +49,8 @@
M.define( 'toggle', toggle );
+M.on( 'edit-preview', function( overlay ) {
+ toggle.init( overlay.$el );
+} );
+
}( mw.mobileFrontend, jQuery ) );
diff --git a/javascripts/views/page.js b/javascripts/views/page.js
index 276215e..0609ec4 100644
--- a/javascripts/views/page.js
+++ b/javascripts/views/page.js
@@ -5,6 +5,7 @@
Section, Page;
Section = View.extend( {
+ template: M.template.get( 'section' ),
defaults: {
hasReferences: false, // flag for references
heading: '',
@@ -123,5 +124,6 @@
} );
M.define( 'page', Page );
+ M.define( 'Section', Section );
}( mw.mobileFrontend, jQuery ) );
diff --git a/less/common/overlays.less b/less/common/overlays.less
index bc0474b..ad8867f 100644
--- a/less/common/overlays.less
+++ b/less/common/overlays.less
@@ -125,7 +125,7 @@
.mw-mf-overlay-footer,
.mw-mf-overlay-header {
- padding: 4px 8px 4px @searchBarPaddingLeft;
+ padding: 4px 8px 4px @contentMarginLeft;
margin: 0;
font-size: 0.8em;
diff --git a/stylesheets/common/overlays.css b/stylesheets/common/overlays.css
index e5dfe6a..12294ae 100644
--- a/stylesheets/common/overlays.css
+++ b/stylesheets/common/overlays.css
@@ -129,7 +129,7 @@
}
.mw-mf-overlay .mw-mf-overlay-footer,
.mw-mf-overlay .mw-mf-overlay-header {
- padding: 4px 8px 4px 40px;
+ padding: 4px 8px 4px 23px;
margin: 0;
font-size: 0.8em;
color: #666;
diff --git a/templates/overlays/editPreview.html
b/templates/overlays/editPreview.html
new file mode 100644
index 0000000..a5e1c28
--- /dev/null
+++ b/templates/overlays/editPreview.html
@@ -0,0 +1,11 @@
+<div class="header">
+ <button class="cancel">{{closeMsg}}</button>
+ <ul class="button-bar">
+ <li><button class="preview-cancel">{{closeMsg}}</button></li>
+ </ul>
+</div>
+<div class="mw-mf-overlay-header">{{explanation}}</div>
+<div class="content">
+ <div class="spinner loading"></div>
+</div>
+
diff --git a/templates/overlays/editor.html b/templates/overlays/editor.html
index aa60e6f..966c3d6 100644
--- a/templates/overlays/editor.html
+++ b/templates/overlays/editor.html
@@ -1,9 +1,10 @@
<div class="header">
- <button class="cancel">{{closeMsg}}</button>
- <ul class="button-bar">
- <li><button class="prev-section">{{previousMsg}}</button>
- <li><button class="next-section">{{nextMsg}}</button>
- </ul>
+ <button class="cancel">{{closeMsg}}</button>
+ <ul class="button-bar">
+ <li><button class="prev-section">{{previousMsg}}</button>
+ <li><button class="preview">{{previewMsg}}</button>
+ <li><button class="next-section">{{nextMsg}}</button>
+ </ul>
</div>
<div class="spinner loading"></div>
<textarea cols="40" rows="10"></textarea>
diff --git a/templates/section.html b/templates/section.html
new file mode 100644
index 0000000..62305b4
--- /dev/null
+++ b/templates/section.html
@@ -0,0 +1,7 @@
+<div class="section">
+ {{#heading}}<h2 class="section_heading"
id="section_{{index}}">{{{heading}}}</h2>{{/heading}}
+ <div class="content_block openSection"
+ id="content_{{index}}">
+ {{{content}}}
+ </div>
+</div>
--
To view, visit https://gerrit.wikimedia.org/r/66152
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I1f4bee08cf24c2ce2657d46b650b3e1a0532d408
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Jdlrobson <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
