@open-e/oe-coordinator
Version:
This module is used to detect mouse movement on the border of HTMLElement. Useful usecase is to enable resize event in `div` element when mouse is on the border of it.
166 lines • 13.8 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { DEFAULT } from "../config";
import { ClickEvent } from "./utilities/click.component";
import { ClassEvent } from "./utilities/class.component";
export var PublicAPI;
(function (PublicAPI) {
PublicAPI.ClassBehavior = ClassEvent;
PublicAPI.ClickBehavior = ClickEvent;
class CoordinateComponent {
// variation to detect on border
/**
* @param {?} element
*/
constructor(element) {
this.element = element;
this._variation = DEFAULT.variation; // variation to detect on border
this._element = element;
this.setCoordinates();
this.addListener("mousemove");
this.addListener("mousedown");
this.addListener("mouseup");
this.detectMouseUpOutSide();
}
/**
* Return coordinates
* @return {?}
*/
getCoordinates() {
return this._coordinates;
}
/**
* Detect when module is on border of element
* @return {?}
*/
onBorder() {
return this._onBorder;
}
/**
* Detect hen drag starts
* @return {?}
*/
onDragStart() {
return this._isDrag;
}
/**
* addEventListener to detect when on border
*
* @param {?} name 'mousedown' | 'mouseup' | 'mouseover'
* @return {?}
*/
addListener(name) {
this._element.addEventListener(name, (/**
* @param {?} mouse
* @return {?}
*/
(mouse) => {
this.detectOnborder(mouse);
this.detectOnDragStart(name, mouse);
}));
}
/**
* Set variation to detect mouse on border
*
* @param {?} value
* @return {?}
*/
setVariation(value) {
this._variation = value;
}
/**
* calculate current coordinate of HTMlelement
*
* @private
* @return {?}
*/
setCoordinates() {
return (this._coordinates = Object.assign(this.element.getBoundingClientRect(), {
clientWidth: this.element.clientWidth,
clientHeight: this.element.clientHeight
}));
}
/**
* Private method to assign drag start
*
* @private
* @param {?} name
* @param {?} mouse
* @return {?}
*/
detectOnDragStart(name, mouse) {
if (Object.values(this._onBorder).indexOf(true) != -1 &&
["mousedown"].includes(name)) {
this._isDrag = true;
}
else if (this._isDrag && ["mousedown", "mousemove"].includes(name)) {
this._isDrag = true;
}
else {
this._isDrag = false;
}
}
/**
* detect when mouse click is on border
*
* @private
* @param {?} mouse
* @return {?}
*/
detectOnborder(mouse) {
this._onBorder = Object.assign(this._onBorder ? this._onBorder : {}, {
left: mouse.offsetX < 0 + this._variation,
right: mouse.offsetX >
((/** @type {?} */ (mouse.target))).clientWidth - this._variation,
top: mouse.offsetY < 0 + this._variation,
bottom: mouse.offsetY >
((/** @type {?} */ (mouse.target))).clientHeight - this._variation
});
}
/**
* @private
* @return {?}
*/
detectMouseUpOutSide() {
document.addEventListener("mouseup", (/**
* @return {?}
*/
function () {
this._isDrag = false;
}).bind(this));
}
}
PublicAPI.CoordinateComponent = CoordinateComponent;
if (false) {
/**
* @type {?}
* @private
*/
CoordinateComponent.prototype._element;
/**
* @type {?}
* @private
*/
CoordinateComponent.prototype._coordinates;
/**
* @type {?}
* @private
*/
CoordinateComponent.prototype._onBorder;
/**
* @type {?}
* @private
*/
CoordinateComponent.prototype._isDrag;
/**
* @type {?}
* @private
*/
CoordinateComponent.prototype._variation;
/** @type {?} */
CoordinateComponent.prototype.element;
}
})(PublicAPI || (PublicAPI = {}));
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29vcmRpbmF0ZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9Ab3Blbi1lL29lLWNvb3JkaW5hdG9yLyIsInNvdXJjZXMiOlsibW9kdWxlL2NsYXNzL2Nvb3JkaW5hdGUuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7QUFDQSxPQUFPLEVBQUUsT0FBTyxFQUFFLE1BQU0sV0FBVyxDQUFDO0FBQ3BDLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUN6RCxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFFekQsTUFBTSxLQUFXLFNBQVMsQ0EySHpCO0FBM0hELFdBQWlCLFNBQVM7SUFFYix1QkFBYSxHQUFHLFVBQVU7SUFDMUIsdUJBQWEsR0FBRyxVQUFVO0lBQ3JDLE1BQWEsbUJBQW1COzs7OztRQU85QixZQUFtQixPQUFvQjtZQUFwQixZQUFPLEdBQVAsT0FBTyxDQUFhO1lBRi9CLGVBQVUsR0FBOEIsT0FBTyxDQUFDLFNBQVMsQ0FBQyxDQUFDLGdDQUFnQztZQUdqRyxJQUFJLENBQUMsUUFBUSxHQUFHLE9BQU8sQ0FBQztZQUN4QixJQUFJLENBQUMsY0FBYyxFQUFFLENBQUM7WUFDdEIsSUFBSSxDQUFDLFdBQVcsQ0FBQyxXQUFXLENBQUMsQ0FBQztZQUM5QixJQUFJLENBQUMsV0FBVyxDQUFDLFdBQVcsQ0FBQyxDQUFDO1lBQzlCLElBQUksQ0FBQyxXQUFXLENBQUMsU0FBUyxDQUFDLENBQUM7WUFDNUIsSUFBSSxDQUFDLG9CQUFvQixFQUFFLENBQUM7UUFDOUIsQ0FBQzs7Ozs7UUFLTSxjQUFjO1lBQ25CLE9BQU8sSUFBSSxDQUFDLFlBQVksQ0FBQztRQUMzQixDQUFDOzs7OztRQUtNLFFBQVE7WUFDYixPQUFPLElBQUksQ0FBQyxTQUFTLENBQUM7UUFDeEIsQ0FBQzs7Ozs7UUFLTSxXQUFXO1lBQ2hCLE9BQU8sSUFBSSxDQUFDLE9BQU8sQ0FBQztRQUN0QixDQUFDOzs7Ozs7O1FBT00sV0FBVyxDQUFDLElBQVk7WUFDN0IsSUFBSSxDQUFDLFFBQVEsQ0FBQyxnQkFBZ0IsQ0FBQyxJQUFJOzs7O1lBQUUsQ0FBQyxLQUFpQixFQUFFLEVBQUU7Z0JBQ3pELElBQUksQ0FBQyxjQUFjLENBQUMsS0FBSyxDQUFDLENBQUM7Z0JBQzNCLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxJQUFJLEVBQUUsS0FBSyxDQUFDLENBQUM7WUFDdEMsQ0FBQyxFQUFDLENBQUM7UUFDTCxDQUFDOzs7Ozs7O1FBT00sWUFBWSxDQUFDLEtBQWE7WUFDL0IsSUFBSSxDQUFDLFVBQVUsR0FBRyxLQUFLLENBQUM7UUFDMUIsQ0FBQzs7Ozs7OztRQU9PLGNBQWM7WUFDcEIsT0FBTyxDQUFDLElBQUksQ0FBQyxZQUFZLEdBQUcsTUFBTSxDQUFDLE1BQU0sQ0FDdkMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxxQkFBcUIsRUFBRSxFQUNwQztnQkFDRSxXQUFXLEVBQUUsSUFBSSxDQUFDLE9BQU8sQ0FBQyxXQUFXO2dCQUNyQyxZQUFZLEVBQUUsSUFBSSxDQUFDLE9BQU8sQ0FBQyxZQUFZO2FBQ3hDLENBQ0YsQ0FBQyxDQUFDO1FBQ0wsQ0FBQzs7Ozs7Ozs7O1FBUU8saUJBQWlCLENBQUMsSUFBWSxFQUFFLEtBQWlCO1lBQ3ZELElBQ0UsTUFBTSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztnQkFDakQsQ0FBQyxXQUFXLENBQUMsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLEVBQzVCO2dCQUNBLElBQUksQ0FBQyxPQUFPLEdBQUcsSUFBSSxDQUFDO2FBQ3JCO2lCQUFNLElBQUksSUFBSSxDQUFDLE9BQU8sSUFBSSxDQUFDLFdBQVcsRUFBRSxXQUFXLENBQUMsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLEVBQUU7Z0JBQ3BFLElBQUksQ0FBQyxPQUFPLEdBQUcsSUFBSSxDQUFDO2FBQ3JCO2lCQUFNO2dCQUNMLElBQUksQ0FBQyxPQUFPLEdBQUcsS0FBSyxDQUFDO2FBQ3RCO1FBQ0gsQ0FBQzs7Ozs7Ozs7UUFPTyxjQUFjLENBQUMsS0FBaUI7WUFDdEMsSUFBSSxDQUFDLFNBQVMsR0FBRyxNQUFNLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsQ0FBQyxDQUFDLEVBQUUsRUFBRTtnQkFDbkUsSUFBSSxFQUFFLEtBQUssQ0FBQyxPQUFPLEdBQUcsQ0FBQyxHQUFHLElBQUksQ0FBQyxVQUFVO2dCQUN6QyxLQUFLLEVBQ0gsS0FBSyxDQUFDLE9BQU87b0JBQ2IsQ0FBQyxtQkFBQSxLQUFLLENBQUMsTUFBTSxFQUFlLENBQUMsQ0FBQyxXQUFXLEdBQUcsSUFBSSxDQUFDLFVBQVU7Z0JBQzdELEdBQUcsRUFBRSxLQUFLLENBQUMsT0FBTyxHQUFHLENBQUMsR0FBRyxJQUFJLENBQUMsVUFBVTtnQkFDeEMsTUFBTSxFQUNKLEtBQUssQ0FBQyxPQUFPO29CQUNiLENBQUMsbUJBQUEsS0FBSyxDQUFDLE1BQU0sRUFBZSxDQUFDLENBQUMsWUFBWSxHQUFHLElBQUksQ0FBQyxVQUFVO2FBQy9ELENBQUMsQ0FBQztRQUNMLENBQUM7Ozs7O1FBRU8sb0JBQW9CO1lBQzFCLFFBQVEsQ0FBQyxnQkFBZ0IsQ0FDdkIsU0FBUyxFQUNUOzs7WUFBQTtnQkFDRSxJQUFJLENBQUMsT0FBTyxHQUFHLEtBQUssQ0FBQztZQUN2QixDQUFDLEVBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUNiLENBQUM7UUFDSixDQUFDO0tBQ0Y7SUF0SFksNkJBQW1CLHNCQXNIL0IsQ0FBQTs7Ozs7O1FBckhDLHVDQUE4Qjs7Ozs7UUFDOUIsMkNBQWlEOzs7OztRQUNqRCx3Q0FBNEM7Ozs7O1FBQzVDLHNDQUF3Qzs7Ozs7UUFDeEMseUNBQWtFOztRQUV0RCxzQ0FBMkI7O0FBZ0gzQyxDQUFDLEVBM0hnQixTQUFTLEtBQVQsU0FBUyxRQTJIekIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBQdWJsaWNJbnRlcmZhY2UgfSBmcm9tIFwiLi4vbW9kZWxcIjtcclxuaW1wb3J0IHsgREVGQVVMVCB9IGZyb20gXCIuLi9jb25maWdcIjtcclxuaW1wb3J0IHsgQ2xpY2tFdmVudCB9IGZyb20gXCIuL3V0aWxpdGllcy9jbGljay5jb21wb25lbnRcIjtcclxuaW1wb3J0IHsgQ2xhc3NFdmVudCB9IGZyb20gXCIuL3V0aWxpdGllcy9jbGFzcy5jb21wb25lbnRcIjtcclxuXHJcbmV4cG9ydCBuYW1lc3BhY2UgUHVibGljQVBJIHtcclxuXHJcbiAgZXhwb3J0IHZhciBDbGFzc0JlaGF2aW9yID0gQ2xhc3NFdmVudDtcclxuICBleHBvcnQgdmFyIENsaWNrQmVoYXZpb3IgPSBDbGlja0V2ZW50O1xyXG4gIGV4cG9ydCBjbGFzcyBDb29yZGluYXRlQ29tcG9uZW50IHtcclxuICAgIHByaXZhdGUgX2VsZW1lbnQ6IEhUTUxFbGVtZW50O1xyXG4gICAgcHJpdmF0ZSBfY29vcmRpbmF0ZXM6IFB1YmxpY0ludGVyZmFjZS5Db29yZGluYXRlO1xyXG4gICAgcHJpdmF0ZSBfb25Cb3JkZXI6IFB1YmxpY0ludGVyZmFjZS5PbkJvcmRlcjtcclxuICAgIHByaXZhdGUgX2lzRHJhZzogUHVibGljSW50ZXJmYWNlLmlzRHJhZztcclxuICAgIHByaXZhdGUgX3ZhcmlhdGlvbjogUHVibGljSW50ZXJmYWNlLlZhcmlhdGlvbiA9IERFRkFVTFQudmFyaWF0aW9uOyAvLyB2YXJpYXRpb24gdG8gZGV0ZWN0IG9uIGJvcmRlclxyXG5cclxuICAgIGNvbnN0cnVjdG9yKHB1YmxpYyBlbGVtZW50OiBIVE1MRWxlbWVudCkge1xyXG4gICAgICB0aGlzLl9lbGVtZW50ID0gZWxlbWVudDtcclxuICAgICAgdGhpcy5zZXRDb29yZGluYXRlcygpO1xyXG4gICAgICB0aGlzLmFkZExpc3RlbmVyKFwibW91c2Vtb3ZlXCIpO1xyXG4gICAgICB0aGlzLmFkZExpc3RlbmVyKFwibW91c2Vkb3duXCIpO1xyXG4gICAgICB0aGlzLmFkZExpc3RlbmVyKFwibW91c2V1cFwiKTtcclxuICAgICAgdGhpcy5kZXRlY3RNb3VzZVVwT3V0U2lkZSgpO1xyXG4gICAgfVxyXG5cclxuICAgIC8qKlxyXG4gICAgICogUmV0dXJuIGNvb3JkaW5hdGVzXHJcbiAgICAgKi9cclxuICAgIHB1YmxpYyBnZXRDb29yZGluYXRlcygpOiBQdWJsaWNJbnRlcmZhY2UuQ29vcmRpbmF0ZSB7XHJcbiAgICAgIHJldHVybiB0aGlzLl9jb29yZGluYXRlcztcclxuICAgIH1cclxuXHJcbiAgICAvKipcclxuICAgICAqIERldGVjdCB3aGVuIG1vZHVsZSBpcyBvbiBib3JkZXIgb2YgZWxlbWVudFxyXG4gICAgICovXHJcbiAgICBwdWJsaWMgb25Cb3JkZXIoKTogUHVibGljSW50ZXJmYWNlLk9uQm9yZGVyIHtcclxuICAgICAgcmV0dXJuIHRoaXMuX29uQm9yZGVyO1xyXG4gICAgfVxyXG5cclxuICAgIC8qKlxyXG4gICAgICogRGV0ZWN0IGhlbiBkcmFnIHN0YXJ0c1xyXG4gICAgICovXHJcbiAgICBwdWJsaWMgb25EcmFnU3RhcnQoKTogUHVibGljSW50ZXJmYWNlLmlzRHJhZyB7XHJcbiAgICAgIHJldHVybiB0aGlzLl9pc0RyYWc7XHJcbiAgICB9XHJcblxyXG4gICAgLyoqXHJcbiAgICAgKiBhZGRFdmVudExpc3RlbmVyIHRvIGRldGVjdCB3aGVuIG9uIGJvcmRlclxyXG4gICAgICpcclxuICAgICAqIEBwYXJhbSBuYW1lICdtb3VzZWRvd24nIHwgJ21vdXNldXAnIHwgJ21vdXNlb3ZlcidcclxuICAgICAqL1xyXG4gICAgcHVibGljIGFkZExpc3RlbmVyKG5hbWU6IHN0cmluZyk6IHZvaWQge1xyXG4gICAgICB0aGlzLl9lbGVtZW50LmFkZEV2ZW50TGlzdGVuZXIobmFtZSwgKG1vdXNlOiBNb3VzZUV2ZW50KSA9PiB7XHJcbiAgICAgICAgdGhpcy5kZXRlY3RPbmJvcmRlcihtb3VzZSk7XHJcbiAgICAgICAgdGhpcy5kZXRlY3RPbkRyYWdTdGFydChuYW1lLCBtb3VzZSk7XHJcbiAgICAgIH0pO1xyXG4gICAgfVxyXG5cclxuICAgIC8qKlxyXG4gICAgICogU2V0IHZhcmlhdGlvbiB0byBkZXRlY3QgbW91c2Ugb24gYm9yZGVyXHJcbiAgICAgKlxyXG4gICAgICogQHBhcmFtIHZhbHVlXHJcbiAgICAgKi9cclxuICAgIHB1YmxpYyBzZXRWYXJpYXRpb24odmFsdWU6IG51bWJlcik6IHZvaWQge1xyXG4gICAgICB0aGlzLl92YXJpYXRpb24gPSB2YWx1ZTtcclxuICAgIH1cclxuXHJcbiAgICAvKipcclxuICAgICAqIGNhbGN1bGF0ZSBjdXJyZW50IGNvb3JkaW5hdGUgb2YgSFRNbGVsZW1lbnRcclxuICAgICAqXHJcbiAgICAgKiBAcGFyYW0gZWxlbWVudFxyXG4gICAgICovXHJcbiAgICBwcml2YXRlIHNldENvb3JkaW5hdGVzKCk6IFB1YmxpY0ludGVyZmFjZS5Db29yZGluYXRlIHtcclxuICAgICAgcmV0dXJuICh0aGlzLl9jb29yZGluYXRlcyA9IE9iamVjdC5hc3NpZ24oXHJcbiAgICAgICAgdGhpcy5lbGVtZW50LmdldEJvdW5kaW5nQ2xpZW50UmVjdCgpLFxyXG4gICAgICAgIHtcclxuICAgICAgICAgIGNsaWVudFdpZHRoOiB0aGlzLmVsZW1lbnQuY2xpZW50V2lkdGgsXHJcbiAgICAgICAgICBjbGllbnRIZWlnaHQ6IHRoaXMuZWxlbWVudC5jbGllbnRIZWlnaHRcclxuICAgICAgICB9XHJcbiAgICAgICkpO1xyXG4gICAgfVxyXG5cclxuICAgIC8qKlxyXG4gICAgICogUHJpdmF0ZSBtZXRob2QgdG8gYXNzaWduIGRyYWcgc3RhcnRcclxuICAgICAqXHJcbiAgICAgKiBAcGFyYW0gbmFtZVxyXG4gICAgICogQHBhcmFtIG1vdXNlXHJcbiAgICAgKi9cclxuICAgIHByaXZhdGUgZGV0ZWN0T25EcmFnU3RhcnQobmFtZTogc3RyaW5nLCBtb3VzZTogTW91c2VFdmVudCkge1xyXG4gICAgICBpZiAoXHJcbiAgICAgICAgT2JqZWN0LnZhbHVlcyh0aGlzLl9vbkJvcmRlcikuaW5kZXhPZih0cnVlKSAhPSAtMSAmJlxyXG4gICAgICAgIFtcIm1vdXNlZG93blwiXS5pbmNsdWRlcyhuYW1lKVxyXG4gICAgICApIHtcclxuICAgICAgICB0aGlzLl9pc0RyYWcgPSB0cnVlO1xyXG4gICAgICB9IGVsc2UgaWYgKHRoaXMuX2lzRHJhZyAmJiBbXCJtb3VzZWRvd25cIiwgXCJtb3VzZW1vdmVcIl0uaW5jbHVkZXMobmFtZSkpIHtcclxuICAgICAgICB0aGlzLl9pc0RyYWcgPSB0cnVlO1xyXG4gICAgICB9IGVsc2Uge1xyXG4gICAgICAgIHRoaXMuX2lzRHJhZyA9IGZhbHNlO1xyXG4gICAgICB9XHJcbiAgICB9XHJcblxyXG4gICAgLyoqXHJcbiAgICAgKiBkZXRlY3Qgd2hlbiBtb3VzZSBjbGljayBpcyBvbiBib3JkZXJcclxuICAgICAqXHJcbiAgICAgKiBAcGFyYW0gbW91c2VcclxuICAgICAqL1xyXG4gICAgcHJpdmF0ZSBkZXRlY3RPbmJvcmRlcihtb3VzZTogTW91c2VFdmVudCkge1xyXG4gICAgICB0aGlzLl9vbkJvcmRlciA9IE9iamVjdC5hc3NpZ24odGhpcy5fb25Cb3JkZXIgPyB0aGlzLl9vbkJvcmRlciA6IHt9LCB7XHJcbiAgICAgICAgbGVmdDogbW91c2Uub2Zmc2V0WCA8IDAgKyB0aGlzLl92YXJpYXRpb24sXHJcbiAgICAgICAgcmlnaHQ6XHJcbiAgICAgICAgICBtb3VzZS5vZmZzZXRYID5cclxuICAgICAgICAgIChtb3VzZS50YXJnZXQgYXMgSFRNTEVsZW1lbnQpLmNsaWVudFdpZHRoIC0gdGhpcy5fdmFyaWF0aW9uLFxyXG4gICAgICAgIHRvcDogbW91c2Uub2Zmc2V0WSA8IDAgKyB0aGlzLl92YXJpYXRpb24sXHJcbiAgICAgICAgYm90dG9tOlxyXG4gICAgICAgICAgbW91c2Uub2Zmc2V0WSA+XHJcbiAgICAgICAgICAobW91c2UudGFyZ2V0IGFzIEhUTUxFbGVtZW50KS5jbGllbnRIZWlnaHQgLSB0aGlzLl92YXJpYXRpb25cclxuICAgICAgfSk7XHJcbiAgICB9XHJcblxyXG4gICAgcHJpdmF0ZSBkZXRlY3RNb3VzZVVwT3V0U2lkZSgpIHtcclxuICAgICAgZG9jdW1lbnQuYWRkRXZlbnRMaXN0ZW5lcihcclxuICAgICAgICBcIm1vdXNldXBcIixcclxuICAgICAgICBmdW5jdGlvbigpIHtcclxuICAgICAgICAgIHRoaXMuX2lzRHJhZyA9IGZhbHNlO1xyXG4gICAgICAgIH0uYmluZCh0aGlzKVxyXG4gICAgICApO1xyXG4gICAgfVxyXG4gIH1cclxufVxyXG4iXX0=