| Index: trunk/extensions/VisualEditor/VisualEditor.php |
| — | — | @@ -102,11 +102,7 @@ |
| 103 | 103 | 'es/views/es.ToolbarView.js', |
| 104 | 104 | 'es/tools/es.Tool.js', |
| 105 | 105 | 'es/tools/es.ButtonTool.js', |
| 106 | | - 'es/tools/es.DropdownTool.js', |
| 107 | | - 'es/tools/es.BoldButtonTool.js', |
| 108 | | - 'es/tools/es.ItalicButtonTool.js', |
| 109 | | - 'es/tools/es.FormattingDropdownTool.js', |
| 110 | | - 'es/tools/es.ClearButtonTool.js' |
| | 106 | + 'es/tools/es.AnnotationButtonTool.js' |
| 111 | 107 | ), |
| 112 | 108 | 'styles' => array( |
| 113 | 109 | 'es/styles/es.SurfaceView.css', |
| Index: trunk/extensions/VisualEditor/demo/index.html |
| — | — | @@ -133,11 +133,7 @@ |
| 134 | 134 | |
| 135 | 135 | <script src="../modules/es/tools/es.Tool.js"></script> |
| 136 | 136 | <script src="../modules/es/tools/es.ButtonTool.js"></script> |
| 137 | | - <script src="../modules/es/tools/es.DropdownTool.js"></script> |
| 138 | | - <script src="../modules/es/tools/es.BoldButtonTool.js"></script> |
| 139 | | - <script src="../modules/es/tools/es.ItalicButtonTool.js"></script> |
| 140 | | - <script src="../modules/es/tools/es.FormattingDropdownTool.js"></script> |
| 141 | | - <script src="../modules/es/tools/es.ClearButtonTool.js"></script> |
| | 137 | + <script src="../modules/es/tools/es.AnnotationButtonTool.js"></script> |
| 142 | 138 | |
| 143 | 139 | <!-- Demo --> |
| 144 | 140 | <script src="../modules/sandbox/sandbox.js"></script> |
| Index: trunk/extensions/VisualEditor/modules/es/tools/es.AnnotationButtonTool.js |
| — | — | @@ -0,0 +1,40 @@ |
| | 2 | +es.AnnotationButtonTool = function( toolbar, name, data ) {
|
| | 3 | + es.ButtonTool.call( this, toolbar, name );
|
| | 4 | + this.data = data;
|
| | 5 | +};
|
| | 6 | +
|
| | 7 | +es.AnnotationButtonTool.prototype.onClick = function() {
|
| | 8 | + var method;
|
| | 9 | + if ( this.name === 'clear') {
|
| | 10 | + method = 'clear';
|
| | 11 | + } else {
|
| | 12 | + method = this.$.hasClass( 'es-toolbarButtonTool-down' ) ? 'clear' : 'set';
|
| | 13 | + }
|
| | 14 | +
|
| | 15 | + var tx = this.toolbar.surfaceView.model.getDocument().prepareContentAnnotation(
|
| | 16 | + this.toolbar.surfaceView.currentSelection,
|
| | 17 | + method,
|
| | 18 | + this.data
|
| | 19 | + );
|
| | 20 | + this.toolbar.surfaceView.model.transact( tx );
|
| | 21 | +};
|
| | 22 | +
|
| | 23 | +es.Tool.tools.bold = {
|
| | 24 | + constructor: es.AnnotationButtonTool,
|
| | 25 | + name: 'bold',
|
| | 26 | + data: { 'type': 'textStyle/bold' }
|
| | 27 | +};
|
| | 28 | +
|
| | 29 | +es.Tool.tools.italic = {
|
| | 30 | + constructor: es.AnnotationButtonTool,
|
| | 31 | + name: 'italic',
|
| | 32 | + data: { 'type': 'textStyle/italic' }
|
| | 33 | +};
|
| | 34 | +
|
| | 35 | +es.Tool.tools.clear = {
|
| | 36 | + constructor: es.AnnotationButtonTool,
|
| | 37 | + name: 'clear',
|
| | 38 | + data: /.*/
|
| | 39 | +};
|
| | 40 | +
|
| | 41 | +es.extendClass( es.AnnotationButtonTool, es.ButtonTool ); |
| \ No newline at end of file |
| Index: trunk/extensions/VisualEditor/modules/es/tools/es.ButtonTool.js |
| — | — | @@ -0,0 +1,23 @@ |
| | 2 | +es.ButtonTool = function( toolbar, name ) {
|
| | 3 | + es.Tool.call( this, toolbar, name );
|
| | 4 | +
|
| | 5 | + // for es.extendClass
|
| | 6 | + if ( !name ) {
|
| | 7 | + return;
|
| | 8 | + }
|
| | 9 | +
|
| | 10 | + this.$.addClass( 'es-toolbarButtonTool' ).addClass( 'es-toolbarButtonTool-' + name );
|
| | 11 | +
|
| | 12 | + var _this = this;
|
| | 13 | +
|
| | 14 | + this.$.click( function ( e ) {
|
| | 15 | + _this.onClick( e );
|
| | 16 | + } );
|
| | 17 | +
|
| | 18 | +};
|
| | 19 | +
|
| | 20 | +es.ButtonTool.prototype.onClick = function() {
|
| | 21 | + throw 'ButtonTool.onClick not implemented in this subclass:' + this.constructor;
|
| | 22 | +};
|
| | 23 | +
|
| | 24 | +es.extendClass( es.ButtonTool, es.Tool ); |
| \ No newline at end of file |
| Index: trunk/extensions/VisualEditor/modules/es/tools/es.Tool.js |
| — | — | @@ -0,0 +1,11 @@ |
| | 2 | +es.Tool = function( toolbar, name ) {
|
| | 3 | + this.toolbar = toolbar;
|
| | 4 | + this.name = name;
|
| | 5 | + this.$ = $( '<div>' ).attr( 'title', this.name );
|
| | 6 | +};
|
| | 7 | +
|
| | 8 | +es.Tool.prototype.updateState = function() {
|
| | 9 | + throw 'Tool.updateState not implemented in this subclass:' + this.constructor;
|
| | 10 | +};
|
| | 11 | +
|
| | 12 | +es.Tool.tools = {};
|
| Index: trunk/extensions/VisualEditor/modules/es/views/es.ToolbarView.js |
| — | — | @@ -1,5 +1,5 @@ |
| 2 | 2 | // ToolbarView |
| 3 | | -es.ToolbarView = function( $container, surfaceView ) { |
| | 3 | +es.ToolbarView = function( $container, surfaceView, config ) { |
| 4 | 4 | es.EventEmitter.call( this ); |
| 5 | 5 | |
| 6 | 6 | // References for use in closures |
| — | — | @@ -36,7 +36,7 @@ |
| 37 | 37 | } |
| 38 | 38 | } ); |
| 39 | 39 | |
| 40 | | - this.config = [ |
| | 40 | + this.config = config || [ |
| 41 | 41 | { name: 'text', items : [ 'bold', 'italic', 'formatting', 'clear' ] }, |
| 42 | 42 | ]; |
| 43 | 43 | |
| — | — | @@ -50,8 +50,6 @@ |
| 51 | 51 | } ); |
| 52 | 52 | }; |
| 53 | 53 | |
| 54 | | -es.ToolbarView.tools = {}; |
| 55 | | - |
| 56 | 54 | es.ToolbarView.prototype.setup = function() { |
| 57 | 55 | for ( var i = 0; i < this.config.length; i++ ) { |
| 58 | 56 | var $group = $( '<div>' ) |
| — | — | @@ -62,8 +60,13 @@ |
| 63 | 61 | ); |
| 64 | 62 | |
| 65 | 63 | for ( var j = 0; j < this.config[i].items.length; j++ ) { |
| 66 | | - var tool = new es.ToolbarView.tools[ this.config[i].items[j] ]( this ); |
| 67 | | - $group.append( tool.$ ); |
| | 64 | + var toolDefintion = es.Tool.tools[ this.config[i].items[j] ]; |
| | 65 | + if ( toolDefintion ) { |
| | 66 | + var tool = new toolDefintion.constructor( |
| | 67 | + this, toolDefintion.name, toolDefintion.data |
| | 68 | + ); |
| | 69 | + $group.append( tool.$ ); |
| | 70 | + } |
| 68 | 71 | } |
| 69 | 72 | |
| 70 | 73 | this.$groups.append( $group ); |
| Index: trunk/extensions/VisualEditor/modules/sandbox/sandbox.js |
| — | — | @@ -233,16 +233,16 @@ |
| 234 | 234 | 'content': { |
| 235 | 235 | 'text': 'In text display, line wrap is the feature of continuing on a new line when a line is full, such that each line fits in the viewable window, allowing text to be read from top to bottom without any horizontal scrolling.\nWord wrap is the additional feature of most text editors, word processors, and web browsers, of breaking lines between and not within words, except when a single word is longer than a line.', |
| 236 | 236 | 'annotations': [ |
| 237 | | - // 'In text display' should be bold |
| 238 | | - { 'type': 'textStyle/bold', 'range': { 'start': 0, 'end': 15 } }, |
| 239 | | - // 'line wrap' should be italic |
| 240 | | - { 'type': 'textStyle/italic', 'range': { 'start': 17, 'end': 26 } }, |
| 241 | 237 | // 'wrap is' should be a link to '#' |
| 242 | 238 | { |
| 243 | 239 | 'type': 'link/external', |
| 244 | 240 | 'data': { 'href': '#' }, |
| 245 | 241 | 'range': { 'start': 22, 'end': 29 } |
| 246 | | - } |
| | 242 | + }, |
| | 243 | + // 'In text display' should be bold |
| | 244 | + { 'type': 'textStyle/bold', 'range': { 'start': 0, 'end': 15 } }, |
| | 245 | + // 'line wrap' should be italic |
| | 246 | + { 'type': 'textStyle/italic', 'range': { 'start': 17, 'end': 26 } } |
| 247 | 247 | ] |
| 248 | 248 | } |
| 249 | 249 | }, |