ukelli-ui/core/modal/drag-pabel-helper.js

Base on React's UI lib. Make frontend's dev simpler and faster.

var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
import { UkeComponent } from '../utils/uke-component';
import { getScreenWidth } from '../utils/screen';
// let SCREEN_WIDTH = document.documentElement.clientWidth;
var DragPanelClass = /** @class */ (function (_super) {
    __extends(DragPanelClass, _super);
    function DragPanelClass() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.drapElemInfo = {
            isDrapStart: false,
            dragElem: undefined,
            dragOriginX: 0,
            dragOriginY: 0,
            elemOrigonX: 0,
            elemOriginY: 0
        };
        _this.getScreenWidth = getScreenWidth;
        _this.setLayoutInitPosition = function (elem) {
            if (!_this.isSetPosition) {
                _this.isSetPosition = true;
                // elem.style.left = (this.getScreenWidth() - elem.offsetWidth) / 2 + 'px';
                // elem.style.top = '100px';
                elem.style.transform = "translate(" + (_this.getScreenWidth() - elem.offsetWidth) / 2 + "px, 100px)";
            }
        };
        _this.setContainerPosition = function (event) {
            if (!_this.drapElemInfo.isDrapStart)
                return;
            var _a = _this.props.topLimit, topLimit = _a === void 0 ? 0 : _a;
            var _b = _this.drapElemInfo, dragElem = _b.dragElem, dragOriginX = _b.dragOriginX, dragOriginY = _b.dragOriginY, elemOrigonX = _b.elemOrigonX, elemOriginY = _b.elemOriginY;
            if (dragElem) {
                var leftOffset = event.clientX - dragOriginX + elemOrigonX;
                var topOffset = event.clientY - dragOriginY + elemOriginY;
                var _screenWidth = getScreenWidth() - dragElem.offsetWidth;
                var setLeftOffset = leftOffset;
                var setTopOffset = topOffset;
                if (leftOffset < 0) {
                    setLeftOffset = 0;
                }
                else if (leftOffset > _screenWidth) {
                    setLeftOffset = _screenWidth;
                }
                if (setTopOffset < topLimit) {
                    setTopOffset = topLimit;
                }
                dragElem.style.transform = "translate(" + setLeftOffset + "px, " + setTopOffset + "px)";
                // dragElem.style.transform = setTopOffset + "px";
            }
        };
        _this.dragEnd = function (event) {
            if (!_this.drapElemInfo.isDrapStart)
                return;
            _this.drapElemInfo = {
                isDrapStart: false,
                dragElem: undefined,
                dragOriginX: 0,
                dragOriginY: 0,
                elemOrigonX: 0,
                elemOriginY: 0
            };
            _this.mouseMoved();
        };
        return _this;
    }
    DragPanelClass.prototype.dragStart = function (event, elem) {
        var elemTransform = elem.style.transform;
        var arr = elemTransform.split(',');
        var _a = arr.map(function (item) { return item.replace(/[^\d.]/g, ''); }), translateX = _a[0], translateY = _a[1];
        this.drapElemInfo = {
            isDrapStart: true,
            dragElem: elem,
            dragOriginX: event.clientX,
            dragOriginY: event.clientY,
            elemOrigonX: +translateX || 0,
            elemOriginY: +translateY || 0
        };
        this.mouseMoving();
        event.stopPropagation();
    };
    DragPanelClass.prototype.mouseMoving = function () {
        document.addEventListener('mousemove', this.setContainerPosition, false);
        document.addEventListener('mouseup', this.dragEnd, false);
    };
    DragPanelClass.prototype.mouseMoved = function () {
        document.removeEventListener('mousemove', this.setContainerPosition, false);
        document.removeEventListener('mouseup', this.dragEnd, false);
    };
    return DragPanelClass;
}(UkeComponent));
export { DragPanelClass };