| Index: trunk/extensions/VisualEditor/demo/es.js |
| — | — | @@ -420,6 +420,7 @@ |
| 421 | 421 | window.doc = es.DocumentModel.newFromPlainObject( window.wikiDom ); |
| 422 | 422 | window.surfaceModel = new es.SurfaceModel( window.doc ); |
| 423 | 423 | window.surfaceView = new es.SurfaceView( $( '#es-editor' ), window.surfaceModel ); |
| | 424 | + window.toolbarView = new es.ToolbarView( $( '#es-toolbar' ), window.surfaceModel ); |
| 424 | 425 | |
| 425 | 426 | var tools = { |
| 426 | 427 | 'textStyle/bold': $( '#es-toolbar-bold' ), |
| Index: trunk/extensions/VisualEditor/demo/index.html |
| — | — | @@ -9,6 +9,7 @@ |
| 10 | 10 | <body> |
| 11 | 11 | <div id="es-base"> |
| 12 | 12 | <div id="es-toolbar" class="es-toolbar"> |
| | 13 | + <!-- |
| 13 | 14 | <div class="es-toolbarGroup"> |
| 14 | 15 | <div class="es-toolbarLabel">Text</div> |
| 15 | 16 | <div class="es-toolbarTool" id="es-toolbar-bold"><img src="images/bold.png"></div> |
| — | — | @@ -36,6 +37,7 @@ |
| 37 | 38 | <div class="es-toolbarTool" id="es-toolbar-html" rel="html"><img src="images/html.png"></div> |
| 38 | 39 | <div class="es-toolbarTool" id="es-toolbar-render" rel="render"><img src="images/render.png"></div> |
| 39 | 40 | </div> |
| | 41 | + --> |
| 40 | 42 | <div style="clear:both"></div> |
| 41 | 43 | <div id="es-toolbar-shadow"></div> |
| 42 | 44 | </div> |
| — | — | @@ -94,6 +96,7 @@ |
| 95 | 97 | |
| 96 | 98 | <!-- Views --> |
| 97 | 99 | <script src="../modules/es/views/es.SurfaceView.js"></script> |
| | 100 | + <script src="../modules/es/views/es.ToolbarView.js"></script> |
| 98 | 101 | <script src="../modules/es/views/es.ContentView.js"></script> |
| 99 | 102 | <script src="../modules/es/views/es.DocumentView.js"></script> |
| 100 | 103 | <script src="../modules/es/views/es.ParagraphView.js"></script> |
| Index: trunk/extensions/VisualEditor/modules/es/views/es.ToolbarView.js |
| — | — | @@ -0,0 +1,56 @@ |
| | 2 | +es.ToolbarView = function( $container, model ) {
|
| | 3 | + this.$ = $container;
|
| | 4 | + this.model = model;
|
| | 5 | +
|
| | 6 | + this.config = [
|
| | 7 | + {
|
| | 8 | + name: 'Text',
|
| | 9 | + items: [
|
| | 10 | + {
|
| | 11 | + 'type' : 'bold',
|
| | 12 | + 'annotation': 'textStyle/bold'
|
| | 13 | + },
|
| | 14 | + {
|
| | 15 | + 'type' : 'italic',
|
| | 16 | + 'annotation': 'textStyle/italic'
|
| | 17 | + },
|
| | 18 | + {
|
| | 19 | + 'type' : 'link',
|
| | 20 | + 'annotation': 'link/internal'
|
| | 21 | + },
|
| | 22 | + 'small',
|
| | 23 | + 'big',
|
| | 24 | + 'sub',
|
| | 25 | + 'super',
|
| | 26 | + 'clear'
|
| | 27 | + ]
|
| | 28 | + },
|
| | 29 | + '/',
|
| | 30 | + {
|
| | 31 | + name: 'Lists',
|
| | 32 | + items: [ 'bullet', 'number', 'indent', 'outdent' ]
|
| | 33 | + },
|
| | 34 | + '/',
|
| | 35 | + {
|
| | 36 | + name: 'Preview',
|
| | 37 | + items: [ 'json', 'wikitext', 'html', 'render' ]
|
| | 38 | + }
|
| | 39 | + ];
|
| | 40 | +
|
| | 41 | + for( var i = this.config.length - 1; i >= 0; i-- ) {
|
| | 42 | + if ( es.isPlainObject( this.config[i] ) ) {
|
| | 43 | + var $group = $( '<div class="es-toolbarGroup">' );
|
| | 44 | + $( '<div class="es-toolbarLabel">' ).html( this.config[i].name ).appendTo( $group );
|
| | 45 | + for ( var j = 0; j < this.config[i].items.length; j++ ) {
|
| | 46 | + var toolName = es.isPlainObject( this.config[i].items[j] ) ? this.config[i].items[j].type : this.config[i].items[j];
|
| | 47 | + $( '<div class="es-toolbarTool" id="' + toolName + '"><img src="images/' + toolName + '.png" /></div>' ).appendTo( $group );
|
| | 48 | + }
|
| | 49 | + this.$.prepend( $group );
|
| | 50 | + } else {
|
| | 51 | + if ( this.config[i] === '/' ) {
|
| | 52 | + this.$.prepend( '<div class="es-toolbarDivider">' );
|
| | 53 | + }
|
| | 54 | + }
|
| | 55 | +
|
| | 56 | + }
|
| | 57 | +}; |
| \ No newline at end of file |