(function() {
'use strict';
/**
* Provides functionality for calculating the point of interaction of the user with the Editor.
*
* @class WidgetInteractionPoint
*/
var WidgetInteractionPoint = {
// Allows validating props being passed to the component.
propTypes: {
/**
* The provided editor event.
*
* @property {SyntheticEvent} editorEvent
*/
editorEvent: React.PropTypes.object
},
/**
* Returns the position, in page coordinates, according to which a widget should appear.
* Depending on the direction of the selection, the wdiget may appear above of or on bottom of the selection.
*
* It depends on the props editorEvent to analyze the following user-interaction parameters:
* - {Object} selectionData The data about the selection in the editor as returned from
* {{#crossLink "CKEDITOR.plugins.ae_selectionregion/getSelectionData:method"}}{{/crossLink}}
* - {Number} pos Contains the coordinates of the position, considered as most appropriate.
* This may be the point where the user released the mouse, or just the beginning or the end of
* the selection.
*
* @method getInteractionPoint
* @return {Object} An Object which contains the following properties:
* direction, x, y, where x and y are in page coordinates and direction can be one of these:
* CKEDITOR.SELECTION_BOTTOM_TO_TOP or CKEDITOR.SELECTION_TOP_TO_BOTTOM
*/
getInteractionPoint: function() {
var eventPayload = this.props.editorEvent ? this.props.editorEvent.data : null;
if (!eventPayload) {
return;
}
var selectionData = eventPayload.selectionData;
var pos = {
x: eventPayload.nativeEvent.pageX,
y: eventPayload.nativeEvent.pageY
};
var direction = selectionData.region.direction;
var endRect = selectionData.region.endRect;
var startRect = selectionData.region.startRect;
if (endRect && startRect && startRect.top === endRect.top) {
direction = CKEDITOR.SELECTION_BOTTOM_TO_TOP;
}
var x;
var y;
// If we have the point where user released the mouse, show Toolbar at this point
// otherwise show it on the middle of the selection.
if (pos.x && pos.y) {
x = this._getXPoint(selectionData, pos.x);
if (direction === CKEDITOR.SELECTION_BOTTOM_TO_TOP) {
y = Math.min(pos.y, selectionData.region.top);
} else {
y = Math.max(pos.y, selectionData.region.bottom);
}
} else {
x = selectionData.region.left + selectionData.region.width / 2;
if (direction === CKEDITOR.SELECTION_TOP_TO_BOTTOM) {
y = selectionData.region.bottom;
} else {
y = selectionData.region.top;
}
}
return {
direction: direction,
x: x,
y: y
};
},
/**
* Returns the position of the Widget.
*
* @protected
* @method _getXPoint
* @param {Object} selectionData The data about the selection in the editor as
* returned from {{#crossLink "CKEDITOR.plugins.ae_selectionregion/getSelectionData:method"}}{{/crossLink}}
* @param {Object} eventX The X coordinate received from the native event (mouseup).
* @return {Number} The calculated X point in page coordinates.
*/
_getXPoint: function(selectionData, eventX) {
var region = selectionData.region;
var left = region.startRect ? region.startRect.left : region.left;
var right = region.endRect ? region.endRect.right : region.right;
var x;
if (left < eventX && right > eventX) {
x = eventX;
} else {
var leftDist = Math.abs(left - eventX);
var rightDist = Math.abs(right - eventX);
if (leftDist < rightDist) { // user raised the mouse on left on the selection
x = left;
} else {
x = right;
}
}
return x;
}
};
AlloyEditor.WidgetInteractionPoint = WidgetInteractionPoint;
}());