diff --git a/ChangeLogs.md b/ChangeLogs.md index f0a03fe..7dda647 100644 --- a/ChangeLogs.md +++ b/ChangeLogs.md @@ -1,7 +1,8 @@ # Change Logs -## 1.6.2 +## 1.6.3 +* Support Sketch Style * support color palette for image * support parsing for number color code (ex: 0xffffff -> {hex, r, g, b, a}) diff --git a/README.md b/README.md index c02021d..a5a6f29 100644 --- a/README.md +++ b/README.md @@ -139,6 +139,21 @@ You can set custom color paletts (ex : material, ...). +## Support Sketch Style + +```javascript +{ + colorpicker : { + mode : 'edit', + type: 'sketch' + } +} + +``` + + + + # Developments ## local dev diff --git a/addon/codemirror-colorpicker.css b/addon/codemirror-colorpicker.css index 8fd85f1..ac96ea0 100644 --- a/addon/codemirror-colorpicker.css +++ b/addon/codemirror-colorpicker.css @@ -31,7 +31,8 @@ background-color: #fff; border-radius: 3px; -webkit-box-shadow: 0 0px 10px 2px rgba(0, 0, 0, 0.12); - box-shadow: 0 0px 10px 2px rgba(0, 0, 0, 0.12); } + box-shadow: 0 0px 10px 2px rgba(0, 0, 0, 0.12); + /* theme */ } .codemirror-colorpicker > .arrow { position: absolute; top: -10px; @@ -513,6 +514,85 @@ padding: 0px; margin: 0px; pointer-events: none; } + .codemirror-colorpicker.sketch { + border-radius: 5px; } + .codemirror-colorpicker.sketch > .color { + margin: 10px 10px 2px 10px; + -webkit-box-sizing: border-box; + box-sizing: border-box; + height: 150px; } + .codemirror-colorpicker.sketch > .control { + padding: 0px; } + .codemirror-colorpicker.sketch > .control > .color, .codemirror-colorpicker.sketch > .control > .empty { + position: absolute; + right: 10px; + left: auto; + top: 1px; + width: 26px; + height: 26px; + border-radius: 2px; + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .codemirror-colorpicker.sketch > .control > .color { + -webkit-box-shadow: inset 0px 0px 1px 0px rgba(0, 0, 0, 0.5); + box-shadow: inset 0px 0px 1px 0px rgba(0, 0, 0, 0.5); } + .codemirror-colorpicker.sketch > .control > .hue { + position: relative; + padding: 2px 2px 2px 10px; + margin: 0px 38px 0px 0px; } + .codemirror-colorpicker.sketch > .control > .hue > .hue-container { + border-radius: 0px; } + .codemirror-colorpicker.sketch > .control > .opacity { + position: relative; + padding: 2px 2px 2px 10px; + margin: 0px 38px 0px 0px; } + .codemirror-colorpicker.sketch > .control > .opacity > .opacity-container { + border-radius: 0px; } + .codemirror-colorpicker.sketch > .control .drag-bar, .codemirror-colorpicker.sketch > .control .drag-bar2 { + border-radius: 0px; + top: 0px !important; + left: -2px; + margin-top: 1px !important; + width: 2px; + height: auto; + border-radius: 1px; + bottom: 1px !important; } + .codemirror-colorpicker.sketch > .information .information-change { + display: none; } + .codemirror-colorpicker.sketch > .information.rgb .information-item.rgb { + display: inherit; } + .codemirror-colorpicker.sketch > .information.hex .information-item.hex { + display: inherit; } + .codemirror-colorpicker.sketch > .information .information-item { + display: -webkit-inline-box !important; + display: -ms-inline-flexbox !important; + display: inline-flex !important; + margin-right: 0px; } + .codemirror-colorpicker.sketch > .information .information-item > .input-field > .title { + color: black; + font-size: 11px; } + .codemirror-colorpicker.sketch > .information .information-item > .input-field:last-child:not(:first-child) { + padding-right: 0px; } + .codemirror-colorpicker.sketch > .information .information-item.hsl { + display: none !important; } + .codemirror-colorpicker.sketch > .information .information-item.hex { + width: 80px; + padding-right: 0px; + padding-left: 5px; } + .codemirror-colorpicker.sketch > .information .information-item.rgb { + width: 140px; + padding-left: 0px; } + .codemirror-colorpicker.sketch > .colorsets > .menu { + display: none; } + .codemirror-colorpicker.sketch > .colorsets > .color-list { + margin-right: 0px; + padding-right: 12px; } + .codemirror-colorpicker.sketch > .colorsets > .color-list .color-item { + width: 16px; + height: 16px; + border-radius: 3px; + margin-right: 9px; + margin-bottom: 10px; } .colorsets-contextmenu { position: fixed; diff --git a/addon/codemirror-colorpicker.js b/addon/codemirror-colorpicker.js index 320d83c..48bc193 100644 --- a/addon/codemirror-colorpicker.js +++ b/addon/codemirror-colorpicker.js @@ -1296,6 +1296,16 @@ var Dom = function () { return this; } + }, { + key: 'cssFloat', + value: function cssFloat(key) { + return parseFloat(this.css(key)); + } + }, { + key: 'cssInt', + value: function cssInt(key) { + return parseInt(this.css(key)); + } }, { key: 'offset', value: function offset() { @@ -2196,9 +2206,12 @@ var ColorInformation = function (_EventMachin) { var rgb = null; if (format == 'hex') { this.$hexCode.val(this.convertHEX()); + var rgb = this.convertRGB(); + this.setRGBInput(rgb.r, rgb.g, rgb.b, rgb.a); } else if (format == 'rgb') { var rgb = this.convertRGB(); this.setRGBInput(rgb.r, rgb.g, rgb.b, rgb.a); + this.$hexCode.val(this.convertHEX()); } else if (format == 'hsl') { var hsl = this.convertHSL(); this.setHSLInput(hsl.h, hsl.s, hsl.l, hsl.a); @@ -2287,6 +2300,7 @@ var ColorInformation = function (_EventMachin) { if (code.charAt(0) == '#' && code.length == 7) { this.colorpicker.changeInformationColor(code); + this.setInputColor(); } } }, { @@ -2362,9 +2376,9 @@ var ColorPallet = function (_EventMachin) { key: 'setMainColor', value: function setMainColor(e) { e.preventDefault(); - var pos = this.colorpicker.$root.position(); // position for screen - var w = this.$el.width(); - var h = this.$el.height(); + var pos = this.$el.position(); // position for screen + var w = this.$el.width() - this.$el.cssFloat('padding-left') - this.$el.cssFloat('padding-right'); + var h = this.$el.height() - this.$el.cssFloat('padding-top') - this.$el.cssFloat('padding-bottom'); var x = e.clientX - pos.left; var y = e.clientY - pos.top; @@ -2929,12 +2943,25 @@ var ColorPicker = function (_EventMachin) { value: function getOption(key) { return this.opt[key]; } + }, { + key: 'getContainer', + value: function getContainer() { + return this.opt.container || document.body; + } }, { key: 'initialize', value: function initialize() { - this.$body = new Dom(this.opt.container || document.body); + this.$body = new Dom(this.getContainer()); this.$root = new Dom('div', 'codemirror-colorpicker'); + // append colorpicker to container (ex : body) + this.$body.append(this.$root); + + if (this.opt.type) { + // to change css style + this.$root.addClass(this.opt.type); + } + this.$arrow = new Dom('div', 'arrow'); this.$root.append(this.$arrow); @@ -2947,7 +2974,10 @@ var ColorPicker = function (_EventMachin) { this.$checkColorPickerClass = this.checkColorPickerClass.bind(this); - this.initColor(); + this.initColor(this.opt.color); + + // register all events + this.initializeEvent(); } }, { key: 'showContextMenu', @@ -3013,18 +3043,34 @@ var ColorPicker = function (_EventMachin) { top: elementScreenTop + 'px' }); } + }, { + key: 'getInitalizePosition', + value: function getInitalizePosition() { + if (this.opt.position == 'inline') { + return { + position: 'relative', + left: 'auto', + top: 'auto', + display: 'inline-block' + }; + } else { + return { + position: 'fixed', // color picker has fixed position + left: '-10000px', + top: '-10000px' + }; + } + } }, { key: 'show', value: function show(opt, color$$1, callback) { + var _this2 = this; + this.destroy(); this.initializeEvent(); - this.$root.appendTo(document.body); + this.$root.appendTo(this.$body); - this.$root.css({ - position: 'fixed', // color picker has fixed position - left: '-10000px', - top: '-10000px' - }).show(); + this.$root.css(this.getInitalizePosition()).show(); this.definePosition(opt); @@ -3036,6 +3082,9 @@ var ColorPicker = function (_EventMachin) { // define colorpicker callback this.colorpickerCallback = function (colorString) { + if (typeof _this2.opt.onChange == 'function') { + _this2.opt.onChange(colorString); + } callback(colorString); }; @@ -3048,7 +3097,7 @@ var ColorPicker = function (_EventMachin) { }, { key: 'setHideDelay', value: function setHideDelay(delayTime) { - var _this2 = this; + var _this3 = this; delayTime = delayTime || 0; @@ -3056,12 +3105,12 @@ var ColorPicker = function (_EventMachin) { this.$root.off('mouseleave'); this.$root.on('mouseenter', function () { - clearTimeout(_this2.timerCloseColorPicker); + clearTimeout(_this3.timerCloseColorPicker); }); this.$root.on('mouseleave', function () { - clearTimeout(_this2.timerCloseColorPicker); - _this2.timerCloseColorPicker = setTimeout(_this2.hide.bind(_this2), delayTime); + clearTimeout(_this3.timerCloseColorPicker); + _this3.timerCloseColorPicker = setTimeout(_this3.hide.bind(_this3), delayTime); }); clearTimeout(this.timerCloseColorPicker); @@ -3133,8 +3182,13 @@ var ColorPicker = function (_EventMachin) { }, { key: 'callbackColorValue', value: function callbackColorValue() { - if (typeof this.colorpickerCallback == 'function') { + if (typeof this.opt.onChange == 'function') { + if (!isNaN(this.currentA)) { + this.opt.onChange(this.getCurrentColor()); + } + } + if (typeof this.colorpickerCallback == 'function') { if (!isNaN(this.currentA)) { this.colorpickerCallback(this.getCurrentColor()); } @@ -3747,1547 +3801,6 @@ var ColorView = function () { return ColorView; }(); -var ChromeColorControl = function (_EventMachin) { - inherits(ChromeColorControl, _EventMachin); - - function ChromeColorControl(colorpicker) { - classCallCheck(this, ChromeColorControl); - - var _this = possibleConstructorReturn(this, (ChromeColorControl.__proto__ || Object.getPrototypeOf(ChromeColorControl)).call(this)); - - _this.colorpicker = colorpicker; - _this.initialize(); - return _this; - } - - createClass(ChromeColorControl, [{ - key: 'initialize', - value: function initialize() { - this.$el = new Dom('div', 'control'); - this.$hue = this.$el.createChild('div', 'hue'); - this.$opacity = this.$el.createChild('div', 'opacity'); - this.$controlPattern = this.$el.createChild('div', 'empty'); - this.$controlColor = this.$el.createChild('div', 'color'); - - this.$hueContainer = this.$hue.createChild('div', 'hue-container'); - this.$drag_bar = this.$hueContainer.createChild('div', 'drag-bar'); - this.drag_bar_pos = {}; - - this.$opacityContainer = this.$opacity.createChild('div', 'opacity-container'); - this.$opacityColorBar = this.$opacityContainer.createChild('div', 'color-bar'); - - this.$opacity_drag_bar = this.$opacityContainer.createChild('div', 'drag-bar2'); - this.opacity_drag_bar_pos = {}; - } - }, { - key: 'setBackgroundColor', - value: function setBackgroundColor(color$$1) { - this.$controlColor.css("background-color", color$$1); - } - }, { - key: 'refresh', - value: function refresh() { - this.setColorUI(); - } - }, { - key: 'setColorUI', - value: function setColorUI() { - var x = this.$el.width() * this.colorpicker.currentS, - y = this.$el.height() * (1 - this.colorpicker.currentV); - - this.$drag_pointer.css({ - left: x - 5 + "px", - top: y - 5 + "px" - }); - } - }, { - key: 'setMainColor', - value: function setMainColor(e) { - e.preventDefault(); - var pos = this.colorpicker.$root.position(); // position for screen - var w = $color.width(); - var h = $color.height(); - - var x = e.clientX - pos.left; - var y = e.clientY - pos.top; - - if (x < 0) x = 0;else if (x > w) x = w; - - if (y < 0) y = 0;else if (y > h) y = h; - - this.$drag_pointer.css({ - left: x - 5 + 'px', - top: y - 5 + 'px' - }); - - this.colorpicker.caculateHSV(); - this.colorpicker.setInputColor(); - } - }, { - key: 'setOpacityColorBar', - value: function setOpacityColorBar(hueColor) { - var rgb = color.parse(hueColor); - - rgb.a = 0; - var start = color.format(rgb, 'rgb'); - - rgb.a = 1; - var end = color.format(rgb, 'rgb'); - - this.$opacityColorBar.css('background', 'linear-gradient(to right, ' + start + ', ' + end + ')'); - } - }, { - key: 'setOpacity', - value: function setOpacity(e) { - var min = this.$opacityContainer.offset().left; - var max = min + this.$opacityContainer.width(); - var current = Event.pos(e).clientX; - var dist; - - if (current < min) { - dist = 0; - } else if (current > max) { - dist = 100; - } else { - dist = (current - min) / (max - min) * 100; - } - - var x = this.$opacityContainer.width() * (dist / 100); - - this.$opacity_drag_bar.css({ - left: x - Math.ceil(this.$opacity_drag_bar.width() / 2) + 'px' - }); - - this.opacity_drag_bar_pos = { x: x }; - - this.colorpicker.setCurrentA(this.caculateOpacity()); - this.colorpicker.currentFormat(); - this.colorpicker.setInputColor(); - } - }, { - key: 'setInputColor', - value: function setInputColor() { - this.setBackgroundColor(this.colorpicker.getFormattedColor('rgb')); - - var rgb = this.colorpicker.convertRGB(); - var colorString = color.format(rgb, 'rgb'); - this.setOpacityColorBar(colorString); - } - }, { - key: 'setColorUI', - value: function setColorUI() { - - var hueX = this.$hueContainer.width() * (this.colorpicker.currentH / 360); - - this.$drag_bar.css({ - left: hueX - 7.5 + 'px' - }); - - this.drag_bar_pos = { x: hueX }; - - var opacityX = this.$opacityContainer.width() * (this.colorpicker.currentA || 0); - - this.$opacity_drag_bar.css({ - left: opacityX - 7.5 + 'px' - }); - - this.opacity_drag_bar_pos = { x: opacityX }; - } - }, { - key: 'caculateH', - value: function caculateH() { - - var huePos = this.drag_bar_pos || { x: 0 }; - - var h = huePos.x / this.$hueContainer.width() * 360; - - return { h: h }; - } - }, { - key: 'caculateOpacity', - value: function caculateOpacity() { - var opacityPos = this.opacity_drag_bar_pos || { x: 0 }; - var a = Math.round(opacityPos.x / this.$opacityContainer.width() * 100) / 100; - - return isNaN(a) ? 1 : a; - } - }, { - key: 'EventDocumentMouseMove', - value: function EventDocumentMouseMove(e) { - if (this.isHueDown) { - this.setHueColor(e); - } - - if (this.isOpacityDown) { - this.setOpacity(e); - } - } - }, { - key: 'EventDocumentMouseUp', - value: function EventDocumentMouseUp(e) { - this.isHueDown = false; - this.isOpacityDown = false; - } - }, { - key: 'setControlColor', - value: function setControlColor(color$$1) { - this.$controlColor.css('background-color', color$$1); - } - }, { - key: 'setHueColor', - value: function setHueColor(e) { - var min = this.$hueContainer.offset().left; - var max = min + this.$hueContainer.width(); - var current = e ? Event.pos(e).clientX : min + (max - min) * (this.colorpicker.currentH / 360); - - var dist; - if (current < min) { - dist = 0; - } else if (current > max) { - dist = 100; - } else { - dist = (current - min) / (max - min) * 100; - } - - var x = this.$hueContainer.width() * (dist / 100); - - this.$drag_bar.css({ - left: x - Math.ceil(this.$drag_bar.width() / 2) + 'px' - }); - - this.drag_bar_pos = { x: x }; - - var hueColor = HueColor.checkHueColor(dist / 100); - - this.colorpicker.setBackgroundColor(hueColor); - this.colorpicker.setCurrentH(dist / 100 * 360); - this.colorpicker.setInputColor(); - } - }, { - key: 'setOnlyHueColor', - value: function setOnlyHueColor() { - var min = this.$hueContainer.offset().left; - var max = min + this.$hueContainer.width(); - var current = min + (max - min) * (this.colorpicker.currentH / 360); - var dist; - if (current < min) { - dist = 0; - } else if (current > max) { - dist = 100; - } else { - dist = (current - min) / (max - min) * 100; - } - - var x = this.$hueContainer.width() * (dist / 100); - - this.$drag_bar.css({ - left: x - Math.ceil(this.$drag_bar.width() / 2) + 'px' - }); - - this.drag_bar_pos = { x: x }; - - var hueColor = HueColor.checkHueColor(dist / 100); - this.colorpicker.setBackgroundColor(hueColor); - this.colorpicker.setCurrentH(dist / 100 * 360); - } - }, { - key: 'mousedown $drag_bar', - value: function mousedown$drag_bar(e) { - e.preventDefault(); - this.isHueDown = true; - } - }, { - key: 'mousedown $opacity_drag_bar', - value: function mousedown$opacity_drag_bar(e) { - e.preventDefault(); - this.isOpacityDown = true; - } - }, { - key: 'mousedown $hueContainer', - value: function mousedown$hueContainer(e) { - this.isHueDown = true; - this.setHueColor(e); - } - }, { - key: 'mousedown $opacityContainer', - value: function mousedown$opacityContainer(e) { - this.isOpacityDown = true; - this.setOpacity(e); - } - }]); - return ChromeColorControl; -}(EventMachin); - -var ChromeColorInformation = function (_EventMachin) { - inherits(ChromeColorInformation, _EventMachin); - - function ChromeColorInformation(colorpicker) { - classCallCheck(this, ChromeColorInformation); - - var _this = possibleConstructorReturn(this, (ChromeColorInformation.__proto__ || Object.getPrototypeOf(ChromeColorInformation)).call(this)); - - _this.colorpicker = colorpicker; - _this.initialize(); - - return _this; - } - - createClass(ChromeColorInformation, [{ - key: 'initialize', - value: function initialize() { - this.$el = new Dom('div', 'information hex'); - - this.$informationChange = this.$el.createChild('div', 'information-change'); - - this.$formatChangeButton = this.$informationChange.createChild('button', 'format-change-button arrow-button', { type: 'button' }); - - this.$el.append(this.makeInputFieldHex()); - this.$el.append(this.makeInputFieldRgb()); - this.$el.append(this.makeInputFieldHsl()); - - this.format = 'hex'; - } - }, { - key: 'makeInputFieldHex', - value: function makeInputFieldHex() { - var item = new Dom('div', 'information-item hex'); - var field = item.createChild('div', 'input-field hex'); - - this.$hexCode = field.createChild('input', 'input', { type: 'text' }); - - field.createChild('div', 'title').html('HEX'); - - return item; - } - }, { - key: 'makeInputFieldRgb', - value: function makeInputFieldRgb() { - var item = new Dom('div', 'information-item rgb'); - - var field = item.createChild('div', 'input-field rgb-r'); - this.$rgb_r = field.createChild('input', 'input', { type: 'number', step: 1, min: 0, max: 255 }); - field.createChild('div', 'title').html('R'); - - field = item.createChild('div', 'input-field rgb-g'); - this.$rgb_g = field.createChild('input', 'input', { type: 'number', step: 1, min: 0, max: 255 }); - field.createChild('div', 'title').html('G'); - - field = item.createChild('div', 'input-field rgb-b'); - this.$rgb_b = field.createChild('input', 'input', { type: 'number', step: 1, min: 0, max: 255 }); - field.createChild('div', 'title').html('B'); - - // rgba - field = item.createChild('div', 'input-field rgb-a'); - this.$rgb_a = field.createChild('input', 'input', { type: 'number', step: 0.01, min: 0, max: 1 }); - field.createChild('div', 'title').html('A'); - - return item; - } - }, { - key: 'makeInputFieldHsl', - value: function makeInputFieldHsl() { - var item = new Dom('div', 'information-item hsl'); - - var field = item.createChild('div', 'input-field hsl-h'); - this.$hsl_h = field.createChild('input', 'input', { type: 'number', step: 1, min: 0, max: 360 }); - field.createChild('div', 'title').html('H'); - - field = item.createChild('div', 'input-field hsl-s'); - this.$hsl_s = field.createChild('input', 'input', { type: 'number', step: 1, min: 0, max: 100 }); - field.createChild('div', 'postfix').html('%'); - field.createChild('div', 'title').html('S'); - - field = item.createChild('div', 'input-field hsl-l'); - this.$hsl_l = field.createChild('input', 'input', { type: 'number', step: 1, min: 0, max: 100 }); - field.createChild('div', 'postfix').html('%'); - field.createChild('div', 'title').html('L'); - - // rgba - field = item.createChild('div', 'input-field hsl-a'); - this.$hsl_a = field.createChild('input', 'input', { type: 'number', step: 0.01, min: 0, max: 1 }); - field.createChild('div', 'title').html('A'); - - return item; - } - }, { - key: 'currentFormat', - value: function currentFormat() { - var current_format = this.format || 'hex'; - if (this.colorpicker.currentA < 1 && current_format == 'hex') { - var next_format = 'rgb'; - this.$el.removeClass(current_format); - this.$el.addClass(next_format); - this.format = next_format; - - this.colorpicker.setInputColor(); - } - } - }, { - key: 'setCurrentFormat', - value: function setCurrentFormat(format) { - this.format = format; - this.initFormat(); - } - }, { - key: 'initFormat', - value: function initFormat() { - var current_format = this.format || 'hex'; - - this.$el.removeClass('hex'); - this.$el.removeClass('rgb'); - this.$el.removeClass('hsl'); - this.$el.addClass(current_format); - } - }, { - key: 'nextFormat', - value: function nextFormat() { - var current_format = this.format || 'hex'; - - var next_format = 'hex'; - if (current_format == 'hex') { - next_format = 'rgb'; - } else if (current_format == 'rgb') { - next_format = 'hsl'; - } else if (current_format == 'hsl') { - if (this.colorpicker.currentA == 1) { - next_format = 'hex'; - } else { - next_format = 'rgb'; - } - } - - this.$el.removeClass(current_format); - this.$el.addClass(next_format); - this.format = next_format; - - this.setInputColor(); - this.colorpicker.changeInputColorAfterNextFormat(); - } - }, { - key: 'setRGBInput', - value: function setRGBInput(r, g, b) { - this.$rgb_r.val(r); - this.$rgb_g.val(g); - this.$rgb_b.val(b); - this.$rgb_a.val(this.colorpicker.currentA); - } - }, { - key: 'setHSLInput', - value: function setHSLInput(h, s, l) { - this.$hsl_h.val(h); - this.$hsl_s.val(s); - this.$hsl_l.val(l); - this.$hsl_a.val(this.colorpicker.currentA); - } - }, { - key: 'getHexFormat', - value: function getHexFormat() { - return color.format({ - r: this.$rgb_r.int(), - g: this.$rgb_g.int(), - b: this.$rgb_b.int() - }, 'hex'); - } - }, { - key: 'getRgbFormat', - value: function getRgbFormat() { - return color.format({ - r: this.$rgb_r.int(), - g: this.$rgb_g.int(), - b: this.$rgb_b.int(), - a: this.$rgb_a.float() - }, 'rgb'); - } - }, { - key: 'getHslFormat', - value: function getHslFormat() { - return color.format({ - h: this.$hsl_h.val(), - s: this.$hsl_s.val(), - l: this.$hsl_l.val(), - a: this.$hsl_a.float() - }, 'hsl'); - } - }, { - key: 'convertRGB', - value: function convertRGB() { - return this.colorpicker.convertRGB(); - } - }, { - key: 'convertHEX', - value: function convertHEX() { - return this.colorpicker.convertHEX(); - } - }, { - key: 'convertHSL', - value: function convertHSL() { - return this.colorpicker.convertHSL(); - } - }, { - key: 'getFormattedColor', - value: function getFormattedColor(format) { - var fixed = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; - - format = format || this.getFormat(); - if (format == 'hex') { - return this.$hexCode.val(); - } else if (format == 'rgb') { - return this.getRgbFormat(fixed); - } else if (format == 'hsl') { - return this.getHslFormat(fixed); - } - } - }, { - key: 'getFormat', - value: function getFormat() { - return this.format || 'hex'; - } - }, { - key: 'setInputColor', - value: function setInputColor() { - var format = this.getFormat(); - - var rgb = null; - if (format == 'hex') { - this.$hexCode.val(this.convertHEX()); - } else if (format == 'rgb') { - var rgb = this.convertRGB(); - this.setRGBInput(rgb.r, rgb.g, rgb.b, rgb.a); - } else if (format == 'hsl') { - var hsl = this.convertHSL(); - this.setHSLInput(hsl.h, hsl.s, hsl.l, hsl.a); - } - } - }, { - key: 'checkNumberKey', - value: function checkNumberKey(e) { - return Event.checkNumberKey(e); - } - }, { - key: 'checkNotNumberKey', - value: function checkNotNumberKey(e) { - return !Event.checkNumberKey(e); - } - - //'keydown.checkNotNumberKey $rgb_r' (e) { e.preventDefault(); } - //'keydown.checkNotNumberKey $rgb_g' (e) { e.preventDefault(); } - //'keydown.checkNotNumberKey $rgb_b' (e) { e.preventDefault(); } - - //'keydown.checkNumberKey $rgb_r' (e) { this.setRGBtoHexColor(e); } - //'keydown.checkNumberKey $rgb_g' (e) { this.setRGBtoHexColor(e); } - //'keydown.checkNumberKey $rgb_b' (e) { this.setRGBtoHexColor(e); } - - }, { - key: 'changeRgbColor', - value: function changeRgbColor() { - this.colorpicker.changeInformationColor(this.getRgbFormat()); - } - }, { - key: 'changeHslColor', - value: function changeHslColor() { - this.colorpicker.changeInformationColor(this.getHslFormat()); - } - }, { - key: 'change $rgb_r', - value: function change$rgb_r(e) { - this.changeRgbColor(); - } - }, { - key: 'change $rgb_g', - value: function change$rgb_g(e) { - this.changeRgbColor(); - } - }, { - key: 'change $rgb_b', - value: function change$rgb_b(e) { - this.changeRgbColor(); - } - }, { - key: 'change $rgb_a', - value: function change$rgb_a(e) { - this.changeRgbColor(); - } - }, { - key: 'change $hsl_h', - value: function change$hsl_h(e) { - this.changeHslColor(); - } - }, { - key: 'change $hsl_s', - value: function change$hsl_s(e) { - this.changeHslColor(); - } - }, { - key: 'change $hsl_l', - value: function change$hsl_l(e) { - this.changeHslColor(); - } - }, { - key: 'change $hsl_a', - value: function change$hsl_a(e) { - this.changeHslColor(); - } - }, { - key: 'keydown $hexCode', - value: function keydown$hexCode(e) { - if (e.which < 65 || e.which > 70) { - return this.checkNumberKey(e); - } - } - }, { - key: 'keyup $hexCode', - value: function keyup$hexCode(e) { - var code = this.$hexCode.val(); - - if (code.charAt(0) == '#' && code.length == 7) { - this.colorpicker.changeInformationColor(code); - } - } - }, { - key: 'click $formatChangeButton', - value: function click$formatChangeButton(e) { - this.nextFormat(); - } - }, { - key: 'refresh', - value: function refresh() {} - }]); - return ChromeColorInformation; -}(EventMachin); - -var ChromeColorPallet = function (_EventMachin) { - inherits(ChromeColorPallet, _EventMachin); - - function ChromeColorPallet(colorpicker) { - classCallCheck(this, ChromeColorPallet); - - var _this = possibleConstructorReturn(this, (ChromeColorPallet.__proto__ || Object.getPrototypeOf(ChromeColorPallet)).call(this)); - - _this.colorpicker = colorpicker; - _this.initialize(); - return _this; - } - - createClass(ChromeColorPallet, [{ - key: 'initialize', - value: function initialize() { - this.$el = new Dom('div', 'color'); - this.$saturation = this.$el.createChild('div', 'saturation'); - this.$value = this.$saturation.createChild('div', 'value'); - this.$drag_pointer = this.$value.createChild('div', 'drag-pointer'); - } - }, { - key: 'setBackgroundColor', - value: function setBackgroundColor(color$$1) { - this.$el.css("background-color", color$$1); - } - }, { - key: 'refresh', - value: function refresh() { - this.setColorUI(); - } - }, { - key: 'caculateSV', - value: function caculateSV() { - var pos = this.drag_pointer_pos || { x: 0, y: 0 }; - - var width = this.$el.width(); - var height = this.$el.height(); - - var s = pos.x / width; - var v = (height - pos.y) / height; - - return { s: s, v: v, width: width, height: height }; - } - }, { - key: 'setColorUI', - value: function setColorUI() { - var x = this.$el.width() * this.colorpicker.currentS, - y = this.$el.height() * (1 - this.colorpicker.currentV); - - this.$drag_pointer.css({ - left: x - 5 + "px", - top: y - 5 + "px" - }); - - this.drag_pointer_pos = { x: x, y: y }; - } - }, { - key: 'setMainColor', - value: function setMainColor(e) { - e.preventDefault(); - var pos = this.$el.position(); - var w = this.$el.width(); - var h = this.$el.height(); - - var x = e.clientX - pos.left; - var y = e.clientY - pos.top; - - if (x < 0) x = 0;else if (x > w) x = w; - - if (y < 0) y = 0;else if (y > h) y = h; - - this.$drag_pointer.css({ - left: x - 5 + 'px', - top: y - 5 + 'px' - }); - - this.drag_pointer_pos = { x: x, y: y }; - - this.colorpicker.caculateHSV(); - this.colorpicker.setInputColor(); - } - }, { - key: 'EventDocumentMouseUp', - value: function EventDocumentMouseUp(e) { - this.isDown = false; - } - }, { - key: 'EventDocumentMouseMove', - value: function EventDocumentMouseMove(e) { - if (this.isDown) { - this.setMainColor(e); - } - } - }, { - key: 'mousedown', - value: function mousedown(e) { - this.isDown = true; - this.setMainColor(e); - } - }, { - key: 'mouseup', - value: function mouseup(e) { - this.isDown = false; - } - }]); - return ChromeColorPallet; -}(EventMachin); - -var DATA_COLORSETS_INDEX$1 = 'data-colorsets-index'; - -var ChromeColorSetsChooser = function (_EventMachin) { - inherits(ChromeColorSetsChooser, _EventMachin); - - function ChromeColorSetsChooser(colorpicker) { - classCallCheck(this, ChromeColorSetsChooser); - - var _this = possibleConstructorReturn(this, (ChromeColorSetsChooser.__proto__ || Object.getPrototypeOf(ChromeColorSetsChooser)).call(this)); - - _this.colorpicker = colorpicker; - - _this.initialize(); - return _this; - } - - createClass(ChromeColorSetsChooser, [{ - key: 'initialize', - value: function initialize() { - // make colorset-chooser - this.$el = new Dom('div', 'color-chooser'); - - var $container = this.$el.createChild('div', 'color-chooser-container'); - - var $header = $container.createChild('div', 'colorsets-item colorsets-item-header'); - - $header.createChild('h1', 'title').html('Color Paletts'); - - this.$toggleButton = $header.createChild('span', 'items').html('×'); - - this.$colorsetsList = $container.createChild('div', 'colorsets-list'); - - this.refresh(); - } - }, { - key: 'refresh', - value: function refresh() { - this.$colorsetsList.html(this.makeColorSetsList()); - } - }, { - key: 'makeColorItemList', - value: function makeColorItemList(colors) { - var maxCount = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 5; - - var $list = new Dom('div'); - - for (var i = 0; i < maxCount; i++) { - var color$$1 = colors[i] || 'rgba(255, 255, 255, 1)'; - var $item = $list.createChild('div', 'color-item', { - title: color$$1 - }); - - $item.createChild('div', 'color-view', null, { - 'background-color': color$$1 - }); - } - - return $list; - } - }, { - key: 'makeColorSetsList', - value: function makeColorSetsList() { - var _this2 = this; - - var $div = new Dom('div'); - - // colorsets - var colorSets = this.colorpicker.getColorSetsList(); - colorSets.forEach(function (element, index) { - var $item = $div.createChild('div', 'colorsets-item', defineProperty({}, DATA_COLORSETS_INDEX$1, index)); - - $item.createChild('h1', 'title').html(element.name); - - $item.createChild('div', 'items').append(_this2.makeColorItemList(element.colors, 5)); - }); - - return $div; - } - }, { - key: 'show', - value: function show() { - this.$el.addClass('open'); - } - }, { - key: 'hide', - value: function hide() { - this.$el.removeClass('open'); - } - }, { - key: 'toggle', - value: function toggle() { - this.$el.toggleClass('open'); - } - }, { - key: 'click $toggleButton', - value: function click$toggleButton(e) { - this.toggle(); - } - }, { - key: 'click $colorsetsList', - value: function click$colorsetsList(e) { - e.preventDefault(); - var $item = new Dom(e.target).closest('colorsets-item'); - - if ($item) { - - var index = parseInt($item.attr(DATA_COLORSETS_INDEX$1)); - this.colorpicker.setCurrentColorSets(index); - this.hide(); - } - } - }, { - key: 'destroy', - value: function destroy() { - get(ChromeColorSetsChooser.prototype.__proto__ || Object.getPrototypeOf(ChromeColorSetsChooser.prototype), 'destroy', this).call(this); - - this.hide(); - } - }]); - return ChromeColorSetsChooser; -}(EventMachin); - -var colorSetsList$1 = [{ - name: "Material", - colors: ['#F44336', '#E91E63', '#9C27B0', '#673AB7', '#3F51B5', '#2196F3', '#03A9F4', '#00BCD4', '#009688', '#4CAF50', '#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800', '#FF5722', '#795548', '#9E9E9E', '#607D8B'] -}, { - name: "Custom", "edit": true, "colors": [] -}, { - name: "Color Scale", "scale": ['red', 'yellow', 'black'], count: 5 -}]; - -var ChromeColorSetsList = function () { - function ChromeColorSetsList(colorpicker) { - classCallCheck(this, ChromeColorSetsList); - - this.colorpicker = colorpicker; - - this.setUserList(this.colorpicker.getOption('colorSets')); - } - - createClass(ChromeColorSetsList, [{ - key: 'list', - value: function list() { - return this.userList || colorSetsList$1; - } - }, { - key: 'setUserList', - value: function setUserList(list) { - this.userList = list; - - this.resetUserList(); - - this.setCurrentColorSets(); - } - }, { - key: 'resetUserList', - value: function resetUserList() { - var _this = this; - - if (this.userList && this.userList.length) { - this.userList = this.userList.map(function (element, index) { - - if (typeof element.colors == 'function') { - var makeCallback = element.colors; - - element.colors = makeCallback(_this.colorpicker, _this); - element._colors = makeCallback; - } - - return Object.assign({ - name: 'color-' + index, - colors: [] - }, element); - }); - } - } - }, { - key: 'setCurrentColorSets', - value: function setCurrentColorSets(nameOrIndex) { - - var _list = this.list(); - - if (typeof nameOrIndex == 'undefined') { - this.currentColorSets = _list[0]; - } else if (typeof nameOrIndex == 'number') { - this.currentColorSets = _list[nameOrIndex]; - } else { - this.currentColorSets = _list.filter(function (obj) { - return obj.name == nameOrIndex; - })[0]; - } - } - }, { - key: 'getCurrentColorSets', - value: function getCurrentColorSets() { - return this.currentColorSets; - } - }, { - key: 'addCurrentColor', - value: function addCurrentColor(color$$1) { - if (Array.isArray(this.currentColorSets.colors)) { - this.currentColorSets.colors.push(color$$1); - } - } - }, { - key: 'removeCurrentColor', - value: function removeCurrentColor(index) { - if (this.currentColorSets.colors[index]) { - this.currentColorSets.colors.splice(index, 1); - } - } - }, { - key: 'removeCurrentColorToTheRight', - value: function removeCurrentColorToTheRight(index) { - if (this.currentColorSets.colors[index]) { - this.currentColorSets.colors.splice(index, Number.MAX_VALUE); - } - } - }, { - key: 'clearPalette', - value: function clearPalette() { - if (this.currentColorSets.colors) { - this.currentColorSets.colors = []; - } - } - }, { - key: 'getCurrentColors', - value: function getCurrentColors() { - return this.getColors(this.currentColorSets); - } - }, { - key: 'getColors', - value: function getColors(element) { - - if (element.scale) { - return color.scale(element.scale, element.count); - } - - return element.colors || []; - } - }, { - key: 'getColorSetsList', - value: function getColorSetsList() { - var _this2 = this; - - return this.list().map(function (element) { - return { - name: element.name, - colors: _this2.getColors(element) - }; - }); - } - }, { - key: 'destroy', - value: function destroy() {} - }]); - return ChromeColorSetsList; -}(); - -var ChromeCurrentColorSets = function (_EventMachin) { - inherits(ChromeCurrentColorSets, _EventMachin); - - function ChromeCurrentColorSets(colorpicker) { - classCallCheck(this, ChromeCurrentColorSets); - - var _this = possibleConstructorReturn(this, (ChromeCurrentColorSets.__proto__ || Object.getPrototypeOf(ChromeCurrentColorSets)).call(this)); - - _this.colorpicker = colorpicker; - - _this.colorSetsList = _this.colorpicker.colorSetsList; - - _this.initialize(); - return _this; - } - - createClass(ChromeCurrentColorSets, [{ - key: 'makeCurrentColorSets', - value: function makeCurrentColorSets() { - var list = new Dom('div', 'current-color-sets'); - var currentColorSets = this.colorSetsList.getCurrentColorSets(); - var colors = this.colorSetsList.getCurrentColors(); - - for (var i = 0, len = colors.length; i < len; i++) { - var color$$1 = colors[i]; - var item = list.createChild('div', 'color-item', { - 'title': color$$1, - 'data-index': i, - 'data-color': color$$1 - }); - - item.createChild('div', 'empty'); - item.createChild('div', 'color-view', null, { - 'background-color': color$$1 - }); - } - - if (currentColorSets.edit) { - list.createChild('div', 'add-color-item').html('+'); - } - - return list; - } - }, { - key: 'initialize', - value: function initialize() { - // make colorsets view - this.$el = new Dom('div', 'colorsets'); - - var $colorSetsMenu = this.$el.createChild('div', 'menu', { - title: 'Open Color Pallets' - }); - this.$colorSetsColorList = this.$el.createChild('div', 'color-list'); - - this.$colorSetsChooseButton = $colorSetsMenu.createChild('button', 'color-sets-choose-btn arrow-button', { - type: 'button' - }); - - this.refresh(); - } - }, { - key: 'refresh', - value: function refresh() { - this.$colorSetsColorList.html(this.makeCurrentColorSets()); - } - }, { - key: 'refreshAll', - value: function refreshAll() { - this.refresh(); - this.colorpicker.refreshColorSetsChooser(); - } - }, { - key: 'addColor', - value: function addColor(color$$1) { - this.colorSetsList.addCurrentColor(color$$1); - this.refreshAll(); - } - }, { - key: 'removeColor', - value: function removeColor(index) { - this.colorSetsList.removeCurrentColor(index); - this.refreshAll(); - } - }, { - key: 'removeAllToTheRight', - value: function removeAllToTheRight(index) { - this.colorSetsList.removeCurrentColorToTheRight(index); - this.refreshAll(); - } - }, { - key: 'clearPalette', - value: function clearPalette() { - this.colorSetsList.clearPalette(); - this.refreshAll(); - } - }, { - key: 'click $colorSetsChooseButton', - value: function click$colorSetsChooseButton(e) { - this.colorpicker.toggleColorChooser(); - } - }, { - key: 'contextmenu $colorSetsColorList', - value: function contextmenu$colorSetsColorList(e) { - e.preventDefault(); - var currentColorSets = this.colorSetsList.getCurrentColorSets(); - - if (!currentColorSets.edit) { - return; - } - - var $target = new Dom(e.target); - - var $item = $target.closest('color-item'); - - if ($item) { - var index = parseInt($item.attr('data-index')); - - this.colorpicker.showContextMenu(e, index); - } else { - this.colorpicker.showContextMenu(e); - } - } - }, { - key: 'click $colorSetsColorList .add-color-item', - value: function click$colorSetsColorListAddColorItem(e) { - this.addColor(this.colorpicker.getCurrentColor()); - } - }, { - key: 'click $colorSetsColorList .color-item', - value: function click$colorSetsColorListColorItem(e) { - this.colorpicker.setColor(e.$delegateTarget.attr('data-color')); - } - }]); - return ChromeCurrentColorSets; -}(EventMachin); - -var ChromeCurrentColorSetsContextMenu = function (_EventMachin) { - inherits(ChromeCurrentColorSetsContextMenu, _EventMachin); - - function ChromeCurrentColorSetsContextMenu(colorpicker) { - classCallCheck(this, ChromeCurrentColorSetsContextMenu); - - var _this = possibleConstructorReturn(this, (ChromeCurrentColorSetsContextMenu.__proto__ || Object.getPrototypeOf(ChromeCurrentColorSetsContextMenu)).call(this)); - - _this.colorpicker = colorpicker; - _this.currentColorSets = colorpicker.currentColorSets; - - _this.initialize(); - return _this; - } - - createClass(ChromeCurrentColorSetsContextMenu, [{ - key: 'initialize', - value: function initialize() { - // make colorsets view - this.$el = new Dom('ul', 'colorsets-contextmenu'); - - this.$el.createChild('li', 'menu-item small-hide', { - 'data-type': 'remove-color' - }).html('Remove color'); - - this.$el.createChild('li', 'menu-item small-hide', { - 'data-type': 'remove-all-to-the-right' - }).html('Remove all to the right'); - - this.$el.createChild('li', 'menu-item', { - 'data-type': 'clear-palette' - }).html('Clear palette'); - } - }, { - key: 'show', - value: function show(e, index) { - var $event = Event.pos(e); - - this.$el.css({ - top: $event.clientY - 10 + 'px', - left: $event.clientX + 'px' - }); - this.$el.addClass('show'); - this.selectedColorIndex = index; - - if (typeof this.selectedColorIndex == 'undefined') { - this.$el.addClass('small'); - } else { - this.$el.removeClass('small'); - } - } - }, { - key: 'hide', - value: function hide() { - this.$el.removeClass('show'); - } - }, { - key: 'runCommand', - value: function runCommand(command) { - switch (command) { - case 'remove-color': - this.currentColorSets.removeColor(this.selectedColorIndex); - break; - case 'remove-all-to-the-right': - this.currentColorSets.removeAllToTheRight(this.selectedColorIndex); - break; - case 'clear-palette': - this.currentColorSets.clearPalette(); - break; - } - } - }, { - key: 'click $el .menu-item', - value: function click$elMenuItem(e) { - e.preventDefault(); - - this.runCommand(e.$delegateTarget.attr('data-type')); - this.hide(); - } - }]); - return ChromeCurrentColorSetsContextMenu; -}(EventMachin); - -var ChromeDevtool = function (_EventMachin) { - inherits(ChromeDevtool, _EventMachin); - - function ChromeDevtool(opt) { - classCallCheck(this, ChromeDevtool); - - var _this = possibleConstructorReturn(this, (ChromeDevtool.__proto__ || Object.getPrototypeOf(ChromeDevtool)).call(this)); - - _this.opt = opt || {}; - _this.$root = null; - _this.format = 'rgb'; - _this.currentA = 0; - _this.currentH = 0; - _this.currentS = 0; - _this.currentV = 0; - _this.colorSetsList = new ChromeColorSetsList(_this); - _this.colorpickerCallback = _this.opt.onChange || function () {}; - - _this.control = new ChromeColorControl(_this); - _this.palette = new ChromeColorPallet(_this); - _this.information = new ChromeColorInformation(_this); - _this.colorSetsChooser = new ChromeColorSetsChooser(_this); - _this.currentColorSets = new ChromeCurrentColorSets(_this); - _this.contextMenu = new ChromeCurrentColorSetsContextMenu(_this, _this.currentColorSets); - - _this.initialize(); - return _this; - } - - createClass(ChromeDevtool, [{ - key: 'getOption', - value: function getOption(key) { - return this.opt[key]; - } - }, { - key: 'initialize', - value: function initialize() { - this.$root = new Dom('div', 'codemirror-colorpicker'); - - this.$root.append(this.palette.$el); - this.$root.append(this.control.$el); - this.$root.append(this.information.$el); - this.$root.append(this.currentColorSets.$el); - this.$root.append(this.colorSetsChooser.$el); - this.$root.append(this.contextMenu.$el); - - if (this.opt.target) { - this.$root.appendTo(this.opt.target); - } - - this.$checkColorPickerClass = this.checkColorPickerClass.bind(this); - - this.initializeEvent(); - - this.initColor(this.opt.color); - } - }, { - key: 'showContextMenu', - value: function showContextMenu(e, index) { - this.contextMenu.show(e, index); - } - }, { - key: 'setColor', - value: function setColor(value) { - if ((typeof value === 'undefined' ? 'undefined' : _typeof(value)) == "object") { - if (!value.r || !value.g || !value.b) return; - - this.initColor(color.format(value, "hex")); - } else if (typeof value == "string") { - this.initColor(value); - } - } - }, { - key: 'getColor', - value: function getColor(type) { - this.caculateHSV(); - var rgb = this.convertRGB(); - - if (type) { - return color.format(rgb, type); - } - - return rgb; - } - }, { - key: 'definePositionForArrow', - value: function definePositionForArrow(opt, elementScreenLeft, elementScreenTop) { - //this.$arrow.css({}) - } - }, { - key: 'convertRGB', - value: function convertRGB() { - return color.HSVtoRGB(this.currentH, this.currentS, this.currentV); - } - }, { - key: 'convertHEX', - value: function convertHEX() { - return color.format(this.convertRGB(), 'hex'); - } - }, { - key: 'convertHSL', - value: function convertHSL() { - return color.HSVtoHSL(this.currentH, this.currentS, this.currentV); - } - }, { - key: 'getCurrentColor', - value: function getCurrentColor() { - return this.information.getFormattedColor(); - } - }, { - key: 'getFormattedColor', - value: function getFormattedColor(format) { - format = format || 'hex'; - - if (format == 'rgb') { - var rgb = this.convertRGB(); - rgb.a = this.currentA; - return color.format(rgb, 'rgb'); - } else if (format == 'hsl') { - var hsl = this.convertHSL(); - hsl.a = this.currentA; - return color.format(hsl, 'hsl'); - } else { - var rgb = this.convertRGB(); - return color.format(rgb, 'hex'); - } - } - }, { - key: 'setInputColor', - value: function setInputColor(isNoInputColor) { - this.information.setInputColor(isNoInputColor); - this.control.setInputColor(isNoInputColor); - - this.callbackColorValue(); - } - }, { - key: 'changeInputColorAfterNextFormat', - value: function changeInputColorAfterNextFormat() { - this.control.setInputColor(); - - this.callbackColorValue(); - } - }, { - key: 'callbackColorValue', - value: function callbackColorValue() { - if (typeof this.colorpickerCallback == 'function') { - - if (!isNaN(this.currentA)) { - this.colorpickerCallback(this.getCurrentColor()); - } - } - } - }, { - key: 'caculateHSV', - value: function caculateHSV() { - - var obj = this.palette.caculateSV(); - var control = this.control.caculateH(); - - var s = obj.s; - var v = obj.v; - var h = control.h; - - if (obj.width == 0) { - h = 0; - s = 0; - v = 0; - } - - this.currentH = h; - this.currentS = s; - this.currentV = v; - } - }, { - key: 'setColorUI', - value: function setColorUI() { - this.control.setColorUI(); - this.palette.setColorUI(); - } - }, { - key: 'setCurrentHSV', - value: function setCurrentHSV(h, s, v, a) { - this.currentA = a; - this.currentH = h; - this.currentS = s; - this.currentV = v; - } - }, { - key: 'setCurrentH', - value: function setCurrentH(h) { - this.currentH = h; - } - }, { - key: 'setCurrentA', - value: function setCurrentA(a) { - this.currentA = a; - } - }, { - key: 'setBackgroundColor', - value: function setBackgroundColor(color$$1) { - this.palette.setBackgroundColor(color$$1); - } - }, { - key: 'setCurrentFormat', - value: function setCurrentFormat(format) { - this.format = format; - this.information.setCurrentFormat(format); - } - }, { - key: 'getHSV', - value: function getHSV(colorObj) { - if (colorObj.type == 'hsl') { - return color.HSLtoHSV(colorObj.h, colorObj.s, colorObj.l); - } else { - return color.RGBtoHSV(colorObj); - } - } - }, { - key: 'initColor', - value: function initColor(newColor, format) { - var c = newColor || "#FF0000", - colorObj = color.parse(c); - format = format || colorObj.type; - - this.setCurrentFormat(format); - - var hsv = this.getHSV(colorObj); - this.setCurrentHSV(hsv.h, hsv.s, hsv.v, colorObj.a); - this.setColorUI(); - this.setHueColor(); - this.setInputColor(); - } - }, { - key: 'changeInformationColor', - value: function changeInformationColor(newColor) { - var c = newColor || "#FF0000", - colorObj = color.parse(c); - - var hsv = this.getHSV(colorObj); - this.setCurrentHSV(hsv.h, hsv.s, hsv.v, colorObj.a); - this.setColorUI(); - this.setHueColor(); - this.control.setInputColor(); - this.callbackColorValue(); - } - }, { - key: 'setHueColor', - value: function setHueColor() { - this.control.setOnlyHueColor(); - } - }, { - key: 'checkColorPickerClass', - value: function checkColorPickerClass(el) { - var hasColorView = new Dom(el).closest('codemirror-colorview'); - var hasColorPicker = new Dom(el).closest('codemirror-colorpicker'); - var hasCodeMirror = new Dom(el).closest('CodeMirror'); - var IsInHtml = el.nodeName == 'HTML'; - - return !!(hasColorPicker || hasColorView || hasCodeMirror); - } - }, { - key: 'checkInHtml', - value: function checkInHtml(el) { - var IsInHtml = el.nodeName == 'HTML'; - - return IsInHtml; - } - - // Event Bindings - - }, { - key: 'mouseup document', - value: function mouseupDocument(e) { - this.palette.EventDocumentMouseUp(e); - this.control.EventDocumentMouseUp(e); - } - }, { - key: 'mousemove document', - value: function mousemoveDocument(e) { - this.palette.EventDocumentMouseMove(e); - this.control.EventDocumentMouseMove(e); - } - }, { - key: 'initializeEvent', - value: function initializeEvent() { - - this.initializeEventMachin(); - - this.palette.initializeEvent(); - this.control.initializeEvent(); - this.information.initializeEvent(); - this.currentColorSets.initializeEvent(); - this.colorSetsChooser.initializeEvent(); - this.contextMenu.initializeEvent(); - } - }, { - key: 'currentFormat', - value: function currentFormat() { - this.information.currentFormat(); - } - }, { - key: 'toggleColorChooser', - value: function toggleColorChooser() { - this.colorSetsChooser.toggle(); - } - }, { - key: 'refreshColorSetsChooser', - value: function refreshColorSetsChooser() { - this.colorSetsChooser.refresh(); - } - }, { - key: 'getColorSetsList', - value: function getColorSetsList() { - return this.colorSetsList.getColorSetsList(); - } - }, { - key: 'setCurrentColorSets', - value: function setCurrentColorSets(nameOrIndex) { - this.colorSetsList.setCurrentColorSets(nameOrIndex); - this.currentColorSets.refresh(); - } - }, { - key: 'setColorSets', - value: function setColorSets(list) { - this.colorSetsList.setUserList(list); - } - }, { - key: 'destroy', - value: function destroy() { - get(ChromeDevtool.prototype.__proto__ || Object.getPrototypeOf(ChromeDevtool.prototype), 'destroy', this).call(this); - - this.control.destroy(); - this.palette.destroy(); - this.information.destroy(); - this.colorSetsChooser.destroy(); - this.colorSetsList.destroy(); - this.currentColorSets.destroy(); - this.contextMenu.destroy(); - - // remove color picker callback - this.colorpickerCallback = undefined; - } - }]); - return ChromeDevtool; -}(EventMachin); - if (CodeMirror) { CodeMirror.defineOption("colorpicker", false, function (cm, val, old) { @@ -5310,8 +3823,7 @@ var index = { Color: color, ColorNames: ColorNames, HueColor: HueColor, - ColorPicker: ColorPicker, - ChromeDevtool: ChromeDevtool + ColorPicker: ColorPicker }; return index; diff --git a/dist/codemirror-colorpicker.css b/dist/codemirror-colorpicker.css index 8fd85f1..ac96ea0 100644 --- a/dist/codemirror-colorpicker.css +++ b/dist/codemirror-colorpicker.css @@ -31,7 +31,8 @@ background-color: #fff; border-radius: 3px; -webkit-box-shadow: 0 0px 10px 2px rgba(0, 0, 0, 0.12); - box-shadow: 0 0px 10px 2px rgba(0, 0, 0, 0.12); } + box-shadow: 0 0px 10px 2px rgba(0, 0, 0, 0.12); + /* theme */ } .codemirror-colorpicker > .arrow { position: absolute; top: -10px; @@ -513,6 +514,85 @@ padding: 0px; margin: 0px; pointer-events: none; } + .codemirror-colorpicker.sketch { + border-radius: 5px; } + .codemirror-colorpicker.sketch > .color { + margin: 10px 10px 2px 10px; + -webkit-box-sizing: border-box; + box-sizing: border-box; + height: 150px; } + .codemirror-colorpicker.sketch > .control { + padding: 0px; } + .codemirror-colorpicker.sketch > .control > .color, .codemirror-colorpicker.sketch > .control > .empty { + position: absolute; + right: 10px; + left: auto; + top: 1px; + width: 26px; + height: 26px; + border-radius: 2px; + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .codemirror-colorpicker.sketch > .control > .color { + -webkit-box-shadow: inset 0px 0px 1px 0px rgba(0, 0, 0, 0.5); + box-shadow: inset 0px 0px 1px 0px rgba(0, 0, 0, 0.5); } + .codemirror-colorpicker.sketch > .control > .hue { + position: relative; + padding: 2px 2px 2px 10px; + margin: 0px 38px 0px 0px; } + .codemirror-colorpicker.sketch > .control > .hue > .hue-container { + border-radius: 0px; } + .codemirror-colorpicker.sketch > .control > .opacity { + position: relative; + padding: 2px 2px 2px 10px; + margin: 0px 38px 0px 0px; } + .codemirror-colorpicker.sketch > .control > .opacity > .opacity-container { + border-radius: 0px; } + .codemirror-colorpicker.sketch > .control .drag-bar, .codemirror-colorpicker.sketch > .control .drag-bar2 { + border-radius: 0px; + top: 0px !important; + left: -2px; + margin-top: 1px !important; + width: 2px; + height: auto; + border-radius: 1px; + bottom: 1px !important; } + .codemirror-colorpicker.sketch > .information .information-change { + display: none; } + .codemirror-colorpicker.sketch > .information.rgb .information-item.rgb { + display: inherit; } + .codemirror-colorpicker.sketch > .information.hex .information-item.hex { + display: inherit; } + .codemirror-colorpicker.sketch > .information .information-item { + display: -webkit-inline-box !important; + display: -ms-inline-flexbox !important; + display: inline-flex !important; + margin-right: 0px; } + .codemirror-colorpicker.sketch > .information .information-item > .input-field > .title { + color: black; + font-size: 11px; } + .codemirror-colorpicker.sketch > .information .information-item > .input-field:last-child:not(:first-child) { + padding-right: 0px; } + .codemirror-colorpicker.sketch > .information .information-item.hsl { + display: none !important; } + .codemirror-colorpicker.sketch > .information .information-item.hex { + width: 80px; + padding-right: 0px; + padding-left: 5px; } + .codemirror-colorpicker.sketch > .information .information-item.rgb { + width: 140px; + padding-left: 0px; } + .codemirror-colorpicker.sketch > .colorsets > .menu { + display: none; } + .codemirror-colorpicker.sketch > .colorsets > .color-list { + margin-right: 0px; + padding-right: 12px; } + .codemirror-colorpicker.sketch > .colorsets > .color-list .color-item { + width: 16px; + height: 16px; + border-radius: 3px; + margin-right: 9px; + margin-bottom: 10px; } .colorsets-contextmenu { position: fixed; diff --git a/dist/codemirror-colorpicker.js b/dist/codemirror-colorpicker.js index 5f57060..528fd0d 100644 --- a/dist/codemirror-colorpicker.js +++ b/dist/codemirror-colorpicker.js @@ -1298,6 +1298,16 @@ var Dom = function () { return this; } + }, { + key: 'cssFloat', + value: function cssFloat(key) { + return parseFloat(this.css(key)); + } + }, { + key: 'cssInt', + value: function cssInt(key) { + return parseInt(this.css(key)); + } }, { key: 'offset', value: function offset() { @@ -2198,9 +2208,12 @@ var ColorInformation = function (_EventMachin) { var rgb = null; if (format == 'hex') { this.$hexCode.val(this.convertHEX()); + var rgb = this.convertRGB(); + this.setRGBInput(rgb.r, rgb.g, rgb.b, rgb.a); } else if (format == 'rgb') { var rgb = this.convertRGB(); this.setRGBInput(rgb.r, rgb.g, rgb.b, rgb.a); + this.$hexCode.val(this.convertHEX()); } else if (format == 'hsl') { var hsl = this.convertHSL(); this.setHSLInput(hsl.h, hsl.s, hsl.l, hsl.a); @@ -2289,6 +2302,7 @@ var ColorInformation = function (_EventMachin) { if (code.charAt(0) == '#' && code.length == 7) { this.colorpicker.changeInformationColor(code); + this.setInputColor(); } } }, { @@ -2364,9 +2378,9 @@ var ColorPallet = function (_EventMachin) { key: 'setMainColor', value: function setMainColor(e) { e.preventDefault(); - var pos = this.colorpicker.$root.position(); // position for screen - var w = this.$el.width(); - var h = this.$el.height(); + var pos = this.$el.position(); // position for screen + var w = this.$el.width() - this.$el.cssFloat('padding-left') - this.$el.cssFloat('padding-right'); + var h = this.$el.height() - this.$el.cssFloat('padding-top') - this.$el.cssFloat('padding-bottom'); var x = e.clientX - pos.left; var y = e.clientY - pos.top; @@ -2931,12 +2945,25 @@ var ColorPicker = function (_EventMachin) { value: function getOption(key) { return this.opt[key]; } + }, { + key: 'getContainer', + value: function getContainer() { + return this.opt.container || document.body; + } }, { key: 'initialize', value: function initialize() { - this.$body = new Dom(this.opt.container || document.body); + this.$body = new Dom(this.getContainer()); this.$root = new Dom('div', 'codemirror-colorpicker'); + // append colorpicker to container (ex : body) + this.$body.append(this.$root); + + if (this.opt.type) { + // to change css style + this.$root.addClass(this.opt.type); + } + this.$arrow = new Dom('div', 'arrow'); this.$root.append(this.$arrow); @@ -2949,7 +2976,10 @@ var ColorPicker = function (_EventMachin) { this.$checkColorPickerClass = this.checkColorPickerClass.bind(this); - this.initColor(); + this.initColor(this.opt.color); + + // register all events + this.initializeEvent(); } }, { key: 'showContextMenu', @@ -3015,18 +3045,34 @@ var ColorPicker = function (_EventMachin) { top: elementScreenTop + 'px' }); } + }, { + key: 'getInitalizePosition', + value: function getInitalizePosition() { + if (this.opt.position == 'inline') { + return { + position: 'relative', + left: 'auto', + top: 'auto', + display: 'inline-block' + }; + } else { + return { + position: 'fixed', // color picker has fixed position + left: '-10000px', + top: '-10000px' + }; + } + } }, { key: 'show', value: function show(opt, color$$1, callback) { + var _this2 = this; + this.destroy(); this.initializeEvent(); - this.$root.appendTo(document.body); + this.$root.appendTo(this.$body); - this.$root.css({ - position: 'fixed', // color picker has fixed position - left: '-10000px', - top: '-10000px' - }).show(); + this.$root.css(this.getInitalizePosition()).show(); this.definePosition(opt); @@ -3038,6 +3084,9 @@ var ColorPicker = function (_EventMachin) { // define colorpicker callback this.colorpickerCallback = function (colorString) { + if (typeof _this2.opt.onChange == 'function') { + _this2.opt.onChange(colorString); + } callback(colorString); }; @@ -3050,7 +3099,7 @@ var ColorPicker = function (_EventMachin) { }, { key: 'setHideDelay', value: function setHideDelay(delayTime) { - var _this2 = this; + var _this3 = this; delayTime = delayTime || 0; @@ -3058,12 +3107,12 @@ var ColorPicker = function (_EventMachin) { this.$root.off('mouseleave'); this.$root.on('mouseenter', function () { - clearTimeout(_this2.timerCloseColorPicker); + clearTimeout(_this3.timerCloseColorPicker); }); this.$root.on('mouseleave', function () { - clearTimeout(_this2.timerCloseColorPicker); - _this2.timerCloseColorPicker = setTimeout(_this2.hide.bind(_this2), delayTime); + clearTimeout(_this3.timerCloseColorPicker); + _this3.timerCloseColorPicker = setTimeout(_this3.hide.bind(_this3), delayTime); }); clearTimeout(this.timerCloseColorPicker); @@ -3135,8 +3184,13 @@ var ColorPicker = function (_EventMachin) { }, { key: 'callbackColorValue', value: function callbackColorValue() { - if (typeof this.colorpickerCallback == 'function') { + if (typeof this.opt.onChange == 'function') { + if (!isNaN(this.currentA)) { + this.opt.onChange(this.getCurrentColor()); + } + } + if (typeof this.colorpickerCallback == 'function') { if (!isNaN(this.currentA)) { this.colorpickerCallback(this.getCurrentColor()); } @@ -3749,1547 +3803,6 @@ var ColorView = function () { return ColorView; }(); -var ChromeColorControl = function (_EventMachin) { - inherits(ChromeColorControl, _EventMachin); - - function ChromeColorControl(colorpicker) { - classCallCheck(this, ChromeColorControl); - - var _this = possibleConstructorReturn(this, (ChromeColorControl.__proto__ || Object.getPrototypeOf(ChromeColorControl)).call(this)); - - _this.colorpicker = colorpicker; - _this.initialize(); - return _this; - } - - createClass(ChromeColorControl, [{ - key: 'initialize', - value: function initialize() { - this.$el = new Dom('div', 'control'); - this.$hue = this.$el.createChild('div', 'hue'); - this.$opacity = this.$el.createChild('div', 'opacity'); - this.$controlPattern = this.$el.createChild('div', 'empty'); - this.$controlColor = this.$el.createChild('div', 'color'); - - this.$hueContainer = this.$hue.createChild('div', 'hue-container'); - this.$drag_bar = this.$hueContainer.createChild('div', 'drag-bar'); - this.drag_bar_pos = {}; - - this.$opacityContainer = this.$opacity.createChild('div', 'opacity-container'); - this.$opacityColorBar = this.$opacityContainer.createChild('div', 'color-bar'); - - this.$opacity_drag_bar = this.$opacityContainer.createChild('div', 'drag-bar2'); - this.opacity_drag_bar_pos = {}; - } - }, { - key: 'setBackgroundColor', - value: function setBackgroundColor(color$$1) { - this.$controlColor.css("background-color", color$$1); - } - }, { - key: 'refresh', - value: function refresh() { - this.setColorUI(); - } - }, { - key: 'setColorUI', - value: function setColorUI() { - var x = this.$el.width() * this.colorpicker.currentS, - y = this.$el.height() * (1 - this.colorpicker.currentV); - - this.$drag_pointer.css({ - left: x - 5 + "px", - top: y - 5 + "px" - }); - } - }, { - key: 'setMainColor', - value: function setMainColor(e) { - e.preventDefault(); - var pos = this.colorpicker.$root.position(); // position for screen - var w = $color.width(); - var h = $color.height(); - - var x = e.clientX - pos.left; - var y = e.clientY - pos.top; - - if (x < 0) x = 0;else if (x > w) x = w; - - if (y < 0) y = 0;else if (y > h) y = h; - - this.$drag_pointer.css({ - left: x - 5 + 'px', - top: y - 5 + 'px' - }); - - this.colorpicker.caculateHSV(); - this.colorpicker.setInputColor(); - } - }, { - key: 'setOpacityColorBar', - value: function setOpacityColorBar(hueColor) { - var rgb = color.parse(hueColor); - - rgb.a = 0; - var start = color.format(rgb, 'rgb'); - - rgb.a = 1; - var end = color.format(rgb, 'rgb'); - - this.$opacityColorBar.css('background', 'linear-gradient(to right, ' + start + ', ' + end + ')'); - } - }, { - key: 'setOpacity', - value: function setOpacity(e) { - var min = this.$opacityContainer.offset().left; - var max = min + this.$opacityContainer.width(); - var current = Event.pos(e).clientX; - var dist; - - if (current < min) { - dist = 0; - } else if (current > max) { - dist = 100; - } else { - dist = (current - min) / (max - min) * 100; - } - - var x = this.$opacityContainer.width() * (dist / 100); - - this.$opacity_drag_bar.css({ - left: x - Math.ceil(this.$opacity_drag_bar.width() / 2) + 'px' - }); - - this.opacity_drag_bar_pos = { x: x }; - - this.colorpicker.setCurrentA(this.caculateOpacity()); - this.colorpicker.currentFormat(); - this.colorpicker.setInputColor(); - } - }, { - key: 'setInputColor', - value: function setInputColor() { - this.setBackgroundColor(this.colorpicker.getFormattedColor('rgb')); - - var rgb = this.colorpicker.convertRGB(); - var colorString = color.format(rgb, 'rgb'); - this.setOpacityColorBar(colorString); - } - }, { - key: 'setColorUI', - value: function setColorUI() { - - var hueX = this.$hueContainer.width() * (this.colorpicker.currentH / 360); - - this.$drag_bar.css({ - left: hueX - 7.5 + 'px' - }); - - this.drag_bar_pos = { x: hueX }; - - var opacityX = this.$opacityContainer.width() * (this.colorpicker.currentA || 0); - - this.$opacity_drag_bar.css({ - left: opacityX - 7.5 + 'px' - }); - - this.opacity_drag_bar_pos = { x: opacityX }; - } - }, { - key: 'caculateH', - value: function caculateH() { - - var huePos = this.drag_bar_pos || { x: 0 }; - - var h = huePos.x / this.$hueContainer.width() * 360; - - return { h: h }; - } - }, { - key: 'caculateOpacity', - value: function caculateOpacity() { - var opacityPos = this.opacity_drag_bar_pos || { x: 0 }; - var a = Math.round(opacityPos.x / this.$opacityContainer.width() * 100) / 100; - - return isNaN(a) ? 1 : a; - } - }, { - key: 'EventDocumentMouseMove', - value: function EventDocumentMouseMove(e) { - if (this.isHueDown) { - this.setHueColor(e); - } - - if (this.isOpacityDown) { - this.setOpacity(e); - } - } - }, { - key: 'EventDocumentMouseUp', - value: function EventDocumentMouseUp(e) { - this.isHueDown = false; - this.isOpacityDown = false; - } - }, { - key: 'setControlColor', - value: function setControlColor(color$$1) { - this.$controlColor.css('background-color', color$$1); - } - }, { - key: 'setHueColor', - value: function setHueColor(e) { - var min = this.$hueContainer.offset().left; - var max = min + this.$hueContainer.width(); - var current = e ? Event.pos(e).clientX : min + (max - min) * (this.colorpicker.currentH / 360); - - var dist; - if (current < min) { - dist = 0; - } else if (current > max) { - dist = 100; - } else { - dist = (current - min) / (max - min) * 100; - } - - var x = this.$hueContainer.width() * (dist / 100); - - this.$drag_bar.css({ - left: x - Math.ceil(this.$drag_bar.width() / 2) + 'px' - }); - - this.drag_bar_pos = { x: x }; - - var hueColor = HueColor.checkHueColor(dist / 100); - - this.colorpicker.setBackgroundColor(hueColor); - this.colorpicker.setCurrentH(dist / 100 * 360); - this.colorpicker.setInputColor(); - } - }, { - key: 'setOnlyHueColor', - value: function setOnlyHueColor() { - var min = this.$hueContainer.offset().left; - var max = min + this.$hueContainer.width(); - var current = min + (max - min) * (this.colorpicker.currentH / 360); - var dist; - if (current < min) { - dist = 0; - } else if (current > max) { - dist = 100; - } else { - dist = (current - min) / (max - min) * 100; - } - - var x = this.$hueContainer.width() * (dist / 100); - - this.$drag_bar.css({ - left: x - Math.ceil(this.$drag_bar.width() / 2) + 'px' - }); - - this.drag_bar_pos = { x: x }; - - var hueColor = HueColor.checkHueColor(dist / 100); - this.colorpicker.setBackgroundColor(hueColor); - this.colorpicker.setCurrentH(dist / 100 * 360); - } - }, { - key: 'mousedown $drag_bar', - value: function mousedown$drag_bar(e) { - e.preventDefault(); - this.isHueDown = true; - } - }, { - key: 'mousedown $opacity_drag_bar', - value: function mousedown$opacity_drag_bar(e) { - e.preventDefault(); - this.isOpacityDown = true; - } - }, { - key: 'mousedown $hueContainer', - value: function mousedown$hueContainer(e) { - this.isHueDown = true; - this.setHueColor(e); - } - }, { - key: 'mousedown $opacityContainer', - value: function mousedown$opacityContainer(e) { - this.isOpacityDown = true; - this.setOpacity(e); - } - }]); - return ChromeColorControl; -}(EventMachin); - -var ChromeColorInformation = function (_EventMachin) { - inherits(ChromeColorInformation, _EventMachin); - - function ChromeColorInformation(colorpicker) { - classCallCheck(this, ChromeColorInformation); - - var _this = possibleConstructorReturn(this, (ChromeColorInformation.__proto__ || Object.getPrototypeOf(ChromeColorInformation)).call(this)); - - _this.colorpicker = colorpicker; - _this.initialize(); - - return _this; - } - - createClass(ChromeColorInformation, [{ - key: 'initialize', - value: function initialize() { - this.$el = new Dom('div', 'information hex'); - - this.$informationChange = this.$el.createChild('div', 'information-change'); - - this.$formatChangeButton = this.$informationChange.createChild('button', 'format-change-button arrow-button', { type: 'button' }); - - this.$el.append(this.makeInputFieldHex()); - this.$el.append(this.makeInputFieldRgb()); - this.$el.append(this.makeInputFieldHsl()); - - this.format = 'hex'; - } - }, { - key: 'makeInputFieldHex', - value: function makeInputFieldHex() { - var item = new Dom('div', 'information-item hex'); - var field = item.createChild('div', 'input-field hex'); - - this.$hexCode = field.createChild('input', 'input', { type: 'text' }); - - field.createChild('div', 'title').html('HEX'); - - return item; - } - }, { - key: 'makeInputFieldRgb', - value: function makeInputFieldRgb() { - var item = new Dom('div', 'information-item rgb'); - - var field = item.createChild('div', 'input-field rgb-r'); - this.$rgb_r = field.createChild('input', 'input', { type: 'number', step: 1, min: 0, max: 255 }); - field.createChild('div', 'title').html('R'); - - field = item.createChild('div', 'input-field rgb-g'); - this.$rgb_g = field.createChild('input', 'input', { type: 'number', step: 1, min: 0, max: 255 }); - field.createChild('div', 'title').html('G'); - - field = item.createChild('div', 'input-field rgb-b'); - this.$rgb_b = field.createChild('input', 'input', { type: 'number', step: 1, min: 0, max: 255 }); - field.createChild('div', 'title').html('B'); - - // rgba - field = item.createChild('div', 'input-field rgb-a'); - this.$rgb_a = field.createChild('input', 'input', { type: 'number', step: 0.01, min: 0, max: 1 }); - field.createChild('div', 'title').html('A'); - - return item; - } - }, { - key: 'makeInputFieldHsl', - value: function makeInputFieldHsl() { - var item = new Dom('div', 'information-item hsl'); - - var field = item.createChild('div', 'input-field hsl-h'); - this.$hsl_h = field.createChild('input', 'input', { type: 'number', step: 1, min: 0, max: 360 }); - field.createChild('div', 'title').html('H'); - - field = item.createChild('div', 'input-field hsl-s'); - this.$hsl_s = field.createChild('input', 'input', { type: 'number', step: 1, min: 0, max: 100 }); - field.createChild('div', 'postfix').html('%'); - field.createChild('div', 'title').html('S'); - - field = item.createChild('div', 'input-field hsl-l'); - this.$hsl_l = field.createChild('input', 'input', { type: 'number', step: 1, min: 0, max: 100 }); - field.createChild('div', 'postfix').html('%'); - field.createChild('div', 'title').html('L'); - - // rgba - field = item.createChild('div', 'input-field hsl-a'); - this.$hsl_a = field.createChild('input', 'input', { type: 'number', step: 0.01, min: 0, max: 1 }); - field.createChild('div', 'title').html('A'); - - return item; - } - }, { - key: 'currentFormat', - value: function currentFormat() { - var current_format = this.format || 'hex'; - if (this.colorpicker.currentA < 1 && current_format == 'hex') { - var next_format = 'rgb'; - this.$el.removeClass(current_format); - this.$el.addClass(next_format); - this.format = next_format; - - this.colorpicker.setInputColor(); - } - } - }, { - key: 'setCurrentFormat', - value: function setCurrentFormat(format) { - this.format = format; - this.initFormat(); - } - }, { - key: 'initFormat', - value: function initFormat() { - var current_format = this.format || 'hex'; - - this.$el.removeClass('hex'); - this.$el.removeClass('rgb'); - this.$el.removeClass('hsl'); - this.$el.addClass(current_format); - } - }, { - key: 'nextFormat', - value: function nextFormat() { - var current_format = this.format || 'hex'; - - var next_format = 'hex'; - if (current_format == 'hex') { - next_format = 'rgb'; - } else if (current_format == 'rgb') { - next_format = 'hsl'; - } else if (current_format == 'hsl') { - if (this.colorpicker.currentA == 1) { - next_format = 'hex'; - } else { - next_format = 'rgb'; - } - } - - this.$el.removeClass(current_format); - this.$el.addClass(next_format); - this.format = next_format; - - this.setInputColor(); - this.colorpicker.changeInputColorAfterNextFormat(); - } - }, { - key: 'setRGBInput', - value: function setRGBInput(r, g, b) { - this.$rgb_r.val(r); - this.$rgb_g.val(g); - this.$rgb_b.val(b); - this.$rgb_a.val(this.colorpicker.currentA); - } - }, { - key: 'setHSLInput', - value: function setHSLInput(h, s, l) { - this.$hsl_h.val(h); - this.$hsl_s.val(s); - this.$hsl_l.val(l); - this.$hsl_a.val(this.colorpicker.currentA); - } - }, { - key: 'getHexFormat', - value: function getHexFormat() { - return color.format({ - r: this.$rgb_r.int(), - g: this.$rgb_g.int(), - b: this.$rgb_b.int() - }, 'hex'); - } - }, { - key: 'getRgbFormat', - value: function getRgbFormat() { - return color.format({ - r: this.$rgb_r.int(), - g: this.$rgb_g.int(), - b: this.$rgb_b.int(), - a: this.$rgb_a.float() - }, 'rgb'); - } - }, { - key: 'getHslFormat', - value: function getHslFormat() { - return color.format({ - h: this.$hsl_h.val(), - s: this.$hsl_s.val(), - l: this.$hsl_l.val(), - a: this.$hsl_a.float() - }, 'hsl'); - } - }, { - key: 'convertRGB', - value: function convertRGB() { - return this.colorpicker.convertRGB(); - } - }, { - key: 'convertHEX', - value: function convertHEX() { - return this.colorpicker.convertHEX(); - } - }, { - key: 'convertHSL', - value: function convertHSL() { - return this.colorpicker.convertHSL(); - } - }, { - key: 'getFormattedColor', - value: function getFormattedColor(format) { - var fixed = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; - - format = format || this.getFormat(); - if (format == 'hex') { - return this.$hexCode.val(); - } else if (format == 'rgb') { - return this.getRgbFormat(fixed); - } else if (format == 'hsl') { - return this.getHslFormat(fixed); - } - } - }, { - key: 'getFormat', - value: function getFormat() { - return this.format || 'hex'; - } - }, { - key: 'setInputColor', - value: function setInputColor() { - var format = this.getFormat(); - - var rgb = null; - if (format == 'hex') { - this.$hexCode.val(this.convertHEX()); - } else if (format == 'rgb') { - var rgb = this.convertRGB(); - this.setRGBInput(rgb.r, rgb.g, rgb.b, rgb.a); - } else if (format == 'hsl') { - var hsl = this.convertHSL(); - this.setHSLInput(hsl.h, hsl.s, hsl.l, hsl.a); - } - } - }, { - key: 'checkNumberKey', - value: function checkNumberKey(e) { - return Event.checkNumberKey(e); - } - }, { - key: 'checkNotNumberKey', - value: function checkNotNumberKey(e) { - return !Event.checkNumberKey(e); - } - - //'keydown.checkNotNumberKey $rgb_r' (e) { e.preventDefault(); } - //'keydown.checkNotNumberKey $rgb_g' (e) { e.preventDefault(); } - //'keydown.checkNotNumberKey $rgb_b' (e) { e.preventDefault(); } - - //'keydown.checkNumberKey $rgb_r' (e) { this.setRGBtoHexColor(e); } - //'keydown.checkNumberKey $rgb_g' (e) { this.setRGBtoHexColor(e); } - //'keydown.checkNumberKey $rgb_b' (e) { this.setRGBtoHexColor(e); } - - }, { - key: 'changeRgbColor', - value: function changeRgbColor() { - this.colorpicker.changeInformationColor(this.getRgbFormat()); - } - }, { - key: 'changeHslColor', - value: function changeHslColor() { - this.colorpicker.changeInformationColor(this.getHslFormat()); - } - }, { - key: 'change $rgb_r', - value: function change$rgb_r(e) { - this.changeRgbColor(); - } - }, { - key: 'change $rgb_g', - value: function change$rgb_g(e) { - this.changeRgbColor(); - } - }, { - key: 'change $rgb_b', - value: function change$rgb_b(e) { - this.changeRgbColor(); - } - }, { - key: 'change $rgb_a', - value: function change$rgb_a(e) { - this.changeRgbColor(); - } - }, { - key: 'change $hsl_h', - value: function change$hsl_h(e) { - this.changeHslColor(); - } - }, { - key: 'change $hsl_s', - value: function change$hsl_s(e) { - this.changeHslColor(); - } - }, { - key: 'change $hsl_l', - value: function change$hsl_l(e) { - this.changeHslColor(); - } - }, { - key: 'change $hsl_a', - value: function change$hsl_a(e) { - this.changeHslColor(); - } - }, { - key: 'keydown $hexCode', - value: function keydown$hexCode(e) { - if (e.which < 65 || e.which > 70) { - return this.checkNumberKey(e); - } - } - }, { - key: 'keyup $hexCode', - value: function keyup$hexCode(e) { - var code = this.$hexCode.val(); - - if (code.charAt(0) == '#' && code.length == 7) { - this.colorpicker.changeInformationColor(code); - } - } - }, { - key: 'click $formatChangeButton', - value: function click$formatChangeButton(e) { - this.nextFormat(); - } - }, { - key: 'refresh', - value: function refresh() {} - }]); - return ChromeColorInformation; -}(EventMachin); - -var ChromeColorPallet = function (_EventMachin) { - inherits(ChromeColorPallet, _EventMachin); - - function ChromeColorPallet(colorpicker) { - classCallCheck(this, ChromeColorPallet); - - var _this = possibleConstructorReturn(this, (ChromeColorPallet.__proto__ || Object.getPrototypeOf(ChromeColorPallet)).call(this)); - - _this.colorpicker = colorpicker; - _this.initialize(); - return _this; - } - - createClass(ChromeColorPallet, [{ - key: 'initialize', - value: function initialize() { - this.$el = new Dom('div', 'color'); - this.$saturation = this.$el.createChild('div', 'saturation'); - this.$value = this.$saturation.createChild('div', 'value'); - this.$drag_pointer = this.$value.createChild('div', 'drag-pointer'); - } - }, { - key: 'setBackgroundColor', - value: function setBackgroundColor(color$$1) { - this.$el.css("background-color", color$$1); - } - }, { - key: 'refresh', - value: function refresh() { - this.setColorUI(); - } - }, { - key: 'caculateSV', - value: function caculateSV() { - var pos = this.drag_pointer_pos || { x: 0, y: 0 }; - - var width = this.$el.width(); - var height = this.$el.height(); - - var s = pos.x / width; - var v = (height - pos.y) / height; - - return { s: s, v: v, width: width, height: height }; - } - }, { - key: 'setColorUI', - value: function setColorUI() { - var x = this.$el.width() * this.colorpicker.currentS, - y = this.$el.height() * (1 - this.colorpicker.currentV); - - this.$drag_pointer.css({ - left: x - 5 + "px", - top: y - 5 + "px" - }); - - this.drag_pointer_pos = { x: x, y: y }; - } - }, { - key: 'setMainColor', - value: function setMainColor(e) { - e.preventDefault(); - var pos = this.$el.position(); - var w = this.$el.width(); - var h = this.$el.height(); - - var x = e.clientX - pos.left; - var y = e.clientY - pos.top; - - if (x < 0) x = 0;else if (x > w) x = w; - - if (y < 0) y = 0;else if (y > h) y = h; - - this.$drag_pointer.css({ - left: x - 5 + 'px', - top: y - 5 + 'px' - }); - - this.drag_pointer_pos = { x: x, y: y }; - - this.colorpicker.caculateHSV(); - this.colorpicker.setInputColor(); - } - }, { - key: 'EventDocumentMouseUp', - value: function EventDocumentMouseUp(e) { - this.isDown = false; - } - }, { - key: 'EventDocumentMouseMove', - value: function EventDocumentMouseMove(e) { - if (this.isDown) { - this.setMainColor(e); - } - } - }, { - key: 'mousedown', - value: function mousedown(e) { - this.isDown = true; - this.setMainColor(e); - } - }, { - key: 'mouseup', - value: function mouseup(e) { - this.isDown = false; - } - }]); - return ChromeColorPallet; -}(EventMachin); - -var DATA_COLORSETS_INDEX$1 = 'data-colorsets-index'; - -var ChromeColorSetsChooser = function (_EventMachin) { - inherits(ChromeColorSetsChooser, _EventMachin); - - function ChromeColorSetsChooser(colorpicker) { - classCallCheck(this, ChromeColorSetsChooser); - - var _this = possibleConstructorReturn(this, (ChromeColorSetsChooser.__proto__ || Object.getPrototypeOf(ChromeColorSetsChooser)).call(this)); - - _this.colorpicker = colorpicker; - - _this.initialize(); - return _this; - } - - createClass(ChromeColorSetsChooser, [{ - key: 'initialize', - value: function initialize() { - // make colorset-chooser - this.$el = new Dom('div', 'color-chooser'); - - var $container = this.$el.createChild('div', 'color-chooser-container'); - - var $header = $container.createChild('div', 'colorsets-item colorsets-item-header'); - - $header.createChild('h1', 'title').html('Color Paletts'); - - this.$toggleButton = $header.createChild('span', 'items').html('×'); - - this.$colorsetsList = $container.createChild('div', 'colorsets-list'); - - this.refresh(); - } - }, { - key: 'refresh', - value: function refresh() { - this.$colorsetsList.html(this.makeColorSetsList()); - } - }, { - key: 'makeColorItemList', - value: function makeColorItemList(colors) { - var maxCount = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 5; - - var $list = new Dom('div'); - - for (var i = 0; i < maxCount; i++) { - var color$$1 = colors[i] || 'rgba(255, 255, 255, 1)'; - var $item = $list.createChild('div', 'color-item', { - title: color$$1 - }); - - $item.createChild('div', 'color-view', null, { - 'background-color': color$$1 - }); - } - - return $list; - } - }, { - key: 'makeColorSetsList', - value: function makeColorSetsList() { - var _this2 = this; - - var $div = new Dom('div'); - - // colorsets - var colorSets = this.colorpicker.getColorSetsList(); - colorSets.forEach(function (element, index) { - var $item = $div.createChild('div', 'colorsets-item', defineProperty({}, DATA_COLORSETS_INDEX$1, index)); - - $item.createChild('h1', 'title').html(element.name); - - $item.createChild('div', 'items').append(_this2.makeColorItemList(element.colors, 5)); - }); - - return $div; - } - }, { - key: 'show', - value: function show() { - this.$el.addClass('open'); - } - }, { - key: 'hide', - value: function hide() { - this.$el.removeClass('open'); - } - }, { - key: 'toggle', - value: function toggle() { - this.$el.toggleClass('open'); - } - }, { - key: 'click $toggleButton', - value: function click$toggleButton(e) { - this.toggle(); - } - }, { - key: 'click $colorsetsList', - value: function click$colorsetsList(e) { - e.preventDefault(); - var $item = new Dom(e.target).closest('colorsets-item'); - - if ($item) { - - var index = parseInt($item.attr(DATA_COLORSETS_INDEX$1)); - this.colorpicker.setCurrentColorSets(index); - this.hide(); - } - } - }, { - key: 'destroy', - value: function destroy() { - get(ChromeColorSetsChooser.prototype.__proto__ || Object.getPrototypeOf(ChromeColorSetsChooser.prototype), 'destroy', this).call(this); - - this.hide(); - } - }]); - return ChromeColorSetsChooser; -}(EventMachin); - -var colorSetsList$1 = [{ - name: "Material", - colors: ['#F44336', '#E91E63', '#9C27B0', '#673AB7', '#3F51B5', '#2196F3', '#03A9F4', '#00BCD4', '#009688', '#4CAF50', '#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800', '#FF5722', '#795548', '#9E9E9E', '#607D8B'] -}, { - name: "Custom", "edit": true, "colors": [] -}, { - name: "Color Scale", "scale": ['red', 'yellow', 'black'], count: 5 -}]; - -var ChromeColorSetsList = function () { - function ChromeColorSetsList(colorpicker) { - classCallCheck(this, ChromeColorSetsList); - - this.colorpicker = colorpicker; - - this.setUserList(this.colorpicker.getOption('colorSets')); - } - - createClass(ChromeColorSetsList, [{ - key: 'list', - value: function list() { - return this.userList || colorSetsList$1; - } - }, { - key: 'setUserList', - value: function setUserList(list) { - this.userList = list; - - this.resetUserList(); - - this.setCurrentColorSets(); - } - }, { - key: 'resetUserList', - value: function resetUserList() { - var _this = this; - - if (this.userList && this.userList.length) { - this.userList = this.userList.map(function (element, index) { - - if (typeof element.colors == 'function') { - var makeCallback = element.colors; - - element.colors = makeCallback(_this.colorpicker, _this); - element._colors = makeCallback; - } - - return Object.assign({ - name: 'color-' + index, - colors: [] - }, element); - }); - } - } - }, { - key: 'setCurrentColorSets', - value: function setCurrentColorSets(nameOrIndex) { - - var _list = this.list(); - - if (typeof nameOrIndex == 'undefined') { - this.currentColorSets = _list[0]; - } else if (typeof nameOrIndex == 'number') { - this.currentColorSets = _list[nameOrIndex]; - } else { - this.currentColorSets = _list.filter(function (obj) { - return obj.name == nameOrIndex; - })[0]; - } - } - }, { - key: 'getCurrentColorSets', - value: function getCurrentColorSets() { - return this.currentColorSets; - } - }, { - key: 'addCurrentColor', - value: function addCurrentColor(color$$1) { - if (Array.isArray(this.currentColorSets.colors)) { - this.currentColorSets.colors.push(color$$1); - } - } - }, { - key: 'removeCurrentColor', - value: function removeCurrentColor(index) { - if (this.currentColorSets.colors[index]) { - this.currentColorSets.colors.splice(index, 1); - } - } - }, { - key: 'removeCurrentColorToTheRight', - value: function removeCurrentColorToTheRight(index) { - if (this.currentColorSets.colors[index]) { - this.currentColorSets.colors.splice(index, Number.MAX_VALUE); - } - } - }, { - key: 'clearPalette', - value: function clearPalette() { - if (this.currentColorSets.colors) { - this.currentColorSets.colors = []; - } - } - }, { - key: 'getCurrentColors', - value: function getCurrentColors() { - return this.getColors(this.currentColorSets); - } - }, { - key: 'getColors', - value: function getColors(element) { - - if (element.scale) { - return color.scale(element.scale, element.count); - } - - return element.colors || []; - } - }, { - key: 'getColorSetsList', - value: function getColorSetsList() { - var _this2 = this; - - return this.list().map(function (element) { - return { - name: element.name, - colors: _this2.getColors(element) - }; - }); - } - }, { - key: 'destroy', - value: function destroy() {} - }]); - return ChromeColorSetsList; -}(); - -var ChromeCurrentColorSets = function (_EventMachin) { - inherits(ChromeCurrentColorSets, _EventMachin); - - function ChromeCurrentColorSets(colorpicker) { - classCallCheck(this, ChromeCurrentColorSets); - - var _this = possibleConstructorReturn(this, (ChromeCurrentColorSets.__proto__ || Object.getPrototypeOf(ChromeCurrentColorSets)).call(this)); - - _this.colorpicker = colorpicker; - - _this.colorSetsList = _this.colorpicker.colorSetsList; - - _this.initialize(); - return _this; - } - - createClass(ChromeCurrentColorSets, [{ - key: 'makeCurrentColorSets', - value: function makeCurrentColorSets() { - var list = new Dom('div', 'current-color-sets'); - var currentColorSets = this.colorSetsList.getCurrentColorSets(); - var colors = this.colorSetsList.getCurrentColors(); - - for (var i = 0, len = colors.length; i < len; i++) { - var color$$1 = colors[i]; - var item = list.createChild('div', 'color-item', { - 'title': color$$1, - 'data-index': i, - 'data-color': color$$1 - }); - - item.createChild('div', 'empty'); - item.createChild('div', 'color-view', null, { - 'background-color': color$$1 - }); - } - - if (currentColorSets.edit) { - list.createChild('div', 'add-color-item').html('+'); - } - - return list; - } - }, { - key: 'initialize', - value: function initialize() { - // make colorsets view - this.$el = new Dom('div', 'colorsets'); - - var $colorSetsMenu = this.$el.createChild('div', 'menu', { - title: 'Open Color Pallets' - }); - this.$colorSetsColorList = this.$el.createChild('div', 'color-list'); - - this.$colorSetsChooseButton = $colorSetsMenu.createChild('button', 'color-sets-choose-btn arrow-button', { - type: 'button' - }); - - this.refresh(); - } - }, { - key: 'refresh', - value: function refresh() { - this.$colorSetsColorList.html(this.makeCurrentColorSets()); - } - }, { - key: 'refreshAll', - value: function refreshAll() { - this.refresh(); - this.colorpicker.refreshColorSetsChooser(); - } - }, { - key: 'addColor', - value: function addColor(color$$1) { - this.colorSetsList.addCurrentColor(color$$1); - this.refreshAll(); - } - }, { - key: 'removeColor', - value: function removeColor(index) { - this.colorSetsList.removeCurrentColor(index); - this.refreshAll(); - } - }, { - key: 'removeAllToTheRight', - value: function removeAllToTheRight(index) { - this.colorSetsList.removeCurrentColorToTheRight(index); - this.refreshAll(); - } - }, { - key: 'clearPalette', - value: function clearPalette() { - this.colorSetsList.clearPalette(); - this.refreshAll(); - } - }, { - key: 'click $colorSetsChooseButton', - value: function click$colorSetsChooseButton(e) { - this.colorpicker.toggleColorChooser(); - } - }, { - key: 'contextmenu $colorSetsColorList', - value: function contextmenu$colorSetsColorList(e) { - e.preventDefault(); - var currentColorSets = this.colorSetsList.getCurrentColorSets(); - - if (!currentColorSets.edit) { - return; - } - - var $target = new Dom(e.target); - - var $item = $target.closest('color-item'); - - if ($item) { - var index = parseInt($item.attr('data-index')); - - this.colorpicker.showContextMenu(e, index); - } else { - this.colorpicker.showContextMenu(e); - } - } - }, { - key: 'click $colorSetsColorList .add-color-item', - value: function click$colorSetsColorListAddColorItem(e) { - this.addColor(this.colorpicker.getCurrentColor()); - } - }, { - key: 'click $colorSetsColorList .color-item', - value: function click$colorSetsColorListColorItem(e) { - this.colorpicker.setColor(e.$delegateTarget.attr('data-color')); - } - }]); - return ChromeCurrentColorSets; -}(EventMachin); - -var ChromeCurrentColorSetsContextMenu = function (_EventMachin) { - inherits(ChromeCurrentColorSetsContextMenu, _EventMachin); - - function ChromeCurrentColorSetsContextMenu(colorpicker) { - classCallCheck(this, ChromeCurrentColorSetsContextMenu); - - var _this = possibleConstructorReturn(this, (ChromeCurrentColorSetsContextMenu.__proto__ || Object.getPrototypeOf(ChromeCurrentColorSetsContextMenu)).call(this)); - - _this.colorpicker = colorpicker; - _this.currentColorSets = colorpicker.currentColorSets; - - _this.initialize(); - return _this; - } - - createClass(ChromeCurrentColorSetsContextMenu, [{ - key: 'initialize', - value: function initialize() { - // make colorsets view - this.$el = new Dom('ul', 'colorsets-contextmenu'); - - this.$el.createChild('li', 'menu-item small-hide', { - 'data-type': 'remove-color' - }).html('Remove color'); - - this.$el.createChild('li', 'menu-item small-hide', { - 'data-type': 'remove-all-to-the-right' - }).html('Remove all to the right'); - - this.$el.createChild('li', 'menu-item', { - 'data-type': 'clear-palette' - }).html('Clear palette'); - } - }, { - key: 'show', - value: function show(e, index) { - var $event = Event.pos(e); - - this.$el.css({ - top: $event.clientY - 10 + 'px', - left: $event.clientX + 'px' - }); - this.$el.addClass('show'); - this.selectedColorIndex = index; - - if (typeof this.selectedColorIndex == 'undefined') { - this.$el.addClass('small'); - } else { - this.$el.removeClass('small'); - } - } - }, { - key: 'hide', - value: function hide() { - this.$el.removeClass('show'); - } - }, { - key: 'runCommand', - value: function runCommand(command) { - switch (command) { - case 'remove-color': - this.currentColorSets.removeColor(this.selectedColorIndex); - break; - case 'remove-all-to-the-right': - this.currentColorSets.removeAllToTheRight(this.selectedColorIndex); - break; - case 'clear-palette': - this.currentColorSets.clearPalette(); - break; - } - } - }, { - key: 'click $el .menu-item', - value: function click$elMenuItem(e) { - e.preventDefault(); - - this.runCommand(e.$delegateTarget.attr('data-type')); - this.hide(); - } - }]); - return ChromeCurrentColorSetsContextMenu; -}(EventMachin); - -var ChromeDevtool = function (_EventMachin) { - inherits(ChromeDevtool, _EventMachin); - - function ChromeDevtool(opt) { - classCallCheck(this, ChromeDevtool); - - var _this = possibleConstructorReturn(this, (ChromeDevtool.__proto__ || Object.getPrototypeOf(ChromeDevtool)).call(this)); - - _this.opt = opt || {}; - _this.$root = null; - _this.format = 'rgb'; - _this.currentA = 0; - _this.currentH = 0; - _this.currentS = 0; - _this.currentV = 0; - _this.colorSetsList = new ChromeColorSetsList(_this); - _this.colorpickerCallback = _this.opt.onChange || function () {}; - - _this.control = new ChromeColorControl(_this); - _this.palette = new ChromeColorPallet(_this); - _this.information = new ChromeColorInformation(_this); - _this.colorSetsChooser = new ChromeColorSetsChooser(_this); - _this.currentColorSets = new ChromeCurrentColorSets(_this); - _this.contextMenu = new ChromeCurrentColorSetsContextMenu(_this, _this.currentColorSets); - - _this.initialize(); - return _this; - } - - createClass(ChromeDevtool, [{ - key: 'getOption', - value: function getOption(key) { - return this.opt[key]; - } - }, { - key: 'initialize', - value: function initialize() { - this.$root = new Dom('div', 'codemirror-colorpicker'); - - this.$root.append(this.palette.$el); - this.$root.append(this.control.$el); - this.$root.append(this.information.$el); - this.$root.append(this.currentColorSets.$el); - this.$root.append(this.colorSetsChooser.$el); - this.$root.append(this.contextMenu.$el); - - if (this.opt.target) { - this.$root.appendTo(this.opt.target); - } - - this.$checkColorPickerClass = this.checkColorPickerClass.bind(this); - - this.initializeEvent(); - - this.initColor(this.opt.color); - } - }, { - key: 'showContextMenu', - value: function showContextMenu(e, index) { - this.contextMenu.show(e, index); - } - }, { - key: 'setColor', - value: function setColor(value) { - if ((typeof value === 'undefined' ? 'undefined' : _typeof(value)) == "object") { - if (!value.r || !value.g || !value.b) return; - - this.initColor(color.format(value, "hex")); - } else if (typeof value == "string") { - this.initColor(value); - } - } - }, { - key: 'getColor', - value: function getColor(type) { - this.caculateHSV(); - var rgb = this.convertRGB(); - - if (type) { - return color.format(rgb, type); - } - - return rgb; - } - }, { - key: 'definePositionForArrow', - value: function definePositionForArrow(opt, elementScreenLeft, elementScreenTop) { - //this.$arrow.css({}) - } - }, { - key: 'convertRGB', - value: function convertRGB() { - return color.HSVtoRGB(this.currentH, this.currentS, this.currentV); - } - }, { - key: 'convertHEX', - value: function convertHEX() { - return color.format(this.convertRGB(), 'hex'); - } - }, { - key: 'convertHSL', - value: function convertHSL() { - return color.HSVtoHSL(this.currentH, this.currentS, this.currentV); - } - }, { - key: 'getCurrentColor', - value: function getCurrentColor() { - return this.information.getFormattedColor(); - } - }, { - key: 'getFormattedColor', - value: function getFormattedColor(format) { - format = format || 'hex'; - - if (format == 'rgb') { - var rgb = this.convertRGB(); - rgb.a = this.currentA; - return color.format(rgb, 'rgb'); - } else if (format == 'hsl') { - var hsl = this.convertHSL(); - hsl.a = this.currentA; - return color.format(hsl, 'hsl'); - } else { - var rgb = this.convertRGB(); - return color.format(rgb, 'hex'); - } - } - }, { - key: 'setInputColor', - value: function setInputColor(isNoInputColor) { - this.information.setInputColor(isNoInputColor); - this.control.setInputColor(isNoInputColor); - - this.callbackColorValue(); - } - }, { - key: 'changeInputColorAfterNextFormat', - value: function changeInputColorAfterNextFormat() { - this.control.setInputColor(); - - this.callbackColorValue(); - } - }, { - key: 'callbackColorValue', - value: function callbackColorValue() { - if (typeof this.colorpickerCallback == 'function') { - - if (!isNaN(this.currentA)) { - this.colorpickerCallback(this.getCurrentColor()); - } - } - } - }, { - key: 'caculateHSV', - value: function caculateHSV() { - - var obj = this.palette.caculateSV(); - var control = this.control.caculateH(); - - var s = obj.s; - var v = obj.v; - var h = control.h; - - if (obj.width == 0) { - h = 0; - s = 0; - v = 0; - } - - this.currentH = h; - this.currentS = s; - this.currentV = v; - } - }, { - key: 'setColorUI', - value: function setColorUI() { - this.control.setColorUI(); - this.palette.setColorUI(); - } - }, { - key: 'setCurrentHSV', - value: function setCurrentHSV(h, s, v, a) { - this.currentA = a; - this.currentH = h; - this.currentS = s; - this.currentV = v; - } - }, { - key: 'setCurrentH', - value: function setCurrentH(h) { - this.currentH = h; - } - }, { - key: 'setCurrentA', - value: function setCurrentA(a) { - this.currentA = a; - } - }, { - key: 'setBackgroundColor', - value: function setBackgroundColor(color$$1) { - this.palette.setBackgroundColor(color$$1); - } - }, { - key: 'setCurrentFormat', - value: function setCurrentFormat(format) { - this.format = format; - this.information.setCurrentFormat(format); - } - }, { - key: 'getHSV', - value: function getHSV(colorObj) { - if (colorObj.type == 'hsl') { - return color.HSLtoHSV(colorObj.h, colorObj.s, colorObj.l); - } else { - return color.RGBtoHSV(colorObj); - } - } - }, { - key: 'initColor', - value: function initColor(newColor, format) { - var c = newColor || "#FF0000", - colorObj = color.parse(c); - format = format || colorObj.type; - - this.setCurrentFormat(format); - - var hsv = this.getHSV(colorObj); - this.setCurrentHSV(hsv.h, hsv.s, hsv.v, colorObj.a); - this.setColorUI(); - this.setHueColor(); - this.setInputColor(); - } - }, { - key: 'changeInformationColor', - value: function changeInformationColor(newColor) { - var c = newColor || "#FF0000", - colorObj = color.parse(c); - - var hsv = this.getHSV(colorObj); - this.setCurrentHSV(hsv.h, hsv.s, hsv.v, colorObj.a); - this.setColorUI(); - this.setHueColor(); - this.control.setInputColor(); - this.callbackColorValue(); - } - }, { - key: 'setHueColor', - value: function setHueColor() { - this.control.setOnlyHueColor(); - } - }, { - key: 'checkColorPickerClass', - value: function checkColorPickerClass(el) { - var hasColorView = new Dom(el).closest('codemirror-colorview'); - var hasColorPicker = new Dom(el).closest('codemirror-colorpicker'); - var hasCodeMirror = new Dom(el).closest('CodeMirror'); - var IsInHtml = el.nodeName == 'HTML'; - - return !!(hasColorPicker || hasColorView || hasCodeMirror); - } - }, { - key: 'checkInHtml', - value: function checkInHtml(el) { - var IsInHtml = el.nodeName == 'HTML'; - - return IsInHtml; - } - - // Event Bindings - - }, { - key: 'mouseup document', - value: function mouseupDocument(e) { - this.palette.EventDocumentMouseUp(e); - this.control.EventDocumentMouseUp(e); - } - }, { - key: 'mousemove document', - value: function mousemoveDocument(e) { - this.palette.EventDocumentMouseMove(e); - this.control.EventDocumentMouseMove(e); - } - }, { - key: 'initializeEvent', - value: function initializeEvent() { - - this.initializeEventMachin(); - - this.palette.initializeEvent(); - this.control.initializeEvent(); - this.information.initializeEvent(); - this.currentColorSets.initializeEvent(); - this.colorSetsChooser.initializeEvent(); - this.contextMenu.initializeEvent(); - } - }, { - key: 'currentFormat', - value: function currentFormat() { - this.information.currentFormat(); - } - }, { - key: 'toggleColorChooser', - value: function toggleColorChooser() { - this.colorSetsChooser.toggle(); - } - }, { - key: 'refreshColorSetsChooser', - value: function refreshColorSetsChooser() { - this.colorSetsChooser.refresh(); - } - }, { - key: 'getColorSetsList', - value: function getColorSetsList() { - return this.colorSetsList.getColorSetsList(); - } - }, { - key: 'setCurrentColorSets', - value: function setCurrentColorSets(nameOrIndex) { - this.colorSetsList.setCurrentColorSets(nameOrIndex); - this.currentColorSets.refresh(); - } - }, { - key: 'setColorSets', - value: function setColorSets(list) { - this.colorSetsList.setUserList(list); - } - }, { - key: 'destroy', - value: function destroy() { - get(ChromeDevtool.prototype.__proto__ || Object.getPrototypeOf(ChromeDevtool.prototype), 'destroy', this).call(this); - - this.control.destroy(); - this.palette.destroy(); - this.information.destroy(); - this.colorSetsChooser.destroy(); - this.colorSetsList.destroy(); - this.currentColorSets.destroy(); - this.contextMenu.destroy(); - - // remove color picker callback - this.colorpickerCallback = undefined; - } - }]); - return ChromeDevtool; -}(EventMachin); - if (CodeMirror) { CodeMirror.defineOption("colorpicker", false, function (cm, val, old) { @@ -5312,8 +3825,7 @@ var index = { Color: color, ColorNames: ColorNames, HueColor: HueColor, - ColorPicker: ColorPicker, - ChromeDevtool: ChromeDevtool + ColorPicker: ColorPicker }; return index; diff --git a/dist/codemirror-colorpicker.min.js b/dist/codemirror-colorpicker.min.js index 4ca4ffa..091df49 100644 --- a/dist/codemirror-colorpicker.min.js +++ b/dist/codemirror-colorpicker.min.js @@ -1 +1 @@ -var CodeMirrorColorPicker=function(t){"use strict";t=t&&t.hasOwnProperty("default")?t.default:t;var e={aliceblue:"rgb(240, 248, 255)",antiquewhite:"rgb(250, 235, 215)",aqua:"rgb(0, 255, 255)",aquamarine:"rgb(127, 255, 212)",azure:"rgb(240, 255, 255)",beige:"rgb(245, 245, 220)",bisque:"rgb(255, 228, 196)",black:"rgb(0, 0, 0)",blanchedalmond:"rgb(255, 235, 205)",blue:"rgb(0, 0, 255)",blueviolet:"rgb(138, 43, 226)",brown:"rgb(165, 42, 42)",burlywood:"rgb(222, 184, 135)",cadetblue:"rgb(95, 158, 160)",chartreuse:"rgb(127, 255, 0)",chocolate:"rgb(210, 105, 30)",coral:"rgb(255, 127, 80)",cornflowerblue:"rgb(100, 149, 237)",cornsilk:"rgb(255, 248, 220)",crimson:"rgb(237, 20, 61)",cyan:"rgb(0, 255, 255)",darkblue:"rgb(0, 0, 139)",darkcyan:"rgb(0, 139, 139)",darkgoldenrod:"rgb(184, 134, 11)",darkgray:"rgb(169, 169, 169)",darkgrey:"rgb(169, 169, 169)",darkgreen:"rgb(0, 100, 0)",darkkhaki:"rgb(189, 183, 107)",darkmagenta:"rgb(139, 0, 139)",darkolivegreen:"rgb(85, 107, 47)",darkorange:"rgb(255, 140, 0)",darkorchid:"rgb(153, 50, 204)",darkred:"rgb(139, 0, 0)",darksalmon:"rgb(233, 150, 122)",darkseagreen:"rgb(143, 188, 143)",darkslateblue:"rgb(72, 61, 139)",darkslategray:"rgb(47, 79, 79)",darkslategrey:"rgb(47, 79, 79)",darkturquoise:"rgb(0, 206, 209)",darkviolet:"rgb(148, 0, 211)",deeppink:"rgb(255, 20, 147)",deepskyblue:"rgb(0, 191, 255)",dimgray:"rgb(105, 105, 105)",dimgrey:"rgb(105, 105, 105)",dodgerblue:"rgb(30, 144, 255)",firebrick:"rgb(178, 34, 34)",floralwhite:"rgb(255, 250, 240)",forestgreen:"rgb(34, 139, 34)",fuchsia:"rgb(255, 0, 255)",gainsboro:"rgb(220, 220, 220)",ghostwhite:"rgb(248, 248, 255)",gold:"rgb(255, 215, 0)",goldenrod:"rgb(218, 165, 32)",gray:"rgb(128, 128, 128)",grey:"rgb(128, 128, 128)",green:"rgb(0, 128, 0)",greenyellow:"rgb(173, 255, 47)",honeydew:"rgb(240, 255, 240)",hotpink:"rgb(255, 105, 180)",indianred:"rgb(205, 92, 92)",indigo:"rgb(75, 0, 130)",ivory:"rgb(255, 255, 240)",khaki:"rgb(240, 230, 140)",lavender:"rgb(230, 230, 250)",lavenderblush:"rgb(255, 240, 245)",lawngreen:"rgb(124, 252, 0)",lemonchiffon:"rgb(255, 250, 205)",lightblue:"rgb(173, 216, 230)",lightcoral:"rgb(240, 128, 128)",lightcyan:"rgb(224, 255, 255)",lightgoldenrodyellow:"rgb(250, 250, 210)",lightgreen:"rgb(144, 238, 144)",lightgray:"rgb(211, 211, 211)",lightgrey:"rgb(211, 211, 211)",lightpink:"rgb(255, 182, 193)",lightsalmon:"rgb(255, 160, 122)",lightseagreen:"rgb(32, 178, 170)",lightskyblue:"rgb(135, 206, 250)",lightslategray:"rgb(119, 136, 153)",lightslategrey:"rgb(119, 136, 153)",lightsteelblue:"rgb(176, 196, 222)",lightyellow:"rgb(255, 255, 224)",lime:"rgb(0, 255, 0)",limegreen:"rgb(50, 205, 50)",linen:"rgb(250, 240, 230)",magenta:"rgb(255, 0, 255)",maroon:"rgb(128, 0, 0)",mediumaquamarine:"rgb(102, 205, 170)",mediumblue:"rgb(0, 0, 205)",mediumorchid:"rgb(186, 85, 211)",mediumpurple:"rgb(147, 112, 219)",mediumseagreen:"rgb(60, 179, 113)",mediumslateblue:"rgb(123, 104, 238)",mediumspringgreen:"rgb(0, 250, 154)",mediumturquoise:"rgb(72, 209, 204)",mediumvioletred:"rgb(199, 21, 133)",midnightblue:"rgb(25, 25, 112)",mintcream:"rgb(245, 255, 250)",mistyrose:"rgb(255, 228, 225)",moccasin:"rgb(255, 228, 181)",navajowhite:"rgb(255, 222, 173)",navy:"rgb(0, 0, 128)",oldlace:"rgb(253, 245, 230)",olive:"rgb(128, 128, 0)",olivedrab:"rgb(107, 142, 35)",orange:"rgb(255, 165, 0)",orangered:"rgb(255, 69, 0)",orchid:"rgb(218, 112, 214)",palegoldenrod:"rgb(238, 232, 170)",palegreen:"rgb(152, 251, 152)",paleturquoise:"rgb(175, 238, 238)",palevioletred:"rgb(219, 112, 147)",papayawhip:"rgb(255, 239, 213)",peachpuff:"rgb(255, 218, 185)",peru:"rgb(205, 133, 63)",pink:"rgb(255, 192, 203)",plum:"rgb(221, 160, 221)",powderblue:"rgb(176, 224, 230)",purple:"rgb(128, 0, 128)",rebeccapurple:"rgb(102, 51, 153)",red:"rgb(255, 0, 0)",rosybrown:"rgb(188, 143, 143)",royalblue:"rgb(65, 105, 225)",saddlebrown:"rgb(139, 69, 19)",salmon:"rgb(250, 128, 114)",sandybrown:"rgb(244, 164, 96)",seagreen:"rgb(46, 139, 87)",seashell:"rgb(255, 245, 238)",sienna:"rgb(160, 82, 45)",silver:"rgb(192, 192, 192)",skyblue:"rgb(135, 206, 235)",slateblue:"rgb(106, 90, 205)",slategray:"rgb(112, 128, 144)",slategrey:"rgb(112, 128, 144)",snow:"rgb(255, 250, 250)",springgreen:"rgb(0, 255, 127)",steelblue:"rgb(70, 130, 180)",tan:"rgb(210, 180, 140)",teal:"rgb(0, 128, 128)",thistle:"rgb(216, 191, 216)",tomato:"rgb(255, 99, 71)",turquoise:"rgb(64, 224, 208)",violet:"rgb(238, 130, 238)",wheat:"rgb(245, 222, 179)",white:"rgb(255, 255, 255)",whitesmoke:"rgb(245, 245, 245)",yellow:"rgb(255, 255, 0)",yellowgreen:"rgb(154, 205, 50)",transparent:"rgba(0, 0, 0, 0)"};var r={isColorName:function(t){return!!e[t]},getColorByName:function(t){return e[t]}};var i={euclidean:function(t,e){for(var r=0,i=0,o=t.length;i3&&void 0!==arguments[3]?arguments[3]:10;t=function(t){for(var e={},r=t.length,i=null;r--;)i=t[r],e[JSON.stringify(i)]=i;return Object.values(e)}(t),e=e||Math.max(2,Math.ceil(Math.sqrt(t.length/2))),"string"==typeof(r=r||"euclidean")&&(r=i[r]);for(var n,s,l=0,a=(n=e,(s=t.slice(0)).sort(function(){return Math.round(Math.random())-.5}),s.slice(0,n)),c=!0,h=0,u=function(){var i=new Array(e);for(f=0;f0?o=function(t){if(0===t.length)return[];var e=t[0].map(function(t){return 0});return t.forEach(function(t,r){t.forEach(function(t,i){e[i]+=(t-e[i])/(r+1)})}),e}(e):(v=Math.floor((l=(9301*l+49297)%233280)/233280*t.length),o=t[v]),c=!function(t,e){if(t.length!==e.length)return!1;for(var r=0,i=t.length;r1&&void 0!==arguments[1]&&arguments[1],i=t.match(v),o=[];if(!i)return o;for(var n=0,s=i.length;n-1||i[n].indexOf("rgb")>-1||i[n].indexOf("hsl")>-1)o.push({color:i[n]});else if(e){var l=r.getColorByName(i[n]);l&&o.push({color:i[n],nameColor:l})}var a={next:0};return o.forEach(function(e){var r=t.indexOf(e.color,a.next);e.startIndex=r,e.endIndex=r+e.color.length,a.next=e.endIndex}),o},trim:function(t){return t.replace(/^\s+|\s+$/g,"")},format:function(t,e){if(Array.isArray(t)&&(t={r:t[0],g:t[1],b:t[2],a:t[3]}),"hex"==e){var r=t.r.toString(16);t.r<16&&(r="0"+r);var i=t.g.toString(16);t.g<16&&(i="0"+i);var o=t.b.toString(16);return t.b<16&&(o="0"+o),"#"+r+i+o}return"rgb"==e?1==t.a||void 0===t.a?"rgb("+t.r+","+t.g+","+t.b+")":"rgba("+t.r+","+t.g+","+t.b+","+t.a+")":"hsl"==e?1==t.a||void 0===t.a?"hsl("+t.h+","+t.s+"%,"+t.l+"%)":"hsla("+t.h+","+t.s+"%,"+t.l+"%,"+t.a+")":t},parse:function(t){if("string"==typeof t){if(r.isColorName(t)&&(t=r.getColorByName(t)),t.indexOf("rgb(")>-1){for(var e=0,i=(s=t.replace("rgb(","").replace(")","").split(",")).length;e-1){for(e=0,i=(s=t.replace("rgba(","").replace(")","").split(",")).length;e-1){for(e=0,i=(s=t.replace("hsl(","").replace(")","").split(",")).length;e-1){for(e=0,i=(s=t.replace("hsla(","").replace(")","").split(",")).length;e>16,g:(65280&t)>>8,b:(255&t)>>0,a:1};if(0<=t&&t<=4294967295)return{type:"hex",r:(4278190080&t)>>24,g:(16711680&t)>>16,b:(65280&t)>>8,a:(255&t)/255}}return t},HSVtoRGB:function(t,e,r){if(1==arguments.length){var i=arguments[0];t=i.h,e=i.s,r=i.v}var o=t,n=r;360==o&&(o=0);var s=e*n,l=s*(1-Math.abs(o/60%2-1)),a=n-s,c=[];return 0<=o&&o<60?c=[s,l,0]:60<=o&&o<120?c=[l,s,0]:120<=o&&o<180?c=[0,s,l]:180<=o&&o<240?c=[0,l,s]:240<=o&&o<300?c=[l,0,s]:300<=o&&o<360&&(c=[s,0,l]),{r:Math.round(255*(c[0]+a)),g:Math.round(255*(c[1]+a)),b:Math.round(255*(c[2]+a))}},RGBtoHSV:function(t,e,r){if(1==arguments.length){var i=arguments[0];t=i.r,e=i.g,r=i.b}var o=t/255,n=e/255,s=r/255,l=Math.max(o,n,s),a=l-Math.min(o,n,s),c=0;0==a?c=0:l==o?c=(n-s)/a%6*60:l==n?c=60*((s-o)/a+2):l==s&&(c=60*((o-n)/a+4)),c<0&&(c=360+c);return{h:c,s:0==l?0:a/l,v:l}},HSVtoHSL:function(t,e,r){if(1==arguments.length){var i=arguments[0];t=i.h,e=i.s,r=i.v}var o=this.HSVtoRGB(t,e,r);return this.RGBtoHSL(o.r,o.g,o.b)},RGBtoCMYK:function(t,e,r){if(1==arguments.length){var i=arguments[0];t=i.r,e=i.g,r=i.b}var o=t/255,n=e/255,s=r/255,l=1-Math.max(o,n,s);return{c:(1-o-l)/(1-l),m:(1-n-l)/(1-l),y:(1-s-l)/(1-l),k:l}},CMYKtoRGB:function(t,e,r,i){if(1==arguments.length){var o=arguments[0];t=o.c,e=o.m,r=o.y,i=o.k}return{r:255*(1-t)*(1-i),g:255*(1-e)*(1-i),b:255*(1-r)*(1-i)}},RGBtoHSL:function(t,e,r){if(1==arguments.length){var i=arguments[0];t=i.r,e=i.g,r=i.b}t/=255,e/=255,r/=255;var o,n,s=Math.max(t,e,r),l=Math.min(t,e,r),a=(s+l)/2;if(s==l)o=n=0;else{var c=s-l;switch(n=a>.5?c/(2-s-l):c/(s+l),s){case t:o=(e-r)/c+(e1&&(r-=1),r<1/6?t+6*(e-t)*r:r<.5?e:r<2/3?t+(e-t)*(2/3-r)*6:t},HSLtoHSV:function(t,e,r){if(1==arguments.length){var i=arguments[0];t=i.h,e=i.s,i.v}var o=this.HSLtoRGB(t,e,r);return this.RGBtoHSV(o.r,o.g,o.b)},HSLtoRGB:function(t,e,r){if(1==arguments.length){var i=arguments[0];t=i.h,e=i.s,i.v}var o,n,s;if(t/=360,r/=100,0==(e/=100))o=n=s=r;else{var l=r<.5?r*(1+e):r+e-r*e,a=2*r-l;o=this.HUEtoRGB(a,l,t+1/3),n=this.HUEtoRGB(a,l,t),s=this.HUEtoRGB(a,l,t-1/3)}return{r:Math.round(255*o),g:Math.round(255*n),b:Math.round(255*s)}},c:function(t,e,r){if(1==arguments.length){var i=arguments[0];t=i.r,e=i.g,r=i.b}return this.gray((t+e+r)/3>90?0:255)},gray:function(t){return{r:t,g:t,b:t}},RGBtoSimpleGray:function(t,e,r){if(1==arguments.length){var i=arguments[0];t=i.r,e=i.g,r=i.b}return this.gray(Math.ceil((t+e+r)/3))},RGBtoGray:function(t,e,r){if(1==arguments.length){var i=arguments[0];t=i.r,e=i.g,r=i.b}return this.gray(this.RGBtoYCrCb(t,e,r).y)},RGBtoYCrCb:function(t,e,r){if(1==arguments.length){var i=arguments[0];t=i.r,e=i.g,r=i.b}var o=.2126*t+.7152*e+.0722*r,n=.564*(r-o),s=.713*(t-o);return{y:Math.ceil(o),cr:s,cb:n}},YCrCbtoRGB:function(t,e,r){var i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:0;if(1==arguments.length){var o=arguments[0],n=(t=o.y,e=o.cr,r=o.cb,o.bit);i=void 0===n?0:n}var s=t+1.402*(e-i),l=t-.344*(r-i)-.714*(e-i),a=t+1.772*(r-i);return{r:Math.ceil(s),g:Math.ceil(l),b:Math.ceil(a)}},interpolateRGB:function(t,e,r){var i={r:parseInt(t.r+(e.r-t.r)*r,10),g:parseInt(t.g+(e.g-t.g)*r,10),b:parseInt(t.b+(e.b-t.b)*r,10)};return d.format(i,"hex")},scale:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:5;if(!t)return[];for(var r=(t=t||[]).length,i=[],o=0;o1&&void 0!==arguments[1]?arguments[1]:"h",r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:9,i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"rgb",o=arguments.length>4&&void 0!==arguments[4]?arguments[4]:0,n=arguments.length>5&&void 0!==arguments[5]?arguments[5]:1,s=arguments.length>6&&void 0!==arguments[6]?arguments[6]:100,l=this.parse(t),a=this.RGBtoHSV(l),c=(n-o)*s/r,h=[],u=1;u<=r;u++)a[e]=Math.abs((s-c*u)/s),h.push(this.format(this.HSVtoRGB(a),i));return h},scaleH:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:9,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"rgb",i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:0,o=arguments.length>4&&void 0!==arguments[4]?arguments[4]:360;return this.scaleHSV(t,"h",e,r,i,o,1)},scaleS:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:9,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"rgb",i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:0,o=arguments.length>4&&void 0!==arguments[4]?arguments[4]:1;return this.scaleHSV(t,"s",e,r,i,o,100)},scaleV:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:9,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"rgb",i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:0,o=arguments.length>4&&void 0!==arguments[4]?arguments[4]:1;return this.scaleHSV(t,"v",e,r,i,o,100)},palette:function(t){var e=this,r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:6,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"hex";return o(t,r).map(function(t){return e.format(t,i)})},ImageToRGB:function(t,e){var r=new f(t);r.loadImage(function(){e&&e(r.toRGB())})}};d.scale.parula=function(t){return d.scale(["#352a87","#0f5cdd","#00b5a6","#ffc337","#fdff00"],t)},d.scale.jet=function(t){return d.scale(["#00008f","#0020ff","#00ffff","#51ff77","#fdff00","#ff0000","#800000"],t)},d.scale.hsv=function(t){return d.scale(["#ff0000","#ffff00","#00ff00","#00ffff","#0000ff","#ff00ff","#ff0000"],t)},d.scale.hot=function(t){return d.scale(["#0b0000","#ff0000","#ffff00","#ffffff"],t)},d.scale.pink=function(t){return d.scale(["#1e0000","#bd7b7b","#e7e5b2","#ffffff"],t)},d.scale.bone=function(t){return d.scale(["#000000","#4a4a68","#a6c6c6","#ffffff"],t)},d.scale.copper=function(t){return d.scale(["#000000","#3d2618","#9d623e","#ffa167","#ffc77f"],t)};var g=[{rgb:"#ff0000",start:0},{rgb:"#ffff00",start:.17},{rgb:"#00ff00",start:.33},{rgb:"#00ffff",start:.5},{rgb:"#0000ff",start:.67},{rgb:"#ff00ff",start:.83},{rgb:"#ff0000",start:1}];!function(){for(var t=0,e=g.length;t=t){e=g[i-1],r=g[i];break}return e&&r?d.interpolateRGB(e,r,(t-e.start)/(r.start-e.start)):g[0].rgb}},k=0,C=[],m=function(){function t(e,r,i){if(s(this,t),"string"!=typeof e)this.el=e;else{var o=document.createElement(e);for(var n in this.uniqId=k++,r&&(o.className=r),i=i||{})o.setAttribute(n,i[n]);this.el=o}}return l(t,[{key:"attr",value:function(t,e){return 1==arguments.length?this.el.getAttribute(t):(this.el.setAttribute(t,e),this)}},{key:"closest",value:function(e){for(var r=this,i=!1;!(i=r.hasClass(e));){if(!r.el.parentNode)return null;r=new t(r.el.parentNode)}return i?r:null}},{key:"removeClass",value:function(t){this.el.className=(" "+this.el.className+" ").replace(" "+t+" "," ").trim()}},{key:"hasClass",value:function(t){return!!this.el.className&&(" "+this.el.className+" ").indexOf(" "+t+" ")>-1}},{key:"addClass",value:function(t){this.hasClass(t)||(this.el.className=this.el.className+" "+t)}},{key:"toggleClass",value:function(t){this.hasClass(t)?this.removeClass(t):this.addClass(t)}},{key:"html",value:function(t){return"string"==typeof t?this.el.innerHTML=t:this.empty().append(t),this}},{key:"empty",value:function(){return this.html("")}},{key:"append",value:function(t){return"string"==typeof t?this.el.appendChild(document.createTextNode(t)):this.el.appendChild(t.el||t),this}},{key:"appendTo",value:function(t){return(t.el?t.el:t).appendChild(this.el),this}},{key:"remove",value:function(){return this.el.parentNode&&this.el.parentNode.removeChild(this.el),this}},{key:"text",value:function(){return this.el.textContent}},{key:"css",value:function(t,e){if(2==arguments.length)this.el.style[t]=e;else if(1==arguments.length){if("string"==typeof t)return getComputedStyle(this.el)[t];var r=t||{};for(var i in r)this.el.style[i]=r[i]}return this}},{key:"offset",value:function(){var t=this.el.getBoundingClientRect();return{top:t.top+document.body.scrollTop,left:t.left+document.body.scrollLeft}}},{key:"position",value:function(){return this.el.style.top?{top:parseFloat(this.css("top")),left:parseFloat(this.css("left"))}:this.el.getBoundingClientRect()}},{key:"width",value:function(){return this.el.offsetWidth}},{key:"height",value:function(){return this.el.offsetHeight}},{key:"dataKey",value:function(t){return this.uniqId+"."+t}},{key:"data",value:function(t,e){if(2!=arguments.length){if(1==arguments.length)return C[this.dataKey(t)];var r=Object.keys(C),i=this.uniqId+".";return r.filter(function(t){return 0==t.indexOf(i)}).map(function(t){return C[t]})}return C[this.dataKey(t)]=e,this}},{key:"val",value:function(t){return 0==arguments.length?this.el.value:(1==arguments.length&&(this.el.value=t),this)}},{key:"int",value:function(){return parseInt(this.val(),10)}},{key:"float",value:function(){return parseFloat(this.val())}},{key:"show",value:function(){return this.css("display","block")}},{key:"hide",value:function(){return this.css("display","none")}},{key:"toggle",value:function(){return"none"==this.css("display")?this.show():this.hide()}},{key:"on",value:function(t,e,r,i){return this.el.addEventListener(t,e,r,i),this}},{key:"off",value:function(t,e){return this.el.removeEventListener(t,e),this}},{key:"getElement",value:function(){return this.el}},{key:"createChild",value:function(e){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"",i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{},n=new t(e,r,i);return n.css(o),this.append(n),n}}]),t}(),y=["ArrowDown","ArrowUp","ArrowLeft","ArrowRight","Space","Escape","Enter","Digit1","Digit2","Digit3","Digit4","Digit5","Digit6","Digit7","Digit8","Digit9","Digit0","Period","Backspace","Tab"],b=function(t){return y.includes(t.code)},$=function(t,e,r){t.addEventListener(e,r)},_=function(t,e,r){t.removeEventListener(e,r)},w=function(t){return t.touches&&t.touches[0]?t.touches[0]:t},S=/^(click|mouse(down|up|move|enter|leave)|key(down|up|press)|contextmenu|change|input)/gi,x=["Control","Shift","Alt","Meta"],H=function(){function t(){s(this,t)}return l(t,[{key:"initializeEvent",value:function(){this.initializeEventMachin()}},{key:"destroy",value:function(){this.destroyEventMachin()}},{key:"destroyEventMachin",value:function(){this.removeEventAll()}},{key:"initializeEventMachin",value:function(){this.filterProps(S).forEach(this.parseEvent.bind(this))}},{key:"filterProps",value:function(t){return Object.getOwnPropertyNames(this.__proto__).filter(function(e){return e.match(t)})}},{key:"parseEvent",value:function(t){var e=t.split(" ");this.bindingEvent(e,this[t].bind(this))}},{key:"getDefaultDomElement",value:function(t){var e=void 0;return(e=t?this[t]||window[t]:this.el||this.$el||this.$root)instanceof m?e.getElement():e}},{key:"getDefaultEventObject",value:function(t){var e=this,r=t.split("."),i=r.shift(),o=r.includes("Control"),n=r.includes("Shift"),s=r.includes("Alt"),l=r.includes("Meta"),a=(r=r.filter(function(t){return!1===x.includes(t)})).filter(function(t){return!!e[t]});return{eventName:i,isControl:o,isShift:n,isAlt:s,isMeta:l,codes:r=r.filter(function(t){return!1===a.includes(t)}).map(function(t){return t.toLowerCase()}),checkMethodList:a}}},{key:"bindingEvent",value:function(t,e){var r,i=(r=t,Array.isArray(r)?r:Array.from(r)),o=i[0],n=i[1],s=i.slice(2);n=this.getDefaultDomElement(n);var l=this.getDefaultEventObject(o);l.dom=n,l.delegate=s.join(" "),this.addEvent(l,e)}},{key:"matchPath",value:function(t,e){return t?t.matches(e)?t:this.matchPath(t.parentElement,e):null}},{key:"getBindings",value:function(){return this._bindings||this.initBindings(),this._bindings}},{key:"addBinding",value:function(t){this.getBindings().push(t)}},{key:"initBindings",value:function(){this._bindings=[]}},{key:"checkEventType",value:function(t,e){var r=this,i=!t.ctrlKey||e.isControl,o=!t.shiftKey||e.isShift,n=!t.altKey||e.isAlt,s=!t.metaKey||e.isMeta,l=!0;e.codes.length&&(l=e.codes.includes(t.code.toLowerCase())||e.codes.includes(t.key.toLowerCase()));var a=!0;return e.checkMethodList.length&&(a=e.checkMethodList.every(function(e){return r[e].call(r,t)})),i&&n&&o&&s&&l&&a}},{key:"makeCallback",value:function(t,e){var r=this;return t.delegate?function(i){if(r.checkEventType(i,t)){var o=r.matchPath(i.target||i.srcElement,t.delegate);if(o)return i.delegateTarget=o,i.$delegateTarget=new m(o),e(i)}}:function(i){if(r.checkEventType(i,t))return e(i)}}},{key:"addEvent",value:function(t,e){t.callback=this.makeCallback(t,e),this.addBinding(t),$(t.dom,t.eventName,t.callback)}},{key:"removeEventAll",value:function(){var t=this;this.getBindings().forEach(function(e){t.removeEvent(e)}),this.initBindings()}},{key:"removeEvent",value:function(t){var e=t.eventName,r=t.dom,i=t.callback;_(r,e,i)}}]),t}(),L=function(t){function e(t){s(this,e);var r=u(this,(e.__proto__||Object.getPrototypeOf(e)).call(this));return r.colorpicker=t,r.initialize(),r}return h(e,H),l(e,[{key:"initialize",value:function(){this.$el=new m("div","control"),this.$hue=this.$el.createChild("div","hue"),this.$opacity=this.$el.createChild("div","opacity"),this.$controlPattern=this.$el.createChild("div","empty"),this.$controlColor=this.$el.createChild("div","color"),this.$hueContainer=this.$hue.createChild("div","hue-container"),this.$drag_bar=this.$hueContainer.createChild("div","drag-bar"),this.drag_bar_pos={},this.$opacityContainer=this.$opacity.createChild("div","opacity-container"),this.$opacityColorBar=this.$opacityContainer.createChild("div","color-bar"),this.$opacity_drag_bar=this.$opacityContainer.createChild("div","drag-bar2"),this.opacity_drag_bar_pos={}}},{key:"setBackgroundColor",value:function(t){this.$controlColor.css("background-color",t)}},{key:"refresh",value:function(){this.setColorUI()}},{key:"setColorUI",value:function(){var t=this.$el.width()*this.colorpicker.currentS,e=this.$el.height()*(1-this.colorpicker.currentV);this.$drag_pointer.css({left:t-5+"px",top:e-5+"px"})}},{key:"setMainColor",value:function(t){t.preventDefault();var e=this.colorpicker.$root.position(),r=$color.width(),i=$color.height(),o=t.clientX-e.left,n=t.clientY-e.top;o<0?o=0:o>r&&(o=r),n<0?n=0:n>i&&(n=i),this.$drag_pointer.css({left:o-5+"px",top:n-5+"px"}),this.colorpicker.caculateHSV(),this.colorpicker.setInputColor()}},{key:"setOpacityColorBar",value:function(t){var e=d.parse(t);e.a=0;var r=d.format(e,"rgb");e.a=1;var i=d.format(e,"rgb");this.$opacityColorBar.css("background","linear-gradient(to right, "+r+", "+i+")")}},{key:"setOpacity",value:function(t){var e,r=this.$opacityContainer.offset().left,i=r+this.$opacityContainer.width(),o=w(t).clientX;e=oi?100:(o-r)/(i-r)*100;var n=this.$opacityContainer.width()*(e/100);this.$opacity_drag_bar.css({left:n-Math.ceil(this.$opacity_drag_bar.width()/2)+"px"}),this.opacity_drag_bar_pos={x:n},this.colorpicker.setCurrentA(this.caculateOpacity()),this.colorpicker.currentFormat(),this.colorpicker.setInputColor()}},{key:"setInputColor",value:function(){this.setBackgroundColor(this.colorpicker.getFormattedColor("rgb"));var t=this.colorpicker.convertRGB(),e=d.format(t,"rgb");this.setOpacityColorBar(e)}},{key:"setColorUI",value:function(){var t=this.$hueContainer.width()*(this.colorpicker.currentH/360);this.$drag_bar.css({left:t-7.5+"px"}),this.drag_bar_pos={x:t};var e=this.$opacityContainer.width()*(this.colorpicker.currentA||0);this.$opacity_drag_bar.css({left:e-7.5+"px"}),this.opacity_drag_bar_pos={x:e}}},{key:"caculateH",value:function(){return{h:(this.drag_bar_pos||{x:0}).x/this.$hueContainer.width()*360}}},{key:"caculateOpacity",value:function(){var t=this.opacity_drag_bar_pos||{x:0},e=Math.round(t.x/this.$opacityContainer.width()*100)/100;return isNaN(e)?1:e}},{key:"EventDocumentMouseMove",value:function(t){this.isHueDown&&this.setHueColor(t),this.isOpacityDown&&this.setOpacity(t)}},{key:"EventDocumentMouseUp",value:function(t){this.isHueDown=!1,this.isOpacityDown=!1}},{key:"setControlColor",value:function(t){this.$controlColor.css("background-color",t)}},{key:"setHueColor",value:function(t){var e,r=this.$hueContainer.offset().left,i=r+this.$hueContainer.width(),o=t?w(t).clientX:r+(i-r)*(this.colorpicker.currentH/360);e=oi?100:(o-r)/(i-r)*100;var n=this.$hueContainer.width()*(e/100);this.$drag_bar.css({left:n-Math.ceil(this.$drag_bar.width()/2)+"px"}),this.drag_bar_pos={x:n};var s=p.checkHueColor(e/100);this.colorpicker.setBackgroundColor(s),this.colorpicker.setCurrentH(e/100*360),this.colorpicker.setInputColor()}},{key:"setOnlyHueColor",value:function(){var t,e=this.$hueContainer.offset().left,r=e+this.$hueContainer.width(),i=e+(r-e)*(this.colorpicker.currentH/360);t=ir?100:(i-e)/(r-e)*100;var o=this.$hueContainer.width()*(t/100);this.$drag_bar.css({left:o-Math.ceil(this.$drag_bar.width()/2)+"px"}),this.drag_bar_pos={x:o};var n=p.checkHueColor(t/100);this.colorpicker.setBackgroundColor(n),this.colorpicker.setCurrentH(t/100*360)}},{key:"mousedown $drag_bar",value:function(t){t.preventDefault(),this.isHueDown=!0}},{key:"mousedown $opacity_drag_bar",value:function(t){t.preventDefault(),this.isOpacityDown=!0}},{key:"mousedown $hueContainer",value:function(t){this.isHueDown=!0,this.setHueColor(t)}},{key:"mousedown $opacityContainer",value:function(t){this.isOpacityDown=!0,this.setOpacity(t)}}]),e}(),B=function(t){function e(t){s(this,e);var r=u(this,(e.__proto__||Object.getPrototypeOf(e)).call(this));return r.colorpicker=t,r.initialize(),r}return h(e,H),l(e,[{key:"initialize",value:function(){this.$el=new m("div","information hex"),this.$informationChange=this.$el.createChild("div","information-change"),this.$formatChangeButton=this.$informationChange.createChild("button","format-change-button arrow-button",{type:"button"}),this.$el.append(this.makeInputFieldHex()),this.$el.append(this.makeInputFieldRgb()),this.$el.append(this.makeInputFieldHsl()),this.format="hex"}},{key:"makeInputFieldHex",value:function(){var t=new m("div","information-item hex"),e=t.createChild("div","input-field hex");return this.$hexCode=e.createChild("input","input",{type:"text"}),e.createChild("div","title").html("HEX"),t}},{key:"makeInputFieldRgb",value:function(){var t=new m("div","information-item rgb"),e=t.createChild("div","input-field rgb-r");return this.$rgb_r=e.createChild("input","input",{type:"number",step:1,min:0,max:255}),e.createChild("div","title").html("R"),e=t.createChild("div","input-field rgb-g"),this.$rgb_g=e.createChild("input","input",{type:"number",step:1,min:0,max:255}),e.createChild("div","title").html("G"),e=t.createChild("div","input-field rgb-b"),this.$rgb_b=e.createChild("input","input",{type:"number",step:1,min:0,max:255}),e.createChild("div","title").html("B"),e=t.createChild("div","input-field rgb-a"),this.$rgb_a=e.createChild("input","input",{type:"number",step:.01,min:0,max:1}),e.createChild("div","title").html("A"),t}},{key:"makeInputFieldHsl",value:function(){var t=new m("div","information-item hsl"),e=t.createChild("div","input-field hsl-h");return this.$hsl_h=e.createChild("input","input",{type:"number",step:1,min:0,max:360}),e.createChild("div","title").html("H"),e=t.createChild("div","input-field hsl-s"),this.$hsl_s=e.createChild("input","input",{type:"number",step:1,min:0,max:100}),e.createChild("div","postfix").html("%"),e.createChild("div","title").html("S"),e=t.createChild("div","input-field hsl-l"),this.$hsl_l=e.createChild("input","input",{type:"number",step:1,min:0,max:100}),e.createChild("div","postfix").html("%"),e.createChild("div","title").html("L"),e=t.createChild("div","input-field hsl-a"),this.$hsl_a=e.createChild("input","input",{type:"number",step:.01,min:0,max:1}),e.createChild("div","title").html("A"),t}},{key:"currentFormat",value:function(){var t=this.format||"hex";if(this.colorpicker.currentA<1&&"hex"==t){this.$el.removeClass(t),this.$el.addClass("rgb"),this.format="rgb",this.colorpicker.setInputColor()}}},{key:"setCurrentFormat",value:function(t){this.format=t,this.initFormat()}},{key:"initFormat",value:function(){var t=this.format||"hex";this.$el.removeClass("hex"),this.$el.removeClass("rgb"),this.$el.removeClass("hsl"),this.$el.addClass(t)}},{key:"nextFormat",value:function(){var t=this.format||"hex",e="hex";"hex"==t?e="rgb":"rgb"==t?e="hsl":"hsl"==t&&(e=1==this.colorpicker.currentA?"hex":"rgb"),this.$el.removeClass(t),this.$el.addClass(e),this.format=e,this.setInputColor(),this.colorpicker.changeInputColorAfterNextFormat()}},{key:"setRGBInput",value:function(t,e,r){this.$rgb_r.val(t),this.$rgb_g.val(e),this.$rgb_b.val(r),this.$rgb_a.val(this.colorpicker.currentA)}},{key:"setHSLInput",value:function(t,e,r){this.$hsl_h.val(t),this.$hsl_s.val(e),this.$hsl_l.val(r),this.$hsl_a.val(this.colorpicker.currentA)}},{key:"getHexFormat",value:function(){return d.format({r:this.$rgb_r.int(),g:this.$rgb_g.int(),b:this.$rgb_b.int()},"hex")}},{key:"getRgbFormat",value:function(){return d.format({r:this.$rgb_r.int(),g:this.$rgb_g.int(),b:this.$rgb_b.int(),a:this.$rgb_a.float()},"rgb")}},{key:"getHslFormat",value:function(){return d.format({h:this.$hsl_h.val(),s:this.$hsl_s.val(),l:this.$hsl_l.val(),a:this.$hsl_a.float()},"hsl")}},{key:"convertRGB",value:function(){return this.colorpicker.convertRGB()}},{key:"convertHEX",value:function(){return this.colorpicker.convertHEX()}},{key:"convertHSL",value:function(){return this.colorpicker.convertHSL()}},{key:"getFormattedColor",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]&&arguments[1];return"hex"==(t=t||this.getFormat())?this.$hexCode.val():"rgb"==t?this.getRgbFormat(e):"hsl"==t?this.getHslFormat(e):void 0}},{key:"getFormat",value:function(){return this.format||"hex"}},{key:"setInputColor",value:function(){var t=this.getFormat(),e=null;if("hex"==t)this.$hexCode.val(this.convertHEX());else if("rgb"==t){e=this.convertRGB();this.setRGBInput(e.r,e.g,e.b,e.a)}else if("hsl"==t){var r=this.convertHSL();this.setHSLInput(r.h,r.s,r.l,r.a)}}},{key:"checkNumberKey",value:function(t){return b(t)}},{key:"checkNotNumberKey",value:function(t){return!b(t)}},{key:"changeRgbColor",value:function(){this.colorpicker.changeInformationColor(this.getRgbFormat())}},{key:"changeHslColor",value:function(){this.colorpicker.changeInformationColor(this.getHslFormat())}},{key:"change $rgb_r",value:function(t){this.changeRgbColor()}},{key:"change $rgb_g",value:function(t){this.changeRgbColor()}},{key:"change $rgb_b",value:function(t){this.changeRgbColor()}},{key:"change $rgb_a",value:function(t){this.changeRgbColor()}},{key:"change $hsl_h",value:function(t){this.changeHslColor()}},{key:"change $hsl_s",value:function(t){this.changeHslColor()}},{key:"change $hsl_l",value:function(t){this.changeHslColor()}},{key:"change $hsl_a",value:function(t){this.changeHslColor()}},{key:"keydown $hexCode",value:function(t){if(t.which<65||t.which>70)return this.checkNumberKey(t)}},{key:"keyup $hexCode",value:function(t){var e=this.$hexCode.val();"#"==e.charAt(0)&&7==e.length&&this.colorpicker.changeInformationColor(e)}},{key:"click $formatChangeButton",value:function(t){this.nextFormat()}},{key:"refresh",value:function(){}}]),e}(),I=function(t){function e(t){s(this,e);var r=u(this,(e.__proto__||Object.getPrototypeOf(e)).call(this));return r.colorpicker=t,r.initialize(),r}return h(e,H),l(e,[{key:"initialize",value:function(){this.$el=new m("div","color"),this.$saturation=this.$el.createChild("div","saturation"),this.$value=this.$saturation.createChild("div","value"),this.$drag_pointer=this.$value.createChild("div","drag-pointer")}},{key:"setBackgroundColor",value:function(t){this.$el.css("background-color",t)}},{key:"refresh",value:function(){this.setColorUI()}},{key:"caculateSV",value:function(){var t=this.drag_pointer_pos||{x:0,y:0},e=this.$el.width(),r=this.$el.height();return{s:t.x/e,v:(r-t.y)/r,width:e,height:r}}},{key:"setColorUI",value:function(){var t=this.$el.width()*this.colorpicker.currentS,e=this.$el.height()*(1-this.colorpicker.currentV);this.$drag_pointer.css({left:t-5+"px",top:e-5+"px"}),this.drag_pointer_pos={x:t,y:e}}},{key:"setMainColor",value:function(t){t.preventDefault();var e=this.colorpicker.$root.position(),r=this.$el.width(),i=this.$el.height(),o=t.clientX-e.left,n=t.clientY-e.top;o<0?o=0:o>r&&(o=r),n<0?n=0:n>i&&(n=i),this.$drag_pointer.css({left:o-5+"px",top:n-5+"px"}),this.drag_pointer_pos={x:o,y:n},this.colorpicker.caculateHSV(),this.colorpicker.setInputColor()}},{key:"EventDocumentMouseUp",value:function(t){this.isDown=!1}},{key:"EventDocumentMouseMove",value:function(t){this.isDown&&this.setMainColor(t)}},{key:"mousedown",value:function(t){this.isDown=!0,this.setMainColor(t)}},{key:"mouseup",value:function(t){this.isDown=!1}}]),e}(),E="data-colorsets-index",F=function(t){function e(t){s(this,e);var r=u(this,(e.__proto__||Object.getPrototypeOf(e)).call(this));return r.colorpicker=t,r.initialize(),r}return h(e,H),l(e,[{key:"initialize",value:function(){this.$el=new m("div","color-chooser");var t=this.$el.createChild("div","color-chooser-container"),e=t.createChild("div","colorsets-item colorsets-item-header");e.createChild("h1","title").html("Color Paletts"),this.$toggleButton=e.createChild("span","items").html("×"),this.$colorsetsList=t.createChild("div","colorsets-list"),this.refresh()}},{key:"refresh",value:function(){this.$colorsetsList.html(this.makeColorSetsList())}},{key:"makeColorItemList",value:function(t){for(var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:5,r=new m("div"),i=0;iwindow.innerWidth&&(i-=e+i-window.innerWidth),i<0&&(i=0);var o=t.top-this.$body.el.scrollTop;r+o>window.innerHeight&&(o-=r+o-window.innerHeight),o<0&&(o=0),this.$root.css({left:i+"px",top:o+"px"})}},{key:"show",value:function(t,e,r){this.destroy(),this.initializeEvent(),this.$root.appendTo(document.body),this.$root.css({position:"fixed",left:"-10000px",top:"-10000px"}).show(),this.definePosition(t),this.isColorPickerShow=!0,this.isShortCut=t.isShortCut||!1,this.initColor(e),this.colorpickerCallback=function(t){r(t)},this.hideDelay=t.hideDelay||2e3,this.hideDelay>0&&this.setHideDelay(this.hideDelay)}},{key:"setHideDelay",value:function(t){var e=this;t=t||0,this.$root.off("mouseenter"),this.$root.off("mouseleave"),this.$root.on("mouseenter",function(){clearTimeout(e.timerCloseColorPicker)}),this.$root.on("mouseleave",function(){clearTimeout(e.timerCloseColorPicker),e.timerCloseColorPicker=setTimeout(e.hide.bind(e),t)}),clearTimeout(this.timerCloseColorPicker),this.timerCloseColorPicker=setTimeout(this.hide.bind(this),t)}},{key:"hide",value:function(){this.isColorPickerShow&&(this.destroy(),this.$root.hide(),this.$root.remove(),this.isColorPickerShow=!1)}},{key:"convertRGB",value:function(){return d.HSVtoRGB(this.currentH,this.currentS,this.currentV)}},{key:"convertHEX",value:function(){return d.format(this.convertRGB(),"hex")}},{key:"convertHSL",value:function(){return d.HSVtoHSL(this.currentH,this.currentS,this.currentV)}},{key:"getCurrentColor",value:function(){return this.information.getFormattedColor()}},{key:"getFormattedColor",value:function(t){if("rgb"==(t=t||"hex"))return(r=this.convertRGB()).a=this.currentA,d.format(r,"rgb");if("hsl"==t){var e=this.convertHSL();return e.a=this.currentA,d.format(e,"hsl")}var r=this.convertRGB();return d.format(r,"hex")}},{key:"setInputColor",value:function(t){this.information.setInputColor(t),this.control.setInputColor(t),this.callbackColorValue()}},{key:"changeInputColorAfterNextFormat",value:function(){this.control.setInputColor(),this.callbackColorValue()}},{key:"callbackColorValue",value:function(){"function"==typeof this.colorpickerCallback&&(isNaN(this.currentA)||this.colorpickerCallback(this.getCurrentColor()))}},{key:"caculateHSV",value:function(){var t=this.palette.caculateSV(),e=this.control.caculateH(),r=t.s,i=t.v,o=e.h;0==t.width&&(o=0,r=0,i=0),this.currentH=o,this.currentS=r,this.currentV=i}},{key:"setColorUI",value:function(){this.control.setColorUI(),this.palette.setColorUI()}},{key:"setCurrentHSV",value:function(t,e,r,i){this.currentA=i,this.currentH=t,this.currentS=e,this.currentV=r}},{key:"setCurrentH",value:function(t){this.currentH=t}},{key:"setCurrentA",value:function(t){this.currentA=t}},{key:"setBackgroundColor",value:function(t){this.palette.setBackgroundColor(t)}},{key:"setCurrentFormat",value:function(t){this.format=t,this.information.setCurrentFormat(t)}},{key:"getHSV",value:function(t){return"hsl"==t.type?d.HSLtoHSV(t.h,t.s,t.l):d.RGBtoHSV(t)}},{key:"initColor",value:function(t,e){var r=t||"#FF0000",i=d.parse(r);e=e||i.type,this.setCurrentFormat(e);var o=this.getHSV(i);this.setCurrentHSV(o.h,o.s,o.v,i.a),this.setColorUI(),this.setHueColor(),this.setInputColor()}},{key:"changeInformationColor",value:function(t){var e=t||"#FF0000",r=d.parse(e),i=this.getHSV(r);this.setCurrentHSV(i.h,i.s,i.v,r.a),this.setColorUI(),this.setHueColor(),this.control.setInputColor(),this.callbackColorValue()}},{key:"setHueColor",value:function(){this.control.setOnlyHueColor()}},{key:"checkColorPickerClass",value:function(t){var e=new m(t).closest("codemirror-colorview"),r=new m(t).closest("codemirror-colorpicker"),i=new m(t).closest("CodeMirror");t.nodeName;return!!(r||e||i)}},{key:"checkInHtml",value:function(t){return"HTML"==t.nodeName}},{key:"mouseup document",value:function(t){this.palette.EventDocumentMouseUp(t),this.control.EventDocumentMouseUp(t),this.checkInHtml(t.target)||0==this.checkColorPickerClass(t.target)&&this.hide()}},{key:"mousemove document",value:function(t){this.palette.EventDocumentMouseMove(t),this.control.EventDocumentMouseMove(t)}},{key:"initializeEvent",value:function(){this.initializeEventMachin(),this.palette.initializeEvent(),this.control.initializeEvent(),this.information.initializeEvent(),this.currentColorSets.initializeEvent(),this.colorSetsChooser.initializeEvent(),this.contextMenu.initializeEvent()}},{key:"currentFormat",value:function(){this.information.currentFormat()}},{key:"toggleColorChooser",value:function(){this.colorSetsChooser.toggle()}},{key:"refreshColorSetsChooser",value:function(){this.colorSetsChooser.refresh()}},{key:"getColorSetsList",value:function(){return this.colorSetsList.getColorSetsList()}},{key:"setCurrentColorSets",value:function(t){this.colorSetsList.setCurrentColorSets(t),this.currentColorSets.refresh()}},{key:"setColorSets",value:function(t){this.colorSetsList.setUserList(t)}},{key:"destroy",value:function(){c(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"destroy",this).call(this),this.control.destroy(),this.palette.destroy(),this.information.destroy(),this.colorSetsChooser.destroy(),this.colorSetsList.destroy(),this.currentColorSets.destroy(),this.contextMenu.destroy(),this.colorpickerCallback=void 0}}]),e}(),P="codemirror-colorview",V="codemirror-colorview-background",G=["comment"];function N(t,e){"setValue"==e.origin?(t.state.colorpicker.close_color_picker(),t.state.colorpicker.init_color_update(),t.state.colorpicker.style_color_update()):t.state.colorpicker.style_color_update(t.getCursor().line)}function U(t,e){t.state.colorpicker.isUpdate||(t.state.colorpicker.isUpdate=!0,t.state.colorpicker.close_color_picker(),t.state.colorpicker.init_color_update(),t.state.colorpicker.style_color_update())}function z(t,e){N(t,{origin:"setValue"})}function T(t,e){t.state.colorpicker.keyup(e)}function j(t,e){t.state.colorpicker.is_edit_mode()&&t.state.colorpicker.check_mousedown(e)}function X(t,e){N(t,{origin:"setValue"})}function K(t){t.state.colorpicker.close_color_picker()}var q=function(){function t(e,r){s(this,t),r="boolean"==typeof r?{mode:"edit"}:Object.assign({mode:"edit"},r||{}),this.opt=r,this.cm=e,this.markers={},this.excluded_token=this.opt.excluded_token||G,this.opt.colorpicker?this.colorpicker=this.opt.colorpicker:this.colorpicker=new D(this.opt),this.init_event()}return l(t,[{key:"init_event",value:function(){var t,e,r,i,o;this.cm.on("mousedown",j),this.cm.on("keyup",T),this.cm.on("change",N),this.cm.on("update",U),this.cm.on("refresh",z),this.onPasteCallback=(t=this.cm,e=X,function(r){e.call(this,t,r)}),this.cm.getWrapperElement().addEventListener("paste",this.onPasteCallback),this.is_edit_mode()&&this.cm.on("scroll",(r=K,i=50,o=void 0,function(t,e){o&&clearTimeout(o),o=setTimeout(function(){r(t,e)},i||300)}))}},{key:"is_edit_mode",value:function(){return"edit"==this.opt.mode}},{key:"is_view_mode",value:function(){return"view"==this.opt.mode}},{key:"destroy",value:function(){this.cm.off("mousedown",j),this.cm.off("keyup",T),this.cm.off("change",N),this.cm.getWrapperElement().removeEventListener("paste",this.onPasteCallback),this.is_edit_mode()&&this.cm.off("scroll")}},{key:"hasClass",value:function(t,e){return!!t.className&&(" "+t.className+" ").indexOf(" "+e+" ")>-1}},{key:"check_mousedown",value:function(t){this.hasClass(t.target,V)?this.open_color_picker(t.target.parentNode):this.close_color_picker()}},{key:"popup_color_picker",value:function(t){var e=this.cm.getCursor(),r=this,i={lineNo:e.line,ch:e.ch,color:t||"#FFFFFF",isShortCut:!0};Object.keys(this.markers).forEach(function(t){if(("#"+t).indexOf("#"+i.lineNo+":")>-1){var e=r.markers[t];e.ch<=i.ch&&i.ch<=e.ch+e.color.length&&(i.ch=e.ch,i.color=e.color,i.nameColor=e.nameColor)}}),this.open_color_picker(i)}},{key:"open_color_picker",value:function(t){var e=t.lineNo,r=t.ch,i=t.nameColor,o=t.color;if(this.colorpicker){var n=this,s=o,l=this.cm.charCoords({line:e,ch:r});this.colorpicker.show({left:l.left,top:l.bottom,isShortCut:t.isShortCut||!1,hideDelay:n.opt.hideDelay||2e3},i||o,function(t){n.cm.replaceRange(t,{line:e,ch:r},{line:e,ch:r+s.length},"*colorpicker"),s=t})}}},{key:"close_color_picker",value:function(t){this.colorpicker&&this.colorpicker.hide()}},{key:"key",value:function(t,e){return[t,e].join(":")}},{key:"keyup",value:function(t){this.colorpicker&&("Escape"==t.key?this.colorpicker.hide():0==this.colorpicker.isShortCut&&this.colorpicker.hide())}},{key:"init_color_update",value:function(){this.markers={}}},{key:"style_color_update",value:function(t){if(t)this.match(t);else for(var e=this.cm.lineCount(),r=0;r-1)&&(delete this.markers[l],o[n].marker.clear())}}},{key:"match_result",value:function(t){return d.matches(t.text,!0)}},{key:"submatch",value:function(t,e){var r=this;this.empty_marker(t,e);var i={next:0};this.match_result(e).forEach(function(o){r.render(i,t,e,o.color,o.nameColor)})}},{key:"match",value:function(t){var e=this.cm.getLineHandle(t),r=this;this.cm.operation(function(){r.submatch(t,e)})}},{key:"make_element",value:function(){var t=document.createElement("div");return t.className=P,this.is_edit_mode()?t.title="open color picker":t.title="",t.back_element=this.make_background_element(),t.appendChild(t.back_element),t}},{key:"make_background_element",value:function(){var t=document.createElement("div");return t.className=V,t}},{key:"set_state",value:function(t,e,r,i){var o=this.create_marker(t,e);return o.lineNo=t,o.ch=e,o.color=r,o.nameColor=i,o}},{key:"create_marker",value:function(t,e){var r=this.key(t,e);return this.markers[r]||(this.markers[r]=this.make_element()),this.markers[r]}},{key:"has_marker",value:function(t,e){var r=this.key(t,e);return!!this.markers[r]}},{key:"update_element",value:function(t,e){t.back_element.style.backgroundColor=e}},{key:"set_mark",value:function(t,e,r){this.cm.setBookmark({line:t,ch:e},{widget:r,handleMouseEvents:!0})}},{key:"is_excluded_token",value:function(t,e){for(var r=this.cm.getTokenTypeAt({line:t,ch:e}),i=0,o=0,n=this.excluded_token.length;o0}},{key:"render",value:function(t,e,r,i,o){var n=r.text.indexOf(i,t.next);if(!0!==this.is_excluded_token(e,n)){if(t.next=n+i.length,this.has_marker(e,n))return this.update_element(this.create_marker(e,n),o||i),void this.set_state(e,n,i,o);var s=this.create_marker(e,n);this.update_element(s,o||i),this.set_state(e,n,i,o||i),this.set_mark(e,n,s)}}}]),t}(),Y=function(t){function e(t){s(this,e);var r=u(this,(e.__proto__||Object.getPrototypeOf(e)).call(this));return r.colorpicker=t,r.initialize(),r}return h(e,H),l(e,[{key:"initialize",value:function(){this.$el=new m("div","control"),this.$hue=this.$el.createChild("div","hue"),this.$opacity=this.$el.createChild("div","opacity"),this.$controlPattern=this.$el.createChild("div","empty"),this.$controlColor=this.$el.createChild("div","color"),this.$hueContainer=this.$hue.createChild("div","hue-container"),this.$drag_bar=this.$hueContainer.createChild("div","drag-bar"),this.drag_bar_pos={},this.$opacityContainer=this.$opacity.createChild("div","opacity-container"),this.$opacityColorBar=this.$opacityContainer.createChild("div","color-bar"),this.$opacity_drag_bar=this.$opacityContainer.createChild("div","drag-bar2"),this.opacity_drag_bar_pos={}}},{key:"setBackgroundColor",value:function(t){this.$controlColor.css("background-color",t)}},{key:"refresh",value:function(){this.setColorUI()}},{key:"setColorUI",value:function(){var t=this.$el.width()*this.colorpicker.currentS,e=this.$el.height()*(1-this.colorpicker.currentV);this.$drag_pointer.css({left:t-5+"px",top:e-5+"px"})}},{key:"setMainColor",value:function(t){t.preventDefault();var e=this.colorpicker.$root.position(),r=$color.width(),i=$color.height(),o=t.clientX-e.left,n=t.clientY-e.top;o<0?o=0:o>r&&(o=r),n<0?n=0:n>i&&(n=i),this.$drag_pointer.css({left:o-5+"px",top:n-5+"px"}),this.colorpicker.caculateHSV(),this.colorpicker.setInputColor()}},{key:"setOpacityColorBar",value:function(t){var e=d.parse(t);e.a=0;var r=d.format(e,"rgb");e.a=1;var i=d.format(e,"rgb");this.$opacityColorBar.css("background","linear-gradient(to right, "+r+", "+i+")")}},{key:"setOpacity",value:function(t){var e,r=this.$opacityContainer.offset().left,i=r+this.$opacityContainer.width(),o=w(t).clientX;e=oi?100:(o-r)/(i-r)*100;var n=this.$opacityContainer.width()*(e/100);this.$opacity_drag_bar.css({left:n-Math.ceil(this.$opacity_drag_bar.width()/2)+"px"}),this.opacity_drag_bar_pos={x:n},this.colorpicker.setCurrentA(this.caculateOpacity()),this.colorpicker.currentFormat(),this.colorpicker.setInputColor()}},{key:"setInputColor",value:function(){this.setBackgroundColor(this.colorpicker.getFormattedColor("rgb"));var t=this.colorpicker.convertRGB(),e=d.format(t,"rgb");this.setOpacityColorBar(e)}},{key:"setColorUI",value:function(){var t=this.$hueContainer.width()*(this.colorpicker.currentH/360);this.$drag_bar.css({left:t-7.5+"px"}),this.drag_bar_pos={x:t};var e=this.$opacityContainer.width()*(this.colorpicker.currentA||0);this.$opacity_drag_bar.css({left:e-7.5+"px"}),this.opacity_drag_bar_pos={x:e}}},{key:"caculateH",value:function(){return{h:(this.drag_bar_pos||{x:0}).x/this.$hueContainer.width()*360}}},{key:"caculateOpacity",value:function(){var t=this.opacity_drag_bar_pos||{x:0},e=Math.round(t.x/this.$opacityContainer.width()*100)/100;return isNaN(e)?1:e}},{key:"EventDocumentMouseMove",value:function(t){this.isHueDown&&this.setHueColor(t),this.isOpacityDown&&this.setOpacity(t)}},{key:"EventDocumentMouseUp",value:function(t){this.isHueDown=!1,this.isOpacityDown=!1}},{key:"setControlColor",value:function(t){this.$controlColor.css("background-color",t)}},{key:"setHueColor",value:function(t){var e,r=this.$hueContainer.offset().left,i=r+this.$hueContainer.width(),o=t?w(t).clientX:r+(i-r)*(this.colorpicker.currentH/360);e=oi?100:(o-r)/(i-r)*100;var n=this.$hueContainer.width()*(e/100);this.$drag_bar.css({left:n-Math.ceil(this.$drag_bar.width()/2)+"px"}),this.drag_bar_pos={x:n};var s=p.checkHueColor(e/100);this.colorpicker.setBackgroundColor(s),this.colorpicker.setCurrentH(e/100*360),this.colorpicker.setInputColor()}},{key:"setOnlyHueColor",value:function(){var t,e=this.$hueContainer.offset().left,r=e+this.$hueContainer.width(),i=e+(r-e)*(this.colorpicker.currentH/360);t=ir?100:(i-e)/(r-e)*100;var o=this.$hueContainer.width()*(t/100);this.$drag_bar.css({left:o-Math.ceil(this.$drag_bar.width()/2)+"px"}),this.drag_bar_pos={x:o};var n=p.checkHueColor(t/100);this.colorpicker.setBackgroundColor(n),this.colorpicker.setCurrentH(t/100*360)}},{key:"mousedown $drag_bar",value:function(t){t.preventDefault(),this.isHueDown=!0}},{key:"mousedown $opacity_drag_bar",value:function(t){t.preventDefault(),this.isOpacityDown=!0}},{key:"mousedown $hueContainer",value:function(t){this.isHueDown=!0,this.setHueColor(t)}},{key:"mousedown $opacityContainer",value:function(t){this.isOpacityDown=!0,this.setOpacity(t)}}]),e}(),W=function(t){function e(t){s(this,e);var r=u(this,(e.__proto__||Object.getPrototypeOf(e)).call(this));return r.colorpicker=t,r.initialize(),r}return h(e,H),l(e,[{key:"initialize",value:function(){this.$el=new m("div","information hex"),this.$informationChange=this.$el.createChild("div","information-change"),this.$formatChangeButton=this.$informationChange.createChild("button","format-change-button arrow-button",{type:"button"}),this.$el.append(this.makeInputFieldHex()),this.$el.append(this.makeInputFieldRgb()),this.$el.append(this.makeInputFieldHsl()),this.format="hex"}},{key:"makeInputFieldHex",value:function(){var t=new m("div","information-item hex"),e=t.createChild("div","input-field hex");return this.$hexCode=e.createChild("input","input",{type:"text"}),e.createChild("div","title").html("HEX"),t}},{key:"makeInputFieldRgb",value:function(){var t=new m("div","information-item rgb"),e=t.createChild("div","input-field rgb-r");return this.$rgb_r=e.createChild("input","input",{type:"number",step:1,min:0,max:255}),e.createChild("div","title").html("R"),e=t.createChild("div","input-field rgb-g"),this.$rgb_g=e.createChild("input","input",{type:"number",step:1,min:0,max:255}),e.createChild("div","title").html("G"),e=t.createChild("div","input-field rgb-b"),this.$rgb_b=e.createChild("input","input",{type:"number",step:1,min:0,max:255}),e.createChild("div","title").html("B"),e=t.createChild("div","input-field rgb-a"),this.$rgb_a=e.createChild("input","input",{type:"number",step:.01,min:0,max:1}),e.createChild("div","title").html("A"),t}},{key:"makeInputFieldHsl",value:function(){var t=new m("div","information-item hsl"),e=t.createChild("div","input-field hsl-h");return this.$hsl_h=e.createChild("input","input",{type:"number",step:1,min:0,max:360}),e.createChild("div","title").html("H"),e=t.createChild("div","input-field hsl-s"),this.$hsl_s=e.createChild("input","input",{type:"number",step:1,min:0,max:100}),e.createChild("div","postfix").html("%"),e.createChild("div","title").html("S"),e=t.createChild("div","input-field hsl-l"),this.$hsl_l=e.createChild("input","input",{type:"number",step:1,min:0,max:100}),e.createChild("div","postfix").html("%"),e.createChild("div","title").html("L"),e=t.createChild("div","input-field hsl-a"),this.$hsl_a=e.createChild("input","input",{type:"number",step:.01,min:0,max:1}),e.createChild("div","title").html("A"),t}},{key:"currentFormat",value:function(){var t=this.format||"hex";if(this.colorpicker.currentA<1&&"hex"==t){this.$el.removeClass(t),this.$el.addClass("rgb"),this.format="rgb",this.colorpicker.setInputColor()}}},{key:"setCurrentFormat",value:function(t){this.format=t,this.initFormat()}},{key:"initFormat",value:function(){var t=this.format||"hex";this.$el.removeClass("hex"),this.$el.removeClass("rgb"),this.$el.removeClass("hsl"),this.$el.addClass(t)}},{key:"nextFormat",value:function(){var t=this.format||"hex",e="hex";"hex"==t?e="rgb":"rgb"==t?e="hsl":"hsl"==t&&(e=1==this.colorpicker.currentA?"hex":"rgb"),this.$el.removeClass(t),this.$el.addClass(e),this.format=e,this.setInputColor(),this.colorpicker.changeInputColorAfterNextFormat()}},{key:"setRGBInput",value:function(t,e,r){this.$rgb_r.val(t),this.$rgb_g.val(e),this.$rgb_b.val(r),this.$rgb_a.val(this.colorpicker.currentA)}},{key:"setHSLInput",value:function(t,e,r){this.$hsl_h.val(t),this.$hsl_s.val(e),this.$hsl_l.val(r),this.$hsl_a.val(this.colorpicker.currentA)}},{key:"getHexFormat",value:function(){return d.format({r:this.$rgb_r.int(),g:this.$rgb_g.int(),b:this.$rgb_b.int()},"hex")}},{key:"getRgbFormat",value:function(){return d.format({r:this.$rgb_r.int(),g:this.$rgb_g.int(),b:this.$rgb_b.int(),a:this.$rgb_a.float()},"rgb")}},{key:"getHslFormat",value:function(){return d.format({h:this.$hsl_h.val(),s:this.$hsl_s.val(),l:this.$hsl_l.val(),a:this.$hsl_a.float()},"hsl")}},{key:"convertRGB",value:function(){return this.colorpicker.convertRGB()}},{key:"convertHEX",value:function(){return this.colorpicker.convertHEX()}},{key:"convertHSL",value:function(){return this.colorpicker.convertHSL()}},{key:"getFormattedColor",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]&&arguments[1];return"hex"==(t=t||this.getFormat())?this.$hexCode.val():"rgb"==t?this.getRgbFormat(e):"hsl"==t?this.getHslFormat(e):void 0}},{key:"getFormat",value:function(){return this.format||"hex"}},{key:"setInputColor",value:function(){var t=this.getFormat(),e=null;if("hex"==t)this.$hexCode.val(this.convertHEX());else if("rgb"==t){e=this.convertRGB();this.setRGBInput(e.r,e.g,e.b,e.a)}else if("hsl"==t){var r=this.convertHSL();this.setHSLInput(r.h,r.s,r.l,r.a)}}},{key:"checkNumberKey",value:function(t){return b(t)}},{key:"checkNotNumberKey",value:function(t){return!b(t)}},{key:"changeRgbColor",value:function(){this.colorpicker.changeInformationColor(this.getRgbFormat())}},{key:"changeHslColor",value:function(){this.colorpicker.changeInformationColor(this.getHslFormat())}},{key:"change $rgb_r",value:function(t){this.changeRgbColor()}},{key:"change $rgb_g",value:function(t){this.changeRgbColor()}},{key:"change $rgb_b",value:function(t){this.changeRgbColor()}},{key:"change $rgb_a",value:function(t){this.changeRgbColor()}},{key:"change $hsl_h",value:function(t){this.changeHslColor()}},{key:"change $hsl_s",value:function(t){this.changeHslColor()}},{key:"change $hsl_l",value:function(t){this.changeHslColor()}},{key:"change $hsl_a",value:function(t){this.changeHslColor()}},{key:"keydown $hexCode",value:function(t){if(t.which<65||t.which>70)return this.checkNumberKey(t)}},{key:"keyup $hexCode",value:function(t){var e=this.$hexCode.val();"#"==e.charAt(0)&&7==e.length&&this.colorpicker.changeInformationColor(e)}},{key:"click $formatChangeButton",value:function(t){this.nextFormat()}},{key:"refresh",value:function(){}}]),e}(),J=function(t){function e(t){s(this,e);var r=u(this,(e.__proto__||Object.getPrototypeOf(e)).call(this));return r.colorpicker=t,r.initialize(),r}return h(e,H),l(e,[{key:"initialize",value:function(){this.$el=new m("div","color"),this.$saturation=this.$el.createChild("div","saturation"),this.$value=this.$saturation.createChild("div","value"),this.$drag_pointer=this.$value.createChild("div","drag-pointer")}},{key:"setBackgroundColor",value:function(t){this.$el.css("background-color",t)}},{key:"refresh",value:function(){this.setColorUI()}},{key:"caculateSV",value:function(){var t=this.drag_pointer_pos||{x:0,y:0},e=this.$el.width(),r=this.$el.height();return{s:t.x/e,v:(r-t.y)/r,width:e,height:r}}},{key:"setColorUI",value:function(){var t=this.$el.width()*this.colorpicker.currentS,e=this.$el.height()*(1-this.colorpicker.currentV);this.$drag_pointer.css({left:t-5+"px",top:e-5+"px"}),this.drag_pointer_pos={x:t,y:e}}},{key:"setMainColor",value:function(t){t.preventDefault();var e=this.$el.position(),r=this.$el.width(),i=this.$el.height(),o=t.clientX-e.left,n=t.clientY-e.top;o<0?o=0:o>r&&(o=r),n<0?n=0:n>i&&(n=i),this.$drag_pointer.css({left:o-5+"px",top:n-5+"px"}),this.drag_pointer_pos={x:o,y:n},this.colorpicker.caculateHSV(),this.colorpicker.setInputColor()}},{key:"EventDocumentMouseUp",value:function(t){this.isDown=!1}},{key:"EventDocumentMouseMove",value:function(t){this.isDown&&this.setMainColor(t)}},{key:"mousedown",value:function(t){this.isDown=!0,this.setMainColor(t)}},{key:"mouseup",value:function(t){this.isDown=!1}}]),e}(),Q="data-colorsets-index",Z=function(t){function e(t){s(this,e);var r=u(this,(e.__proto__||Object.getPrototypeOf(e)).call(this));return r.colorpicker=t,r.initialize(),r}return h(e,H),l(e,[{key:"initialize",value:function(){this.$el=new m("div","color-chooser");var t=this.$el.createChild("div","color-chooser-container"),e=t.createChild("div","colorsets-item colorsets-item-header");e.createChild("h1","title").html("Color Paletts"),this.$toggleButton=e.createChild("span","items").html("×"),this.$colorsetsList=t.createChild("div","colorsets-list"),this.refresh()}},{key:"refresh",value:function(){this.$colorsetsList.html(this.makeColorSetsList())}},{key:"makeColorItemList",value:function(t){for(var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:5,r=new m("div"),i=0;i3&&void 0!==arguments[3]?arguments[3]:10;t=function(t){for(var e={},r=t.length,i=null;r--;)i=t[r],e[JSON.stringify(i)]=i;return Object.values(e)}(t),e=e||Math.max(2,Math.ceil(Math.sqrt(t.length/2))),"string"==typeof(r=r||"euclidean")&&(r=i[r]);for(var n,s,l=0,a=(n=e,(s=t.slice(0)).sort(function(){return Math.round(Math.random())-.5}),s.slice(0,n)),c=!0,h=0,u=function(){var i=new Array(e);for(f=0;f0?o=function(t){if(0===t.length)return[];var e=t[0].map(function(t){return 0});return t.forEach(function(t,r){t.forEach(function(t,i){e[i]+=(t-e[i])/(r+1)})}),e}(e):(d=Math.floor((l=(9301*l+49297)%233280)/233280*t.length),o=t[d]),c=!function(t,e){if(t.length!==e.length)return!1;for(var r=0,i=t.length;r1&&void 0!==arguments[1]&&arguments[1],i=t.match(f),o=[];if(!i)return o;for(var n=0,s=i.length;n-1||i[n].indexOf("rgb")>-1||i[n].indexOf("hsl")>-1)o.push({color:i[n]});else if(e){var l=r.getColorByName(i[n]);l&&o.push({color:i[n],nameColor:l})}var a={next:0};return o.forEach(function(e){var r=t.indexOf(e.color,a.next);e.startIndex=r,e.endIndex=r+e.color.length,a.next=e.endIndex}),o},trim:function(t){return t.replace(/^\s+|\s+$/g,"")},format:function(t,e){if(Array.isArray(t)&&(t={r:t[0],g:t[1],b:t[2],a:t[3]}),"hex"==e){var r=t.r.toString(16);t.r<16&&(r="0"+r);var i=t.g.toString(16);t.g<16&&(i="0"+i);var o=t.b.toString(16);return t.b<16&&(o="0"+o),"#"+r+i+o}return"rgb"==e?1==t.a||void 0===t.a?"rgb("+t.r+","+t.g+","+t.b+")":"rgba("+t.r+","+t.g+","+t.b+","+t.a+")":"hsl"==e?1==t.a||void 0===t.a?"hsl("+t.h+","+t.s+"%,"+t.l+"%)":"hsla("+t.h+","+t.s+"%,"+t.l+"%,"+t.a+")":t},parse:function(t){if("string"==typeof t){if(r.isColorName(t)&&(t=r.getColorByName(t)),t.indexOf("rgb(")>-1){for(var e=0,i=(s=t.replace("rgb(","").replace(")","").split(",")).length;e-1){for(e=0,i=(s=t.replace("rgba(","").replace(")","").split(",")).length;e-1){for(e=0,i=(s=t.replace("hsl(","").replace(")","").split(",")).length;e-1){for(e=0,i=(s=t.replace("hsla(","").replace(")","").split(",")).length;e>16,g:(65280&t)>>8,b:(255&t)>>0,a:1};if(0<=t&&t<=4294967295)return{type:"hex",r:(4278190080&t)>>24,g:(16711680&t)>>16,b:(65280&t)>>8,a:(255&t)/255}}return t},HSVtoRGB:function(t,e,r){if(1==arguments.length){var i=arguments[0];t=i.h,e=i.s,r=i.v}var o=t,n=r;360==o&&(o=0);var s=e*n,l=s*(1-Math.abs(o/60%2-1)),a=n-s,c=[];return 0<=o&&o<60?c=[s,l,0]:60<=o&&o<120?c=[l,s,0]:120<=o&&o<180?c=[0,s,l]:180<=o&&o<240?c=[0,l,s]:240<=o&&o<300?c=[l,0,s]:300<=o&&o<360&&(c=[s,0,l]),{r:Math.round(255*(c[0]+a)),g:Math.round(255*(c[1]+a)),b:Math.round(255*(c[2]+a))}},RGBtoHSV:function(t,e,r){if(1==arguments.length){var i=arguments[0];t=i.r,e=i.g,r=i.b}var o=t/255,n=e/255,s=r/255,l=Math.max(o,n,s),a=l-Math.min(o,n,s),c=0;0==a?c=0:l==o?c=(n-s)/a%6*60:l==n?c=60*((s-o)/a+2):l==s&&(c=60*((o-n)/a+4)),c<0&&(c=360+c);return{h:c,s:0==l?0:a/l,v:l}},HSVtoHSL:function(t,e,r){if(1==arguments.length){var i=arguments[0];t=i.h,e=i.s,r=i.v}var o=this.HSVtoRGB(t,e,r);return this.RGBtoHSL(o.r,o.g,o.b)},RGBtoCMYK:function(t,e,r){if(1==arguments.length){var i=arguments[0];t=i.r,e=i.g,r=i.b}var o=t/255,n=e/255,s=r/255,l=1-Math.max(o,n,s);return{c:(1-o-l)/(1-l),m:(1-n-l)/(1-l),y:(1-s-l)/(1-l),k:l}},CMYKtoRGB:function(t,e,r,i){if(1==arguments.length){var o=arguments[0];t=o.c,e=o.m,r=o.y,i=o.k}return{r:255*(1-t)*(1-i),g:255*(1-e)*(1-i),b:255*(1-r)*(1-i)}},RGBtoHSL:function(t,e,r){if(1==arguments.length){var i=arguments[0];t=i.r,e=i.g,r=i.b}t/=255,e/=255,r/=255;var o,n,s=Math.max(t,e,r),l=Math.min(t,e,r),a=(s+l)/2;if(s==l)o=n=0;else{var c=s-l;switch(n=a>.5?c/(2-s-l):c/(s+l),s){case t:o=(e-r)/c+(e1&&(r-=1),r<1/6?t+6*(e-t)*r:r<.5?e:r<2/3?t+(e-t)*(2/3-r)*6:t},HSLtoHSV:function(t,e,r){if(1==arguments.length){var i=arguments[0];t=i.h,e=i.s,i.v}var o=this.HSLtoRGB(t,e,r);return this.RGBtoHSV(o.r,o.g,o.b)},HSLtoRGB:function(t,e,r){if(1==arguments.length){var i=arguments[0];t=i.h,e=i.s,i.v}var o,n,s;if(t/=360,r/=100,0==(e/=100))o=n=s=r;else{var l=r<.5?r*(1+e):r+e-r*e,a=2*r-l;o=this.HUEtoRGB(a,l,t+1/3),n=this.HUEtoRGB(a,l,t),s=this.HUEtoRGB(a,l,t-1/3)}return{r:Math.round(255*o),g:Math.round(255*n),b:Math.round(255*s)}},c:function(t,e,r){if(1==arguments.length){var i=arguments[0];t=i.r,e=i.g,r=i.b}return this.gray((t+e+r)/3>90?0:255)},gray:function(t){return{r:t,g:t,b:t}},RGBtoSimpleGray:function(t,e,r){if(1==arguments.length){var i=arguments[0];t=i.r,e=i.g,r=i.b}return this.gray(Math.ceil((t+e+r)/3))},RGBtoGray:function(t,e,r){if(1==arguments.length){var i=arguments[0];t=i.r,e=i.g,r=i.b}return this.gray(this.RGBtoYCrCb(t,e,r).y)},RGBtoYCrCb:function(t,e,r){if(1==arguments.length){var i=arguments[0];t=i.r,e=i.g,r=i.b}var o=.2126*t+.7152*e+.0722*r,n=.564*(r-o),s=.713*(t-o);return{y:Math.ceil(o),cr:s,cb:n}},YCrCbtoRGB:function(t,e,r){var i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:0;if(1==arguments.length){var o=arguments[0],n=(t=o.y,e=o.cr,r=o.cb,o.bit);i=void 0===n?0:n}var s=t+1.402*(e-i),l=t-.344*(r-i)-.714*(e-i),a=t+1.772*(r-i);return{r:Math.ceil(s),g:Math.ceil(l),b:Math.ceil(a)}},interpolateRGB:function(t,e,r){var i={r:parseInt(t.r+(e.r-t.r)*r,10),g:parseInt(t.g+(e.g-t.g)*r,10),b:parseInt(t.b+(e.b-t.b)*r,10)};return d.format(i,"hex")},scale:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:5;if(!t)return[];for(var r=(t=t||[]).length,i=[],o=0;o1&&void 0!==arguments[1]?arguments[1]:"h",r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:9,i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"rgb",o=arguments.length>4&&void 0!==arguments[4]?arguments[4]:0,n=arguments.length>5&&void 0!==arguments[5]?arguments[5]:1,s=arguments.length>6&&void 0!==arguments[6]?arguments[6]:100,l=this.parse(t),a=this.RGBtoHSV(l),c=(n-o)*s/r,h=[],u=1;u<=r;u++)a[e]=Math.abs((s-c*u)/s),h.push(this.format(this.HSVtoRGB(a),i));return h},scaleH:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:9,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"rgb",i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:0,o=arguments.length>4&&void 0!==arguments[4]?arguments[4]:360;return this.scaleHSV(t,"h",e,r,i,o,1)},scaleS:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:9,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"rgb",i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:0,o=arguments.length>4&&void 0!==arguments[4]?arguments[4]:1;return this.scaleHSV(t,"s",e,r,i,o,100)},scaleV:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:9,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"rgb",i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:0,o=arguments.length>4&&void 0!==arguments[4]?arguments[4]:1;return this.scaleHSV(t,"v",e,r,i,o,100)},palette:function(t){var e=this,r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:6,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"hex";return o(t,r).map(function(t){return e.format(t,i)})},ImageToRGB:function(t,e){var r=new u(t);r.loadImage(function(){e&&e(r.toRGB())})}};d.scale.parula=function(t){return d.scale(["#352a87","#0f5cdd","#00b5a6","#ffc337","#fdff00"],t)},d.scale.jet=function(t){return d.scale(["#00008f","#0020ff","#00ffff","#51ff77","#fdff00","#ff0000","#800000"],t)},d.scale.hsv=function(t){return d.scale(["#ff0000","#ffff00","#00ff00","#00ffff","#0000ff","#ff00ff","#ff0000"],t)},d.scale.hot=function(t){return d.scale(["#0b0000","#ff0000","#ffff00","#ffffff"],t)},d.scale.pink=function(t){return d.scale(["#1e0000","#bd7b7b","#e7e5b2","#ffffff"],t)},d.scale.bone=function(t){return d.scale(["#000000","#4a4a68","#a6c6c6","#ffffff"],t)},d.scale.copper=function(t){return d.scale(["#000000","#3d2618","#9d623e","#ffa167","#ffc77f"],t)};var g=[{rgb:"#ff0000",start:0},{rgb:"#ffff00",start:.17},{rgb:"#00ff00",start:.33},{rgb:"#00ffff",start:.5},{rgb:"#0000ff",start:.67},{rgb:"#ff00ff",start:.83},{rgb:"#ff0000",start:1}];!function(){for(var t=0,e=g.length;t=t){e=g[i-1],r=g[i];break}return e&&r?d.interpolateRGB(e,r,(t-e.start)/(r.start-e.start)):g[0].rgb}},p=0,k=[],m=function(){function t(e,r,i){if(s(this,t),"string"!=typeof e)this.el=e;else{var o=document.createElement(e);for(var n in this.uniqId=p++,r&&(o.className=r),i=i||{})o.setAttribute(n,i[n]);this.el=o}}return l(t,[{key:"attr",value:function(t,e){return 1==arguments.length?this.el.getAttribute(t):(this.el.setAttribute(t,e),this)}},{key:"closest",value:function(e){for(var r=this,i=!1;!(i=r.hasClass(e));){if(!r.el.parentNode)return null;r=new t(r.el.parentNode)}return i?r:null}},{key:"removeClass",value:function(t){this.el.className=(" "+this.el.className+" ").replace(" "+t+" "," ").trim()}},{key:"hasClass",value:function(t){return!!this.el.className&&(" "+this.el.className+" ").indexOf(" "+t+" ")>-1}},{key:"addClass",value:function(t){this.hasClass(t)||(this.el.className=this.el.className+" "+t)}},{key:"toggleClass",value:function(t){this.hasClass(t)?this.removeClass(t):this.addClass(t)}},{key:"html",value:function(t){return"string"==typeof t?this.el.innerHTML=t:this.empty().append(t),this}},{key:"empty",value:function(){return this.html("")}},{key:"append",value:function(t){return"string"==typeof t?this.el.appendChild(document.createTextNode(t)):this.el.appendChild(t.el||t),this}},{key:"appendTo",value:function(t){return(t.el?t.el:t).appendChild(this.el),this}},{key:"remove",value:function(){return this.el.parentNode&&this.el.parentNode.removeChild(this.el),this}},{key:"text",value:function(){return this.el.textContent}},{key:"css",value:function(t,e){if(2==arguments.length)this.el.style[t]=e;else if(1==arguments.length){if("string"==typeof t)return getComputedStyle(this.el)[t];var r=t||{};for(var i in r)this.el.style[i]=r[i]}return this}},{key:"cssFloat",value:function(t){return parseFloat(this.css(t))}},{key:"cssInt",value:function(t){return parseInt(this.css(t))}},{key:"offset",value:function(){var t=this.el.getBoundingClientRect();return{top:t.top+document.body.scrollTop,left:t.left+document.body.scrollLeft}}},{key:"position",value:function(){return this.el.style.top?{top:parseFloat(this.css("top")),left:parseFloat(this.css("left"))}:this.el.getBoundingClientRect()}},{key:"width",value:function(){return this.el.offsetWidth}},{key:"height",value:function(){return this.el.offsetHeight}},{key:"dataKey",value:function(t){return this.uniqId+"."+t}},{key:"data",value:function(t,e){if(2!=arguments.length){if(1==arguments.length)return k[this.dataKey(t)];var r=Object.keys(k),i=this.uniqId+".";return r.filter(function(t){return 0==t.indexOf(i)}).map(function(t){return k[t]})}return k[this.dataKey(t)]=e,this}},{key:"val",value:function(t){return 0==arguments.length?this.el.value:(1==arguments.length&&(this.el.value=t),this)}},{key:"int",value:function(){return parseInt(this.val(),10)}},{key:"float",value:function(){return parseFloat(this.val())}},{key:"show",value:function(){return this.css("display","block")}},{key:"hide",value:function(){return this.css("display","none")}},{key:"toggle",value:function(){return"none"==this.css("display")?this.show():this.hide()}},{key:"on",value:function(t,e,r,i){return this.el.addEventListener(t,e,r,i),this}},{key:"off",value:function(t,e){return this.el.removeEventListener(t,e),this}},{key:"getElement",value:function(){return this.el}},{key:"createChild",value:function(e){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"",i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{},n=new t(e,r,i);return n.css(o),this.append(n),n}}]),t}(),y=["ArrowDown","ArrowUp","ArrowLeft","ArrowRight","Space","Escape","Enter","Digit1","Digit2","Digit3","Digit4","Digit5","Digit6","Digit7","Digit8","Digit9","Digit0","Period","Backspace","Tab"],b=function(t){return y.includes(t.code)},C=function(t,e,r){t.addEventListener(e,r)},_=function(t,e,r){t.removeEventListener(e,r)},$=function(t){return t.touches&&t.touches[0]?t.touches[0]:t},w=/^(click|mouse(down|up|move|enter|leave)|key(down|up|press)|contextmenu|change|input)/gi,S=["Control","Shift","Alt","Meta"],x=function(){function t(){s(this,t)}return l(t,[{key:"initializeEvent",value:function(){this.initializeEventMachin()}},{key:"destroy",value:function(){this.destroyEventMachin()}},{key:"destroyEventMachin",value:function(){this.removeEventAll()}},{key:"initializeEventMachin",value:function(){this.filterProps(w).forEach(this.parseEvent.bind(this))}},{key:"filterProps",value:function(t){return Object.getOwnPropertyNames(this.__proto__).filter(function(e){return e.match(t)})}},{key:"parseEvent",value:function(t){var e=t.split(" ");this.bindingEvent(e,this[t].bind(this))}},{key:"getDefaultDomElement",value:function(t){var e=void 0;return(e=t?this[t]||window[t]:this.el||this.$el||this.$root)instanceof m?e.getElement():e}},{key:"getDefaultEventObject",value:function(t){var e=this,r=t.split("."),i=r.shift(),o=r.includes("Control"),n=r.includes("Shift"),s=r.includes("Alt"),l=r.includes("Meta"),a=(r=r.filter(function(t){return!1===S.includes(t)})).filter(function(t){return!!e[t]});return{eventName:i,isControl:o,isShift:n,isAlt:s,isMeta:l,codes:r=r.filter(function(t){return!1===a.includes(t)}).map(function(t){return t.toLowerCase()}),checkMethodList:a}}},{key:"bindingEvent",value:function(t,e){var r,i=(r=t,Array.isArray(r)?r:Array.from(r)),o=i[0],n=i[1],s=i.slice(2);n=this.getDefaultDomElement(n);var l=this.getDefaultEventObject(o);l.dom=n,l.delegate=s.join(" "),this.addEvent(l,e)}},{key:"matchPath",value:function(t,e){return t?t.matches(e)?t:this.matchPath(t.parentElement,e):null}},{key:"getBindings",value:function(){return this._bindings||this.initBindings(),this._bindings}},{key:"addBinding",value:function(t){this.getBindings().push(t)}},{key:"initBindings",value:function(){this._bindings=[]}},{key:"checkEventType",value:function(t,e){var r=this,i=!t.ctrlKey||e.isControl,o=!t.shiftKey||e.isShift,n=!t.altKey||e.isAlt,s=!t.metaKey||e.isMeta,l=!0;e.codes.length&&(l=e.codes.includes(t.code.toLowerCase())||e.codes.includes(t.key.toLowerCase()));var a=!0;return e.checkMethodList.length&&(a=e.checkMethodList.every(function(e){return r[e].call(r,t)})),i&&n&&o&&s&&l&&a}},{key:"makeCallback",value:function(t,e){var r=this;return t.delegate?function(i){if(r.checkEventType(i,t)){var o=r.matchPath(i.target||i.srcElement,t.delegate);if(o)return i.delegateTarget=o,i.$delegateTarget=new m(o),e(i)}}:function(i){if(r.checkEventType(i,t))return e(i)}}},{key:"addEvent",value:function(t,e){t.callback=this.makeCallback(t,e),this.addBinding(t),C(t.dom,t.eventName,t.callback)}},{key:"removeEventAll",value:function(){var t=this;this.getBindings().forEach(function(e){t.removeEvent(e)}),this.initBindings()}},{key:"removeEvent",value:function(t){var e=t.eventName,r=t.dom,i=t.callback;_(r,e,i)}}]),t}(),H=function(t){function e(t){s(this,e);var r=h(this,(e.__proto__||Object.getPrototypeOf(e)).call(this));return r.colorpicker=t,r.initialize(),r}return c(e,x),l(e,[{key:"initialize",value:function(){this.$el=new m("div","control"),this.$hue=this.$el.createChild("div","hue"),this.$opacity=this.$el.createChild("div","opacity"),this.$controlPattern=this.$el.createChild("div","empty"),this.$controlColor=this.$el.createChild("div","color"),this.$hueContainer=this.$hue.createChild("div","hue-container"),this.$drag_bar=this.$hueContainer.createChild("div","drag-bar"),this.drag_bar_pos={},this.$opacityContainer=this.$opacity.createChild("div","opacity-container"),this.$opacityColorBar=this.$opacityContainer.createChild("div","color-bar"),this.$opacity_drag_bar=this.$opacityContainer.createChild("div","drag-bar2"),this.opacity_drag_bar_pos={}}},{key:"setBackgroundColor",value:function(t){this.$controlColor.css("background-color",t)}},{key:"refresh",value:function(){this.setColorUI()}},{key:"setColorUI",value:function(){var t=this.$el.width()*this.colorpicker.currentS,e=this.$el.height()*(1-this.colorpicker.currentV);this.$drag_pointer.css({left:t-5+"px",top:e-5+"px"})}},{key:"setMainColor",value:function(t){t.preventDefault();var e=this.colorpicker.$root.position(),r=$color.width(),i=$color.height(),o=t.clientX-e.left,n=t.clientY-e.top;o<0?o=0:o>r&&(o=r),n<0?n=0:n>i&&(n=i),this.$drag_pointer.css({left:o-5+"px",top:n-5+"px"}),this.colorpicker.caculateHSV(),this.colorpicker.setInputColor()}},{key:"setOpacityColorBar",value:function(t){var e=d.parse(t);e.a=0;var r=d.format(e,"rgb");e.a=1;var i=d.format(e,"rgb");this.$opacityColorBar.css("background","linear-gradient(to right, "+r+", "+i+")")}},{key:"setOpacity",value:function(t){var e,r=this.$opacityContainer.offset().left,i=r+this.$opacityContainer.width(),o=$(t).clientX;e=oi?100:(o-r)/(i-r)*100;var n=this.$opacityContainer.width()*(e/100);this.$opacity_drag_bar.css({left:n-Math.ceil(this.$opacity_drag_bar.width()/2)+"px"}),this.opacity_drag_bar_pos={x:n},this.colorpicker.setCurrentA(this.caculateOpacity()),this.colorpicker.currentFormat(),this.colorpicker.setInputColor()}},{key:"setInputColor",value:function(){this.setBackgroundColor(this.colorpicker.getFormattedColor("rgb"));var t=this.colorpicker.convertRGB(),e=d.format(t,"rgb");this.setOpacityColorBar(e)}},{key:"setColorUI",value:function(){var t=this.$hueContainer.width()*(this.colorpicker.currentH/360);this.$drag_bar.css({left:t-7.5+"px"}),this.drag_bar_pos={x:t};var e=this.$opacityContainer.width()*(this.colorpicker.currentA||0);this.$opacity_drag_bar.css({left:e-7.5+"px"}),this.opacity_drag_bar_pos={x:e}}},{key:"caculateH",value:function(){return{h:(this.drag_bar_pos||{x:0}).x/this.$hueContainer.width()*360}}},{key:"caculateOpacity",value:function(){var t=this.opacity_drag_bar_pos||{x:0},e=Math.round(t.x/this.$opacityContainer.width()*100)/100;return isNaN(e)?1:e}},{key:"EventDocumentMouseMove",value:function(t){this.isHueDown&&this.setHueColor(t),this.isOpacityDown&&this.setOpacity(t)}},{key:"EventDocumentMouseUp",value:function(t){this.isHueDown=!1,this.isOpacityDown=!1}},{key:"setControlColor",value:function(t){this.$controlColor.css("background-color",t)}},{key:"setHueColor",value:function(t){var e,r=this.$hueContainer.offset().left,i=r+this.$hueContainer.width(),o=t?$(t).clientX:r+(i-r)*(this.colorpicker.currentH/360);e=oi?100:(o-r)/(i-r)*100;var n=this.$hueContainer.width()*(e/100);this.$drag_bar.css({left:n-Math.ceil(this.$drag_bar.width()/2)+"px"}),this.drag_bar_pos={x:n};var s=v.checkHueColor(e/100);this.colorpicker.setBackgroundColor(s),this.colorpicker.setCurrentH(e/100*360),this.colorpicker.setInputColor()}},{key:"setOnlyHueColor",value:function(){var t,e=this.$hueContainer.offset().left,r=e+this.$hueContainer.width(),i=e+(r-e)*(this.colorpicker.currentH/360);t=ir?100:(i-e)/(r-e)*100;var o=this.$hueContainer.width()*(t/100);this.$drag_bar.css({left:o-Math.ceil(this.$drag_bar.width()/2)+"px"}),this.drag_bar_pos={x:o};var n=v.checkHueColor(t/100);this.colorpicker.setBackgroundColor(n),this.colorpicker.setCurrentH(t/100*360)}},{key:"mousedown $drag_bar",value:function(t){t.preventDefault(),this.isHueDown=!0}},{key:"mousedown $opacity_drag_bar",value:function(t){t.preventDefault(),this.isOpacityDown=!0}},{key:"mousedown $hueContainer",value:function(t){this.isHueDown=!0,this.setHueColor(t)}},{key:"mousedown $opacityContainer",value:function(t){this.isOpacityDown=!0,this.setOpacity(t)}}]),e}(),E=function(t){function e(t){s(this,e);var r=h(this,(e.__proto__||Object.getPrototypeOf(e)).call(this));return r.colorpicker=t,r.initialize(),r}return c(e,x),l(e,[{key:"initialize",value:function(){this.$el=new m("div","information hex"),this.$informationChange=this.$el.createChild("div","information-change"),this.$formatChangeButton=this.$informationChange.createChild("button","format-change-button arrow-button",{type:"button"}),this.$el.append(this.makeInputFieldHex()),this.$el.append(this.makeInputFieldRgb()),this.$el.append(this.makeInputFieldHsl()),this.format="hex"}},{key:"makeInputFieldHex",value:function(){var t=new m("div","information-item hex"),e=t.createChild("div","input-field hex");return this.$hexCode=e.createChild("input","input",{type:"text"}),e.createChild("div","title").html("HEX"),t}},{key:"makeInputFieldRgb",value:function(){var t=new m("div","information-item rgb"),e=t.createChild("div","input-field rgb-r");return this.$rgb_r=e.createChild("input","input",{type:"number",step:1,min:0,max:255}),e.createChild("div","title").html("R"),e=t.createChild("div","input-field rgb-g"),this.$rgb_g=e.createChild("input","input",{type:"number",step:1,min:0,max:255}),e.createChild("div","title").html("G"),e=t.createChild("div","input-field rgb-b"),this.$rgb_b=e.createChild("input","input",{type:"number",step:1,min:0,max:255}),e.createChild("div","title").html("B"),e=t.createChild("div","input-field rgb-a"),this.$rgb_a=e.createChild("input","input",{type:"number",step:.01,min:0,max:1}),e.createChild("div","title").html("A"),t}},{key:"makeInputFieldHsl",value:function(){var t=new m("div","information-item hsl"),e=t.createChild("div","input-field hsl-h");return this.$hsl_h=e.createChild("input","input",{type:"number",step:1,min:0,max:360}),e.createChild("div","title").html("H"),e=t.createChild("div","input-field hsl-s"),this.$hsl_s=e.createChild("input","input",{type:"number",step:1,min:0,max:100}),e.createChild("div","postfix").html("%"),e.createChild("div","title").html("S"),e=t.createChild("div","input-field hsl-l"),this.$hsl_l=e.createChild("input","input",{type:"number",step:1,min:0,max:100}),e.createChild("div","postfix").html("%"),e.createChild("div","title").html("L"),e=t.createChild("div","input-field hsl-a"),this.$hsl_a=e.createChild("input","input",{type:"number",step:.01,min:0,max:1}),e.createChild("div","title").html("A"),t}},{key:"currentFormat",value:function(){var t=this.format||"hex";if(this.colorpicker.currentA<1&&"hex"==t){this.$el.removeClass(t),this.$el.addClass("rgb"),this.format="rgb",this.colorpicker.setInputColor()}}},{key:"setCurrentFormat",value:function(t){this.format=t,this.initFormat()}},{key:"initFormat",value:function(){var t=this.format||"hex";this.$el.removeClass("hex"),this.$el.removeClass("rgb"),this.$el.removeClass("hsl"),this.$el.addClass(t)}},{key:"nextFormat",value:function(){var t=this.format||"hex",e="hex";"hex"==t?e="rgb":"rgb"==t?e="hsl":"hsl"==t&&(e=1==this.colorpicker.currentA?"hex":"rgb"),this.$el.removeClass(t),this.$el.addClass(e),this.format=e,this.setInputColor(),this.colorpicker.changeInputColorAfterNextFormat()}},{key:"setRGBInput",value:function(t,e,r){this.$rgb_r.val(t),this.$rgb_g.val(e),this.$rgb_b.val(r),this.$rgb_a.val(this.colorpicker.currentA)}},{key:"setHSLInput",value:function(t,e,r){this.$hsl_h.val(t),this.$hsl_s.val(e),this.$hsl_l.val(r),this.$hsl_a.val(this.colorpicker.currentA)}},{key:"getHexFormat",value:function(){return d.format({r:this.$rgb_r.int(),g:this.$rgb_g.int(),b:this.$rgb_b.int()},"hex")}},{key:"getRgbFormat",value:function(){return d.format({r:this.$rgb_r.int(),g:this.$rgb_g.int(),b:this.$rgb_b.int(),a:this.$rgb_a.float()},"rgb")}},{key:"getHslFormat",value:function(){return d.format({h:this.$hsl_h.val(),s:this.$hsl_s.val(),l:this.$hsl_l.val(),a:this.$hsl_a.float()},"hsl")}},{key:"convertRGB",value:function(){return this.colorpicker.convertRGB()}},{key:"convertHEX",value:function(){return this.colorpicker.convertHEX()}},{key:"convertHSL",value:function(){return this.colorpicker.convertHSL()}},{key:"getFormattedColor",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]&&arguments[1];return"hex"==(t=t||this.getFormat())?this.$hexCode.val():"rgb"==t?this.getRgbFormat(e):"hsl"==t?this.getHslFormat(e):void 0}},{key:"getFormat",value:function(){return this.format||"hex"}},{key:"setInputColor",value:function(){var t=this.getFormat(),e=null;if("hex"==t){this.$hexCode.val(this.convertHEX());e=this.convertRGB();this.setRGBInput(e.r,e.g,e.b,e.a)}else if("rgb"==t){e=this.convertRGB();this.setRGBInput(e.r,e.g,e.b,e.a),this.$hexCode.val(this.convertHEX())}else if("hsl"==t){var r=this.convertHSL();this.setHSLInput(r.h,r.s,r.l,r.a)}}},{key:"checkNumberKey",value:function(t){return b(t)}},{key:"checkNotNumberKey",value:function(t){return!b(t)}},{key:"changeRgbColor",value:function(){this.colorpicker.changeInformationColor(this.getRgbFormat())}},{key:"changeHslColor",value:function(){this.colorpicker.changeInformationColor(this.getHslFormat())}},{key:"change $rgb_r",value:function(t){this.changeRgbColor()}},{key:"change $rgb_g",value:function(t){this.changeRgbColor()}},{key:"change $rgb_b",value:function(t){this.changeRgbColor()}},{key:"change $rgb_a",value:function(t){this.changeRgbColor()}},{key:"change $hsl_h",value:function(t){this.changeHslColor()}},{key:"change $hsl_s",value:function(t){this.changeHslColor()}},{key:"change $hsl_l",value:function(t){this.changeHslColor()}},{key:"change $hsl_a",value:function(t){this.changeHslColor()}},{key:"keydown $hexCode",value:function(t){if(t.which<65||t.which>70)return this.checkNumberKey(t)}},{key:"keyup $hexCode",value:function(t){var e=this.$hexCode.val();"#"==e.charAt(0)&&7==e.length&&(this.colorpicker.changeInformationColor(e),this.setInputColor())}},{key:"click $formatChangeButton",value:function(t){this.nextFormat()}},{key:"refresh",value:function(){}}]),e}(),B=function(t){function e(t){s(this,e);var r=h(this,(e.__proto__||Object.getPrototypeOf(e)).call(this));return r.colorpicker=t,r.initialize(),r}return c(e,x),l(e,[{key:"initialize",value:function(){this.$el=new m("div","color"),this.$saturation=this.$el.createChild("div","saturation"),this.$value=this.$saturation.createChild("div","value"),this.$drag_pointer=this.$value.createChild("div","drag-pointer")}},{key:"setBackgroundColor",value:function(t){this.$el.css("background-color",t)}},{key:"refresh",value:function(){this.setColorUI()}},{key:"caculateSV",value:function(){var t=this.drag_pointer_pos||{x:0,y:0},e=this.$el.width(),r=this.$el.height();return{s:t.x/e,v:(r-t.y)/r,width:e,height:r}}},{key:"setColorUI",value:function(){var t=this.$el.width()*this.colorpicker.currentS,e=this.$el.height()*(1-this.colorpicker.currentV);this.$drag_pointer.css({left:t-5+"px",top:e-5+"px"}),this.drag_pointer_pos={x:t,y:e}}},{key:"setMainColor",value:function(t){t.preventDefault();var e=this.$el.position(),r=this.$el.width()-this.$el.cssFloat("padding-left")-this.$el.cssFloat("padding-right"),i=this.$el.height()-this.$el.cssFloat("padding-top")-this.$el.cssFloat("padding-bottom"),o=t.clientX-e.left,n=t.clientY-e.top;o<0?o=0:o>r&&(o=r),n<0?n=0:n>i&&(n=i),this.$drag_pointer.css({left:o-5+"px",top:n-5+"px"}),this.drag_pointer_pos={x:o,y:n},this.colorpicker.caculateHSV(),this.colorpicker.setInputColor()}},{key:"EventDocumentMouseUp",value:function(t){this.isDown=!1}},{key:"EventDocumentMouseMove",value:function(t){this.isDown&&this.setMainColor(t)}},{key:"mousedown",value:function(t){this.isDown=!0,this.setMainColor(t)}},{key:"mouseup",value:function(t){this.isDown=!1}}]),e}(),M="data-colorsets-index",I=function(t){function e(t){s(this,e);var r=h(this,(e.__proto__||Object.getPrototypeOf(e)).call(this));return r.colorpicker=t,r.initialize(),r}return c(e,x),l(e,[{key:"initialize",value:function(){this.$el=new m("div","color-chooser");var t=this.$el.createChild("div","color-chooser-container"),e=t.createChild("div","colorsets-item colorsets-item-header");e.createChild("h1","title").html("Color Paletts"),this.$toggleButton=e.createChild("span","items").html("×"),this.$colorsetsList=t.createChild("div","colorsets-list"),this.refresh()}},{key:"refresh",value:function(){this.$colorsetsList.html(this.makeColorSetsList())}},{key:"makeColorItemList",value:function(t){for(var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:5,r=new m("div"),i=0;iwindow.innerWidth&&(i-=e+i-window.innerWidth),i<0&&(i=0);var o=t.top-this.$body.el.scrollTop;r+o>window.innerHeight&&(o-=r+o-window.innerHeight),o<0&&(o=0),this.$root.css({left:i+"px",top:o+"px"})}},{key:"getInitalizePosition",value:function(){return"inline"==this.opt.position?{position:"relative",left:"auto",top:"auto",display:"inline-block"}:{position:"fixed",left:"-10000px",top:"-10000px"}}},{key:"show",value:function(t,e,r){var i=this;this.destroy(),this.initializeEvent(),this.$root.appendTo(this.$body),this.$root.css(this.getInitalizePosition()).show(),this.definePosition(t),this.isColorPickerShow=!0,this.isShortCut=t.isShortCut||!1,this.initColor(e),this.colorpickerCallback=function(t){"function"==typeof i.opt.onChange&&i.opt.onChange(t),r(t)},this.hideDelay=t.hideDelay||2e3,this.hideDelay>0&&this.setHideDelay(this.hideDelay)}},{key:"setHideDelay",value:function(t){var e=this;t=t||0,this.$root.off("mouseenter"),this.$root.off("mouseleave"),this.$root.on("mouseenter",function(){clearTimeout(e.timerCloseColorPicker)}),this.$root.on("mouseleave",function(){clearTimeout(e.timerCloseColorPicker),e.timerCloseColorPicker=setTimeout(e.hide.bind(e),t)}),clearTimeout(this.timerCloseColorPicker),this.timerCloseColorPicker=setTimeout(this.hide.bind(this),t)}},{key:"hide",value:function(){this.isColorPickerShow&&(this.destroy(),this.$root.hide(),this.$root.remove(),this.isColorPickerShow=!1)}},{key:"convertRGB",value:function(){return d.HSVtoRGB(this.currentH,this.currentS,this.currentV)}},{key:"convertHEX",value:function(){return d.format(this.convertRGB(),"hex")}},{key:"convertHSL",value:function(){return d.HSVtoHSL(this.currentH,this.currentS,this.currentV)}},{key:"getCurrentColor",value:function(){return this.information.getFormattedColor()}},{key:"getFormattedColor",value:function(t){if("rgb"==(t=t||"hex"))return(r=this.convertRGB()).a=this.currentA,d.format(r,"rgb");if("hsl"==t){var e=this.convertHSL();return e.a=this.currentA,d.format(e,"hsl")}var r=this.convertRGB();return d.format(r,"hex")}},{key:"setInputColor",value:function(t){this.information.setInputColor(t),this.control.setInputColor(t),this.callbackColorValue()}},{key:"changeInputColorAfterNextFormat",value:function(){this.control.setInputColor(),this.callbackColorValue()}},{key:"callbackColorValue",value:function(){"function"==typeof this.opt.onChange&&(isNaN(this.currentA)||this.opt.onChange(this.getCurrentColor())),"function"==typeof this.colorpickerCallback&&(isNaN(this.currentA)||this.colorpickerCallback(this.getCurrentColor()))}},{key:"caculateHSV",value:function(){var t=this.palette.caculateSV(),e=this.control.caculateH(),r=t.s,i=t.v,o=e.h;0==t.width&&(o=0,r=0,i=0),this.currentH=o,this.currentS=r,this.currentV=i}},{key:"setColorUI",value:function(){this.control.setColorUI(),this.palette.setColorUI()}},{key:"setCurrentHSV",value:function(t,e,r,i){this.currentA=i,this.currentH=t,this.currentS=e,this.currentV=r}},{key:"setCurrentH",value:function(t){this.currentH=t}},{key:"setCurrentA",value:function(t){this.currentA=t}},{key:"setBackgroundColor",value:function(t){this.palette.setBackgroundColor(t)}},{key:"setCurrentFormat",value:function(t){this.format=t,this.information.setCurrentFormat(t)}},{key:"getHSV",value:function(t){return"hsl"==t.type?d.HSLtoHSV(t.h,t.s,t.l):d.RGBtoHSV(t)}},{key:"initColor",value:function(t,e){var r=t||"#FF0000",i=d.parse(r);e=e||i.type,this.setCurrentFormat(e);var o=this.getHSV(i);this.setCurrentHSV(o.h,o.s,o.v,i.a),this.setColorUI(),this.setHueColor(),this.setInputColor()}},{key:"changeInformationColor",value:function(t){var e=t||"#FF0000",r=d.parse(e),i=this.getHSV(r);this.setCurrentHSV(i.h,i.s,i.v,r.a),this.setColorUI(),this.setHueColor(),this.control.setInputColor(),this.callbackColorValue()}},{key:"setHueColor",value:function(){this.control.setOnlyHueColor()}},{key:"checkColorPickerClass",value:function(t){var e=new m(t).closest("codemirror-colorview"),r=new m(t).closest("codemirror-colorpicker"),i=new m(t).closest("CodeMirror");t.nodeName;return!!(r||e||i)}},{key:"checkInHtml",value:function(t){return"HTML"==t.nodeName}},{key:"mouseup document",value:function(t){this.palette.EventDocumentMouseUp(t),this.control.EventDocumentMouseUp(t),this.checkInHtml(t.target)||0==this.checkColorPickerClass(t.target)&&this.hide()}},{key:"mousemove document",value:function(t){this.palette.EventDocumentMouseMove(t),this.control.EventDocumentMouseMove(t)}},{key:"initializeEvent",value:function(){this.initializeEventMachin(),this.palette.initializeEvent(),this.control.initializeEvent(),this.information.initializeEvent(),this.currentColorSets.initializeEvent(),this.colorSetsChooser.initializeEvent(),this.contextMenu.initializeEvent()}},{key:"currentFormat",value:function(){this.information.currentFormat()}},{key:"toggleColorChooser",value:function(){this.colorSetsChooser.toggle()}},{key:"refreshColorSetsChooser",value:function(){this.colorSetsChooser.refresh()}},{key:"getColorSetsList",value:function(){return this.colorSetsList.getColorSetsList()}},{key:"setCurrentColorSets",value:function(t){this.colorSetsList.setCurrentColorSets(t),this.currentColorSets.refresh()}},{key:"setColorSets",value:function(t){this.colorSetsList.setUserList(t)}},{key:"destroy",value:function(){a(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"destroy",this).call(this),this.control.destroy(),this.palette.destroy(),this.information.destroy(),this.colorSetsChooser.destroy(),this.colorSetsList.destroy(),this.currentColorSets.destroy(),this.contextMenu.destroy(),this.colorpickerCallback=void 0}}]),e}(),D="codemirror-colorview",P="codemirror-colorview-background",G=["comment"];function N(t,e){"setValue"==e.origin?(t.state.colorpicker.close_color_picker(),t.state.colorpicker.init_color_update(),t.state.colorpicker.style_color_update()):t.state.colorpicker.style_color_update(t.getCursor().line)}function V(t,e){t.state.colorpicker.isUpdate||(t.state.colorpicker.isUpdate=!0,t.state.colorpicker.close_color_picker(),t.state.colorpicker.init_color_update(),t.state.colorpicker.style_color_update())}function T(t,e){N(t,{origin:"setValue"})}function U(t,e){t.state.colorpicker.keyup(e)}function z(t,e){t.state.colorpicker.is_edit_mode()&&t.state.colorpicker.check_mousedown(e)}function j(t,e){N(t,{origin:"setValue"})}function q(t){t.state.colorpicker.close_color_picker()}var K=function(){function t(e,r){s(this,t),r="boolean"==typeof r?{mode:"edit"}:Object.assign({mode:"edit"},r||{}),this.opt=r,this.cm=e,this.markers={},this.excluded_token=this.opt.excluded_token||G,this.opt.colorpicker?this.colorpicker=this.opt.colorpicker:this.colorpicker=new A(this.opt),this.init_event()}return l(t,[{key:"init_event",value:function(){var t,e,r,i,o;this.cm.on("mousedown",z),this.cm.on("keyup",U),this.cm.on("change",N),this.cm.on("update",V),this.cm.on("refresh",T),this.onPasteCallback=(t=this.cm,e=j,function(r){e.call(this,t,r)}),this.cm.getWrapperElement().addEventListener("paste",this.onPasteCallback),this.is_edit_mode()&&this.cm.on("scroll",(r=q,i=50,o=void 0,function(t,e){o&&clearTimeout(o),o=setTimeout(function(){r(t,e)},i||300)}))}},{key:"is_edit_mode",value:function(){return"edit"==this.opt.mode}},{key:"is_view_mode",value:function(){return"view"==this.opt.mode}},{key:"destroy",value:function(){this.cm.off("mousedown",z),this.cm.off("keyup",U),this.cm.off("change",N),this.cm.getWrapperElement().removeEventListener("paste",this.onPasteCallback),this.is_edit_mode()&&this.cm.off("scroll")}},{key:"hasClass",value:function(t,e){return!!t.className&&(" "+t.className+" ").indexOf(" "+e+" ")>-1}},{key:"check_mousedown",value:function(t){this.hasClass(t.target,P)?this.open_color_picker(t.target.parentNode):this.close_color_picker()}},{key:"popup_color_picker",value:function(t){var e=this.cm.getCursor(),r=this,i={lineNo:e.line,ch:e.ch,color:t||"#FFFFFF",isShortCut:!0};Object.keys(this.markers).forEach(function(t){if(("#"+t).indexOf("#"+i.lineNo+":")>-1){var e=r.markers[t];e.ch<=i.ch&&i.ch<=e.ch+e.color.length&&(i.ch=e.ch,i.color=e.color,i.nameColor=e.nameColor)}}),this.open_color_picker(i)}},{key:"open_color_picker",value:function(t){var e=t.lineNo,r=t.ch,i=t.nameColor,o=t.color;if(this.colorpicker){var n=this,s=o,l=this.cm.charCoords({line:e,ch:r});this.colorpicker.show({left:l.left,top:l.bottom,isShortCut:t.isShortCut||!1,hideDelay:n.opt.hideDelay||2e3},i||o,function(t){n.cm.replaceRange(t,{line:e,ch:r},{line:e,ch:r+s.length},"*colorpicker"),s=t})}}},{key:"close_color_picker",value:function(t){this.colorpicker&&this.colorpicker.hide()}},{key:"key",value:function(t,e){return[t,e].join(":")}},{key:"keyup",value:function(t){this.colorpicker&&("Escape"==t.key?this.colorpicker.hide():0==this.colorpicker.isShortCut&&this.colorpicker.hide())}},{key:"init_color_update",value:function(){this.markers={}}},{key:"style_color_update",value:function(t){if(t)this.match(t);else for(var e=this.cm.lineCount(),r=0;r-1)&&(delete this.markers[l],o[n].marker.clear())}}},{key:"match_result",value:function(t){return d.matches(t.text,!0)}},{key:"submatch",value:function(t,e){var r=this;this.empty_marker(t,e);var i={next:0};this.match_result(e).forEach(function(o){r.render(i,t,e,o.color,o.nameColor)})}},{key:"match",value:function(t){var e=this.cm.getLineHandle(t),r=this;this.cm.operation(function(){r.submatch(t,e)})}},{key:"make_element",value:function(){var t=document.createElement("div");return t.className=D,this.is_edit_mode()?t.title="open color picker":t.title="",t.back_element=this.make_background_element(),t.appendChild(t.back_element),t}},{key:"make_background_element",value:function(){var t=document.createElement("div");return t.className=P,t}},{key:"set_state",value:function(t,e,r,i){var o=this.create_marker(t,e);return o.lineNo=t,o.ch=e,o.color=r,o.nameColor=i,o}},{key:"create_marker",value:function(t,e){var r=this.key(t,e);return this.markers[r]||(this.markers[r]=this.make_element()),this.markers[r]}},{key:"has_marker",value:function(t,e){var r=this.key(t,e);return!!this.markers[r]}},{key:"update_element",value:function(t,e){t.back_element.style.backgroundColor=e}},{key:"set_mark",value:function(t,e,r){this.cm.setBookmark({line:t,ch:e},{widget:r,handleMouseEvents:!0})}},{key:"is_excluded_token",value:function(t,e){for(var r=this.cm.getTokenTypeAt({line:t,ch:e}),i=0,o=0,n=this.excluded_token.length;o0}},{key:"render",value:function(t,e,r,i,o){var n=r.text.indexOf(i,t.next);if(!0!==this.is_excluded_token(e,n)){if(t.next=n+i.length,this.has_marker(e,n))return this.update_element(this.create_marker(e,n),o||i),void this.set_state(e,n,i,o);var s=this.create_marker(e,n);this.update_element(s,o||i),this.set_state(e,n,i,o||i),this.set_mark(e,n,s)}}}]),t}();return t&&t.defineOption("colorpicker",!1,function(e,r,i){i&&i!=t.Init&&e.state.colorpicker&&(e.state.colorpicker.destroy(),e.state.colorpicker=null),r&&(e.state.colorpicker=new K(e,r))}),{Color:d,ColorNames:r,HueColor:v,ColorPicker:A}}(CodeMirror); diff --git a/index.html b/index.html index 23b7586..7100b05 100644 --- a/index.html +++ b/index.html @@ -92,6 +92,11 @@ max-width: 200px; } + .colorpicker-type { + display: inline-block; + width: 300px; + } + @@ -262,12 +267,21 @@

