vue-poster-editor/lib/widgets/editor-color-wheel.js

A poster editor based on Vue.js

'use strict';

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

var _jquery = require('jquery');

var _jquery2 = _interopRequireDefault(_jquery);

require('@zsk526/jquery-minicolors');

var _editorColorWheel = require('./editor-color-wheel.html');

var _editorColorWheel2 = _interopRequireDefault(_editorColorWheel);

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

var defaultSwatches = ['#000000', '#792181', '#2D6EB7', '#666666', '#F29018', '#E7398E', '#5DBEEC', '#999899', '#F5C51D', '#E72761', '#63B962', '#CCCCCC', '#FFFF33', '#FFCCCC', '#A1D08D', '#FFFFFF'];

exports.default = {
    template: _editorColorWheel2.default,
    props: ['change', 'value'],
    data: function data() {
        return {
            swatches: [],
            color: '#000'
        };
    },

    methods: {
        set: function set(color) {
            this.color = color;
        },
        initWheel: function initWheel() {
            var self = this;
            this.element = (0, _jquery2.default)(this.$el);
            this.input = this.element.find('input.inp-picker');

            this.swatches = _jquery2.default.extend([], defaultSwatches, _jquery2.default.minicolors.defaults.swatches);

            this.input.minicolors({
                inline: true,
                format: 'hex',
                control: 'wheel',

                letterCase: 'uppercase',
                defaultValue: this.color,
                change: function change(color) {
                    self.color = color;
                }
            });
        }
    },
    mounted: function mounted() {
        this.value = this.value || '#fff';
        this.color = this.value;

        this.$watch('value', function (a) {
            if (!a) {
                a = 'rgba(0, 0, 0, 0)';
            }
            a = a.toUpperCase();

            this.color = a;

            var input = this.input;
            if (a !== input.minicolors('value')) {
                input.minicolors('value', a);
            }
        });

        this.$watch('color', function () {
            if (!this.change) {
                this.value = this.color;
            } else {
                this.change(this.color);
            }
        });

        this.initWheel();
    },
    beforeDestroy: function beforeDestroy() {
        this.input.minicolors('destroy');

        this.input = this.element = null;
    }
};
module.exports = exports['default'];