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

matting-editor

'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});

var _mattingPopper = require('./matting-popper.html');

var _mattingPopper2 = _interopRequireDefault(_mattingPopper);

var _mattingPopperCore = require('./matting-popper-core');

var _mattingPopperCore2 = _interopRequireDefault(_mattingPopperCore);

var _vueInherit = require('../utils/vue-inherit');

var _vueInherit2 = _interopRequireDefault(_vueInherit);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

exports.default = (0, _vueInherit2.default)(_mattingPopperCore2.default, {
    template: _mattingPopper2.default,
    props: {
        text: {
            type: String | Number,
            default: ''
        },
        showBtn: {
            type: Boolean,
            default: true
        },
        btnText: {
            type: String,
            default: '我知道了'
        }
    },
    computed: {
        popperClassObject: function popperClassObject() {
            var _ref;

            return _ref = {}, _defineProperty(_ref, 'guider-popper-position--' + this.placement, true), _defineProperty(_ref, 'guider-popper-layout--center', !this.showBtn), _ref;
        },
        popperArrowClass: function popperArrowClass() {
            return _defineProperty({}, 'guider-popper__arrow--' + this.placement, true);
        },
        popperArrowStyle: function popperArrowStyle() {
            return {
                marginLeft: this.arrowOffset.left + 'px',
                marginTop: this.arrowOffset.top + 'px'
            };
        }
    },
    mounted: function mounted() {
        var popper = this.$refs.popper;

        popper.style.setProperty('--animate-margin-left', this.offset.left + 'px');
    },

    methods: {
        setPosition: function setPosition(reference) {
            var _this = this;

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

                var arrowSize = 10;
                var isVertical = ['top', 'bottom'].indexOf(_this.placement) > -1;
                var isHorizontal = !isVertical;
                var offsetTopForArrowSize = isVertical ? _this.placement === 'top' ? arrowSize : -arrowSize : 0;
                var offsetLeftForArrowSize = isHorizontal ? _this.placement === 'left' ? arrowSize : -arrowSize : 0;
                _this.popperStyle.top = top - offsetTopForArrowSize + 'px';
                _this.popperStyle.left = left - offsetLeftForArrowSize + 'px';
            });
        },
        handleBtnClick: function handleBtnClick() {
            this.$emit('popperclick');
        }
    }
});