From c50b251ae46ce16a5d764894ab8c748751096987 Mon Sep 17 00:00:00 2001 From: tophf Date: Tue, 14 Nov 2017 16:06:29 +0300 Subject: [PATCH] add original colorpicker plugin --- vendor-overwrites/colorpicker/LICENSE | 21 + vendor-overwrites/colorpicker/colorpicker.css | 310 ++++ vendor-overwrites/colorpicker/colorpicker.js | 1369 +++++++++++++++++ vendor-overwrites/colorpicker/colorview.js | 434 ++++++ 4 files changed, 2134 insertions(+) create mode 100644 vendor-overwrites/colorpicker/LICENSE create mode 100644 vendor-overwrites/colorpicker/colorpicker.css create mode 100644 vendor-overwrites/colorpicker/colorpicker.js create mode 100644 vendor-overwrites/colorpicker/colorview.js diff --git a/vendor-overwrites/colorpicker/LICENSE b/vendor-overwrites/colorpicker/LICENSE new file mode 100644 index 00000000..1ea38875 --- /dev/null +++ b/vendor-overwrites/colorpicker/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2017 jinho park (cyberuls@gmail.com, easylogic) + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/vendor-overwrites/colorpicker/colorpicker.css b/vendor-overwrites/colorpicker/colorpicker.css new file mode 100644 index 00000000..f80b45c2 --- /dev/null +++ b/vendor-overwrites/colorpicker/colorpicker.css @@ -0,0 +1,310 @@ + +/* codemirror colorview */ + +.codemirror-colorview { + border : 1px solid #8e8e8e; + position: relative; + display : inline-block; + box-sizing : border-box; + margin : 0px 2px; + width : 10px; + height : 10px; + cursor: pointer; + background-image : url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQYV2NctWrVfwYkEBYWxojMZ6SDAmT7QGx0K1EcRBsFAADeG/3M/HteAAAAAElFTkSuQmCC"); + background-repeat: repeat; +} + +.codemirror-colorview .codemirror-colorview-background { + content: ""; + position: absolute; + left:0px; + right:0px; + bottom:0px; + top:0px; +} + +.codemirror-colorview:hover { + border-color: #494949; +} + + +/* codemirror-colorpicker */ + +.codemirror-colorpicker { + position: relative; + width: 226px; + z-index: 1000; +} +.codemirror-colorpicker > .color { + position: relative; + height: 120px; + overflow: hidden; + cursor: pointer; +} +.codemirror-colorpicker > .color > .saturation { + position: relative; + width: 100%; + height: 100%; +} +.codemirror-colorpicker > .color > .saturation > .value { + position: relative; + width: 100%; + height: 100%; +} +.codemirror-colorpicker > .color > .saturation > .value > .drag-pointer { + position: absolute; + width: 10px; + height: 10px; + -webkit-border-radius: 50%; + -moz-border-radius: 50%; + border-radius: 50%; + left: -5px; + top: -5px; +} +.codemirror-colorpicker > .control { + position: relative; + padding: 18px 0px 14px 0px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + -o-user-select: none; + user-select: none; +} +.codemirror-colorpicker > .control > .color, +.codemirror-colorpicker > .control > .empty { + position: absolute; + left: 11px; + top: 24px; + width: 30px; + height: 30px; + -webkit-border-radius: 50%; + -moz-border-radius: 50%; + border-radius: 50%; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +.codemirror-colorpicker > .control > .hue { + position: relative; + padding: 6px 12px; + margin: 0px 0px 0px 45px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + cursor: pointer; +} +.codemirror-colorpicker > .control > .hue > .hue-container { + position: relative; + width: 100%; + height: 10px; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} +.codemirror-colorpicker > .control > .opacity { + position: relative; + padding: 3px 12px; + margin: 0px 0px 0px 45px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + cursor: pointer; +} +.codemirror-colorpicker > .control > .opacity > .opacity-container { + position: relative; + width: 100%; + height: 10px; + z-index: 2; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} + +.codemirror-colorpicker > .control .drag-bar, +.codemirror-colorpicker > .control .drag-bar2 { + position: absolute; + cursor: pointer; + top: 50% !important; + margin-top: -7px !important; + left: -3px; + width: 12px; + height: 12px; + -webkit-border-radius: 50px; + -moz-border-radius: 50px; + border-radius: 50px; +} +.codemirror-colorpicker > .information { + position: relative; + -webkit-box-sizing: padding-box; + -moz-box-sizing: padding-box; + box-sizing: padding-box; +} + +.codemirror-colorpicker > .information.hex > .information-item.hex { + display: flex; +} + +.codemirror-colorpicker > .information.rgb > .information-item.rgb { + display: flex; +} + +.codemirror-colorpicker > .information.hsl > .information-item.hsl { + display: flex; +} + +.codemirror-colorpicker > .information > .information-item { + display:none; + position: relative; + padding: 0px 5px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + margin-right:40px; +} + +.codemirror-colorpicker > .information > .information-change { + position:absolute; + display:block; + width:40px; + top:0px; + right:0px; + bottom:0px; +} + +.codemirror-colorpicker > .information > .information-change > .format-change-button { + width:100%; + height:100%; + background:transparent; + border:0px; + cursor:pointer; + outline:none; +} + +.codemirror-colorpicker > .information > .information-item > .input-field { + display:block; + flex:1; + padding: 5px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +.codemirror-colorpicker > .information > .information-item > .input-field > input { + text-align: center; + width:100%; + padding:3px 5px; + font-size:11px; + color: #333; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + -webkit-user-select: text; + -moz-user-select: text; + -ms-user-select: text; + -o-user-select: text; + user-select: text; + border: 1px solid #cbcbcb; +} + +.codemirror-colorpicker > .information > .information-item > .input-field > .title { + text-align:center; + font-size:12px; + color:#a9a9a9; +} + +.codemirror-colorpicker > .information > input { + position: absolute; + font-size: 10px; + height: 20px; + bottom: 20px; + padding: 0 0 0 2px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + -webkit-user-select: text; + -moz-user-select: text; + -ms-user-select: text; + -o-user-select: text; + user-select: text; +} + + +.codemirror-colorpicker { + border: 1px solid #ececec; + background-color: #fff; + -webkit-box-shadow: 0 0px 10px 0px rgba(0, 0, 0, 0.12); + -moz-box-shadow: 0 0px 10px 0px rgba(0, 0, 0, 0.12); + box-shadow: 0 0px 10px 0px rgba(0, 0, 0, 0.12); +} +.codemirror-colorpicker > .color > .saturation { + background-color: rgba(204, 154, 129, 0); + background-image: -moz-linear-gradient(left, #FFF, rgba(204, 154, 129, 0)); + background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#FFF), to(rgba(204, 154, 129, 0))); + background-image: -webkit-linear-gradient(left, #FFF, rgba(204, 154, 129, 0)); + background-image: -o-linear-gradient(left, #FFF, rgba(204, 154, 129, 0)); + background-image: linear-gradient(to right, #FFF, rgba(204, 154, 129, 0)); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#00cc9a81', GradientType=1); +} +.codemirror-colorpicker > .color > .saturation > .value { + background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#000000), to(rgba(204, 154, 129, 0))); + background-image: -webkit-linear-gradient(bottom, #000000, rgba(204, 154, 129, 0)); + background-image: -moz-linear-gradient(bottom, #000000, rgba(204, 154, 129, 0)); + background-image: -o-linear-gradient(bottom, #000000, rgba(204, 154, 129, 0)); + background-image: -ms-linear-gradient(bottom, #000000, rgba(204, 154, 129, 0)); + background-image: linear-gradient(to top, #000000, rgba(204, 154, 129, 0)); +} +.codemirror-colorpicker > .color > .saturation > .value > .drag-pointer { + border: 1px solid #fff; + -webkit-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.05); + -moz-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.05); + box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.05); +} +.codemirror-colorpicker > .control > .hue > .hue-container { + background: -moz-linear-gradient(left, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); + background: -ms-linear-gradient(left, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); + background: -o-linear-gradient(left, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); + background: -webkit-gradient(linear, left top, right top, from(#ff0000), color-stop(0.17, #ffff00), color-stop(0.33, #00ff00), color-stop(0.5, #00ffff), color-stop(0.67, #0000ff), color-stop(0.83, #ff00ff), to(#ff0000)); + background: -webkit-linear-gradient(left, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); + background: linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); +} +.codemirror-colorpicker > .control > .opacity > .opacity-container > .color-bar { + position:absolute; + display:block; + content:""; + left:0px; + right:0px; + bottom:0px; + top:0px; + background: -moz-linear-gradient(left, rgba(232, 232, 232, 0), rgba(232, 232, 232, 1)); + background: -ms-linear-gradient(left, rgba(232, 232, 232, 0), rgba(232, 232, 232, 1)); + background: -o-linear-gradient(left, rgba(232, 232, 232, 0), rgba(232, 232, 232, 1)); + background: -webkit-gradient(linear, left top, right top, from(rgba(232, 232, 232, 0)), to(rgba(232, 232, 232, 1))); + background: -webkit-linear-gradient(left, rgba(232, 232, 232, 0), rgba(232, 232, 232, 1)); + background: linear-gradient(to right, rgba(232, 232, 232, 0) , rgba(232, 232, 232, 1) ); +} +.codemirror-colorpicker > .control > .opacity > .opacity-container { + background-image : url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQYV2NctWrVfwYkEBYWxojMZ6SDAmT7QGx0K1EcRBsFAADeG/3M/HteAAAAAElFTkSuQmCC"); + background-repeat: repeat; +} + +.codemirror-colorpicker > .control > .empty { + background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQYV2NctWrVfwYkEBYWxojMZ6SDAmT7QGx0K1EcRBsFAADeG/3M/HteAAAAAElFTkSuQmCC") repeat; +} +.codemirror-colorpicker > .control .drag-bar, +.codemirror-colorpicker > .control .drag-bar2 { + border: 1px solid rgba(0, 0, 0, 0.5); + -webkit-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1); + -moz-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1); + background-color: #FFFFFF; +} +.codemirror-colorpicker > .information { + /*border-top: 1px solid #e8e8e8;*/ +} +.codemirror-colorpicker > .information > .title { + color: #a3a3a3; +} +.codemirror-colorpicker > .information > .input { + color: #333; +} \ No newline at end of file diff --git a/vendor-overwrites/colorpicker/colorpicker.js b/vendor-overwrites/colorpicker/colorpicker.js new file mode 100644 index 00000000..25fc8741 --- /dev/null +++ b/vendor-overwrites/colorpicker/colorpicker.js @@ -0,0 +1,1369 @@ +(function(mod) { + if (typeof exports == "object" && typeof module == "object") // CommonJS + mod(require("codemirror")); + else if (typeof define == "function" && define.amd) // AMD + define(["codemirror" ], mod); + else // Plain browser env + mod(CodeMirror); +})(function(CodeMirror) { + + CodeMirror.defineExtension("colorpicker", function () { + + var cm = this; + + var color = { + + trim : function (str) { + return str.replace(/^\s+|\s+$/g, ''); + }, + + /** + * @method format + * + * convert color to format string + * + * // hex + * color.format({ r : 255, g : 255, b : 255 }, 'hex') // #FFFFFF + * + * // rgb + * color.format({ r : 255, g : 255, b : 255 }, 'rgb') // rgba(255, 255, 255, 0.5); + * + * // rgba + * color.format({ r : 255, g : 255, b : 255, a : 0.5 }, 'rgb') // rgba(255, 255, 255, 0.5); + * + * @param {Object} obj obj has r, g, b and a attributes + * @param {"hex"/"rgb"} type format string type + * @returns {*} + */ + format : function(obj, type) { + if (type == 'hex') { + var r = obj.r.toString(16); + if (obj.r < 16) r = "0" + r; + + var g = obj.g.toString(16); + if (obj.g < 16) g = "0" + g; + + var b = obj.b.toString(16); + if (obj.b < 16) b = "0" + b; + + return "#" + [r, g, b].join(""); + } else if (type == 'rgb') { + if (typeof obj.a == 'undefined') { + return "rgb(" + [obj.r, obj.g, obj.b].join(",") + ")"; + } else { + return "rgba(" + [obj.r, obj.g, obj.b, obj.a].join(",") + ")"; + } + } else if (type == 'hsl') { + if (typeof obj.a == 'undefined') { + return "hsl(" + [obj.h, obj.s + '%', obj.l + '%'].join(",") + ")"; + } else { + return "hsla(" + [obj.h, obj.s + '%', obj.l + '%', obj.a].join(",") + ")"; + } + } + + return obj; + }, + + /** + * @method rgb + * + * parse string to rgb color + * + * color.rgb("#FF0000") === { r : 255, g : 0, b : 0 } + * + * color.rgb("rgb(255, 0, 0)") == { r : 255, g : 0, b : } + * + * @param {String} str color string + * @returns {Object} rgb object + */ + parse : function (str) { + if (typeof str == 'string') { + if (str.indexOf("rgb(") > -1) { + var arr = str.replace("rgb(", "").replace(")","").split(","); + + for(var i = 0, len = arr.length; i < len; i++) { + arr[i] = parseInt(color.trim(arr[i]), 10); + } + + return { type : 'rgb', r : arr[0], g : arr[1], b : arr[2], a : 1 }; + } else if (str.indexOf("rgba(") > -1) { + var arr = str.replace("rgba(", "").replace(")", "").split(","); + + for (var i = 0, len = arr.length; i < len; i++) { + + if (len - 1 == i) { + arr[i] = parseFloat(color.trim(arr[i])); + } else { + arr[i] = parseInt(color.trim(arr[i]), 10); + } + } + + return {type: 'rgb', r: arr[0], g: arr[1], b: arr[2], a: arr[3]}; + } else if (str.indexOf("hsl(") > -1) { + var arr = str.replace("hsl(", "").replace(")","").split(","); + + for(var i = 0, len = arr.length; i < len; i++) { + arr[i] = parseInt(color.trim(arr[i]), 10); + } + + var obj = { type : 'hsl', h : arr[0], s : arr[1], l : arr[2], a : 1 }; + + var temp = color.HSLtoRGB(obj.h, obj.s, obj.l); + + obj.r = temp.r; + obj.g = temp.g; + obj.b = temp.b; + + return obj; + } else if (str.indexOf("hsla(") > -1) { + var arr = str.replace("hsla(", "").replace(")", "").split(","); + + for (var i = 0, len = arr.length; i < len; i++) { + + if (len - 1 == i) { + arr[i] = parseFloat(color.trim(arr[i])); + } else { + arr[i] = parseInt(color.trim(arr[i]), 10); + } + } + + var obj = {type: 'hsl', h: arr[0], s: arr[1], l: arr[2], a: arr[3]}; + + var temp = color.HSLtoRGB(obj.h, obj.s, obj.l); + + obj.r = temp.r; + obj.g = temp.g; + obj.b = temp.b; + + return obj; + } else if (str.indexOf("#") == 0) { + + str = str.replace("#", ""); + + var arr = []; + if (str.length == 3) { + for(var i = 0, len = str.length; i < len; i++) { + var char = str.substr(i, 1); + arr.push(parseInt(char+char, 16)); + } + } else { + for(var i = 0, len = str.length; i < len; i+=2) { + arr.push(parseInt(str.substr(i, 2), 16)); + } + } + + return { type : 'hex', r : arr[0], g : arr[1], b : arr[2], a : 1 }; + } + } + + return str; + + }, + + /** + * @method HSVtoRGB + * + * convert hsv to rgb + * + * color.HSVtoRGB(0,0,1) === #FFFFF === { r : 255, g : 0, b : 0 } + * + * @param {Number} H hue color number (min : 0, max : 360) + * @param {Number} S Saturation number (min : 0, max : 1) + * @param {Number} V Value number (min : 0, max : 1 ) + * @returns {Object} + */ + HSVtoRGB : function (H, S, V) { + + if (H == 360) { + H = 0; + } + + var C = S * V; + var X = C * (1 - Math.abs((H/60) % 2 -1) ); + var m = V - C; + + var temp = []; + + if (0 <= H && H < 60) { temp = [C, X, 0]; } + else if (60 <= H && H < 120) { temp = [X, C, 0]; } + else if (120 <= H && H < 180) { temp = [0, C, X]; } + else if (180 <= H && H < 240) { temp = [0, X, C]; } + else if (240 <= H && H < 300) { temp = [X, 0, C]; } + else if (300 <= H && H < 360) { temp = [C, 0, X]; } + + return { + r : Math.ceil((temp[0] + m) * 255), + g : Math.ceil((temp[1] + m) * 255), + b : Math.ceil((temp[2] + m) * 255) + }; + }, + + /** + * @method RGBtoHSV + * + * convert rgb to hsv + * + * color.RGBtoHSV(0, 0, 255) === { h : 240, s : 1, v : 1 } === '#FFFF00' + * + * @param {Number} R red color value + * @param {Number} G green color value + * @param {Number} B blue color value + * @return {Object} hsv color code + */ + RGBtoHSV : function (R, G, B) { + + var R1 = R / 255; + var G1 = G / 255; + var B1 = B / 255; + + var MaxC = Math.max(R1, G1, B1); + var MinC = Math.min(R1, G1, B1); + + var DeltaC = MaxC - MinC; + + var H = 0; + + if (DeltaC == 0) { H = 0; } + else if (MaxC == R1) { + H = 60 * (( (G1 - B1) / DeltaC) % 6); + } else if (MaxC == G1) { + H = 60 * (( (B1 - R1) / DeltaC) + 2); + } else if (MaxC == B1) { + H = 60 * (( (R1 - G1) / DeltaC) + 4); + } + + if (H < 0) { + H = 360 + H; + } + + var S = 0; + + if (MaxC == 0) S = 0; + else S = DeltaC / MaxC; + + var V = MaxC; + + return { h : H, s : S, v : V }; + }, + + RGBtoHSL : function (r, g, b) { + r /= 255, g /= 255, b /= 255; + var max = Math.max(r, g, b), min = Math.min(r, g, b); + var h, s, l = (max + min) / 2; + + if(max == min){ + h = s = 0; // achromatic + }else{ + var d = max - min; + s = l > 0.5 ? d / (2 - max - min) : d / (max + min); + switch(max){ + case r: h = (g - b) / d + (g < b ? 6 : 0); break; + case g: h = (b - r) / d + 2; break; + case b: h = (r - g) / d + 4; break; + } + h /= 6; + } + + return { h : Math.round(h * 360) , s : Math.round(s * 100), l : Math.round(l * 100)}; + }, + + HUEtoRGB : function (p, q, t) { + if(t < 0) t += 1; + if(t > 1) t -= 1; + if(t < 1/6) return p + (q - p) * 6 * t; + if(t < 1/2) return q; + if(t < 2/3) return p + (q - p) * (2/3 - t) * 6; + return p; + }, + + HSLtoRGB : function (h, s, l) { + var r, g, b; + + h /= 360; + s /= 100; + l /= 100; + + if(s == 0){ + r = g = b = l; // achromatic + }else{ + var q = l < 0.5 ? l * (1 + s) : l + s - l * s; + var p = 2 * l - q; + r = this.HUEtoRGB(p, q, h + 1/3); + g = this.HUEtoRGB(p, q, h); + b = this.HUEtoRGB(p, q, h - 1/3); + } + + return { r : r * 255, g : g * 255, b : b * 255 }; + } + }; + + var hue_color = [ + { rgb : '#ff0000', start : .0 }, + { rgb : '#ffff00', start : .17 }, + { rgb : '#00ff00', start : .33 }, + { rgb : '#00ffff', start : .50 }, + { rgb : '#0000ff', start : .67 }, + { rgb : '#ff00ff', start : .83 }, + { rgb : '#ff0000', start : 1 } + ]; + + var $body, $root, $hue, $color, $value, $saturation, $drag_pointer, $drag_bar, + $control, $controlPattern, $controlColor, $hueContainer, $opacity, $opacityContainer, $opacityColorBar, $formatChangeButton, + $opacity_drag_bar, $information, $informationChange; + + var currentA, currentH, currentS, currentV; + var $hexCode; + var $rgb_r, $rgb_g, $rgb_b, $rgb_a; + var $hsl_h, $hsl_s, $hsl_l, $hsl_a; + var cssPrefix = getCssValuePrefix(); + + var colorpickerCallback = function () {}; + var counter = 0; + var cached = {}; + var isColorPickerShow = false; + var isShortCut = false; + var hideDelay = 2000; + + function dom(tag, className, attr) { + + if (typeof tag != 'string') { + this.el = tag; + } else { + + var el = document.createElement(tag); + + this.uniqId = counter++; + + el.className = className; + + attr = attr || {}; + + for(var k in attr) { + el.setAttribute(k, attr[k]); + } + + this.el = el; + } + } + + dom.prototype.closest = function (cls) { + + var temp = this; + var checkCls = false; + + while(!(checkCls = temp.hasClass(cls))) { + if (temp.el.parentNode) { + temp = new dom(temp.el.parentNode); + } else { + return null; + } + } + + if (checkCls) { + return temp; + } + + return null; + } + + dom.prototype.removeClass = function (cls) { + this.el.className = color.trim((" " + this.el.className + " ").replace(' ' + cls + ' ', ' ')); + } + + dom.prototype.hasClass = function (cls) { + if (!this.el.className) + { + return false; + } else { + var newClass = ' ' + this.el.className + ' '; + return newClass.indexOf(' ' + cls + ' ') > -1; + } + } + + dom.prototype.addClass = function (cls) { + if (!this.hasClass(cls)) { + this.el.className = this.el.className + " " + cls; + } + + } + + dom.prototype.html = function (html) { + this.el.innerHTML = html; + + return this; + } + + dom.prototype.empty = function () { + return this.html(''); + } + + dom.prototype.append = function (el) { + + if (typeof el == 'string') { + this.el.appendChild(document.createTextNode(el)); + } else { + this.el.appendChild(el.el || el); + } + + return this; + } + + dom.prototype.appendTo = function (target) { + var t = target.el ? target.el : target; + + t.appendChild(this.el); + + return this; + } + + dom.prototype.remove = function () { + if (this.el.parentNode) { + this.el.parentNode.removeChild(this.el); + } + + return this; + } + + dom.prototype.text = function () { + return this.el.textContent; + } + + dom.prototype.css = function (key, value) { + if (arguments.length == 2) { + this.el.style[key] = value; + } else if (arguments.length == 1) { + + if (typeof key == 'string') { + return getComputedStyle(this.el)[key]; + } else { + var keys = key || {}; + for(var k in keys) { + this.el.style[k] = keys[k]; + } + } + + } + + return this; + } + + dom.prototype.offset = function () { + var rect = this.el.getBoundingClientRect(); + + return { + top: rect.top + document.body.scrollTop, + left: rect.left + document.body.scrollLeft + }; + } + + dom.prototype.position = function () { + return { + top: parseFloat(this.el.style.top), + left: parseFloat(this.el.style.left) + }; + } + + dom.prototype.width = function () { + return this.el.offsetWidth; + } + + dom.prototype.height = function () { + return this.el.offsetHeight; + } + + dom.prototype.dataKey = function (key) { + return this.uniqId + '.' + key; + } + + dom.prototype.data = function (key, value) { + if (arguments.length == 2) { + cached[this.dataKey(key)] = value; + } else if (arguments.length == 1) { + return cached[this.dataKey(key)]; + } else { + var keys = Object.keys(cached); + + var uniqId = this.uniqId + "."; + return keys.filter(function (key) { + if (key.indexOf(uniqId) == 0) { + return true; + } + + return false; + }).map(function (value) { + return cached[value]; + }) + } + + return this; + } + + dom.prototype.val = function (value) { + if (arguments.length == 0) { + return this.el.value; + } else if (arguments.length == 1) { + this.el.value = value; + } + + return this; + } + + dom.prototype.int = function () { + return parseInt(this.val(), 10); + } + + dom.prototype.show = function () { + return this.css('display', 'block'); + } + + dom.prototype.hide = function () { + return this.css('display', 'none'); + } + + function setRGBInput(r, g, b) { + $rgb_r.val(r); + $rgb_g.val(g); + $rgb_b.val(b); + $rgb_a.val(currentA); + } + + function setHSLInput(h, s, l) { + $hsl_h.val(h); + $hsl_s.val(s + '%'); + $hsl_l.val(l + '%'); + $hsl_a.val(currentA); + } + + function getHexFormat() { + return color.format({ + r : $rgb_r.int(), + g : $rgb_g.int(), + b : $rgb_b.int() + }, 'hex'); + } + + function convertRGB() { + return color.HSVtoRGB(currentH, currentS, currentV); + } + + function convertHEX() { + return color.format(convertRGB(), 'hex'); + } + + function convertHSL() { + var rgb = color.HSVtoRGB(currentH, currentS, currentV); + return color.RGBtoHSL(rgb.r, rgb.g, rgb.b); + } + + function getFormattedColor (format) { + format = format || 'hex'; + + if (format == 'rgb') { + var rgb = convertRGB(); + rgb.a = currentA == 1 ? undefined : currentA; + return color.format(rgb, 'rgb'); + } else if (format == 'hsl') { + var hsl = convertHSL(); + hsl.a = currentA == 1 ? undefined : currentA; + return color.format(hsl, 'hsl'); + } else { + var rgb = convertRGB(); + return color.format(rgb, 'hex'); + } + } + + function setControlColor (color) { + $controlColor.css('background-color', color); + } + + function setInputColor() { + + var format = $information.data('format') || 'hex'; + + var rgb = null; + if (format == 'hex') { + $hexCode.val(convertHEX()); + } else if (format == 'rgb') { + var rgb = convertRGB(); + setRGBInput(rgb.r, rgb.g, rgb.b); + } else if (format == 'hsl') { + var hsl = convertHSL(); + setHSLInput(hsl.h, hsl.s, hsl.l); + } + + // set background + setControlColor(getFormattedColor('rgb')); + + var rgb = convertRGB(); + var colorString = color.format(rgb, 'rgb'); + setOpacityColorBar(colorString); + + if (typeof colorpickerCallback == 'function') { + + if (!isNaN(currentA)) { + colorpickerCallback(getFormattedColor(format)); + } + + } + } + + function setMainColor(e) { + e.preventDefault(); + var pos = $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; + + $drag_pointer.css({ + left: (x - 5) + 'px', + top: (y - 5) + 'px' + }); + + $drag_pointer.data('pos', { x: x, y : y}); + + caculateHSV() + setInputColor(); + } + + function scale (startColor, endColor, t) { + var obj = { + r : parseInt(startColor.r + (endColor.r - startColor.r) * t, 10) , + g : parseInt(startColor.g + (endColor.g - startColor.g) * t, 10), + b : parseInt(startColor.b + (endColor.b - startColor.b) * t, 10) + }; + + return color.format(obj, 'hex'); + + } + + function checkHueColor(p) { + var startColor, endColor; + + for(var i = 0; i < hue_color.length;i++) { + if (hue_color[i].start >= p) { + startColor = hue_color[i-1]; + endColor = hue_color[i]; + break; + } + } + + if (startColor && endColor) { + return scale(startColor, endColor, (p - startColor.start)/(endColor.start - startColor.start)); + } + + return hue_color[0].rgb; + } + + function setBackgroundColor (color) { + $color.css("background-color", color); + } + + function setCurrentH (h) { + currentH = h; + } + + function setHueColor(e) { + var min = $hueContainer.offset().left; + var max = min + $hueContainer.width(); + var current = e ? pos(e).clientX : min + (max - min) * (currentH / 360); + + var dist; + if (current < min) { + dist = 0; + } else if (current > max) { + dist = 100; + } else { + dist = (current - min) / (max - min) * 100; + } + + var x = ($hueContainer.width() * (dist/100)); + + $drag_bar.css({ + left: (x -Math.ceil($drag_bar.width()/2)) + 'px' + }); + + $drag_bar.data('pos', { x : x}); + + var hueColor = checkHueColor(dist/100); + + setBackgroundColor(hueColor); + setCurrentH((dist/100) * 360); + setInputColor(); + } + + function getCssValuePrefix() + { + var rtrnVal = '';//default to standard syntax + var prefixes = ['', '-o-', '-ms-', '-moz-', '-webkit-']; + + // Create a temporary DOM object for testing + var dom = document.createElement('div'); + + for (var i = 0; i < prefixes.length; i++) + { + // Attempt to set the style + dom.style.background = prefixes[i] + 'linear-gradient(#000000, #ffffff)'; + + // Detect if the style was successfully set + if (dom.style.background) + { + rtrnVal = prefixes[i]; + } + } + + dom = null; + delete dom; + + return rtrnVal; + } + + 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'); + + var prefix = cssPrefix; + $opacityColorBar.css('background', 'linear-gradient(to right, ' + start + ', ' + end + ')'); + } + + function setOpacity(e) { + var min = $opacityContainer.offset().left; + var max = min + $opacityContainer.width(); + var current = 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 = ($opacityContainer.width() * (dist/100)); + + $opacity_drag_bar.css({ + left: (x -Math.ceil($opacity_drag_bar.width()/2)) + 'px' + }); + + $opacity_drag_bar.data('pos', { x : x }); + + caculateOpacity(); + currentFormat(); + setInputColor(); + } + + function caculateOpacity() { + var opacityPos = $opacity_drag_bar.data('pos') || { x : 0 }; + var a = Math.round((opacityPos.x / $opacityContainer.width()) * 100) / 100; + + currentA = isNaN(a) ? 1 : a; + } + + function caculateHSV() { + var pos = $drag_pointer.data('pos') || { x : 0, y : 0 }; + var huePos = $drag_bar.data('pos') || { x : 0 }; + + var width = $color.width(); + var height = $color.height(); + + var h = (huePos.x / $hueContainer.width()) * 360; + var s = (pos.x / width); + var v = ((height - pos.y) / height); + + if (width == 0) { + h = 0; + s = 0; + v = 0; + } + + currentH = h; + currentS = s; + currentV = v; + } + + function pos(e) { + if (e.touches && e.touches[0]) { + return e.touches[0]; + } + + return e; + } + + function checkNumberKey(e) { + var code = e.which, + isExcept = false; + + if(code == 37 || code == 39 || code == 8 || code == 46 || code == 9) + isExcept = true; + + if(!isExcept && (code < 48 || code > 57)) + return false; + + return true; + } + + function setRGBtoHexColor(e) { + var r = $rgb_r.val(), + g = $rgb_g.val(), + b = $rgb_b.val(); + + if(r == "" || g == "" || b == "") return; + + if(parseInt(r) > 255) $rgb_r.val(255); + else $rgb_r.val(parseInt(r)); + + if(parseInt(g) > 255) $rgb_g.val(255); + else $rgb_g.val(parseInt(g)); + + if(parseInt(b) > 255) $rgb_b.val(255); + else $rgb_b.val(parseInt(b)); + + initColor(getHexFormat()); + } + + function setColorUI() { + var x = $color.width() * currentS, y = $color.height() * ( 1 - currentV ); + + $drag_pointer.css({ + left : (x - 5) + "px", + top : (y - 5) + "px" + }); + + $drag_pointer.data('pos', { x : x, y : y }); + + var hueX = $hueContainer.width() * (currentH / 360); + + $drag_bar.css({ + left : (hueX - 7.5) + 'px' + }); + + $drag_bar.data('pos', { x : hueX }); + + var opacityX = $opacityContainer.width() * (currentA || 0); + + $opacity_drag_bar.css({ + left : (opacityX - 7.5) + 'px' + }); + + $opacity_drag_bar.data('pos', { x : opacityX }); + } + + function setCurrentHSV (h, s, v, a) { + currentA = a; + currentH = h; + currentS = s; + currentV = v; + } + + function setCurrentFormat (format) { + $information.data('format', format); + initFormat(); + } + + + + function initColor(newColor) { + var c = newColor || "#FF0000", colorObj = color.parse(c); + + setCurrentFormat(colorObj.type); + setBackgroundColor(c); + + var hsv = color.RGBtoHSV(colorObj.r, colorObj.g, colorObj.b); + + setCurrentHSV(hsv.h, hsv.s, hsv.v, colorObj.a); + setColorUI(); + setHueColor(); + setInputColor(); + } + + function addEvent (dom, eventName, callback) { + dom.addEventListener(eventName, callback); + } + + function removeEvent(dom, eventName, callback) { + dom.removeEventListener(eventName, callback); + } + + function EventColorMouseDown(e) { + $color.data('isDown', true); + setMainColor(e); + } + + function EventColorMouseUp(e) { + $color.data('isDown', false); + } + + function EventDragBarMouseDown (e) { + e.preventDefault(); + $hue.data('isDown', true); + } + + function EventOpacityDragBarMouseDown(e) { + e.preventDefault(); + $opacity.data('isDown', true); + } + + function EventHueMouseDown (e) { + $hue.data('isDown', true); + setHueColor(e); + } + + function EventOpacityMouseDown (e) { + $opacity.data('isDown', true); + setOpacity(e); + } + + function EventHexCodeKeyDown(e) { + if(e.which < 65 || e.which > 70) { + return checkNumberKey(e); + } + } + + function EventHexCodeKeyUp (e) { + var code = $hexCode.val(); + + if(code.charAt(0) == '#' && code.length == 7) { + initColor(code); + } + } + + function EventFormatChangeClick(e) { + nextFormat(); + } + + function initEvent() { + addEvent($color.el, 'mousedown', EventColorMouseDown); + addEvent($color.el, 'mouseup', EventColorMouseUp); + addEvent($drag_bar.el, 'mousedown', EventDragBarMouseDown); + addEvent($opacity_drag_bar.el, 'mousedown', EventOpacityDragBarMouseDown); + addEvent($hueContainer.el, 'mousedown', EventHueMouseDown); + addEvent($opacityContainer.el, 'mousedown', EventOpacityMouseDown); + addEvent($hexCode.el, 'keydown', EventHexCodeKeyDown); + addEvent($hexCode.el, 'keyup', EventHexCodeKeyUp); + + addEvent($rgb_r.el, 'keydown', checkNumberKey); + addEvent($rgb_r.el, 'keyup', setRGBtoHexColor); + addEvent($rgb_g.el, 'keydown', checkNumberKey); + addEvent($rgb_g.el, 'keyup', setRGBtoHexColor); + addEvent($rgb_b.el, 'keydown', checkNumberKey); + addEvent($rgb_b.el, 'keyup', setRGBtoHexColor); + + addEvent(document, 'mouseup', EventDocumentMouseUp); + addEvent(document, 'mousemove', EventDocumentMouseMove); + + addEvent($formatChangeButton.el, 'click', EventFormatChangeClick) + } + + 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); + } + + function checkInHtml (el) { + var IsInHtml = el.nodeName == 'HTML'; + + return IsInHtml; + } + + function EventDocumentMouseUp (e) { + $color.data('isDown', false); + $hue.data('isDown', false); + $opacity.data('isDown', false); + + // when color picker clicked in outside + if (checkInHtml(e.target)) { + //setHideDelay(hideDelay); + } else if (checkColorPickerClass(e.target) == false ) { + hide(); + } + + } + + function EventDocumentMouseMove(e) { + if ($color.data('isDown')) { + setMainColor(e); + } + + if ($hue.data('isDown')) { + setHueColor(e); + } + + if ($opacity.data('isDown')) { + setOpacity(e); + } + } + + function destroy() { + removeEvent($color.el, 'mousedown', EventColorMouseDown); + removeEvent($color.el, 'mouseup', EventColorMouseUp); + removeEvent($drag_bar.el, 'mousedown', EventDragBarMouseDown); + removeEvent($opacity_drag_bar.el, 'mousedown', EventOpacityDragBarMouseDown); + removeEvent($hueContainer.el, 'mousedown', EventHueMouseDown); + removeEvent($opacityContainer.el, 'mousedown', EventOpacityMouseDown); + removeEvent($hexCode.el, 'keydown', EventHexCodeKeyDown); + removeEvent($hexCode.el, 'keyup', EventHexCodeKeyUp); + removeEvent($rgb_r.el, 'keydown', checkNumberKey); + removeEvent($rgb_r.el, 'keyup', setRGBtoHexColor); + removeEvent($rgb_g.el, 'keydown', checkNumberKey); + removeEvent($rgb_g.el, 'keyup', setRGBtoHexColor); + removeEvent($rgb_b.el, 'keydown', checkNumberKey); + removeEvent($rgb_b.el, 'keyup', setRGBtoHexColor); + removeEvent(document, 'mouseup', EventDocumentMouseUp); + removeEvent(document, 'mousemove', EventDocumentMouseMove); + removeEvent($formatChangeButton.el, 'click', EventFormatChangeClick); + + // remove color picker callback + colorpickerCallback = undefined; + } + + function currentFormat () { + var current_format = $information.data('format') || 'hex'; + if (currentA < 1 && current_format == 'hex' ) { + var next_format = 'rgb'; + $information.removeClass(current_format); + $information.addClass(next_format); + $information.data('format', next_format); + + setInputColor(); + } + } + + function initFormat () { + var current_format = $information.data('format') || 'hex'; + + $information.removeClass('hex'); + $information.removeClass('rgb'); + $information.removeClass('hsl'); + $information.addClass(current_format); + } + + function nextFormat() { + var current_format = $information.data('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 (currentA == 1) { + next_format = 'hex'; + } else { + next_format = 'rgb'; + } + } + + $information.removeClass(current_format); + $information.addClass(next_format); + $information.data('format', next_format); + + setInputColor(); + } + + function makeInputField(type) { + var item = new dom('div', 'information-item '+ type); + + if (type == 'hex') { + var field = new dom('div', 'input-field hex'); + + $hexCode = new dom('input', 'input', { type : 'text' }); + + field.append($hexCode); + field.append(new dom('div', 'title').html('HEX')); + + item.append(field); + + } else if (type == 'rgb') { + var field = new dom('div', 'input-field rgb-r'); + $rgb_r = new dom('input', 'input', { type : 'text' }); + + field.append($rgb_r); + field.append(new dom('div', 'title').html('R')); + + item.append(field); + + field = new dom('div', 'input-field rgb-g'); + $rgb_g = new dom('input', 'input', { type : 'text' }); + + field.append($rgb_g); + field.append(new dom('div', 'title').html('G')); + + item.append(field); + + field = new dom('div', 'input-field rgb-b'); + $rgb_b = new dom('input', 'input', { type : 'text' }); + + field.append($rgb_b); + field.append(new dom('div', 'title').html('B')); + + item.append(field); + + // rgba + field = new dom('div', 'input-field rgb-a'); + $rgb_a = new dom('input', 'input', { type : 'text' }); + + field.append($rgb_a); + field.append(new dom('div', 'title').html('A')); + + item.append(field); + + } else if (type == 'hsl') { + var field = new dom('div', 'input-field hsl-h'); + $hsl_h = new dom('input', 'input', { type : 'text' }); + + field.append($hsl_h); + field.append(new dom('div', 'title').html('H')); + + item.append(field); + + field = new dom('div', 'input-field hsl-s'); + $hsl_s = new dom('input', 'input', { type : 'text' }); + + field.append($hsl_s); + field.append(new dom('div', 'title').html('S')); + + item.append(field); + + field = new dom('div', 'input-field hsl-l'); + $hsl_l = new dom('input', 'input', { type : 'text' }); + + field.append($hsl_l); + field.append(new dom('div', 'title').html('L')); + + item.append(field); + + // rgba + field = new dom('div', 'input-field hsl-a'); + $hsl_a = new dom('input', 'input', { type : 'text' }); + + field.append($hsl_a); + field.append(new dom('div', 'title').html('A')); + + item.append(field); + } + + return item; + } + + function init() { + $body = new dom(document.body); + + $root = new dom('div', 'codemirror-colorpicker'); + $color = new dom('div', 'color'); + $drag_pointer = new dom('div', 'drag-pointer' ); + $value = new dom( 'div', 'value' ); + $saturation = new dom('div', 'saturation' ); + + $control = new dom('div', 'control' ); + $controlPattern = new dom('div', 'empty' ); + $controlColor = new dom('div', 'color' ); + $hue = new dom('div', 'hue' ); + $hueContainer = new dom('div', 'hue-container' ); + $drag_bar = new dom('div', 'drag-bar' ); + $opacity = new dom('div', 'opacity' ); + $opacityContainer = new dom('div', 'opacity-container' ); + $opacityColorBar = new dom('div', 'color-bar' ); + + $opacity_drag_bar = new dom('div', 'drag-bar2' ); + + $information = new dom('div', 'information hex' ); + + $informationChange = new dom('div', 'information-change'); + + $formatChangeButton = new dom('button', 'format-change-button', { type : 'button'}).html('↔'); + $informationChange.append($formatChangeButton); + + + $information.append(makeInputField('hex')); + $information.append(makeInputField('rgb')); + $information.append(makeInputField('hsl')); + $information.append($informationChange); + + + $value.append($drag_pointer); + $saturation.append($value); + $color.append($saturation); + + $hueContainer.append($drag_bar); + $hue.append($hueContainer); + + $opacityContainer.append($opacityColorBar); + $opacityContainer.append($opacity_drag_bar); + $opacity.append($opacityContainer); + + $control.append($hue); + $control.append($opacity); + $control.append($controlPattern); + $control.append($controlColor); + + $root.append($color); + $root.append($control); + $root.append($information); + + initHueColors(); + //initEvent(); + initColor(); + }; + + function initHueColors () { + for(var i = 0, len = hue_color.length; i < len; i++) { + var hue = hue_color[i]; + + var obj = color.parse(hue.rgb); + + hue.r = obj.r; + hue.g = obj.g; + hue.b = obj.b; + } + } + + /** + * public methods + */ + function setColor(value) { + if(typeof(value) == "object") { + if(!value.r || !value.g || !value.b) + return; + + initColor(color.format(value, "hex")); + } else if(typeof(value) == "string") { + if(value.charAt(0) != "#") + return; + + initColor(value); + } + } + + function getColor(type) { + caculateHSV(); + var rgb = convertRGB(); + + if (type) { + return color.format(rgb, type); + } + + return rgb; + } + + function definePostion (opt) { + + var width = $root.width(); + var height = $root.height(); + + // set left position for color picker + var elementScreenLeft = opt.left - $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 - $body.el.scrollTop ; + if (height + elementScreenTop > window.innerHeight) { + elementScreenTop -= (height + elementScreenTop) - window.innerHeight; + } + if (elementScreenTop < 0) { elementScreenTop = 0; } + + // set position + $root.css({ + left : elementScreenLeft + 'px', + top : elementScreenTop + 'px' + }); + } + + function show (opt, color, callback) { + destroy(); + initEvent(); + $root.appendTo(document.body); + + $root.css({ + position: 'fixed', // color picker has fixed position + left : '-10000px', + top : '-10000px' + }); + + $root.show(); + + definePostion(opt); + + isColorPickerShow = true; + + isShortCut = opt.isShortCut || false; + + initColor(color); + + // define colorpicker callback + colorpickerCallback = function (colorString) { + callback(colorString); + } + + // define hide delay + hideDelay = opt.hideDelay || 2000; + if (hideDelay > 0) { + setHideDelay(hideDelay); + } + + } + + + var timerCloseColorPicker; + function setHideDelay (delayTime) { + delayTime = delayTime || 0; + removeEvent($root.el, 'mouseenter'); + removeEvent($root.el, 'mouseleave'); + + addEvent($root.el, 'mouseenter', function () { + clearTimeout(timerCloseColorPicker); + }); + + addEvent($root.el, 'mouseleave', function () { + clearTimeout(timerCloseColorPicker); + timerCloseColorPicker = setTimeout(hide, delayTime); + }); + + clearTimeout(timerCloseColorPicker); + timerCloseColorPicker = setTimeout(hide, delayTime); + } + + function hide () { + if (isColorPickerShow) { + destroy(); + $root.hide(); + $root.remove(); + isColorPickerShow = false; + } + + } + + init(); + + return { + isShortCut : function () { + return isShortCut; + }, + $root: $root, + show: show, + hide: hide, + setColor: setColor, + getColor: getColor + } + }) + +}); diff --git a/vendor-overwrites/colorpicker/colorview.js b/vendor-overwrites/colorpicker/colorview.js new file mode 100644 index 00000000..b53fec3e --- /dev/null +++ b/vendor-overwrites/colorpicker/colorview.js @@ -0,0 +1,434 @@ +(function(mod) { + if (typeof exports == "object" && typeof module == "object") // CommonJS + mod(require("codemirror")); + else if (typeof define == "function" && define.amd) // AMD + define(["codemirror"], mod); + else // Plain browser env + mod(CodeMirror); +})(function(CodeMirror) { + "use strict"; + + // color names + var color_names={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 colorpicker_class = 'codemirror-colorview'; + var colorpicker_background_class = 'codemirror-colorview-background'; + + // Excluded tokens do not show color views.. + var excluded_token = ['comment']; + + CodeMirror.defineOption("colorpicker", false, function (cm, val, old) { + + if (old && old != CodeMirror.Init) { + + if (cm.state.colorpicker) + { + cm.state.colorpicker.destroy(); + cm.state.colorpicker = null; + + } + // remove event listener + } + + if (val) + { + cm.state.colorpicker = new codemirror_colorpicker(cm, val); + } + }); + + function onChange(cm, evt) { + if (evt.origin == 'setValue') { // if content is changed by setValue method, it initialize markers + cm.state.colorpicker.close_color_picker(); + cm.state.colorpicker.init_color_update(); + cm.state.colorpicker.style_color_update(); + } else { + cm.state.colorpicker.style_color_update(cm.getCursor().line); + } + + } + + function onUpdate(cm, evt) { + if (!cm.state.colorpicker.isUpdate) { + cm.state.colorpicker.isUpdate = true; + cm.state.colorpicker.close_color_picker(); + cm.state.colorpicker.init_color_update(); + cm.state.colorpicker.style_color_update(); + } + } + + function onRefresh(cm, evt) { + onChange(cm, { origin : 'setValue'}); + } + + function onKeyup(cm, evt) { + cm.state.colorpicker.keyup(evt); + } + + function onMousedown(cm, evt) { + if (cm.state.colorpicker.is_edit_mode()) + { + cm.state.colorpicker.check_mousedown(evt); + } + } + + function onPaste (cm, evt) { + onChange(cm, { origin : 'setValue'}); + } + + function onScroll (cm) { + cm.state.colorpicker.close_color_picker(); + } + + function debounce (callback, delay) { + + var t = undefined; + + return function (cm, e) { + if (t) { + clearTimeout(t); + } + + t = setTimeout(function () { + callback(cm, e); + }, delay || 300); + } + } + + function has_class(el, cls) { + if (!el || !el.className) { + return false; + } else { + var newClass = ' ' + el.className + ' '; + return newClass.indexOf(' ' + cls + ' ') > -1; + } + } + + function codemirror_colorpicker (cm, opt) { + var self = this; + + if (typeof opt == 'boolean') + { + opt = { mode : 'view' }; + } else { + opt = Object.assign({ mode: 'view' }, opt || {}); + } + + this.opt = opt; + this.cm = cm; + this.markers = {}; + + // set excluded token + excluded_token = this.opt.excluded_token || excluded_token; + + if (this.cm.colorpicker) { + this.colorpicker = this.cm.colorpicker(); + } else if (this.opt.colorpicker) { + this.colorpicker = this.opt.colorpicker; + } + + this.init_event(); + + } + + codemirror_colorpicker.prototype.init_event = function () { + + this.cm.on('mousedown', onMousedown); + this.cm.on('keyup', onKeyup); + this.cm.on('change', onChange); + this.cm.on('update', onUpdate); + this.cm.on('refresh', onRefresh); + + // create paste callback + this.onPasteCallback = (function (cm, callback) { + return function (evt) { + callback.call(this, cm, evt); + } + })(this.cm, onPaste); + + this.cm.getWrapperElement().addEventListener('paste', this.onPasteCallback); + + if (this.is_edit_mode()) + { + this.cm.on('scroll', debounce(onScroll, 50)); + } + + } + + codemirror_colorpicker.prototype.is_edit_mode = function () { + return this.opt.mode == 'edit'; + } + + codemirror_colorpicker.prototype.is_view_mode = function () { + return this.opt.mode == 'view'; + } + + codemirror_colorpicker.prototype.destroy = function () { + this.cm.off('mousedown', onMousedown); + this.cm.off('keyup', onKeyup); + this.cm.off('change', onChange) + this.cm.getWrapperElement().removeEventListener('paste', this.onPasteCallback); + + if (this.is_edit_mode()) + { + this.cm.off('scroll'); + } + } + + codemirror_colorpicker.prototype.hasClass = function (el, className) { + if (!el.className) + { + return false; + } else { + var newClass = ' ' + el.className + ' '; + return newClass.indexOf(' ' + className + ' ') > -1; + } + } + + codemirror_colorpicker.prototype.check_mousedown = function (evt) { + if (this.hasClass(evt.target, colorpicker_background_class) ) + { + this.open_color_picker(evt.target.parentNode); + } else { + this.close_color_picker(); + } + } + + codemirror_colorpicker.prototype.popup_color_picker = function (defalutColor) { + var cursor = this.cm.getCursor(); + var self = this; + var colorMarker = { + lineNo : cursor.line, + ch : cursor.ch, + color: defalutColor || '#FFFFFF', + isShortCut : true + }; + + Object.keys(this.markers).forEach(function(key) { + var searchKey = "#" + key; + if (searchKey.indexOf( "#" + colorMarker.lineNo + ":") > -1) { + var marker = self.markers[key]; + + if (marker.ch <= colorMarker.ch && colorMarker.ch <= marker.ch + marker.color.length) { + // when cursor has marker + colorMarker.ch = marker.ch; + colorMarker.color = marker.color; + colorMarker.nameColor = marker.nameColor; + } + + } + }); + + this.open_color_picker(colorMarker); + } + + codemirror_colorpicker.prototype.open_color_picker = function (el) { + var lineNo = el.lineNo; + var ch = el.ch; + var nameColor = el.nameColor; + var color = el.color; + + + if (this.colorpicker) { + var self = this; + var prevColor = color; + var pos = this.cm.charCoords({line : lineNo, ch : ch }); + this.colorpicker.show({ + left : pos.left, + top : pos.bottom, + isShortCut : el.isShortCut || false, + hideDelay : self.opt.hideDelay || 2000 + }, nameColor || color, function (newColor) { + self.cm.replaceRange(newColor, { line : lineNo, ch : ch } , { line : lineNo, ch : ch + prevColor.length }, '*colorpicker'); + prevColor = newColor; + }); + + } + + } + + codemirror_colorpicker.prototype.close_color_picker = function (el) { + if (this.colorpicker) + { + this.colorpicker.hide(); + } + } + + codemirror_colorpicker.prototype.key = function (lineNo, ch) { + return [lineNo, ch].join(":"); + } + + + codemirror_colorpicker.prototype.keyup = function (evt) { + + if (this.colorpicker ) { + if (evt.key == 'Escape') { + this.colorpicker.hide(); + } else if (this.colorpicker.isShortCut() == false) { + this.colorpicker.hide(); + } + } + } + + codemirror_colorpicker.prototype.init_color_update = function () { + this.markers = {}; // initialize marker list + } + + codemirror_colorpicker.prototype.style_color_update = function (lineHandle) { + + if (lineHandle) { + this.match(lineHandle); + } else { + var max = this.cm.lineCount(); + + for(var lineNo = 0; lineNo < max; lineNo++) { + this.match(lineNo); + } + } + + } + + codemirror_colorpicker.prototype.empty_marker = function (lineNo, lineHandle) { + var list = lineHandle.markedSpans || []; + + for(var i = 0, len = list.length; i < len; i++) { + var key = this.key(lineNo, list[i].from); + + if (key && has_class(list[i].marker.replacedWith, colorpicker_class)) { + delete this.markers[key]; + list[i].marker.clear(); + } + + } + } + + codemirror_colorpicker.prototype.color_regexp = /(#(?:[\da-f]{3}){1,2}|rgb\((?:\s*\d{1,3},\s*){2}\d{1,3}\s*\)|rgba\((?:\s*\d{1,3},\s*){3}\d*\.?\d+\s*\)|hsl\(\s*\d{1,3}(?:,\s*\d{1,3}%){2}\s*\)|hsla\(\s*\d{1,3}(?:,\s*\d{1,3}%){2},\s*\d*\.?\d+\s*\)|([\w_\-]+))/gi; + + codemirror_colorpicker.prototype.match_result = function (lineHandle) { + return lineHandle.text.match(this.color_regexp); + } + + codemirror_colorpicker.prototype.match = function (lineNo) { + var lineHandle = this.cm.getLineHandle(lineNo); + + this.empty_marker(lineNo, lineHandle); + + var result = this.match_result(lineHandle); + if (result) + { + var obj = { next : 0 }; + for(var i = 0, len = result.length; i < len; i++) { + + if (result[i].indexOf('#') > -1 || result[i].indexOf('rgb') > -1 || result[i].indexOf('hsl') > -1) { + this.render(obj, lineNo, lineHandle, result[i]); + } else { + var nameColor = color_names[result[i]]; + if (nameColor) { + this.render(obj, lineNo, lineHandle, result[i], nameColor); + } + } + } + } + } + + codemirror_colorpicker.prototype.make_element = function () { + var el = document.createElement('div'); + + el.className = colorpicker_class; + + if (this.is_edit_mode()) + { + el.title ="open color picker"; + } else { + el.title =""; + } + + el.back_element = this.make_background_element(); + el.appendChild(el.back_element); + + return el; + } + + codemirror_colorpicker.prototype.make_background_element = function () { + var el = document.createElement('div'); + + el.className = colorpicker_background_class; + + return el; + } + + codemirror_colorpicker.prototype.set_state = function (lineNo, start, color, nameColor) { + var marker = this.create_marker(lineNo, start); + + + marker.lineNo = lineNo; + marker.ch = start; + marker.color = color; + marker.nameColor = nameColor; + + return marker; + } + + codemirror_colorpicker.prototype.create_marker = function (lineNo, start) { + + var key = this.key(lineNo,start); + + if (!this.markers[key]) { + this.markers[key] = this.make_element(); + } + + + return this.markers[key]; + + } + + codemirror_colorpicker.prototype.has_marker = function (lineNo, start) { + var key = this.key(lineNo,start); + return !!(this.markers[key]) + } + + codemirror_colorpicker.prototype.update_element = function (el, color) { + el.back_element.style.backgroundColor = color; + } + + codemirror_colorpicker.prototype.set_mark = function (line, ch, el) { + this.cm.setBookmark({ line : line, ch : ch}, { widget : el, handleMouseEvents : true} ); + + } + + codemirror_colorpicker.prototype.is_excluded_token = function (line, ch) { + var token = this.cm.getTokenAt({line : line, ch : ch}); + var count = 0; + for(var i = 0, len = excluded_token.length; i < len; i++) { + if (token.type === excluded_token[i]) { + count++; + break; + } + } + + return count > 0; // true is that it has a excluded token + } + + codemirror_colorpicker.prototype.render = function (cursor, lineNo, lineHandle, color, nameColor) { + var start = lineHandle.text.indexOf(color, cursor.next); + + if (this.is_excluded_token(lineNo, start) === true) { + // excluded token do not show. + return; + } + + cursor.next = start + color.length; + + if (this.has_marker(lineNo, start)) + { + this.update_element(this.create_marker(lineNo, start), nameColor || color); + this.set_state(lineNo, start, color, nameColor); + return; + } + + var el = this.create_marker(lineNo, start); + + this.update_element(el, nameColor || color); + this.set_state(lineNo, start, color, nameColor || color); + this.set_mark(lineNo, start, el); + } +});