matting-editor/lib/widgets/matting-color-picker.js

matting-editor

'use strict';

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

var _mattingColorPicker = require('./matting-color-picker.html');

var _mattingColorPicker2 = _interopRequireDefault(_mattingColorPicker);

var _jquery = require('../utils/jquery.farbtastic');

var _jquery2 = _interopRequireDefault(_jquery);

var _colorHistory = require('../utils/color-history');

var _colorHistory2 = _interopRequireDefault(_colorHistory);

var _isDarkColor = require('../utils/is-dark-color');

var _isDarkColor2 = _interopRequireDefault(_isDarkColor);

var _onecolor = require('../utils/onecolor.shim');

var _onecolor2 = _interopRequireDefault(_onecolor);

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

exports.default = {
    template: _mattingColorPicker2.default,
    data: function data() {
        return {
            wheelWidth: 195,
            cacheColor: ''
        };
    },

    props: {
        value: {
            type: String,
            default: null
        },
        historyLimit: {
            type: Number,
            default: 12
        },
        showInput: {
            type: Boolean,
            default: true
        }
    },
    computed: {
        historys: function historys() {
            var size = this.historyLimit;

            return _colorHistory2.default.items.slice(0, size);
        },

        currentColor: {
            get: function get() {
                return this.value;
            },
            set: function set(color) {
                this.$emit('input', color);
            }
        }
    },
    methods: {
        init: function init() {
            var _this2 = this;

            var _this = this;
            var currColor = this.currentColor;

            this.picker = new _jquery2.default(this.$refs.panel, {
                width: this.wheelWidth,
                onMousedown: function onMousedown(color) {
                    _this.cacheColor = color;
                }
            });

            this.picker.linkTo(function (color) {
                _this2.currentColor = color;
            });

            if (currColor) {
                this.picker.setColor(currColor);
            }
        },
        isDark: function isDark(currentColor) {
            var color = (0, _onecolor2.default)(currentColor);
            return (0, _isDarkColor2.default)(color.red() * 255, color.green() * 255, color.blue() * 255);
        },
        setColor: function setColor(color) {
            this.currentColor = color;
        }
    },
    mounted: function mounted() {
        this.$nextTick(this.init);
    },
    beforeDestroy: function beforeDestroy() {
        var picker = this.picker;

        if (picker && picker.destroy) {
            picker.destroy();
        }

        this.picker = null;

        if (this.cacheColor !== '') {
            _colorHistory2.default.add(this.currentColor);
        }
    }
};