Jdlrobson has uploaded a new change for review.
https://gerrit.wikimedia.org/r/203478
Change subject: WIP: Rewrite VisualEditorOverlay as a ProcessDialog
......................................................................
WIP: Rewrite VisualEditorOverlay as a ProcessDialog
Lots to do here still..
namely:
* Rewrite header to integrate toolbar,
* Style header buttons as icons (back button and save)
* bind all the event handlers
* edit summary screen
Bug: T88559
Change-Id: Ib84be83e56c0993682821bf396a63eb48b3eb345
---
M includes/Resources.php
A javascripts/modules/editor/MinervaProcessDialog.js
M javascripts/modules/editor/VisualEditorOverlay.js
A javascripts/modules/editor/VisualEditorProcessDialog.js
M javascripts/modules/editor/init.js
5 files changed, 186 insertions(+), 3 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/78/203478/1
diff --git a/includes/Resources.php b/includes/Resources.php
index 942c047..15ed797 100644
--- a/includes/Resources.php
+++ b/includes/Resources.php
@@ -1404,6 +1404,19 @@
* Mobile VisualEditor related modules
*/
$wgMobileVEModules = array(
+ 'mobile.editor.veNew' => $wgMFResourceBoilerplate + array(
+ 'dependencies' => array(
+ 'mobile.editor.ve',
+ ),
+ 'scripts' => array(
+ 'javascripts/modules/editor/MinervaProcessDialog.js',
+
'javascripts/modules/editor/VisualEditorProcessDialog.js',
+ ),
+ 'targets' => array(
+ 'mobile',
+ ),
+ ),
+
'mobile.editor.ve' => $wgMFResourceBoilerplate + array(
'dependencies' => array(
'ext.visualEditor.mobileViewTarget',
diff --git a/javascripts/modules/editor/MinervaProcessDialog.js
b/javascripts/modules/editor/MinervaProcessDialog.js
new file mode 100644
index 0000000..b948885
--- /dev/null
+++ b/javascripts/modules/editor/MinervaProcessDialog.js
@@ -0,0 +1,75 @@
+( function ( M, $, ve ) {
+ var windowManager;
+
+ // MobileFrontend equivalent: Overlay.js
+ function MinervaProcessDialog( config ) {
+ this.options = config;
+ MinervaProcessDialog.super.call( this, config );
+ }
+ OO.inheritClass( MinervaProcessDialog, OO.ui.ProcessDialog );
+
+ // Specify a static title and actions.
+ MinervaProcessDialog.static.actions = [
+ {
+ action: 'cancel',
+ label: 'Cancel',
+ flags: 'safe'
+ }
+ ];
+
+ // Use the initialize() method to add content to the dialog's $body,
+ // to initialize widgets, and to set up event handlers.
+ MinervaProcessDialog.prototype.initialize = function () {
+ var template;
+
+ MinervaProcessDialog.super.prototype.initialize.apply( this,
arguments );
+ this.content = new OO.ui.PanelLayout( {
+ $: this.$,
+ padded: true,
+ expanded: false
+ } );
+ template = this.getContentTemplate();
+ if ( content ) {
+ this.content.$element.append( template.render(
this.options ) );
+ }
+
+ this.$body.append( this.content.$element );
+ };
+
+ MinervaProcessDialog.prototype.getContentTemplate = function () {};
+
+ // Use the getActionProcess() method to specify a process to handle the
+ // actions (for the 'save' action, in this example).
+ MinervaProcessDialog.prototype.getActionProcess = function ( action ) {
+ var dialog = this;
+ if ( action === 'cancel' ) {
+ return new OO.ui.Process( function () {
+ window.history.back();
+ } );
+ }
+ };
+
+ // Create and append the window manager.
+ windowManager = new OO.ui.WindowManager();
+ $( 'body' ).append( windowManager.$element );
+
+ // Get compatibility with methods of OverlayManager in MobileFrontend
+ MinervaProcessDialog.prototype.show = function () {
+ // Compatibility with MobileFrontend
+ $( 'html' ).addClass( 'overlay-enabled' );
+ this.$element.addClass( 'overlay visible' );
+
+ // Add windows to window manager using the addWindows() method.
+ windowManager.addWindows( [ this ] );
+ windowManager.openWindow( this );
+ };
+
+ MinervaProcessDialog.prototype.hide = function () {
+ // Compatibility with MobileFrontend
+ $( 'html' ).removeClass( 'overlay-enabled' );
+ this.close( {
+ action: 'hide'
+ } );
+ };
+ M.define( 'OO.ui.MinervaProcessDialog', MinervaProcessDialog );
+}( mw.mobileFrontend, jQuery, window.ve ) );
diff --git a/javascripts/modules/editor/VisualEditorOverlay.js
b/javascripts/modules/editor/VisualEditorOverlay.js
index c749578..19f30e1 100644
--- a/javascripts/modules/editor/VisualEditorOverlay.js
+++ b/javascripts/modules/editor/VisualEditorOverlay.js
@@ -1,3 +1,4 @@
+// FIXME: Remove in favour of VisualEditorProcessDialog after testing
( function ( M, $, ve ) {
var EditorOverlayBase = M.require( 'modules/editor/EditorOverlayBase' ),
settings = M.require( 'settings' ),
diff --git a/javascripts/modules/editor/VisualEditorProcessDialog.js
b/javascripts/modules/editor/VisualEditorProcessDialog.js
new file mode 100644
index 0000000..9863e0d
--- /dev/null
+++ b/javascripts/modules/editor/VisualEditorProcessDialog.js
@@ -0,0 +1,88 @@
+( function ( M, $, ve ) {
+ var windowManager,
+ MinervaProcessDialog = M.require( 'OO.ui.MinervaProcessDialog'
);
+
+ // MobileFrontend equivalent: VisualEditorOverlay.js
+ function VisualEditorProcessDialog( config ) {
+ this.options = config;
+ VisualEditorProcessDialog.super.call( this, config );
+ }
+ OO.inheritClass( VisualEditorProcessDialog, MinervaProcessDialog );
+
+ VisualEditorProcessDialog.static.actions.push( {
+ action: 'save',
+ label: 'Done',
+ flags: 'primary'
+ } );
+
+ VisualEditorProcessDialog.prototype.initialize = function () {
+ VisualEditorProcessDialog.super.prototype.initialize.apply(
this, arguments );
+ };
+
+ VisualEditorProcessDialog.prototype.getContentTemplate = function () {
+ return mw.template.get( 'mobile.editor.ve', 'contentVE.hogan' );
+ };
+
+ // Use the getActionProcess() method to specify a process to handle the
+ // actions (for the 'save' action, in this example).
+ VisualEditorProcessDialog.prototype.getActionProcess = function (
action ) {
+ var dialog = this;
+ if ( action === 'cancel' ) {
+ return new OO.ui.Process( function () {
+ window.history.back();
+ } );
+ }
+ };
+
+ // Create and append the window manager.
+ windowManager = new OO.ui.WindowManager();
+ $( 'body' ).append( windowManager.$element );
+
+ // Get compatibility with methods of OverlayManager in MobileFrontend
+ VisualEditorProcessDialog.prototype.show = function () {
+ var overlay = this;
+ VisualEditorProcessDialog.super.prototype.show.apply( this,
arguments );
+
+ if ( this.target !== undefined ) {
+ return;
+ }
+
+ // FIXME: we have to initialize MobileViewTarget after this.$el
+ // is attached to DOM, maybe we should attach it earlier and
hide
+ // overlays in a different way?
+ mw.loader.using( 'ext.visualEditor.targetLoader' )
+ .then( mw.libs.ve.targetLoader.loadModules() )
+ .then( function () {
+ overlay.target = new
ve.init.mw.MobileViewTarget( {
+ // || undefined so that scrolling is
not triggered for the lead (0) section
+ // (which has no header to scroll to)
+ section: overlay.options.sectionId ||
undefined,
+ isIos: overlay.isIos
+ } );
+ overlay.$( '.surface' ).append(
overlay.target.$element );
+ overlay.target.activating = true;
+ overlay.target.load();
+ overlay.target.connect( overlay, {
+ /*save: 'onSaveComplete',
+ saveAsyncBegin: 'showSpinner',
+ saveAsyncComplete: 'clearSpinner',
+ saveErrorEmpty: 'onSaveError',
+ // FIXME: Expand on save errors by
having a method for each
+ saveErrorSpamBlacklist: 'onSaveError',
+ saveErrorAbuseFilter: 'onSaveError',
+ saveErrorBlocked: 'onSaveError',
+ saveErrorNewUser: 'onSaveError',
+ saveErrorCaptcha: 'onSaveErrorCaptcha',
+ saveErrorUnknown: 'onSaveError',
+ surfaceReady: 'onSurfaceReady',
+ loadError: 'onLoadError',
+ conflictError: 'onConflictError',
+ showChangesError: 'onShowChangesError',
+ serializeError: 'onSerializeError'*/
+ } );
+ }, function ( e ) {
+ mw.log.warn( 'VisualEditor failed to load: ' +
e );
+ } );
+ };
+ M.define( 'modules/editor/VisualEditorProcessDialog',
VisualEditorProcessDialog );
+}( mw.mobileFrontend, jQuery, window.ve ) );
diff --git a/javascripts/modules/editor/init.js
b/javascripts/modules/editor/init.js
index 2523c16..a703768 100644
--- a/javascripts/modules/editor/init.js
+++ b/javascripts/modules/editor/init.js
@@ -1,6 +1,6 @@
( function ( M, $ ) {
- var
+ var veRlModuleName,
settings = M.require( 'settings' ),
router = M.require( 'router' ),
overlayManager = M.require( 'overlayManager' ),
@@ -17,6 +17,7 @@
disabledClass = disabledEditIcon.getGlyphClassName(),
browser = M.require( 'browser' ),
context = M.require( 'context' ),
+ useDialog = context.isAlphaGroupMember(),
user = M.require( 'user' ),
popup = M.require( 'toast' ),
// FIXME: Disable on IE < 10 for time being
@@ -134,6 +135,8 @@
result = $.Deferred(),
preferredEditor = getPreferredEditor(),
editorOptions = {
+ // VisualEditorOverlayProcessDialog
specific property
+ size: 'large',
title: page.title,
isAnon: user.isAnon(),
isNewPage: isNewPage,
@@ -185,8 +188,11 @@
// the VisualEditor is the default editor for
this wiki
preferredEditor === 'VisualEditor'
) {
- loader.loadModule( 'mobile.editor.ve' ).done(
function () {
- var VisualEditorOverlay = M.require(
'modules/editor/VisualEditorOverlay' );
+ veRlModuleName = useDialog ?
'mobile.editor.veNew' : 'mobile.editor.ve';
+ loader.loadModule( veRlModuleName ).done(
function () {
+ var name = useDialog ?
'VisualEditorProcessDialog' : 'VisualEditorOverlay',
+ VisualEditorOverlay =
M.require( 'modules/editor/' + name );
+
result.resolve( new
VisualEditorOverlay( editorOptions ) );
} ).fail( loadSourceEditor );
} else {
--
To view, visit https://gerrit.wikimedia.org/r/203478
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ib84be83e56c0993682821bf396a63eb48b3eb345
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
