mediawiki-extensions-Visual.../modules/es/views/es.ContextView.js

123 lines
3.7 KiB
JavaScript
Raw Normal View History

2011-11-29 23:29:02 +00:00
/**
* Creates an es.ContextView object.
*
* @class
* @constructor
* @param {jQuery} $overlay DOM selection to add nodes to
*/
es.ContextView = function( surfaceView, $overlay ) {
2011-12-02 00:30:50 +00:00
var _this = this;
// Properties
2011-11-29 23:29:02 +00:00
this.surfaceView = surfaceView;
this.$ = $( '<div class="es-contextView"></div>' ).appendTo( $overlay || $( 'body' ) );
2011-12-02 00:30:50 +00:00
this.$panels = $( '<div class="es-contextView-panels"></div>' ).appendTo( this.$ );
this.$toolbar = $( '<div class="es-contextView-toolbar"></div>' );
this.toolbarView = new es.ToolbarView(
this.$toolbar,
this.surfaceView,
[{ 'name': 'textStyle', 'items' : [ 'bold', 'italic', 'link', 'clear' ] }]
);
this.menuView = new es.MenuView( [
// Example menu items
{ 'name': 'tools', '$': this.$toolbar }
],
null,
this.$
);
2011-12-02 00:30:50 +00:00
this.$icon = $( '<div class="es-contextView-icon"></div>' ).appendTo( this.$ );
2011-12-02 00:30:50 +00:00
// Example panel
this.$panels.append(
'<div class="es-contextView-panel" rel="link">' +
'<div><label>Page title or URL <input type="text"></label></div>' +
'<div><a href="#cancel">Cancel</a> <button>Change</button></div>' +
'</div>'
);
2011-12-05 18:38:12 +00:00
this.$panels.find( '[href="#cancel"]' ).click( function( e ) {
2011-12-02 00:30:50 +00:00
_this.$panels.children().hide();
2011-12-05 18:38:12 +00:00
e.preventDefault();
return false;
2011-12-02 00:30:50 +00:00
} );
2011-11-29 23:48:11 +00:00
// Events
this.$icon.bind( {
'mousedown': function( e ) {
if ( e.which === 1 ) {
e.preventDefault();
return false;
}
},
'mouseup': function( e ) {
if ( e.which === 1 ) {
_this.menuView.toggle();
}
}
2011-11-29 23:48:11 +00:00
} );
2011-11-29 23:29:02 +00:00
};
/* Methods */
es.ContextView.prototype.set = function() {
2011-11-30 00:48:46 +00:00
this.$.removeClass(
'es-contextView-position-below es-contextView-position-above ' +
2011-11-30 22:30:35 +00:00
'es-contextView-position-left es-contextView-position-right ' +
'es-contextView-position-start es-contextView-position-end'
2011-11-30 00:48:46 +00:00
);
2011-11-29 23:29:02 +00:00
var selection = this.surfaceView.getModel().getSelection(),
position,
offset;
2011-11-29 23:29:02 +00:00
if ( selection.from < selection.to ) {
var $lastRange = this.surfaceView.$.find( '.es-contentView-range:visible:last' );
if ( $lastRange.length ) {
offset = $lastRange.offset();
position = new es.Position(
offset.left + $lastRange.width(), offset.top + $lastRange.height()
);
this.$.addClass( 'es-contextView-position-end' );
2011-11-29 23:29:02 +00:00
}
} else if ( selection.from > selection.to ) {
var $firstRange = this.surfaceView.$.find( '.es-contentView-range:visible:first' );
if ( $firstRange.length ) {
offset = $firstRange.offset();
position = new es.Position( offset.left, offset.top );
this.$.addClass( 'es-contextView-position-start' );
2011-11-29 23:29:02 +00:00
}
}
if ( position ) {
var $menu = this.menuView.$,
menuMargin = 5,
menuWidth = $menu.width(),
menuHeight = $menu.height(),
$window = $( window ),
windowWidth = $window.width(),
windowHeight = $window.height(),
windowScrollTop = $window.scrollTop();
// Center align menu
var menuLeft = -Math.round( menuWidth / 2 );
// Adjust menu left or right depending on viewport
if ( ( position.left - menuMargin ) + menuLeft < 0 ) {
// Move right a bit past center
menuLeft -= position.left + menuLeft - menuMargin;
} else if ( ( menuMargin + position.left ) - menuLeft > windowWidth ) {
// Move left a bit past center
menuLeft += windowWidth - menuMargin - ( position.left - menuLeft );
2011-11-30 00:48:46 +00:00
}
$menu.css( 'left', menuLeft );
// Position menu on top or bottom depending on viewport
if ( position.top + menuHeight + ( menuMargin * 2 ) < windowHeight + windowScrollTop ) {
this.$.addClass( 'es-contextView-position-below' );
} else {
this.$.addClass( 'es-contextView-position-above' );
}
2011-11-29 23:29:02 +00:00
this.$.css( { 'left': position.left, 'top': position.top } );
this.$icon.fadeIn( 'fast' );
}
};
es.ContextView.prototype.clear = function() {
2011-12-02 00:30:50 +00:00
this.$panels.hide().children().hide();
2011-11-29 23:29:02 +00:00
this.$icon.hide();
this.menuView.hide();
2011-11-29 23:29:02 +00:00
};