-

Chrom Devtool Style

-
- +

ColorPicker Style

+
+
+

Chrome Devtool Style

+
+
+
+

Sketch Style

+
+
+ +

Default Html Sample

@@ -365,6 +379,7 @@

Color Scales

}, colorpicker : { mode : 'edit', + type: 'sketch', hideDelay: 1000000 } }); @@ -469,12 +484,13 @@

Color Scales

var type = item.getAttribute('data-type'); - for(var j = 0; j < 3; j++) { - var picker = new CodeMirrorColorPicker[type]({ - target: item, + for(var j = 0; j < 1; j++) { + var picker = new CodeMirrorColorPicker.ColorPicker({ + container: item, + type: type, color: 'blue', onChange : function (c) { - console.log(c); + console.log(this, c); } }); } diff --git a/package.json b/package.json index 813fc2c..8fe1b93 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "codemirror-colorpicker", - "version": "1.6.2", + "version": "1.6.3", "description": "colorpicker for codemirror", "main": "./dist/codemirror-colorpicker.js", "scripts": { diff --git a/resources/image/sketch-type.png b/resources/image/sketch-type.png new file mode 100644 index 0000000..974ac62 Binary files /dev/null and b/resources/image/sketch-type.png differ diff --git a/src/colorpicker/ColorInformation.js b/src/colorpicker/ColorInformation.js index 51c1727..28b2cbb 100644 --- a/src/colorpicker/ColorInformation.js +++ b/src/colorpicker/ColorInformation.js @@ -213,9 +213,12 @@ export default class ColorInformation extends EventMachin { var rgb = null; if (format == 'hex') { this.$hexCode.val(this.convertHEX()); + var rgb = this.convertRGB(); + this.setRGBInput(rgb.r, rgb.g, rgb.b, rgb.a); } else if (format == 'rgb') { var rgb = this.convertRGB(); this.setRGBInput(rgb.r, rgb.g, rgb.b, rgb.a); + this.$hexCode.val(this.convertHEX()); } else if (format == 'hsl') { var hsl = this.convertHSL(); this.setHSLInput(hsl.h, hsl.s, hsl.l, hsl.a); @@ -268,6 +271,7 @@ export default class ColorInformation extends EventMachin { if(code.charAt(0) == '#' && code.length == 7) { this.colorpicker.changeInformationColor(code); + this.setInputColor(); } } diff --git a/src/colorpicker/ColorPalette.js b/src/colorpicker/ColorPalette.js index 90e15ea..7ea984b 100644 --- a/src/colorpicker/ColorPalette.js +++ b/src/colorpicker/ColorPalette.js @@ -52,10 +52,10 @@ export default class ColorPallet extends EventMachin { setMainColor(e) { e.preventDefault(); - var pos = this.colorpicker.$root.position(); // position for screen - var w = this.$el.width(); - var h = this.$el.height(); - + var pos = this.$el.position(); // position for screen + var w = this.$el.width() - this.$el.cssFloat('padding-left') - this.$el.cssFloat('padding-right'); + var h = this.$el.height() - this.$el.cssFloat('padding-top') - this.$el.cssFloat('padding-bottom'); + var x = e.clientX - pos.left; var y = e.clientY - pos.top; diff --git a/src/colorpicker/index.js b/src/colorpicker/index.js index 6f8e88f..9bc59d1 100644 --- a/src/colorpicker/index.js +++ b/src/colorpicker/index.js @@ -12,10 +12,10 @@ import CurrentColorSets from './CurrentColorSets' import CurrentColorSetsContextMenu from './CurrentColorSetsContextMenu' export default class ColorPicker extends EventMachin { - constructor (opt) { + constructor(opt) { super(); - this.opt = opt || {}; + this.opt = opt || {}; this.$body = null; this.$root = null; this.format = 'rgb'; @@ -23,14 +23,14 @@ export default class ColorPicker extends EventMachin { this.currentH = 0; this.currentS = 0; this.currentV = 0; - this.colorSetsList = new ColorSetsList(this); - this.colorpickerCallback = function () {}; + this.colorSetsList = new ColorSetsList(this); + this.colorpickerCallback = function () { }; this.isColorPickerShow = false; this.isShortCut = false; this.hideDelay = this.opt.hideDeplay || 2000; this.timerCloseColorPicker; - this.autoHide = this.opt.autoHide || true; + this.autoHide = this.opt.autoHide || true; this.control = new ColorControl(this); this.palette = new ColorPalette(this); @@ -42,14 +42,25 @@ export default class ColorPicker extends EventMachin { this.initialize(); } - getOption (key) { + getOption(key) { return this.opt[key]; } - initialize () { - this.$body = new Dom(this.opt.container || document.body); + getContainer () { + return this.opt.container || document.body; + } + + initialize() { + this.$body = new Dom(this.getContainer()); this.$root = new Dom('div', 'codemirror-colorpicker'); + // append colorpicker to container (ex : body) + this.$body.append(this.$root); + + if (this.opt.type) { // to change css style + this.$root.addClass(this.opt.type); + } + this.$arrow = new Dom('div', 'arrow'); @@ -60,24 +71,27 @@ export default class ColorPicker extends EventMachin { this.$root.append(this.currentColorSets.$el); this.$root.append(this.colorSetsChooser.$el); this.$root.append(this.contextMenu.$el); - - this.$checkColorPickerClass = this.checkColorPickerClass.bind(this); - this.initColor(); + this.$checkColorPickerClass = this.checkColorPickerClass.bind(this); + + this.initColor(this.opt.color); + + // register all events + this.initializeEvent(); } - showContextMenu (e, index) { + showContextMenu(e, index) { this.contextMenu.show(e, index); } setColor(value) { - if(typeof(value) == "object") { - if(!value.r || !value.g || !value.b) + if (typeof (value) == "object") { + if (!value.r || !value.g || !value.b) return; this.initColor(Color.format(value, "hex")); - } else if(typeof(value) == "string") { - this.initColor(value); + } else if (typeof (value) == "string") { + this.initColor(value); } } @@ -92,24 +106,24 @@ export default class ColorPicker extends EventMachin { return rgb; } - definePositionForArrow (opt, elementScreenLeft, elementScreenTop) { + definePositionForArrow(opt, elementScreenLeft, elementScreenTop) { //this.$arrow.css({}) } - definePosition (opt) { + definePosition(opt) { var width = this.$root.width(); var height = this.$root.height(); // set left position for color picker - var elementScreenLeft = opt.left - this.$body.el.scrollLeft ; + var elementScreenLeft = opt.left - this.$body.el.scrollLeft; if (width + elementScreenLeft > window.innerWidth) { elementScreenLeft -= (width + elementScreenLeft) - window.innerWidth; } if (elementScreenLeft < 0) { elementScreenLeft = 0; } // set top position for color picker - var elementScreenTop = opt.top - this.$body.el.scrollTop ; + var elementScreenTop = opt.top - this.$body.el.scrollTop; if (height + elementScreenTop > window.innerHeight) { elementScreenTop -= (height + elementScreenTop) - window.innerHeight; } @@ -118,32 +132,48 @@ export default class ColorPicker extends EventMachin { // set position this.$root.css({ - left : (elementScreenLeft) + 'px', - top : (elementScreenTop) + 'px' + left: (elementScreenLeft) + 'px', + top: (elementScreenTop) + 'px' }); } - show (opt, color, callback) { + getInitalizePosition() { + if (this.opt.position == 'inline') { + return { + position: 'relative', + left: 'auto', + top: 'auto', + display: 'inline-block' + } + } else { + return { + position: 'fixed', // color picker has fixed position + left: '-10000px', + top: '-10000px' + } + } + } + + show(opt, color, callback) { this.destroy(); this.initializeEvent(); - this.$root.appendTo(document.body); + this.$root.appendTo(this.$body); - this.$root.css({ - position: 'fixed', // color picker has fixed position - left : '-10000px', - top : '-10000px' - }).show(); + this.$root.css(this.getInitalizePosition()).show(); this.definePosition(opt); this.isColorPickerShow = true; this.isShortCut = opt.isShortCut || false; - + this.initColor(color); // define colorpicker callback - this.colorpickerCallback = function (colorString) { + this.colorpickerCallback = (colorString) => { + if (typeof this.opt.onChange == 'function') { + this.opt.onChange(colorString); + } callback(colorString); } @@ -155,7 +185,7 @@ export default class ColorPicker extends EventMachin { } - setHideDelay (delayTime) { + setHideDelay(delayTime) { delayTime = delayTime || 0; this.$root.off('mouseenter'); @@ -165,7 +195,7 @@ export default class ColorPicker extends EventMachin { clearTimeout(this.timerCloseColorPicker); }); - this.$root.on('mouseleave', () => { + this.$root.on('mouseleave', () => { clearTimeout(this.timerCloseColorPicker); this.timerCloseColorPicker = setTimeout(this.hide.bind(this), delayTime); }); @@ -174,34 +204,34 @@ export default class ColorPicker extends EventMachin { this.timerCloseColorPicker = setTimeout(this.hide.bind(this), delayTime); } - hide () { + hide() { if (this.isColorPickerShow) { - this.destroy(); - this.$root.hide(); - this.$root.remove(); // not empty - this.isColorPickerShow = false; + this.destroy(); + this.$root.hide(); + this.$root.remove(); // not empty + this.isColorPickerShow = false; } - } + } convertRGB() { return Color.HSVtoRGB(this.currentH, this.currentS, this.currentV); } - + convertHEX() { return Color.format(this.convertRGB(), 'hex'); } - - convertHSL() { + + convertHSL() { return Color.HSVtoHSL(this.currentH, this.currentS, this.currentV); } - getCurrentColor () { + getCurrentColor() { return this.information.getFormattedColor(); } - getFormattedColor (format) { + getFormattedColor(format) { format = format || 'hex'; - + if (format == 'rgb') { var rgb = this.convertRGB(); rgb.a = this.currentA; @@ -223,32 +253,38 @@ export default class ColorPicker extends EventMachin { this.control.setInputColor(isNoInputColor); this.callbackColorValue(); - } + } changeInputColorAfterNextFormat() { this.control.setInputColor(); this.callbackColorValue(); - } + } + + callbackColorValue() { + if (typeof this.opt.onChange == 'function') { + if (!isNaN(this.currentA)) { + this.opt.onChange(this.getCurrentColor()); + } + + } - callbackColorValue () { if (typeof this.colorpickerCallback == 'function') { - if (!isNaN(this.currentA)) { this.colorpickerCallback(this.getCurrentColor()); } - - } + + } } - + caculateHSV() { var obj = this.palette.caculateSV(); var control = this.control.caculateH(); var s = obj.s; - var v = obj.v; - var h = control.h ; + var v = obj.v; + var h = control.h; if (obj.width == 0) { @@ -263,70 +299,70 @@ export default class ColorPicker extends EventMachin { } - setColorUI() { + setColorUI() { this.control.setColorUI() this.palette.setColorUI() } - setCurrentHSV (h, s, v, a) { + setCurrentHSV(h, s, v, a) { this.currentA = a; this.currentH = h; this.currentS = s; this.currentV = v; - } - + } + - setCurrentH (h) { + setCurrentH(h) { this.currentH = h; } - setCurrentA ( a) { + setCurrentA(a) { this.currentA = a; } - setBackgroundColor (color) { + setBackgroundColor(color) { this.palette.setBackgroundColor(color); } - setCurrentFormat (format) { - this.format = format; + setCurrentFormat(format) { + this.format = format; this.information.setCurrentFormat(format); } - getHSV (colorObj) { + getHSV(colorObj) { if (colorObj.type == 'hsl') { return Color.HSLtoHSV(colorObj.h, colorObj.s, colorObj.l); } else { return Color.RGBtoHSV(colorObj); - } + } } initColor(newColor, format) { let c = newColor || "#FF0000", colorObj = Color.parse(c); format = format || colorObj.type; - + this.setCurrentFormat(format); let hsv = this.getHSV(colorObj); this.setCurrentHSV(hsv.h, hsv.s, hsv.v, colorObj.a); this.setColorUI(); this.setHueColor(); - this.setInputColor(); - } + this.setInputColor(); + } changeInformationColor(newColor) { let c = newColor || "#FF0000", colorObj = Color.parse(c); - + let hsv = this.getHSV(colorObj); this.setCurrentHSV(hsv.h, hsv.s, hsv.v, colorObj.a); this.setColorUI(); this.setHueColor(); this.control.setInputColor(); this.callbackColorValue(); - } + } - setHueColor () { + setHueColor() { this.control.setOnlyHueColor(); } @@ -335,25 +371,25 @@ export default class ColorPicker extends EventMachin { var hasColorPicker = new Dom(el).closest('codemirror-colorpicker'); var hasCodeMirror = new Dom(el).closest('CodeMirror'); var IsInHtml = el.nodeName == 'HTML'; - + return !!(hasColorPicker || hasColorView || hasCodeMirror); } - - checkInHtml (el) { + + checkInHtml(el) { var IsInHtml = el.nodeName == 'HTML'; - + return IsInHtml; - } + } // Event Bindings 'mouseup document' (e) { this.palette.EventDocumentMouseUp(e); this.control.EventDocumentMouseUp(e); - + // when color picker clicked in outside if (this.checkInHtml(e.target)) { //this.setHideDelay(hideDelay); - } else if (this.checkColorPickerClass(e.target) == false ) { + } else if (this.checkColorPickerClass(e.target) == false) { this.hide(); } } @@ -361,26 +397,26 @@ export default class ColorPicker extends EventMachin { 'mousemove document' (e) { this.palette.EventDocumentMouseMove(e); this.control.EventDocumentMouseMove(e); - } + } - initializeEvent () { + initializeEvent() { this.initializeEventMachin(); this.palette.initializeEvent(); this.control.initializeEvent(); this.information.initializeEvent() - this.currentColorSets.initializeEvent() + this.currentColorSets.initializeEvent() this.colorSetsChooser.initializeEvent(); this.contextMenu.initializeEvent(); - + } - currentFormat () { + currentFormat() { this.information.currentFormat(); } - toggleColorChooser () { + toggleColorChooser() { this.colorSetsChooser.toggle(); } @@ -388,18 +424,18 @@ export default class ColorPicker extends EventMachin { this.colorSetsChooser.refresh(); } - getColorSetsList () { + getColorSetsList() { return this.colorSetsList.getColorSetsList(); } - setCurrentColorSets (nameOrIndex) { + setCurrentColorSets(nameOrIndex) { this.colorSetsList.setCurrentColorSets(nameOrIndex); this.currentColorSets.refresh(); } - setColorSets (list) { + setColorSets(list) { this.colorSetsList.setUserList(list); - } + } destroy() { super.destroy(); diff --git a/src/colorpicker/type/ChromeDevtool/ChromeColorControl.js b/src/colorpicker/type/ChromeDevtool/ChromeColorControl.js deleted file mode 100644 index e0edf2b..0000000 --- a/src/colorpicker/type/ChromeDevtool/ChromeColorControl.js +++ /dev/null @@ -1,257 +0,0 @@ - -import Color from '../../../util/Color' -import HueColor from '../../../util/HueColor' -import Dom from '../../../util/Dom' -import Event from '../../../util/Event' -import EventMachin from '../../../util/EventMachin' - - -export default class ChromeColorControl extends EventMachin { - constructor (colorpicker) { - super(); - this.colorpicker = colorpicker; - this.initialize(); - } - - initialize () { - this.$el = new Dom('div', 'control' ); - this.$hue = this.$el.createChild('div', 'hue' ); - this.$opacity = this.$el.createChild('div', 'opacity' ); - this.$controlPattern = this.$el.createChild('div', 'empty' ); - this.$controlColor = this.$el.createChild('div', 'color' ); - - this.$hueContainer = this.$hue.createChild('div', 'hue-container' ); - this.$drag_bar = this.$hueContainer.createChild('div', 'drag-bar'); - this.drag_bar_pos = {} - - this.$opacityContainer = this.$opacity.createChild('div', 'opacity-container' ); - this.$opacityColorBar = this.$opacityContainer.createChild('div', 'color-bar' ); - - this.$opacity_drag_bar = this.$opacityContainer.createChild('div', 'drag-bar2' ); - this.opacity_drag_bar_pos = {} - } - - setBackgroundColor (color) { - this.$controlColor.css("background-color", color); - } - - refresh () { - this.setColorUI(); - } - - setColorUI() { - var x = this.$el.width() * this.colorpicker.currentS, - y = this.$el.height() * ( 1 - this.colorpicker.currentV ); - - this.$drag_pointer.css({ - left : (x - 5) + "px", - top : (y - 5) + "px" - }); - } - - - setMainColor(e) { - e.preventDefault(); - var pos = this.colorpicker.$root.position(); // position for screen - var w = $color.width(); - var h = $color.height(); - - var x = e.clientX - pos.left; - var y = e.clientY - pos.top; - - if (x < 0) x = 0; - else if (x > w) x = w; - - if (y < 0) y = 0; - else if (y > h) y = h; - - this.$drag_pointer.css({ - left: (x - 5) + 'px', - top: (y - 5) + 'px' - }); - - this.colorpicker.caculateHSV() - this.colorpicker.setInputColor(); - } - - - setOpacityColorBar(hueColor) { - var rgb = Color.parse(hueColor); - - rgb.a = 0; - var start = Color.format(rgb, 'rgb'); - - rgb.a = 1; - var end = Color.format(rgb, 'rgb'); - - var prefix = cssPrefix; - this.$opacityColorBar.css('background', 'linear-gradient(to right, ' + start + ', ' + end + ')'); - } - - setOpacity(e) { - var min = this.$opacityContainer.offset().left; - var max = min + this.$opacityContainer.width(); - var current = Event.pos(e).clientX; - var dist; - - if (current < min) { - dist = 0; - } else if (current > max) { - dist = 100; - } else { - dist = (current - min) / (max - min) * 100; - } - - var x = (this.$opacityContainer.width() * (dist/100)); - - this.$opacity_drag_bar.css({ - left: (x -Math.ceil(this.$opacity_drag_bar.width()/2)) + 'px' - }); - - this.opacity_drag_bar_pos = { x }; - - this.colorpicker.setCurrentA(this.caculateOpacity()); - this.colorpicker.currentFormat(); - this.colorpicker.setInputColor(); - } - - setInputColor () { - this.setBackgroundColor(this.colorpicker.getFormattedColor('rgb')); - - var rgb = this.colorpicker.convertRGB(); - var colorString = Color.format(rgb, 'rgb'); - this.setOpacityColorBar(colorString); - } - - setColorUI() { - - var hueX = this.$hueContainer.width() * (this.colorpicker.currentH / 360); - - this.$drag_bar.css({ - left : (hueX - 7.5) + 'px' - }); - - this.drag_bar_pos = { x : hueX }; - - var opacityX = this.$opacityContainer.width() * (this.colorpicker.currentA || 0); - - this.$opacity_drag_bar.css({ - left : (opacityX - 7.5) + 'px' - }); - - this.opacity_drag_bar_pos = { x : opacityX }; - - } - - caculateH() { - - var huePos = this.drag_bar_pos || { x : 0 }; - - var h = (huePos.x / this.$hueContainer.width()) * 360; - - return { h } ; - } - - caculateOpacity() { - var opacityPos = this.opacity_drag_bar_pos || { x : 0 }; - var a = Math.round((opacityPos.x / this.$opacityContainer.width()) * 100) / 100; - - return isNaN(a) ? 1 : a; - } - - - EventDocumentMouseMove(e) { - if (this.isHueDown) { - this.setHueColor(e); - } - - if (this.isOpacityDown) { - this.setOpacity(e); - } - } - - EventDocumentMouseUp (e) { - this.isHueDown = false ; - this.isOpacityDown = false; - } - - setControlColor (color) { - this.$controlColor.css('background-color', color); - } - - - setHueColor(e) { - var min = this.$hueContainer.offset().left; - var max = min + this.$hueContainer.width(); - var current = e ? Event.pos(e).clientX : min + (max - min) * (this.colorpicker.currentH / 360); - - var dist; - if (current < min) { - dist = 0; - } else if (current > max) { - dist = 100; - } else { - dist = (current - min) / (max - min) * 100; - } - - var x = (this.$hueContainer.width() * (dist/100)); - - this.$drag_bar.css({ - left: (x -Math.ceil(this.$drag_bar.width()/2)) + 'px' - }); - - this.drag_bar_pos = { x }; - - var hueColor = HueColor.checkHueColor(dist/100); - - this.colorpicker.setBackgroundColor(hueColor); - this.colorpicker.setCurrentH((dist/100) * 360); - this.colorpicker.setInputColor(); - } - - setOnlyHueColor() { - var min = this.$hueContainer.offset().left; - var max = min + this.$hueContainer.width(); - var current = min + (max - min) * (this.colorpicker.currentH / 360); - var dist; - if (current < min) { - dist = 0; - } else if (current > max) { - dist = 100; - } else { - dist = (current - min) / (max - min) * 100; - } - - var x = (this.$hueContainer.width() * (dist/100)); - - this.$drag_bar.css({ - left: (x -Math.ceil(this.$drag_bar.width()/2)) + 'px' - }); - - this.drag_bar_pos = { x }; - - var hueColor = HueColor.checkHueColor(dist/100); - this.colorpicker.setBackgroundColor(hueColor); - this.colorpicker.setCurrentH((dist/100) * 360); - } - - 'mousedown $drag_bar' (e) { - e.preventDefault(); - this.isHueDown = true; - } - - 'mousedown $opacity_drag_bar' (e) { - e.preventDefault(); - this.isOpacityDown = true; - } - - 'mousedown $hueContainer' (e) { - this.isHueDown = true; - this.setHueColor(e); - } - - 'mousedown $opacityContainer' (e) { - this.isOpacityDown = true; - this.setOpacity(e); - } -} diff --git a/src/colorpicker/type/ChromeDevtool/ChromeColorInformation.js b/src/colorpicker/type/ChromeDevtool/ChromeColorInformation.js deleted file mode 100644 index 406c925..0000000 --- a/src/colorpicker/type/ChromeDevtool/ChromeColorInformation.js +++ /dev/null @@ -1,281 +0,0 @@ -import Color from '../../../util/Color' -import Dom from '../../../util/Dom' -import Event from '../../../util/Event' -import EventMachin from '../../../util/EventMachin' - -export default class ChromeColorInformation extends EventMachin { - - constructor(colorpicker) { - super(); - - this.colorpicker = colorpicker; - this.initialize() - - } - - initialize () { - this.$el = new Dom('div', 'information hex' ); - - this.$informationChange = this.$el.createChild('div', 'information-change'); - - this.$formatChangeButton = this.$informationChange.createChild('button', 'format-change-button arrow-button', { type : 'button'}); - - this.$el.append(this.makeInputFieldHex()); - this.$el.append(this.makeInputFieldRgb()); - this.$el.append(this.makeInputFieldHsl()); - - this.format = 'hex'; - } - - - makeInputFieldHex () { - var item = new Dom('div', 'information-item hex'); - var field = item.createChild('div', 'input-field hex'); - - this.$hexCode = field.createChild('input', 'input', { type : 'text' }); - - field.createChild('div', 'title').html('HEX'); - - return item; - } - - makeInputFieldRgb () { - var item = new Dom('div', 'information-item rgb'); - - var field = item.createChild('div', 'input-field rgb-r'); - this.$rgb_r = field.createChild('input', 'input', { type : 'number', step : 1, min : 0, max : 255 }); - field.createChild('div', 'title').html('R'); - - field = item.createChild('div', 'input-field rgb-g'); - this.$rgb_g = field.createChild('input', 'input', { type : 'number', step : 1, min : 0, max : 255 }); - field.createChild('div', 'title').html('G'); - - field = item.createChild('div', 'input-field rgb-b'); - this.$rgb_b = field.createChild('input', 'input', { type : 'number', step : 1, min : 0, max : 255 }); - field.createChild('div', 'title').html('B'); - - // rgba - field = item.createChild('div', 'input-field rgb-a'); - this.$rgb_a = field.createChild('input', 'input', { type : 'number', step : 0.01, min : 0, max : 1 }); - field.createChild('div', 'title').html('A'); - - return item; - } - - makeInputFieldHsl () { - var item = new Dom('div', 'information-item hsl'); - - var field = item.createChild('div', 'input-field hsl-h'); - this.$hsl_h = field.createChild('input', 'input', { type : 'number', step : 1, min : 0, max : 360 }); - field.createChild('div', 'title').html('H'); - - field = item.createChild('div', 'input-field hsl-s'); - this.$hsl_s = field.createChild('input', 'input', { type : 'number', step: 1, min: 0, max : 100 }); - field.createChild('div', 'postfix').html('%'); - field.createChild('div', 'title').html('S'); - - field = item.createChild('div', 'input-field hsl-l'); - this.$hsl_l = field.createChild('input', 'input', { type : 'number', step: 1, min: 0, max : 100 }); - field.createChild('div', 'postfix').html('%'); - field.createChild('div', 'title').html('L'); - - // rgba - field = item.createChild('div', 'input-field hsl-a'); - this.$hsl_a = field.createChild('input', 'input', { type : 'number', step : 0.01, min : 0, max : 1 }); - field.createChild('div', 'title').html('A'); - - return item; - } - - currentFormat () { - var current_format = this.format || 'hex'; - if (this.colorpicker.currentA < 1 && current_format == 'hex' ) { - var next_format = 'rgb'; - this.$el.removeClass(current_format); - this.$el.addClass(next_format); - this.format = next_format; - - this.colorpicker.setInputColor(); - } - } - - setCurrentFormat (format) { - this.format = format - this.initFormat(); - } - - initFormat () { - var current_format = this.format || 'hex'; - - this.$el.removeClass('hex'); - this.$el.removeClass('rgb'); - this.$el.removeClass('hsl'); - this.$el.addClass(current_format); - } - - nextFormat() { - var current_format = this.format || 'hex'; - - var next_format = 'hex'; - if (current_format == 'hex') { - next_format = 'rgb'; - } else if (current_format == 'rgb') { - next_format = 'hsl'; - } else if (current_format == 'hsl') { - if (this.colorpicker.currentA == 1) { - next_format = 'hex'; - } else { - next_format = 'rgb'; - } - } - - this.$el.removeClass(current_format); - this.$el.addClass(next_format); - this.format = next_format; - - this.setInputColor(); - this.colorpicker.changeInputColorAfterNextFormat(); - } - - - - setRGBInput(r, g, b) { - this.$rgb_r.val(r); - this.$rgb_g.val(g); - this.$rgb_b.val(b); - this.$rgb_a.val(this.colorpicker.currentA); - } - - setHSLInput(h, s, l) { - this.$hsl_h.val(h); - this.$hsl_s.val(s); - this.$hsl_l.val(l); - this.$hsl_a.val(this.colorpicker.currentA); - } - - getHexFormat() { - return Color.format({ - r : this.$rgb_r.int(), - g : this.$rgb_g.int(), - b : this.$rgb_b.int() - }, 'hex'); - } - - getRgbFormat() { - return Color.format({ - r : this.$rgb_r.int(), - g : this.$rgb_g.int(), - b : this.$rgb_b.int(), - a : this.$rgb_a.float() - }, 'rgb'); - } - - getHslFormat() { - return Color.format({ - h : this.$hsl_h.val(), - s : this.$hsl_s.val(), - l : this.$hsl_l.val(), - a : this.$hsl_a.float() - }, 'hsl'); - } - - - convertRGB() { - return this.colorpicker.convertRGB(); - } - - convertHEX() { - return this.colorpicker.convertHEX(); - } - - convertHSL() { - return this.colorpicker.convertHSL(); - } - - getFormattedColor (format, fixed = false) { - format = format || this.getFormat(); - if (format == 'hex') { - return this.$hexCode.val(); - } else if (format == 'rgb') { - return this.getRgbFormat(fixed); - } else if (format == 'hsl') { - return this.getHslFormat(fixed); - } - } - - getFormat () { - return this.format || 'hex'; - } - - setInputColor() { - var format = this.getFormat(); - - var rgb = null; - if (format == 'hex') { - this.$hexCode.val(this.convertHEX()); - } else if (format == 'rgb') { - var rgb = this.convertRGB(); - this.setRGBInput(rgb.r, rgb.g, rgb.b, rgb.a); - } else if (format == 'hsl') { - var hsl = this.convertHSL(); - this.setHSLInput(hsl.h, hsl.s, hsl.l, hsl.a); - } - } - - - checkNumberKey(e) { - return Event.checkNumberKey(e); - } - - checkNotNumberKey(e) { - return !Event.checkNumberKey(e); - } - - //'keydown.checkNotNumberKey $rgb_r' (e) { e.preventDefault(); } - //'keydown.checkNotNumberKey $rgb_g' (e) { e.preventDefault(); } - //'keydown.checkNotNumberKey $rgb_b' (e) { e.preventDefault(); } - - //'keydown.checkNumberKey $rgb_r' (e) { this.setRGBtoHexColor(e); } - //'keydown.checkNumberKey $rgb_g' (e) { this.setRGBtoHexColor(e); } - //'keydown.checkNumberKey $rgb_b' (e) { this.setRGBtoHexColor(e); } - - changeRgbColor () { - this.colorpicker.changeInformationColor(this.getRgbFormat()); - } - - changeHslColor () { - this.colorpicker.changeInformationColor(this.getHslFormat()); - } - - 'change $rgb_r' (e) { this.changeRgbColor(); } - 'change $rgb_g' (e) { this.changeRgbColor(); } - 'change $rgb_b' (e) { this.changeRgbColor(); } - 'change $rgb_a' (e) { this.changeRgbColor(); } - - 'change $hsl_h' (e) { this.changeHslColor(); } - 'change $hsl_s' (e) { this.changeHslColor(); } - 'change $hsl_l' (e) { this.changeHslColor(); } - 'change $hsl_a' (e) { this.changeHslColor(); } - - 'keydown $hexCode' (e) { - if(e.which < 65 || e.which > 70) { - return this.checkNumberKey(e); - } - } - - 'keyup $hexCode' (e) { - var code = this.$hexCode.val(); - - if(code.charAt(0) == '#' && code.length == 7) { - this.colorpicker.changeInformationColor(code); - } - } - - 'click $formatChangeButton' (e) { - this.nextFormat(); - } - - refresh () { - - } -} diff --git a/src/colorpicker/type/ChromeDevtool/ChromeColorPalette.js b/src/colorpicker/type/ChromeDevtool/ChromeColorPalette.js deleted file mode 100644 index 12cee54..0000000 --- a/src/colorpicker/type/ChromeDevtool/ChromeColorPalette.js +++ /dev/null @@ -1,100 +0,0 @@ -import Color from '../../../util/Color' -import Dom from '../../../util/Dom' -import Event from '../../../util/Event' -import EventMachin from '../../../util/EventMachin' - -export default class ChromeColorPallet extends EventMachin { - constructor (colorpicker) { - super(); - - this.colorpicker = colorpicker; - this.initialize(); - } - - initialize () { - this.$el = new Dom('div', 'color'); - this.$saturation = this.$el.createChild('div', 'saturation' ); - this.$value = this.$saturation.createChild('div', 'value' ); - this.$drag_pointer = this.$value.createChild('div', 'drag-pointer' ); - } - - setBackgroundColor (color) { - this.$el.css("background-color", color); - } - - refresh () { - this.setColorUI(); - } - - caculateSV () { - var pos = this.drag_pointer_pos || { x : 0, y : 0 }; - - var width = this.$el.width(); - var height = this.$el.height(); - - var s = (pos.x / width); - var v = ((height - pos.y) / height); - - return { s , v, width, height } - } - - setColorUI() { - var x = this.$el.width() * this.colorpicker.currentS, y = this.$el.height() * ( 1 - this.colorpicker.currentV ); - - this.$drag_pointer.css({ - left : (x - 5) + "px", - top : (y - 5) + "px" - }); - - this.drag_pointer_pos = { x , y }; - } - - - setMainColor(e) { - e.preventDefault(); - var pos = this.$el.position(); - var w = this.$el.width(); - var h = this.$el.height(); - - var x = e.clientX - pos.left; - var y = e.clientY - pos.top; - - if (x < 0) x = 0; - else if (x > w) x = w; - - if (y < 0) y = 0; - else if (y > h) y = h; - - this.$drag_pointer.css({ - left: (x - 5) + 'px', - top: (y - 5) + 'px' - }); - - this.drag_pointer_pos = { x , y } - - this.colorpicker.caculateHSV() - this.colorpicker.setInputColor(); - } - - - EventDocumentMouseUp (e) { - this.isDown = false; - } - - EventDocumentMouseMove(e) { - if (this.isDown) { - this.setMainColor(e); - } - } - - - mousedown (e) { - this.isDown = true; - this.setMainColor(e); - } - - mouseup (e) { - this.isDown = false; - } - -} diff --git a/src/colorpicker/type/ChromeDevtool/ChromeColorSetsChooser.js b/src/colorpicker/type/ChromeDevtool/ChromeColorSetsChooser.js deleted file mode 100644 index 26348c6..0000000 --- a/src/colorpicker/type/ChromeDevtool/ChromeColorSetsChooser.js +++ /dev/null @@ -1,109 +0,0 @@ -import Color from '../../../util/Color' -import Dom from '../../../util/Dom' -import Event from '../../../util/Event' -import EventMachin from '../../../util/EventMachin' - -const DATA_COLORSETS_INDEX = 'data-colorsets-index'; - -export default class ChromeColorSetsChooser extends EventMachin { - constructor (colorpicker) { - super(); - - this.colorpicker = colorpicker; - - this.initialize(); - } - - initialize () { - // make colorset-chooser - this.$el = new Dom('div', 'color-chooser' ); - - const $container = this.$el.createChild('div', 'color-chooser-container'); - - const $header = $container.createChild('div', 'colorsets-item colorsets-item-header'); - - $header.createChild('h1', 'title').html('Color Paletts') - - this.$toggleButton = $header.createChild('span', 'items').html('×'); - - this.$colorsetsList = $container.createChild('div', 'colorsets-list' ); - - this.refresh(); - } - - refresh () { - this.$colorsetsList.html(this.makeColorSetsList()); - } - - makeColorItemList (colors, maxCount = 5) { - var $list = new Dom('div'); - - for(var i = 0; i < maxCount; i++) { - var color = colors[i] || 'rgba(255, 255, 255, 1)'; - var $item = $list.createChild('div', 'color-item', { - title: color - }); - - $item.createChild('div', 'color-view', null, { - 'background-color': color - }); - } - - return $list; - } - - makeColorSetsList () { - const $div = new Dom('div'); - - // colorsets - const colorSets = this.colorpicker.getColorSetsList(); - colorSets.forEach( (element, index) => { - const $item = $div.createChild('div', 'colorsets-item', { - [DATA_COLORSETS_INDEX] : index - }); - - $item.createChild('h1', 'title').html(element.name) - - $item.createChild('div', 'items').append(this.makeColorItemList(element.colors, 5)) - - }); - - return $div; - } - - show () { - this.$el.addClass('open'); - } - - hide () { - this.$el.removeClass('open'); - } - - toggle () { - this.$el.toggleClass('open'); - } - - - 'click $toggleButton' (e) { - this.toggle(); - } - - 'click $colorsetsList' (e) { - e.preventDefault(); - const $item = new Dom(e.target).closest('colorsets-item'); - - if ($item) { - - const index = parseInt($item.attr(DATA_COLORSETS_INDEX)); - this.colorpicker.setCurrentColorSets(index); - this.hide(); - } - } - - destroy () { - super.destroy(); - - this.hide(); - } - -} diff --git a/src/colorpicker/type/ChromeDevtool/ChromeColorSetsList.js b/src/colorpicker/type/ChromeDevtool/ChromeColorSetsList.js deleted file mode 100644 index a57ab0f..0000000 --- a/src/colorpicker/type/ChromeDevtool/ChromeColorSetsList.js +++ /dev/null @@ -1,129 +0,0 @@ -import Color from '../../../util/Color' - -let colorSetsList = [ - { - name : "Material", - colors: [ - '#F44336', '#E91E63', '#9C27B0', '#673AB7', '#3F51B5', '#2196F3', '#03A9F4', '#00BCD4', '#009688', '#4CAF50', '#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800', '#FF5722', '#795548', '#9E9E9E', '#607D8B' - ] - }, - { - name : "Custom", "edit" : true, "colors" : [] - }, - { - name: "Color Scale", "scale" : ['red', 'yellow', 'black' ], count : 5 - } -] - - - -export default class ChromeColorSetsList { - constructor (colorpicker) { - this.colorpicker = colorpicker; - - this.setUserList(this.colorpicker.getOption('colorSets')); - } - - list () { - return this.userList || colorSetsList; - } - - setUserList (list) { - this.userList = list; - - this.resetUserList(); - - this.setCurrentColorSets(); - } - - resetUserList () { - if (this.userList && this.userList.length) { - this.userList = this.userList.map( (element, index) => { - - if (typeof element.colors == 'function') { - const makeCallback = element.colors; - - element.colors = makeCallback(this.colorpicker, this); - element._colors = makeCallback; - } - - return Object.assign({ - name: `color-${index}`, - colors : [] - }, element) - }) - } - } - - setCurrentColorSets (nameOrIndex) { - - const _list = this.list(); - - if (typeof nameOrIndex == 'undefined') { - this.currentColorSets = _list[0]; - } else if (typeof nameOrIndex == 'number') { - this.currentColorSets = _list[nameOrIndex]; - } else { - this.currentColorSets = _list.filter(function (obj) { - return obj.name == nameOrIndex; - })[0]; - } - - - } - - getCurrentColorSets () { - return this.currentColorSets; - } - - addCurrentColor ( color) { - if (Array.isArray(this.currentColorSets.colors)) { - this.currentColorSets.colors.push(color); - } - } - - removeCurrentColor (index) { - if (this.currentColorSets.colors[index]) { - this.currentColorSets.colors.splice(index, 1); - } - } - - removeCurrentColorToTheRight (index) { - if (this.currentColorSets.colors[index]) { - this.currentColorSets.colors.splice(index, Number.MAX_VALUE); - } - } - - clearPalette () { - if (this.currentColorSets.colors) { - this.currentColorSets.colors = []; - } - } - - getCurrentColors ( ) { - return this.getColors(this.currentColorSets); - } - - getColors (element) { - - if (element.scale) { - return Color.scale(element.scale, element.count); - } - - return element.colors || []; - } - - getColorSetsList () { - return this.list().map(element => { - return { - name : element.name, - colors : this.getColors(element) - } - }); - } - - - destroy () { - - } -} \ No newline at end of file diff --git a/src/colorpicker/type/ChromeDevtool/ChromeCurrentColorSets.js b/src/colorpicker/type/ChromeDevtool/ChromeCurrentColorSets.js deleted file mode 100644 index ea18c18..0000000 --- a/src/colorpicker/type/ChromeDevtool/ChromeCurrentColorSets.js +++ /dev/null @@ -1,123 +0,0 @@ -import Color from '../../../util/Color' -import Dom from '../../../util/Dom' -import Event from '../../../util/Event' -import EventMachin from '../../../util/EventMachin' - -export default class ChromeCurrentColorSets extends EventMachin { - constructor (colorpicker) { - super(); - - this.colorpicker = colorpicker; - - this.colorSetsList = this.colorpicker.colorSetsList; - - this.initialize(); - } - - makeCurrentColorSets () { - var list = new Dom('div', 'current-color-sets'); - const currentColorSets = this.colorSetsList.getCurrentColorSets() - const colors = this.colorSetsList.getCurrentColors() - - - for(var i = 0, len = colors.length; i < len; i++) { - var color = colors[i]; - var item = list.createChild('div', 'color-item', { - 'title' : color, - 'data-index' : i, - 'data-color' : color - }); - - item.createChild('div', 'empty'); - item.createChild('div', 'color-view', null, { - 'background-color': color - }) - } - - - if (currentColorSets.edit) { - list.createChild('div', 'add-color-item').html('+'); - } - - return list; - } - - initialize () { - // make colorsets view - this.$el = new Dom('div', 'colorsets' ); - - const $colorSetsMenu = this.$el.createChild('div', 'menu', { - title: 'Open Color Pallets' - }); - this.$colorSetsColorList = this.$el.createChild('div', 'color-list' ); - - this.$colorSetsChooseButton = $colorSetsMenu.createChild('button', 'color-sets-choose-btn arrow-button', { - type : 'button' - }); - - this.refresh(); - } - - refresh () { - this.$colorSetsColorList.html(this.makeCurrentColorSets()) - } - - refreshAll () { - this.refresh(); - this.colorpicker.refreshColorSetsChooser(); - } - - addColor (color) { - this.colorSetsList.addCurrentColor(color); - this.refreshAll(); - } - - removeColor (index) { - this.colorSetsList.removeCurrentColor(index); - this.refreshAll(); - } - - removeAllToTheRight (index) { - this.colorSetsList.removeCurrentColorToTheRight(index); - this.refreshAll(); - } - - clearPalette () { - this.colorSetsList.clearPalette(); - this.refreshAll(); - } - - 'click $colorSetsChooseButton' (e) { - this.colorpicker.toggleColorChooser(); - } - - 'contextmenu $colorSetsColorList' (e) { - e.preventDefault(); - const currentColorSets = this.colorSetsList.getCurrentColorSets() - - if (!currentColorSets.edit) { - return; - } - - const $target = new Dom(e.target); - - const $item = $target.closest('color-item'); - - if ($item) { - const index = parseInt($item.attr('data-index')); - - this.colorpicker.showContextMenu(e, index); - } else { - this.colorpicker.showContextMenu(e); - } - } - - 'click $colorSetsColorList .add-color-item' (e) { - this.addColor(this.colorpicker.getCurrentColor()); - } - - 'click $colorSetsColorList .color-item' (e) { - this.colorpicker.setColor(e.$delegateTarget.attr('data-color')); - } - -} diff --git a/src/colorpicker/type/ChromeDevtool/ChromeCurrentColorSetsContextMenu.js b/src/colorpicker/type/ChromeDevtool/ChromeCurrentColorSetsContextMenu.js deleted file mode 100644 index 0b9c573..0000000 --- a/src/colorpicker/type/ChromeDevtool/ChromeCurrentColorSetsContextMenu.js +++ /dev/null @@ -1,77 +0,0 @@ -import Color from '../../../util/Color' -import Dom from '../../../util/Dom' -import Event from '../../../util/Event' -import EventMachin from '../../../util/EventMachin' - -export default class ChromeCurrentColorSetsContextMenu extends EventMachin { - constructor (colorpicker) { - super(); - - this.colorpicker = colorpicker; - this.currentColorSets = colorpicker.currentColorSets; - - this.initialize(); - } - - initialize () { - // make colorsets view - this.$el = new Dom('ul', 'colorsets-contextmenu' ); - - this.$el.createChild('li', 'menu-item small-hide', { - 'data-type' : 'remove-color' - }).html('Remove color') - - this.$el.createChild('li', 'menu-item small-hide', { - 'data-type' : 'remove-all-to-the-right' - }).html('Remove all to the right') - - this.$el.createChild('li', 'menu-item', { - 'data-type' : 'clear-palette' - }).html('Clear palette') - - } - - show (e, index) { - const $event = Event.pos(e); - - this.$el.css({ - top: ($event.clientY - 10) + 'px', - left: $event.clientX + 'px' - }); - this.$el.addClass('show'); - this.selectedColorIndex = index; - - if (typeof this.selectedColorIndex == 'undefined') { - this.$el.addClass('small') - } else { - this.$el.removeClass('small') - } - - } - - hide () { - this.$el.removeClass('show'); - } - - runCommand (command) { - switch(command) { - case 'remove-color': - this.currentColorSets.removeColor(this.selectedColorIndex); - break; - case 'remove-all-to-the-right': - this.currentColorSets.removeAllToTheRight(this.selectedColorIndex); - break; - case 'clear-palette': - this.currentColorSets.clearPalette(); - break; - } - } - - 'click $el .menu-item' (e) { - e.preventDefault(); - - this.runCommand(e.$delegateTarget.attr('data-type')); - this.hide(); - } - -} diff --git a/src/colorpicker/type/ChromeDevtool/index.js b/src/colorpicker/type/ChromeDevtool/index.js deleted file mode 100644 index 654b046..0000000 --- a/src/colorpicker/type/ChromeDevtool/index.js +++ /dev/null @@ -1,319 +0,0 @@ -import Color from '../../../util/Color' -import Dom from '../../../util/Dom' -import Event from '../../../util/Event' -import EventMachin from '../../../util/EventMachin' - -import ColorControl from './ChromeColorControl' -import ColorInformation from './ChromeColorInformation' -import ColorPalette from './ChromeColorPalette' -import ColorSetsChooser from './ChromeColorSetsChooser' -import ColorSetsList from './ChromeColorSetsList' -import CurrentColorSets from './ChromeCurrentColorSets' -import CurrentColorSetsContextMenu from './ChromeCurrentColorSetsContextMenu' - -export default class ChromeDevtool extends EventMachin { - constructor (opt) { - super(); - - this.opt = opt || {}; - this.$root = null; - this.format = 'rgb'; - this.currentA = 0; - this.currentH = 0; - this.currentS = 0; - this.currentV = 0; - this.colorSetsList = new ColorSetsList(this); - this.colorpickerCallback = this.opt.onChange || (function () {}); - - this.control = new ColorControl(this); - this.palette = new ColorPalette(this); - this.information = new ColorInformation(this); - this.colorSetsChooser = new ColorSetsChooser(this); - this.currentColorSets = new CurrentColorSets(this); - this.contextMenu = new CurrentColorSetsContextMenu(this, this.currentColorSets); - - this.initialize(); - } - - getOption (key) { - return this.opt[key]; - } - - initialize () { - this.$root = new Dom('div', 'codemirror-colorpicker'); - - this.$root.append(this.palette.$el); - this.$root.append(this.control.$el); - this.$root.append(this.information.$el); - this.$root.append(this.currentColorSets.$el); - this.$root.append(this.colorSetsChooser.$el); - this.$root.append(this.contextMenu.$el); - - if (this.opt.target) { - this.$root.appendTo(this.opt.target); - } - - - this.$checkColorPickerClass = this.checkColorPickerClass.bind(this); - - this.initializeEvent(); - - this.initColor(this.opt.color); - } - - showContextMenu (e, index) { - this.contextMenu.show(e, index); - } - - setColor(value) { - if(typeof(value) == "object") { - if(!value.r || !value.g || !value.b) - return; - - this.initColor(Color.format(value, "hex")); - } else if(typeof(value) == "string") { - this.initColor(value); - } - } - - getColor(type) { - this.caculateHSV(); - var rgb = this.convertRGB(); - - if (type) { - return Color.format(rgb, type); - } - - return rgb; - } - - definePositionForArrow (opt, elementScreenLeft, elementScreenTop) { - //this.$arrow.css({}) - } - - convertRGB() { - return Color.HSVtoRGB(this.currentH, this.currentS, this.currentV); - } - - convertHEX() { - return Color.format(this.convertRGB(), 'hex'); - } - - convertHSL() { - return Color.HSVtoHSL(this.currentH, this.currentS, this.currentV); - } - - getCurrentColor () { - return this.information.getFormattedColor(); - } - - getFormattedColor (format) { - format = format || 'hex'; - - if (format == 'rgb') { - var rgb = this.convertRGB(); - rgb.a = this.currentA; - return Color.format(rgb, 'rgb'); - } else if (format == 'hsl') { - var hsl = this.convertHSL(); - hsl.a = this.currentA; - return Color.format(hsl, 'hsl'); - } else { - var rgb = this.convertRGB(); - return Color.format(rgb, 'hex'); - } - } - - - - setInputColor(isNoInputColor) { - this.information.setInputColor(isNoInputColor); - this.control.setInputColor(isNoInputColor); - - this.callbackColorValue(); - } - - changeInputColorAfterNextFormat() { - this.control.setInputColor(); - - this.callbackColorValue(); - } - - callbackColorValue () { - if (typeof this.colorpickerCallback == 'function') { - - if (!isNaN(this.currentA)) { - this.colorpickerCallback(this.getCurrentColor()); - } - - } - } - - caculateHSV() { - - var obj = this.palette.caculateSV(); - var control = this.control.caculateH(); - - var s = obj.s; - var v = obj.v; - var h = control.h ; - - - if (obj.width == 0) { - h = 0; - s = 0; - v = 0; - } - - this.currentH = h; - this.currentS = s; - this.currentV = v; - } - - - setColorUI() { - this.control.setColorUI() - this.palette.setColorUI() - } - - setCurrentHSV (h, s, v, a) { - this.currentA = a; - this.currentH = h; - this.currentS = s; - this.currentV = v; - } - - - setCurrentH (h) { - this.currentH = h; - } - - setCurrentA ( a) { - this.currentA = a; - } - - setBackgroundColor (color) { - this.palette.setBackgroundColor(color); - } - - setCurrentFormat (format) { - this.format = format; - this.information.setCurrentFormat(format); - } - - getHSV (colorObj) { - if (colorObj.type == 'hsl') { - return Color.HSLtoHSV(colorObj.h, colorObj.s, colorObj.l); - } else { - return Color.RGBtoHSV(colorObj); - } - - } - - initColor(newColor, format) { - let c = newColor || "#FF0000", colorObj = Color.parse(c); - format = format || colorObj.type; - - this.setCurrentFormat(format); - - let hsv = this.getHSV(colorObj); - this.setCurrentHSV(hsv.h, hsv.s, hsv.v, colorObj.a); - this.setColorUI(); - this.setHueColor(); - this.setInputColor(); - } - - changeInformationColor(newColor) { - let c = newColor || "#FF0000", colorObj = Color.parse(c); - - let hsv = this.getHSV(colorObj); - this.setCurrentHSV(hsv.h, hsv.s, hsv.v, colorObj.a); - this.setColorUI(); - this.setHueColor(); - this.control.setInputColor(); - this.callbackColorValue(); - } - - setHueColor () { - this.control.setOnlyHueColor(); - } - - checkColorPickerClass(el) { - var hasColorView = new Dom(el).closest('codemirror-colorview'); - var hasColorPicker = new Dom(el).closest('codemirror-colorpicker'); - var hasCodeMirror = new Dom(el).closest('CodeMirror'); - var IsInHtml = el.nodeName == 'HTML'; - - return !!(hasColorPicker || hasColorView || hasCodeMirror); - } - - checkInHtml (el) { - var IsInHtml = el.nodeName == 'HTML'; - - return IsInHtml; - } - - // Event Bindings - 'mouseup document' (e) { - this.palette.EventDocumentMouseUp(e); - this.control.EventDocumentMouseUp(e); - } - - 'mousemove document' (e) { - this.palette.EventDocumentMouseMove(e); - this.control.EventDocumentMouseMove(e); - } - - initializeEvent () { - - this.initializeEventMachin(); - - this.palette.initializeEvent(); - this.control.initializeEvent(); - this.information.initializeEvent() - this.currentColorSets.initializeEvent() - this.colorSetsChooser.initializeEvent(); - this.contextMenu.initializeEvent(); - - } - - currentFormat () { - this.information.currentFormat(); - } - - toggleColorChooser () { - this.colorSetsChooser.toggle(); - } - - refreshColorSetsChooser() { - this.colorSetsChooser.refresh(); - } - - getColorSetsList () { - return this.colorSetsList.getColorSetsList(); - } - - setCurrentColorSets (nameOrIndex) { - this.colorSetsList.setCurrentColorSets(nameOrIndex); - this.currentColorSets.refresh(); - } - - setColorSets (list) { - this.colorSetsList.setUserList(list); - } - - destroy() { - super.destroy(); - - this.control.destroy(); - this.palette.destroy(); - this.information.destroy(); - this.colorSetsChooser.destroy(); - this.colorSetsList.destroy(); - this.currentColorSets.destroy(); - this.contextMenu.destroy(); - - // remove color picker callback - this.colorpickerCallback = undefined; - } -} \ No newline at end of file diff --git a/src/index.js b/src/index.js index 8332d2e..7c17936 100644 --- a/src/index.js +++ b/src/index.js @@ -7,8 +7,6 @@ import ColorNames from './util/ColorNames' import ColorView from './colorview/index' import ColorPicker from './colorpicker/index' -import ChromeDevtool from './colorpicker/type/ChromeDevtool/index' - if (CodeMirror) { CodeMirror.defineOption("colorpicker", false, function (cm, val, old) { @@ -35,6 +33,5 @@ export default { Color, ColorNames, HueColor, - ColorPicker, - ChromeDevtool + ColorPicker } \ No newline at end of file diff --git a/src/scss/colorpicker.scss b/src/scss/colorpicker.scss index a5b9afe..ad91b6e 100644 --- a/src/scss/colorpicker.scss +++ b/src/scss/colorpicker.scss @@ -37,12 +37,21 @@ } } + @import './component/button'; @import './component/pallet'; @import './component/control'; @import './component/information'; @import './component/colorsets'; @import './component/colorchooser'; + + &.chromedevtool { + + } + + /* theme */ + @import './themes/sketch'; + } @import './component/colorsets-contextmenu'; diff --git a/src/scss/index.scss b/src/scss/index.scss index 00a75dc..a284f4f 100644 --- a/src/scss/index.scss +++ b/src/scss/index.scss @@ -2,4 +2,4 @@ @import './colorview'; @import './colorpicker'; - \ No newline at end of file + \ No newline at end of file diff --git a/src/scss/themes/sketch.scss b/src/scss/themes/sketch.scss new file mode 100644 index 0000000..3eb7240 --- /dev/null +++ b/src/scss/themes/sketch.scss @@ -0,0 +1,127 @@ +&.sketch { + border-radius: 5px; + + > .color { + margin: 10px 10px 2px 10px; + box-sizing: border-box; + height: 150px; + } + + > .control { + padding: 0px; + + > .color, > .empty { + position: absolute; + right: 10px; + left: auto; + top: 1px; + width: 26px; + height: 26px; + border-radius: 2px; + box-sizing: border-box; + } + + > .color { + box-shadow: inset 0px 0px 1px 0px rgba(0, 0, 0, 0.5); + } + + > .hue { + position: relative; + padding: 2px 2px 2px 10px; + margin: 0px 38px 0px 0px; + + > .hue-container { + border-radius: 0px; + } + } + + > .opacity { + position: relative; + padding: 2px 2px 2px 10px; + margin: 0px 38px 0px 0px; + + > .opacity-container { + border-radius: 0px; + } + } + + .drag-bar, .drag-bar2 { + border-radius: 0px; + top: 0px !important; + left: -2px; + margin-top: 1px !important; + width: 2px; + height: auto; + border-radius: 1px; + bottom: 1px !important; + } + } + + > .information { + .information-change { + display: none; + } + + &.rgb { + .information-item.rgb { + display: inherit; + } + } + + &.hex { + .information-item.hex { + display: inherit; + } + } + + .information-item { + display: inline-flex !important; + margin-right: 0px; + + > .input-field { + > .title { + color: black; + font-size: 11px; + } + } + + > .input-field:last-child:not(:first-child) { + padding-right: 0px; + } + } + + .information-item.hsl { + display: none !important; + } + + .information-item.hex { + width: 80px; + padding-right: 0px; + padding-left: 5px; + } + + .information-item.rgb { + width: 140px; + padding-left: 0px; + } + } + + > .colorsets { + > .menu { + display: none; + } + + > .color-list { + margin-right: 0px; + padding-right: 12px; + + .color-item { + width: 16px; + height: 16px; + border-radius: 3px; + margin-right: 9px; + margin-bottom: 10px; + } + } + } +} diff --git a/src/util/Dom.js b/src/util/Dom.js index 6c98a67..5971829 100644 --- a/src/util/Dom.js +++ b/src/util/Dom.js @@ -154,6 +154,14 @@ export default class Dom { return this; } + + cssFloat (key) { + return parseFloat(this.css(key)); + } + + cssInt (key) { + return parseInt(this.css(key)); + } offset () { var rect = this.el.getBoundingClientRect();