| Index: trunk/extensions/VisualEditor/modules/es/views/es.ToolbarView.js |
| — | — | @@ -1,3 +1,17 @@ |
| | 2 | +var i18nDictionary = {
|
| | 3 | + 'text': 'Text',
|
| | 4 | + 'list': 'Lists'
|
| | 5 | +};
|
| | 6 | +
|
| | 7 | +var i18n = function( key ) {
|
| | 8 | + if ( i18nDictionary[key] ) {
|
| | 9 | + return i18nDictionary[key];
|
| | 10 | + } else {
|
| | 11 | + return key;
|
| | 12 | + }
|
| | 13 | +
|
| | 14 | +};
|
| | 15 | +
|
| 2 | 16 | es.ToolbarView = function( $container, surfaceView ) {
|
| 3 | 17 | // Reference for use in closures
|
| 4 | 18 | var _this = this;
|
| — | — | @@ -4,159 +18,112 @@ |
| 5 | 19 |
|
| 6 | 20 | this.$ = $container;
|
| 7 | 21 | this.surfaceView = surfaceView;
|
| | 22 | +
|
| 8 | 23 | this.tools = [
|
| 9 | 24 | {
|
| 10 | | - type: 'text',
|
| | 25 | + name: 'text',
|
| 11 | 26 | items: [
|
| 12 | 27 | {
|
| 13 | | - type: 'bold',
|
| 14 | | - execute: function( toolbarView, tool ) {
|
| 15 | | - var tx;
|
| 16 | | - if ( tool.$.hasClass( 'es-toolbarTool-down' ) ) {
|
| 17 | | - tx = toolbarView.surfaceView.model.getDocument().prepareContentAnnotation(
|
| 18 | | - toolbarView.currentSelection,
|
| 19 | | - 'clear',
|
| 20 | | - { 'type': 'textStyle/bold' }
|
| 21 | | - );
|
| 22 | | - } else {
|
| 23 | | - tx = toolbarView.surfaceView.model.getDocument().prepareContentAnnotation(
|
| 24 | | - toolbarView.currentSelection,
|
| 25 | | - 'set',
|
| 26 | | - { 'type': 'textStyle/bold' }
|
| 27 | | - );
|
| 28 | | - }
|
| 29 | | - toolbarView.surfaceView.model.transact( tx );
|
| 30 | | - },
|
| 31 | | - active: function( annotations ) {
|
| 32 | | - for ( var i = 0; i < annotations.length; i++ ) {
|
| 33 | | - if ( annotations[i].type === 'textStyle/bold' ) {
|
| 34 | | - return true;
|
| 35 | | - }
|
| 36 | | - }
|
| 37 | | - return false;
|
| | 28 | + type: 'select',
|
| | 29 | + name: 'formatting',
|
| | 30 | + items: [
|
| | 31 | + '',
|
| | 32 | + 'paragraph',
|
| | 33 | + 'preformatted',
|
| | 34 | + 'heading1',
|
| | 35 | + 'heading2',
|
| | 36 | + 'heading3',
|
| | 37 | + 'heading4',
|
| | 38 | + 'heading5',
|
| | 39 | + 'heading6'
|
| | 40 | + ],
|
| | 41 | + state: function() {
|
| | 42 | + return 'paragraph';
|
| | 43 | + return '';
|
| 38 | 44 | }
|
| 39 | 45 | },
|
| 40 | 46 | {
|
| 41 | | - type: 'italic',
|
| 42 | | - execute: function( toolbarView, tool ) {
|
| 43 | | - var tx;
|
| 44 | | - if ( tool.$.hasClass( 'es-toolbarTool-down' ) ) {
|
| 45 | | - tx = toolbarView.surfaceView.model.getDocument().prepareContentAnnotation(
|
| 46 | | - toolbarView.currentSelection,
|
| 47 | | - 'clear',
|
| 48 | | - { 'type': 'textStyle/italic' }
|
| 49 | | - );
|
| 50 | | - } else {
|
| 51 | | - tx = toolbarView.surfaceView.model.getDocument().prepareContentAnnotation(
|
| 52 | | - toolbarView.currentSelection,
|
| 53 | | - 'set',
|
| 54 | | - { 'type': 'textStyle/italic' }
|
| 55 | | - );
|
| 56 | | - }
|
| 57 | | - toolbarView.surfaceView.model.transact( tx );
|
| 58 | | - },
|
| 59 | | - active: function( annotations ) {
|
| 60 | | - for ( var i = 0; i < annotations.length; i++ ) {
|
| 61 | | - if ( annotations[i].type === 'textStyle/italic' ) {
|
| 62 | | - return true;
|
| 63 | | - }
|
| 64 | | - }
|
| 65 | | - return false;
|
| 66 | | - }
|
| | 47 | + type: 'button',
|
| | 48 | + name: 'bold'
|
| | 49 | + },
|
| | 50 | + {
|
| | 51 | + type: 'button',
|
| | 52 | + name: 'italic'
|
| 67 | 53 | }
|
| 68 | 54 | ]
|
| 69 | 55 | },
|
| 70 | 56 | '/',
|
| 71 | 57 | {
|
| 72 | | - type: 'list',
|
| | 58 | + name: 'list',
|
| 73 | 59 | items: [
|
| 74 | 60 | {
|
| 75 | | - type: 'bullet',
|
| 76 | | - execute: function( ) {
|
| 77 | | - },
|
| 78 | | - active: function( ) {
|
| 79 | | - }
|
| | 61 | + type: 'button',
|
| | 62 | + name: 'bullet'
|
| 80 | 63 | },
|
| 81 | 64 | {
|
| 82 | | - type: 'number',
|
| 83 | | - execute: function( ) {
|
| 84 | | - },
|
| 85 | | - active: function( ) {
|
| 86 | | - }
|
| | 65 | + type: 'button',
|
| | 66 | + name: 'number'
|
| 87 | 67 | }
|
| 88 | 68 | ]
|
| 89 | 69 | }
|
| 90 | 70 | ];
|
| 91 | | - this.render();
|
| 92 | | - this.currentSelection = new es.Range();
|
| 93 | | - this.currentAnnotations = [];
|
| | 71 | +
|
| | 72 | + this.setup();
|
| | 73 | +
|
| 94 | 74 | this.surfaceView.model.on( 'select', function( selection ) {
|
| 95 | | - _this.onSelect( selection );
|
| | 75 | + _this.selection = selection;
|
| | 76 | + _this.updateToolbar();
|
| 96 | 77 | } );
|
| | 78 | + this.surfaceView.on( 'update', function(a) {
|
| | 79 | + _this.selection = _this.surfaceView.currentSelection;
|
| | 80 | + _this.updateToolbar();
|
| | 81 | + } );
|
| 97 | 82 | };
|
| 98 | 83 |
|
| 99 | | -es.ToolbarView.prototype.render = function() {
|
| 100 | | - var _this = this;
|
| | 84 | +es.ToolbarView.prototype.updateToolbar = function() {
|
| | 85 | + if ( this.selection.from != this.selection.to ) {
|
| | 86 | +// var nodes = this.surfaceView.documentView.selectNodes( this.selection, true);
|
| | 87 | +// var nodes = nodes[0].node.selectNodes ( nodes[0].range, true );
|
| | 88 | + }
|
| | 89 | +};
|
| | 90 | +
|
| | 91 | +es.ToolbarView.prototype.setup = function() { |
| 101 | 92 | for ( var i = this.tools.length - 1; i >= 0; i-- ) {
|
| 102 | 93 | if ( !es.isPlainObject( this.tools[i] ) ) {
|
| | 94 | + // divider
|
| 103 | 95 | if ( this.tools[i] === '/' ) {
|
| 104 | 96 | this.$.prepend( '<div class="es-toolbarDivider">' );
|
| 105 | 97 | }
|
| 106 | 98 | } else {
|
| 107 | 99 | var $group = $( '<div>' )
|
| 108 | 100 | .addClass( 'es-toolbarGroup' )
|
| 109 | | - .addClass( 'es-toolbarGroup-' + this.tools[i].type )
|
| | 101 | + .addClass( 'es-toolbarGroup-' + this.tools[i].name )
|
| 110 | 102 | .append(
|
| 111 | | - $( '<div>' ).addClass( 'es-toolbarLabel' ).html( this.tools[i].type )
|
| | 103 | + $( '<div>' ).addClass( 'es-toolbarLabel' ).html( i18n( this.tools[i].name ) )
|
| 112 | 104 | );
|
| 113 | | -
|
| 114 | 105 | for ( var j = 0; j < this.tools[i].items.length; j++ ) {
|
| 115 | | - this.tools[i].items[j].$ = $('<div>')
|
| 116 | | - .addClass( 'es-toolbarTool' )
|
| 117 | | - .append(
|
| 118 | | - $( '<img>' ).attr( 'src', 'images/' + this.tools[i].items[j].type + '.png')
|
| 119 | | - )
|
| 120 | | - .bind(
|
| 121 | | - 'click',
|
| 122 | | - {
|
| 123 | | - tool: this.tools[i].items[j]
|
| 124 | | - },
|
| 125 | | - function( e ) {
|
| 126 | | - _this.execute( e.data.tool );
|
| 127 | | - }
|
| | 106 | + var $tool = $('<div>').addClass( 'es-toolbarTool' );
|
| | 107 | + if ( this.tools[i].items[j].type === 'button' ) {
|
| | 108 | + // button
|
| | 109 | + $tool.append(
|
| | 110 | + $( '<img>' ).attr( 'src', 'images/' + this.tools[i].items[j].name + '.png')
|
| 128 | 111 | );
|
| 129 | | - $group.append( this.tools[i].items[j].$ );
|
| 130 | | - }
|
| 131 | | -
|
| 132 | | - this.$.prepend( $group );
|
| 133 | | - }
|
| 134 | | - }
|
| 135 | | -};
|
| 136 | | -
|
| 137 | | -es.ToolbarView.prototype.execute = function( tool ) {
|
| 138 | | - tool.execute( this, tool );
|
| 139 | | -};
|
| 140 | | -
|
| 141 | | -es.ToolbarView.prototype.onSelect = function( selection ) {
|
| 142 | | - this.currentSelection = selection;
|
| 143 | | -
|
| 144 | | - if( this.currentSelection.from === this.currentSelection.to ) {
|
| 145 | | - this.currentAnnotations =
|
| 146 | | - this.surfaceView.documentView.model.getAnnotationsFromOffset( this.currentSelection.to );
|
| 147 | | - } else {
|
| 148 | | - this.currentAnnotations =
|
| 149 | | - this.surfaceView.documentView.model.getAnnotationsFromRange( this.currentSelection );
|
| 150 | | - }
|
| 151 | | -
|
| 152 | | - for ( var i = 0; i < this.tools.length; i++ ) {
|
| 153 | | - if ( es.isPlainObject( this.tools[i] ) ) {
|
| 154 | | - for ( var j = 0; j < this.tools[i].items.length; j++ ) {
|
| 155 | | - if ( this.tools[i].items[j].active( this.currentAnnotations ) ) {
|
| 156 | | - this.tools[i].items[j].$.addClass( 'es-toolbarTool-down' );
|
| 157 | | - } else {
|
| 158 | | - this.tools[i].items[j].$.removeClass( 'es-toolbarTool-down' );
|
| | 112 | + } else if ( this.tools[i].items[j].type === 'select' ) {
|
| | 113 | + // select
|
| | 114 | + $select = $( '<select>' );
|
| | 115 | + for ( var h = 0; h < this.tools[i].items[j].items.length; h++ ) {
|
| | 116 | + $select.append(
|
| | 117 | + $( '<option>' )
|
| | 118 | + .html( i18n ( this.tools[i].items[j].items[h] ) )
|
| | 119 | + .val( this.tools[i].items[j].items[h] )
|
| | 120 | + );
|
| | 121 | + }
|
| | 122 | + $tool.append( $select );
|
| 159 | 123 | }
|
| | 124 | + $group.append( $tool );
|
| | 125 | + this.tools[i].items[j].$ = $tool;
|
| 160 | 126 | }
|
| | 127 | + this.$.prepend( $group );
|
| 161 | 128 | }
|
| 162 | | - }
|
| | 129 | + } |
| 163 | 130 | }; |
| \ No newline at end of file |