add original colorpicker plugin
This commit is contained in:
tophf
parent
10ce4eeefa
commit
c50b251ae4
21
vendor-overwrites/colorpicker/LICENSE
Normal file
21
vendor-overwrites/colorpicker/LICENSE
Normal file
|
|
@ -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.
|
||||
310
vendor-overwrites/colorpicker/colorpicker.css
Normal file
310
vendor-overwrites/colorpicker/colorpicker.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
1369
vendor-overwrites/colorpicker/colorpicker.js
Normal file
1369
vendor-overwrites/colorpicker/colorpicker.js
Normal file
File diff suppressed because it is too large
Load Diff
434
vendor-overwrites/colorpicker/colorview.js
Normal file
434
vendor-overwrites/colorpicker/colorview.js
Normal file
|
|
@ -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);
|
||||
}
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user