fixed #13

kode-team · Aug 23, 2017 · 42215e3 · 42215e3
1 parent 31c15e0
commit 42215e3
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 5 deletions.
diff --git a/addon/colorpicker/colorview.js b/addon/colorpicker/colorview.js
@@ -14,6 +14,9 @@
     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) {
@@ -113,6 +116,9 @@
         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();
@@ -295,7 +301,7 @@
         }
     }
 
-    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.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);
@@ -389,9 +395,27 @@
 
     }
 
+    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))

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "codemirror-colorpicker",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "colorpicker for codemirror",
   "main": "index.js",
   "scripts": {

diff --git a/sample/colorpicker.html b/sample/colorpicker.html
@@ -2,10 +2,10 @@
 <html>
 <head>
     <meta charset="utf-8" />
-    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.23.0/codemirror.css" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.23.0/codemirror.css" />
 
-    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.23.0/codemirror.js" ></script>
-    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.23.0/mode/css/css.js" ></script>
+    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.23.0/codemirror.js" ></script>
+    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.23.0/mode/css/css.js" ></script>
     <link rel="stylesheet" href="../addon/colorpicker/colorpicker.css" />
     <script type="text/javascript" src="../addon/colorpicker/colorpicker.js" ></script>
     <script type="text/javascript" src="../addon/colorpicker/colorview.js" ></script>
@@ -14,6 +14,12 @@
 <body>
 
 <textarea id="sample_text_area">
+.sample-green {
+    background-color: green; 
+    blue: blue;
+}
+
+/* background-color: yellow; */
 var color_names = {
     aliceblue: "rgb(240, 248, 255)",
     antiquewhite: "rgb(250, 235, 215)",