Santhosh has uploaded a new change for review. ( 
https://gerrit.wikimedia.org/r/353010 )

Change subject: CX2: Basic formatting toolbar functionality
......................................................................

CX2: Basic formatting toolbar functionality

This is just a dummy functionality, it tries the native contentediting
formatting. The OOJS rewrite should have something in place. That is
why this is done in this way. VE integrations should replace this with
extensive features.

Bold, Italic, list controls works. Undo and redo does nothing.

Change-Id: I7c09bc9a25ca1e3ab53a9fba99189009690261cb
---
M modules/tools/mw.cx.tools.FormatterTool.js
1 file changed, 82 insertions(+), 8 deletions(-)


  git pull 
ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/ContentTranslation 
refs/changes/10/353010/1

diff --git a/modules/tools/mw.cx.tools.FormatterTool.js 
b/modules/tools/mw.cx.tools.FormatterTool.js
index 72c74c3..6e57fcf 100644
--- a/modules/tools/mw.cx.tools.FormatterTool.js
+++ b/modules/tools/mw.cx.tools.FormatterTool.js
@@ -26,7 +26,7 @@
 mw.cx.tools.FormatterTool.prototype.getActions = function () {
        var toolFactory, toolGroupFactory, toolbar;
 
-  // Create the toolbar
+       // Create the toolbar
        toolFactory = new OO.ui.ToolFactory();
        toolGroupFactory = new OO.ui.ToolGroupFactory();
        // Define the tools that we're going to place in our toolbar
@@ -38,6 +38,7 @@
        OO.inheritClass( UndoTool, OO.ui.Tool );
        UndoTool.static.name = 'undo';
        UndoTool.static.icon = 'undo';
+       UndoTool.prototype.onSelect = this.undo.bind( this );
        UndoTool.prototype.onUpdateState = function () {};
        toolFactory.register( UndoTool );
 
@@ -47,46 +48,63 @@
        OO.inheritClass( RedoTool, OO.ui.Tool );
        RedoTool.static.name = 'redo';
        RedoTool.static.icon = 'redo';
+       RedoTool.prototype.onSelect = this.redo.bind( this );
        RedoTool.prototype.onUpdateState = function () {};
        toolFactory.register( RedoTool );
 
        function BoldTool() {
-               RedoTool.parent.apply( this, arguments );
+               BoldTool.parent.apply( this, arguments );
        }
        OO.inheritClass( BoldTool, OO.ui.Tool );
        BoldTool.static.name = 'bold';
        BoldTool.static.icon = 'bold';
+       BoldTool.prototype.onSelect = this.bold.bind( this );
        BoldTool.prototype.onUpdateState = function () {};
        toolFactory.register( BoldTool );
 
        function ItalicTool() {
-               RedoTool.parent.apply( this, arguments );
+               ItalicTool.parent.apply( this, arguments );
        }
        OO.inheritClass( ItalicTool, OO.ui.Tool );
        ItalicTool.static.name = 'italic';
        ItalicTool.static.icon = 'italic';
+       ItalicTool.prototype.onSelect = this.italic.bind( this );
        ItalicTool.prototype.onUpdateState = function () {};
        toolFactory.register( ItalicTool );
 
        function ListBulletTool() {
-               RedoTool.parent.apply( this, arguments );
+               ListBulletTool.parent.apply( this, arguments );
        }
        OO.inheritClass( ListBulletTool, OO.ui.Tool );
        ListBulletTool.static.name = 'listBullet';
        ListBulletTool.static.icon = 'listBullet';
+       ListBulletTool.prototype.onSelect = this.unOrderedList.bind( this );
        ListBulletTool.prototype.onUpdateState = function () {};
        toolFactory.register( ListBulletTool );
 
        function ListNumberedTool() {
-               RedoTool.parent.apply( this, arguments );
+               ListNumberedTool.parent.apply( this, arguments );
        }
        OO.inheritClass( ListNumberedTool, OO.ui.Tool );
        ListNumberedTool.static.name = 'listNumbered';
        ListNumberedTool.static.icon = 'listNumbered';
+       ListNumberedTool.prototype.onSelect = this.orderedList.bind( this );
        ListNumberedTool.prototype.onUpdateState = function () {};
        toolFactory.register( ListNumberedTool );
-
-       toolbar = new OO.ui.Toolbar( toolFactory, toolGroupFactory );
+       function CXFormatToolBar() {
+               CXFormatToolBar.parent.apply( this, arguments );
+       }
+       CXFormatToolBar.prototype.getToolAccelerator = function ( toolName ) {
+               var acceleratorMap = {
+                       undo: 'Ctrl + Z',
+                       redo: 'Ctrl + Shift + Z',
+                       bold: 'Ctrl + B',
+                       italic: 'Ctrl + I'
+               };
+               return acceleratorMap[ toolName ];
+       };
+       OO.inheritClass( CXFormatToolBar, OO.ui.Toolbar );
+       toolbar = new CXFormatToolBar( toolFactory, toolGroupFactory );
        // Finally define which tools and in what order appear in the toolbar. 
Each tool may only be
        // used once (but not all defined tools must be used).
        toolbar.setup( [
@@ -111,12 +129,68 @@
  * @param {Selection} selectionObj Selection object
  */
 mw.cx.tools.FormatterTool.prototype.onSelect = function ( selectionObj ) {
-       this.selection = selectionObj;
+       var selection;
+
+       selection = selectionObj.toString();
+       if ( selection && selection.length < 1000 ) {
+               this.selectionObj = selectionObj;
+               this.selection = selection;
+       }
+       mw.cx.selection.save( 'format', this.selectionObj );
+       this.refresh();
 };
 
 mw.cx.tools.FormatterTool.prototype.getContent = function () {
        return '';
 };
 
+mw.cx.tools.FormatterTool.prototype.undo = function () {
+       this.emit( 'undo' );
+};
+
+mw.cx.tools.FormatterTool.prototype.redo = function () {
+       this.emit( 'redo' );
+};
+
+/**
+ * Make the selection bold
+ */
+mw.cx.tools.FormatterTool.prototype.bold = function () {
+       mw.cx.selection.restore( 'format' );
+       document.execCommand( 'bold' );
+};
+
+/**
+ * Make the selection ttalic
+ */
+mw.cx.tools.FormatterTool.prototype.italic = function () {
+       mw.cx.selection.restore( 'format' );
+       document.execCommand( 'italic' );
+};
+
+/**
+ * Make the selection orderedList
+ */
+mw.cx.tools.FormatterTool.prototype.orderedList = function () {
+       try {
+               mw.cx.selection.restore( 'format' );
+               document.execCommand( 'insertOrderedList' );
+       } catch ( e ) {
+               mw.log.error( 'Native insertOrderedList command failed.' + e );
+       }
+};
+
+/**
+ * Make the selection unOrderedList
+ */
+mw.cx.tools.FormatterTool.prototype.unOrderedList = function () {
+       try {
+               mw.cx.selection.restore( 'format' );
+               document.execCommand( 'insertUnorderedList' );
+       } catch ( e ) {
+               mw.log.error( 'Native insertUnorderedList command failed.' + e 
);
+       }
+};
+
 /* Register */
 mw.cx.tools.translationToolFactory.register( mw.cx.tools.FormatterTool );

-- 
To view, visit https://gerrit.wikimedia.org/r/353010
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings

Gerrit-MessageType: newchange
Gerrit-Change-Id: I7c09bc9a25ca1e3ab53a9fba99189009690261cb
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/ContentTranslation
Gerrit-Branch: master
Gerrit-Owner: Santhosh <[email protected]>

_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits

Reply via email to