2011-11-30 07:10:15 +00:00
|
|
|
// ToolbarView
|
2011-11-29 21:34:56 +00:00
|
|
|
es.ToolbarView = function( $container, surfaceView ) {
|
2011-11-30 07:35:59 +00:00
|
|
|
es.EventEmitter.call( this );
|
|
|
|
|
2011-11-29 21:34:56 +00:00
|
|
|
// References for use in closures
|
|
|
|
var _this = this,
|
|
|
|
$window = $( window );
|
|
|
|
|
|
|
|
this.surfaceView = surfaceView;
|
2011-11-30 22:44:11 +00:00
|
|
|
this.$spacer = $('<div></div>');
|
2011-11-30 07:10:15 +00:00
|
|
|
this.$ = $container;
|
2011-11-30 22:44:11 +00:00
|
|
|
this.$groups = $( '<div class="es-toolbarGroups"></div>' ).prependTo( this.$ );
|
2011-11-29 21:34:56 +00:00
|
|
|
this.$.after( this.$spacer );
|
2011-11-30 07:10:15 +00:00
|
|
|
|
2011-11-29 21:34:56 +00:00
|
|
|
/*
|
|
|
|
* This code is responsible for switching toolbar into floating mode when scrolling (with
|
2011-11-29 01:13:50 +00:00
|
|
|
* keyboard or mouse).
|
2011-11-29 21:34:56 +00:00
|
|
|
*/
|
|
|
|
$window.scroll( function() {
|
|
|
|
if ( _this.surfaceView.dimensions.scrollTop >= _this.surfaceView.dimensions.toolbarTop ) {
|
|
|
|
if ( ! _this.$.hasClass( 'float' ) ) {
|
|
|
|
var left = _this.$.offset().left,
|
|
|
|
right = $window.width() - _this.$.outerWidth() - left;
|
|
|
|
_this.$.css( 'right', right );
|
|
|
|
_this.$.css( 'left', left );
|
|
|
|
_this.$.addClass( 'float' );
|
|
|
|
_this.$spacer.height( _this.$.height() );
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
if ( _this.$.hasClass( 'float' ) ) {
|
|
|
|
_this.$.css( 'right', 0 );
|
|
|
|
_this.$.css( 'left', 0 );
|
|
|
|
_this.$.removeClass( 'float' );
|
|
|
|
_this.$spacer.height(0);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
} );
|
|
|
|
|
2011-11-30 07:10:15 +00:00
|
|
|
this.config = [
|
2011-11-30 08:07:22 +00:00
|
|
|
{ name: 'text', items : [ 'bold', 'italic', 'formatting', 'clear' ] },
|
2011-11-29 21:34:56 +00:00
|
|
|
];
|
|
|
|
|
2011-11-30 07:10:15 +00:00
|
|
|
this.setup()
|
2011-11-30 07:35:59 +00:00
|
|
|
|
|
|
|
this.surfaceView.model.on( 'select', function( selection ) {
|
|
|
|
_this.emit( 'update' );
|
|
|
|
} );
|
|
|
|
this.surfaceView.on( 'update', function() {
|
|
|
|
_this.emit( 'update' );
|
|
|
|
} );
|
2011-11-29 21:34:56 +00:00
|
|
|
};
|
|
|
|
|
2011-11-30 07:10:15 +00:00
|
|
|
es.ToolbarView.tools = {};
|
2011-11-29 21:34:56 +00:00
|
|
|
|
|
|
|
es.ToolbarView.prototype.setup = function() {
|
2011-11-30 22:44:11 +00:00
|
|
|
for ( var i = 0; i < this.config.length; i++ ) {
|
2011-11-30 07:10:15 +00:00
|
|
|
var $group = $( '<div>' )
|
|
|
|
.addClass( 'es-toolbarGroup' )
|
|
|
|
.addClass( 'es-toolbarGroup-' + this.config[i].name )
|
|
|
|
.append(
|
|
|
|
$( '<div>' ).addClass( 'es-toolbarLabel' ).html( this.config[i].name )
|
|
|
|
);
|
|
|
|
|
|
|
|
for ( var j = 0; j < this.config[i].items.length; j++ ) {
|
|
|
|
var tool = new es.ToolbarView.tools[ this.config[i].items[j] ]( this );
|
|
|
|
$group.append( tool.$ );
|
2011-11-29 21:34:56 +00:00
|
|
|
}
|
2011-11-30 07:10:15 +00:00
|
|
|
|
2011-11-30 22:44:11 +00:00
|
|
|
this.$groups.append( $group );
|
2011-11-29 21:34:56 +00:00
|
|
|
}
|
2011-11-30 07:35:59 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
es.extendClass( es.ToolbarView, es.EventEmitter );
|