From bec3345071ba74266d79c6c17dbf891959492c07 Mon Sep 17 00:00:00 2001 From: easylogic Date: Thu, 15 Mar 2018 13:53:03 +0900 Subject: [PATCH] Support sketch style Support color palette for image --- ChangeLogs.md | 3 +- README.md | 15 + addon/codemirror-colorpicker.css | 82 +- addon/codemirror-colorpicker.js | 1630 +---------------- dist/codemirror-colorpicker.css | 82 +- dist/codemirror-colorpicker.js | 1630 +---------------- dist/codemirror-colorpicker.min.js | 2 +- index.html | 30 +- package.json | 2 +- resources/image/sketch-type.png | Bin 0 -> 37402 bytes src/colorpicker/ColorInformation.js | 4 + src/colorpicker/ColorPalette.js | 8 +- src/colorpicker/index.js | 212 ++- .../type/ChromeDevtool/ChromeColorControl.js | 257 --- .../ChromeDevtool/ChromeColorInformation.js | 281 --- .../type/ChromeDevtool/ChromeColorPalette.js | 100 - .../ChromeDevtool/ChromeColorSetsChooser.js | 109 -- .../type/ChromeDevtool/ChromeColorSetsList.js | 129 -- .../ChromeDevtool/ChromeCurrentColorSets.js | 123 -- .../ChromeCurrentColorSetsContextMenu.js | 77 - src/colorpicker/type/ChromeDevtool/index.js | 319 ---- src/index.js | 5 +- src/scss/colorpicker.scss | 9 + src/scss/index.scss | 2 +- src/scss/themes/sketch.scss | 127 ++ src/util/Dom.js | 8 + 26 files changed, 624 insertions(+), 4622 deletions(-) create mode 100644 resources/image/sketch-type.png delete mode 100644 src/colorpicker/type/ChromeDevtool/ChromeColorControl.js delete mode 100644 src/colorpicker/type/ChromeDevtool/ChromeColorInformation.js delete mode 100644 src/colorpicker/type/ChromeDevtool/ChromeColorPalette.js delete mode 100644 src/colorpicker/type/ChromeDevtool/ChromeColorSetsChooser.js delete mode 100644 src/colorpicker/type/ChromeDevtool/ChromeColorSetsList.js delete mode 100644 src/colorpicker/type/ChromeDevtool/ChromeCurrentColorSets.js delete mode 100644 src/colorpicker/type/ChromeDevtool/ChromeCurrentColorSetsContextMenu.js delete mode 100644 src/colorpicker/type/ChromeDevtool/index.js create mode 100644 src/scss/themes/sketch.scss 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 0000000000000000000000000000000000000000..974ac6200c4a698ad5975f58c43de51ed1b00a0b GIT binary patch literal 37402 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 aNC|Z3NBj>41PEdP literal 0 HcmV?d00001 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();