vue-poster-editor/lib/widgets/editor-range-picker.js

A poster editor based on Vue.js

'use strict';

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

var _jquery = require('jquery');

var _jquery2 = _interopRequireDefault(_jquery);

var _utils = require('../utils/utils');

var _utils2 = _interopRequireDefault(_utils);

var _editorRangePicker = require('./editor-range-picker.html');

var _editorRangePicker2 = _interopRequireDefault(_editorRangePicker);

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

exports.default = {
    template: _editorRangePicker2.default,
    props: ['change', 'value', 'min', 'max', 'bubble', 'type', 'wheel', 'formatter'],
    data: function data() {
        return {
            active: false,
            range: 0
        };
    },

    computed: {
        progress: function progress() {
            var total = this.max - this.min;
            var curr = this.range - this.min;

            return 100 * curr / total;
        },
        tip: function tip() {
            var tip = this.value;
            switch (this.type) {
                case 'percent':
                    tip = parseInt(this.progress) + '%';
                    break;
                case 'number':
                    tip = parseInt(this.value) + '°';
                    break;
                case 'format':
                    tip = this.formatter(this.progress, this.value);
                    break;
                default:
                    tip = this.value;
            }

            return tip;
        }
    },
    methods: {
        onMousedown: function onMousedown(e) {
            if (e.button !== 0) {
                return;
            }

            var self = this;
            var doc = (0, _jquery2.default)(document);
            var drag = this.drag = {
                pageX: e.pageX,
                width: (0, _jquery2.default)(this.$el).width(),
                startRange: this.range,
                move: function move(e) {
                    var min = self.min;
                    var max = self.max;
                    var startRange = drag.startRange;
                    var tx = e.pageX - drag.pageX;
                    var ratio = tx / drag.width;
                    var range = startRange + ratio * (max - min);

                    range = Math.max(min, Math.min(max, range));
                    self.range = range;
                },
                cancel: function cancel() {
                    doc.off('mousemove', drag.move);
                    self.drag = null;
                    doc = null;

                    self.active = false;
                }
            };

            this.active = true;

            doc.on('mousemove', drag.move);
            doc.one('mouseup', drag.cancel);
            doc.one('click', drag.docClick);
        },
        initOutClick: function initOutClick() {
            var self = this;
            var offOutClick = _utils2.default.addOutClick({
                element: this.$el,
                callback: function callback() {
                    self.active = false;
                }
            });

            this.$on('destroy', offOutClick);
        },
        onClickRange: function onClickRange(e) {
            if (e.target.classList.contains('ball')) {
                return false;
            }

            var offsetValue = e.clientX - this.$el.getBoundingClientRect().left;
            var percent = offsetValue / this.$el.scrollWidth;
            var edgeOmit = 0.04;

            if (percent <= edgeOmit || percent >= 1 - edgeOmit) {
                percent = Math.round(percent);
            }

            percent = this.min + (this.max - this.min) * percent;

            this.range = percent;

            this.onMousedown(e);
        },
        onWheel: function onWheel(e) {
            if (!this.wheel) {
                return;
            }

            e.preventDefault();
            var wheelMulti = e.shiftKey ? 0.5 : 0.1;
            var direction = e.wheelDelta > 0 ? -1 : 1;
            var range = this.range - (this.max - this.min) / 15 * direction * wheelMulti;
            range = Math.max(this.min, Math.min(this.max, range));

            this.range = range;
        }
    },

    mounted: function mounted() {
        this.range = this.value;

        this.$watch('value', function (a) {
            this.range = a;
        });

        this.$watch('range', function () {
            if (!this.change) {
                this.$emit('update:value', this.range);
            } else {
                this.change(this.range);
            }
        });

        this.initOutClick();
    },
    beforeDestroy: function beforeDestroy() {
        this.$emit('destroy');
    }
};
module.exports = exports['default'];