Florianschmidtwelzow has uploaded a new change for review.
https://gerrit.wikimedia.org/r/195995
Change subject: Add CodeMirror for alpha users to better understand wikitext
......................................................................
Add CodeMirror for alpha users to better understand wikitext
Uses CodeMirror with wikitext mode instead of an textarea as an input field
for the user to edit wikitext.
Depends on Extension:CodeMirror and I9763c40835c2edddafb0dcbacdf53a86f663b8cd.
Bug: T91796
Change-Id: I1d5dd5a0896c4f32954d9b948cc21c9406898f45
---
M .jshintrc
M Gruntfile.js
M includes/MobileFrontend.hooks.php
M includes/Resources.php
M javascripts/modules/editor/EditorOverlay.js
A javascripts/modules/editor/EditorOverlayCodeMirror.js
M javascripts/modules/editor/init.js
M templates/modules/editor/content.hogan
8 files changed, 115 insertions(+), 8 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/95/195995/1
diff --git a/.jshintrc b/.jshintrc
index df30cb2..94a0d01 100644
--- a/.jshintrc
+++ b/.jshintrc
@@ -6,6 +6,7 @@
"Hogan": true,
"QUnit": true,
"mw": true,
+ "CodeMirror": true,
"OO": true
},
diff --git a/Gruntfile.js b/Gruntfile.js
index 3db0247..ca2c0ba 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -119,6 +119,7 @@
'jqXHR',
'File',
'mw.user',
+ 'CodeMirror',
'OO.ui.LookupElement',
'OO.EventEmitter'
],
diff --git a/includes/MobileFrontend.hooks.php
b/includes/MobileFrontend.hooks.php
index 28826f1..998024e 100644
--- a/includes/MobileFrontend.hooks.php
+++ b/includes/MobileFrontend.hooks.php
@@ -368,6 +368,11 @@
// Set the licensing agreement that is displayed in the
uploading interface.
$wgMFUploadLicenseLink = SkinMinerva::getLicenseLink( 'upload'
);
$vars['wgMFUploadLicenseLink'] = $wgMFUploadLicenseLink;
+ // add CodeMirror specific things, if it is installed (for
CodeMirror editor)
+ if ( class_exists( 'CodeMirrorHooks' ) ) {
+ $vars += CodeMirrorHooks::getGlobalVariables(
MobileContext::singleton() );
+ $vars['wgMFCodeMirror'] = true;
+ }
return true;
}
diff --git a/includes/Resources.php b/includes/Resources.php
index 1eb7cd4..46ed86b 100644
--- a/includes/Resources.php
+++ b/includes/Resources.php
@@ -500,6 +500,16 @@
),
),
+ 'mobile.editor.overlay.codemirror' =>
$wgMFResourceFileModuleBoilerplate + array(
+ 'dependencies' => array(
+ 'mobile.editor.overlay',
+ 'ext.CodeMirror.lib',
+ ),
+ 'scripts' => array(
+ 'javascripts/modules/editor/EditorOverlayCodeMirror.js',
+ ),
+ ),
+
'mobile.editor.overlay' => $wgMFResourceFileModuleBoilerplate + array(
'dependencies' => array(
'mobile.editor.common',
diff --git a/javascripts/modules/editor/EditorOverlay.js
b/javascripts/modules/editor/EditorOverlay.js
index 810f856..c332030 100644
--- a/javascripts/modules/editor/EditorOverlay.js
+++ b/javascripts/modules/editor/EditorOverlay.js
@@ -205,7 +205,7 @@
onStageChanges: function () {
var self = this,
params = {
- text: this.$content.val()
+ text: this.getContent()
};
this.scrollTop = $( 'body' ).scrollTop();
@@ -252,6 +252,25 @@
},
/**
+ * Set content to the user input field.
+ * @param {String} content The content to set.
+ */
+ setContent: function ( content ) {
+ this.$content
+ .show()
+ .val( content )
+ .microAutosize();
+ },
+
+ /**
+ * Returns the content of the user input field.
+ * @return {String}
+ */
+ getContent: function () {
+ return this.$content.val();
+ },
+
+ /**
* Requests content from the API and reveals it in UI.
* @method
* @private
@@ -264,10 +283,7 @@
this.api.getContent()
.done( function ( content ) {
- self.$content
- .show()
- .val( content )
- .microAutosize();
+ self.setContent( content );
self.clearSpinner();
} )
.fail( function ( error ) {
diff --git a/javascripts/modules/editor/EditorOverlayCodeMirror.js
b/javascripts/modules/editor/EditorOverlayCodeMirror.js
new file mode 100644
index 0000000..6bd7e8c
--- /dev/null
+++ b/javascripts/modules/editor/EditorOverlayCodeMirror.js
@@ -0,0 +1,65 @@
+( function ( M, $ ) {
+ var EditorOverlay = M.require( 'modules/editor/EditorOverlay' ),
+ EditorOverlayCodeMirror;
+
+ /**
+ * Overlay that shows an editor
+ * @class EditorOverlayCodeMirror
+ * @extends EditorOverlay
+ */
+ EditorOverlayCodeMirror = EditorOverlay.extend( {
+ templatePartials: $.extend( {},
EditorOverlay.prototype.templatePartials, {
+ content: mw.template.get( 'mobile.editor.overlay',
'content.hogan' )
+ } ),
+
+ /** @inheritdoc **/
+ onInputWikitextEditor: function ( codeMirror ) {
+ this.api.setContent( codeMirror.getValue() );
+ this.$( '.continue, .submit' ).prop( 'disabled', false
);
+ },
+
+ /** @inheritdoc **/
+ setContent: function () {
+ EditorOverlay.prototype.setContent.apply( this,
arguments );
+
+ this.codeMirror = CodeMirror.fromTextArea(
this.$content[0], {
+ mwextFunctionSynonyms: mw.config.get(
'extCodeMirrorFunctionSynonyms' ),
+ mwextTags: mw.config.get( 'extCodeMirrorTags' ),
+ mwextDoubleUnderscore: mw.config.get(
'extCodeMirrorDoubleUnderscore' ),
+ mwextUrlProtocols: mw.config.get(
'extCodeMirrorUrlProtocols' ),
+ mwextMode: mw.config.get(
'extCodeMirrorExtMode' ),
+ styleActiveLine: true,
+ lineWrapping: true,
+ mode: 'text/mediawiki'
+ } );
+ // IE specific code goes here
+ if ( window.navigator.userAgent.indexOf( 'Trident/' ) >
-1 ) {
+ $( '.CodeMirror' ).addClass( 'CodeMirrorIE' );
+ }
+ this.codeMirror.setSize( null, this.$content.height() );
+ this.codeMirror.on( 'change', $.proxy( this,
'onInputWikitextEditor' ) );
+ this.$codeMirror = $( '.CodeMirror' );
+ },
+
+ /** @inheritdoc **/
+ getContent: function () {
+ return this.codeMirror.getValue();
+ },
+
+ /** @inheritdoc **/
+ onStageChanges: function () {
+ this.$codeMirror.hide();
+ EditorOverlay.prototype.onStageChanges.apply( this,
arguments );
+ },
+
+ /** @inheritdoc **/
+ _hidePreview: function () {
+ this.$codeMirror.show();
+ this.codeMirror.refresh();
+ EditorOverlay.prototype._hidePreview.apply( this,
arguments );
+ this.$content.hide();
+ }
+ } );
+
+ M.define( 'modules/editor/EditorOverlayCodeMirror',
EditorOverlayCodeMirror );
+}( mw.mobileFrontend, jQuery ) );
diff --git a/javascripts/modules/editor/init.js
b/javascripts/modules/editor/init.js
index f8dcd4a..9f1e1bb 100644
--- a/javascripts/modules/editor/init.js
+++ b/javascripts/modules/editor/init.js
@@ -6,6 +6,7 @@
router = M.require( 'router' ),
overlayManager = M.require( 'overlayManager' ),
loader = M.require( 'loader' ),
+ context = M.require( 'context' ),
query = util.query,
Icon = M.require( 'Icon' ),
disabledEditIcon = new Icon( {
@@ -154,8 +155,16 @@
* @method
*/
function loadSourceEditor() {
- loader.loadModule( 'mobile.editor.overlay'
).done( function () {
- var EditorOverlay = M.require(
'modules/editor/EditorOverlay' );
+ var rlModuleName, moduleName;
+ if ( context.isAlphaGroupMember() &&
mw.config.get( 'wgMFCodeMirror' ) ) {
+ moduleName =
'modules/editor/EditorOverlayCodeMirror';
+ rlModuleName =
'mobile.editor.overlay.codemirror';
+ } else {
+ moduleName =
'modules/editor/EditorOverlay';
+ rlModuleName = 'mobile.editor.overlay';
+ }
+ loader.loadModule( rlModuleName ).done(
function () {
+ var EditorOverlay = M.require(
moduleName );
result.resolve( new EditorOverlay(
editorOptions ) );
} );
}
diff --git a/templates/modules/editor/content.hogan
b/templates/modules/editor/content.hogan
index 691957a..2b58821 100644
--- a/templates/modules/editor/content.hogan
+++ b/templates/modules/editor/content.hogan
@@ -1,5 +1,5 @@
<div lang="{{contentLang}}" dir="{{contentDir}}">
- <textarea class="wikitext-editor" cols="40" rows="10"
placeholder="{{placeholder}}"></textarea>
+ <textarea class="wikitext-editor" id="wikitext-editor" cols="40"
rows="10" placeholder="{{placeholder}}"></textarea>
<div class="preview content"></div>
{{#loginUrl}}
<div class="anonwarning content">
--
To view, visit https://gerrit.wikimedia.org/r/195995
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I1d5dd5a0896c4f32954d9b948cc21c9406898f45
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
