Skip to content

Commit

Permalink
fixed #3, #4
Browse files Browse the repository at this point in the history 
support color names
  • Loading branch information
@easylogic
easylogic committed Apr 7, 2017
1 parent 2b0bdb8 commit 4c21381
Show file tree
Hide file tree
Showing 3 changed files with 192 additions and 12 deletions.
42 changes: 33 additions & 9 deletions addon/colorpicker/colorview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,9 @@
})(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';

Expand Down Expand Up @@ -40,6 +43,16 @@

}

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 onKeyup(cm) {
cm.state.colorpicker.keyup();
}
Expand Down Expand Up @@ -103,6 +116,7 @@
this.cm.on('mousedown', onMousedown);
this.cm.on('keyup', onKeyup);
this.cm.on('change', onChange);
this.cm.on('update', onUpdate);

// create paste callback
this.onPasteCallback = (function (cm, callback) {
Expand Down Expand Up @@ -162,14 +176,15 @@
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 }, color, function (newColor) {
this.colorpicker.show({ left : pos.left, top : pos.bottom }, nameColor || color, function (newColor) {
self.cm.replaceRange(newColor, { line : lineNo, ch : ch } , { line : lineNo, ch : ch + prevColor.length }, '*colorpicker');
prevColor = newColor;
});
Expand Down Expand Up @@ -225,7 +240,7 @@
}
}

codemirror_colorpicker.prototype.color_regexp = /(#(?:[\da-f]{3}){1,2}|rgb\((?:\d{1,3},\s*){2}\d{1,3}\)|rgba\((?:\d{1,3},\s*){3}\d*\.?\d+\)|hsl\(\d{1,3}(?:,\s*\d{1,3}%){2}\)|hsla\(\d{1,3}(?:,\s*\d{1,3}%){2},\s*\d*\.?\d+\))/gi;
codemirror_colorpicker.prototype.color_regexp = /(#(?:[\da-f]{3}){1,2}|rgb\((?:\d{1,3},\s*){2}\d{1,3}\)|rgba\((?:\d{1,3},\s*){3}\d*\.?\d+\)|hsl\(\d{1,3}(?:,\s*\d{1,3}%){2}\)|hsla\(\d{1,3}(?:,\s*\d{1,3}%){2},\s*\d*\.?\d+\)|(\w+))/gi;

codemirror_colorpicker.prototype.match_result = function (lineHandle) {
return lineHandle.text.match(this.color_regexp);
Expand All @@ -241,7 +256,15 @@
{
var obj = { next : 0 };
for(var i = 0, len = result.length; i < len; i++) {
this.render(obj, lineNo, lineHandle, result[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);
}
}
}
}
}
Expand Down Expand Up @@ -272,13 +295,14 @@
return el;
}

codemirror_colorpicker.prototype.set_state = function (lineNo, start, color) {
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;
}
Expand Down Expand Up @@ -310,23 +334,23 @@

}

codemirror_colorpicker.prototype.render = function (cursor, lineNo, lineHandle, color) {
codemirror_colorpicker.prototype.render = function (cursor, lineNo, lineHandle, color, nameColor) {

var start = lineHandle.text.indexOf(color, cursor.next);

cursor.next = start + color.length;

if (this.has_marker(lineNo, start))
{
this.update_element(this.create_marker(lineNo, start), color);
this.set_state(lineNo, start, color);
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, color);
this.set_state(lineNo, start, color);
this.update_element(el, nameColor || color);
this.set_state(lineNo, start, color, nameColor);
this.set_mark(lineNo, start, el);
}
});
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "codemirror-colorpicker",
"version": "1.0.4",
"version": "1.0.5",
"description": "colorpicker for codemirror",
"main": "index.js",
"scripts": {
Expand Down
160 changes: 158 additions & 2 deletions sample/colorpicker.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,17 +13,173 @@
</head>
<body>

<textarea id="sample_text_area">
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)"
};

</textarea>


<script type="text/javascript">
var cm = CodeMirror(document.body, {
var cm = CodeMirror.fromTextArea(document.getElementById("sample_text_area"), {
lineNumbers: true,
mode : "css",
colorpicker : {
mode : 'edit'
}
});

cm.setValue('#aaa');
cm.refresh();

</script>
</body>

Expand Down

0 comments on commit 4c21381

Please sign in to comment.