es.ToolbarView = function( $container, surfaceView ) { // Reference for use in closures var _this = this; this.$ = $container; this.surfaceView = surfaceView; this.tools = [ { type: 'text', items: [ { type: 'bold', execute: function( toolbarView, tool ) { var tx; if ( tool.$.hasClass( 'es-toolbarTool-down' ) ) { tx = toolbarView.surfaceView.model.getDocument().prepareContentAnnotation( toolbarView.currentSelection, 'clear', { 'type': 'textStyle/bold' } ); } else { tx = toolbarView.surfaceView.model.getDocument().prepareContentAnnotation( toolbarView.currentSelection, 'set', { 'type': 'textStyle/bold' } ); } toolbarView.surfaceView.model.transact( tx ); }, active: function( annotations ) { for ( var i = 0; i < annotations.length; i++ ) { if ( annotations[i].type === 'textStyle/bold' ) { return true; } } return false; } }, { type: 'italic', execute: function( toolbarView, tool ) { var tx; if ( tool.$.hasClass( 'es-toolbarTool-down' ) ) { tx = toolbarView.surfaceView.model.getDocument().prepareContentAnnotation( toolbarView.currentSelection, 'clear', { 'type': 'textStyle/italic' } ); } else { tx = toolbarView.surfaceView.model.getDocument().prepareContentAnnotation( toolbarView.currentSelection, 'set', { 'type': 'textStyle/italic' } ); } toolbarView.surfaceView.model.transact( tx ); }, active: function( annotations ) { for ( var i = 0; i < annotations.length; i++ ) { if ( annotations[i].type === 'textStyle/italic' ) { return true; } } return false; } } ] }, '/', { type: 'list', items: [ { type: 'bullet', execute: function( ) { }, active: function( ) { } }, { type: 'number', execute: function( ) { }, active: function( ) { } } ] } ]; this.render(); this.currentSelection = new es.Range(); this.currentAnnotations = []; this.surfaceView.model.on( 'select', function( selection ) { _this.onSelect( selection ); } ); }; es.ToolbarView.prototype.render = function() { var _this = this; for ( var i = this.tools.length - 1; i >= 0; i-- ) { if ( !es.isPlainObject( this.tools[i] ) ) { if ( this.tools[i] === '/' ) { this.$.prepend( '
' ); } } else { var $group = $( '
' ) .addClass( 'es-toolbarGroup' ) .addClass( 'es-toolbarGroup-' + this.tools[i].type ) .append( $( '
' ).addClass( 'es-toolbarLabel' ).html( this.tools[i].type ) ); for ( var j = 0; j < this.tools[i].items.length; j++ ) { this.tools[i].items[j].$ = $('
') .addClass( 'es-toolbarTool' ) .append( $( '' ).attr( 'src', 'images/' + this.tools[i].items[j].type + '.png') ) .bind( 'click', { tool: this.tools[i].items[j] }, function( e ) { _this.execute( e.data.tool ); } ); $group.append( this.tools[i].items[j].$ ); } this.$.prepend( $group ); } } }; es.ToolbarView.prototype.execute = function( tool ) { tool.execute( this, tool ); }; es.ToolbarView.prototype.onSelect = function( selection ) { this.currentSelection = selection; if( this.currentSelection.from === this.currentSelection.to ) { this.currentAnnotations = this.surfaceView.documentView.model.getAnnotationsFromOffset( this.currentSelection.to ); } else { this.currentAnnotations = this.surfaceView.documentView.model.getAnnotationsFromRange( this.currentSelection ); } for ( var i = 0; i < this.tools.length; i++ ) { if ( es.isPlainObject( this.tools[i] ) ) { for ( var j = 0; j < this.tools[i].items.length; j++ ) { if ( this.tools[i].items[j].active( this.currentAnnotations ) ) { this.tools[i].items[j].$.addClass( 'es-toolbarTool-down' ); } else { this.tools[i].items[j].$.removeClass( 'es-toolbarTool-down' ); } } } } };