matting-editor/lib/widgets/matting-popper-core.js

matting-editor

'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.default = {
    props: {
        placement: {
            validator: function validator(v) {
                return ['top', 'bottom', 'left', 'right', 'center'].indexOf(v) > -1;
            },
            default: 'top'
        },
        offset: {
            type: Object,
            default: function _default() {
                return {
                    top: 0,
                    left: 0
                };
            }
        },
        arrowOffset: {
            type: Object,
            default: function _default() {
                return {
                    top: 0,
                    left: 0
                };
            }
        },
        transitionName: {
            type: String,
            default: 'popper-fade'
        }
    },
    data: function data() {
        return {
            showPopper: false,
            popperStyle: {
                visibility: 'hidden',
                left: 0,
                top: 0
            },
            popperWidth: '',
            popperHeight: '',
            reference: null
        };
    },

    methods: {
        setPopperSize: function setPopperSize() {
            var _this = this;

            return new Promise(function (resolve) {
                _this.beforeGetStyle();
                _this.$nextTick(resolve);
            }).then(function () {
                return new Promise(function (resolve) {
                    setTimeout(function () {
                        var popperRect = _this.$el.firstChild.getBoundingClientRect();
                        _this.popperWidth = popperRect.width;
                        _this.popperHeight = popperRect.height;
                        resolve();
                        _this.showPopper = false;
                        setTimeout(function () {
                            _this.popperStyle.visibility = 'visible';
                        }, 350);
                    }, 250);
                });
            });
        },
        setPosition: function setPosition(reference) {
            var _this2 = this;

            return this.getPosition(reference).then(function (_ref) {
                var top = _ref.top,
                    left = _ref.left;

                _this2.popperStyle.top = top + 'px';
                _this2.popperStyle.left = left + 'px';
            });
        },
        getPosition: function getPosition(reference) {
            var _this3 = this;

            if (reference === this.reference) {
                return Promise.resolve(this.popperStyle);
            }

            return this.setPopperSize().then(function () {
                var popperHeight = _this3.popperHeight,
                    popperWidth = _this3.popperWidth,
                    placement = _this3.placement,
                    offset = _this3.offset;

                _this3.reference = reference;

                var referenceRect = reference.getBoundingClientRect();
                var isVertical = ['top', 'bottom'].indexOf(placement) > -1;
                var isHorizontal = placement !== 'center' && !isVertical;

                var heightDiff = isVertical ? placement === 'top' ? popperHeight : -referenceRect.height : (popperHeight - referenceRect.height) / 2;
                var widthDiff = isHorizontal ? placement === 'left' ? popperWidth : -referenceRect.width : (popperWidth - referenceRect.width) / 2;
                var top = referenceRect.top - heightDiff - offset.top;
                var left = referenceRect.left - widthDiff - offset.left;

                return {
                    top: top,
                    left: left
                };
            });
        },
        show: function show() {
            this.showPopper = true;
        },
        hide: function hide() {
            this.showPopper = false;
        },
        beforeGetStyle: function beforeGetStyle() {
            this.showPopper = true;
            this.popperStyle.visibility = 'hidden';
        }
    }
};