codemirror-colorpicker - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

addon/colorpicker/colorpicker.js

 (function(mod) {
-  if (typeof exports == "object" && typeof module == "object") // CommonJS
-    mod(require("../../lib/codemirror"), require("./foldcode"));
-  else if (typeof define == "function" && define.amd) // AMD
-    define(["../../lib/codemirror", "./foldcode"], mod);
-  else // Plain browser env
-    mod(CodeMirror);
+    if (typeof exports == "object" && typeof module == "object") // CommonJS
+        mod(require("../../lib/codemirror"), require("./foldcode"));
+    else if (typeof define == "function" && define.amd) // AMD
+        define(["../../lib/codemirror", "./foldcode"], mod);
+    else // Plain browser env
+        mod(CodeMirror);
 })(function(CodeMirror) {
@@ -12,9 +12,9 @@
 
-        var cm  = this; 
+        var cm  = this;
 
-         var color = {
+        var color = {
 
-             trim : function (str) {
+            trim : function (str) {
                 return str.replace(/^\s+|\s+$/g, '');
-             },
+            },
 
@@ -250,51 +250,51 @@ /**
 
-             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;
+            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;
-                 }
+                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)};
-             },
+                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;
-             },
+            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;
+            HSLtoRGB : function (h, s, l) {
+                var r, g, b;
 
-                 h /= 360;
-                 s /= 100;
-                 l /= 100;
+                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);
-                 }
+                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 };
-             }
+                return { r : r * 255, g : g * 255, b : b * 255 };
+            }
         };
@@ -323,3 +323,3 @@
         var colorpickerCallback = function () {};
-        var counter = 0; 
+        var counter = 0;
         var cached = {};
@@ -341,3 +341,3 @@ var isColorPickerShow = false;
 
-            this.el = el;  
+            this.el = el;
         }
@@ -369,4 +369,4 @@
 
-            return this;  
-        }        
+            return this;
+        }
 
@@ -385,11 +385,11 @@ dom.prototype.empty = function () {
 
-            return this; 
+            return this;
         }
 
         dom.prototype.appendTo = function (target) {
-            var t = target.el ? target.el : target; 
+            var t = target.el ? target.el : target;
 
             t.appendChild(this.el);
 
-            return this; 
+            return this;
         }
@@ -402,3 +402,3 @@
 
-            return this; 
+            return this;
         }
@@ -412,3 +412,3 @@
             if (arguments.length == 2) {
-                this.el.style[key] = value; 
+                this.el.style[key] = value;
             } else if (arguments.length == 1) {
@@ -424,6 +424,6 @@
                 }
-                
+
             }
 
-            return this; 
+            return this;
         }
@@ -438,14 +438,14 @@
             };
-        }   
+        }
 
         dom.prototype.width = function () {
-            return this.el.offsetWidth; 
+            return this.el.offsetWidth;
         }
 
         dom.prototype.height = function () {
-            return this.el.offsetHeight; 
+            return this.el.offsetHeight;
         }
 
         dom.prototype.dataKey = function (key) {
-            return this.uniqId + '.' + key; 
+            return this.uniqId + '.' + key;
         }
@@ -455,3 +455,3 @@
             if (arguments.length == 2) {
-                cached[this.dataKey(key)] = value; 
+                cached[this.dataKey(key)] = value;
             } else if (arguments.length == 1) {
@@ -461,10 +461,10 @@ return cached[this.dataKey(key)];
                 var keys = Object.keys(cached);
-                
+
                 var uniqId = this.uniqId + ".";
                 return keys.filter(function (key) {
                     if (key.indexOf(uniqId) == 0) {
-                       return true;      
+                        return true;
                     }
 
-                    return false; 
+                    return false;
                 }).map(function (value) {
@@ -475,3 +475,3 @@ return cached[value];
 
-            return this; 
+            return this;
         }
@@ -481,8 +481,8 @@
             if (arguments.length == 0) {
-                return this.el.value; 
+                return this.el.value;
             } else if (arguments.length == 1) {
-                this.el.value = value; 
+                this.el.value = value;
             }
 
-            return this; 
+            return this;
         }
@@ -585,3 +585,3 @@
                 }
-   
+
             }
@@ -608,3 +608,3 @@ }
             });
-            
+
             $drag_pointer.data('pos', { x: x, y : y});
@@ -672,3 +672,3 @@
             });
-            
+
             $drag_bar.data('pos', { x : x});
@@ -741,3 +741,3 @@
             });
-            
+
             $opacity_drag_bar.data('pos', { x : x });
@@ -882,45 +882,59 @@
 
-        function initEvent() {
-            addEvent($color.el, 'mousedown', function(e) {
-                $color.data('isDown', true);
-                setMainColor(e);
-            });
+        function EventColorMouseDown(e) {
+            $color.data('isDown', true);
+            setMainColor(e);
+        }
 
-            addEvent($color.el, 'mouseup', function(e) {
-                $color.data('isDown', false);
-            });
+        function EventColorMouseUp(e) {
+            $color.data('isDown', false);
+        }
 
-            addEvent($drag_bar.el, 'mousedown', function(e) {
-                e.preventDefault();
-                $hue.data('isDown', true);
-            });
+        function EventDragBarMouseDown (e) {
+            e.preventDefault();
+            $hue.data('isDown', true);
+        }
 
-            addEvent($opacity_drag_bar.el, 'mousedown', function(e) {
-                e.preventDefault();
-                $opacity.data('isDown', true);
-            });
+        function EventOpacityDragBarMouseDown(e) {
+            e.preventDefault();
+            $opacity.data('isDown', true);
+        }
 
-            addEvent($hueContainer.el, 'mousedown', function(e) {
-                $hue.data('isDown', true);
-                setHueColor(e);
-            });
+        function EventHueMouseDown (e) {
+            $hue.data('isDown', true);
+            setHueColor(e);
+        }
 
-            addEvent($opacityContainer.el, 'mousedown', function(e) {
-                $opacity.data('isDown', true);
-                setOpacity(e);
-            });
+        function EventOpacityMouseDown (e) {
+            $opacity.data('isDown', true);
+            setOpacity(e);
+        }
 
-            addEvent($hexCode.el, 'keydown', function(e) {
-                if(e.which < 65 || e.which > 70) {
-                    return checkNumberKey(e);
-                }
-            });
-            addEvent($hexCode.el, 'keyup', function(e) {
-                var code = $hexCode.val();
+        function EventHexCodeKeyDown(e) {
+            if(e.which < 65 || e.which > 70) {
+                return checkNumberKey(e);
+            }
+        }
 
-                if(code.charAt(0) == '#' && code.length == 7) {
-                    initColor(code);
-                }
-            });
+        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);
@@ -936,5 +950,3 @@ addEvent($rgb_r.el, 'keyup', setRGBtoHexColor);
 
-            addEvent($formatChangeButton.el, 'click', function (e) {
-                nextFormat();
-            })
+            addEvent($formatChangeButton.el, 'click', EventFormatChangeClick)
         }
@@ -963,10 +975,10 @@
         function destroy() {
-            removeEvent($color.el, 'mousedown');
-            removeEvent($color.el, 'mouseup');
-            removeEvent($drag_bar.el);
-            removeEvent($opacity_drag_bar.el);
-            removeEvent($hueContainer.el);
-            removeEvent($opacityContainer.el);
-            removeEvent($hexCode.el, 'keydown');
-            removeEvent($hexCode.el, 'keyup');
+            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);
@@ -980,3 +992,3 @@ removeEvent($rgb_r.el, 'keyup', setRGBtoHexColor);
             removeEvent(document, 'mousemove', EventDocumentMouseMove);
-            removeEvent($formatChangeButton.el, 'click')
+            removeEvent($formatChangeButton.el, 'click', EventFormatChangeClick);
 
@@ -1010,2 +1022,3 @@ // remove color picker callback
             var current_format = $information.data('format') || 'hex';
+
             var next_format = 'hex';
@@ -1182,3 +1195,3 @@ if (current_format == 'hex') {
                 hue.g = obj.g;
-                hue.b = obj.b; 
+                hue.b = obj.b;
             }
@@ -1188,3 +1201,3 @@ }
         /**
-         * public methods 
+         * public methods
          */
@@ -1245,3 +1258,3 @@ function setColor(value) {
                 $root.remove();
-                isColorPickerShow = false; 
+                isColorPickerShow = false;
             }
@@ -1257,3 +1270,3 @@
             setColor: setColor,
-            getColor: getColor 
+            getColor: getColor
         }
@@ -1260,0 +1273,0 @@ })

addon/colorpicker/colorview.js

 (function(mod) {
-  if (typeof exports == "object" && typeof module == "object") // CommonJS
-    mod(require("../../lib/codemirror"), require("./foldcode"));
-  else if (typeof define == "function" && define.amd) // AMD
-    define(["../../lib/codemirror", "./foldcode"], mod);
-  else // Plain browser env
-    mod(CodeMirror);
+    if (typeof exports == "object" && typeof module == "object") // CommonJS
+        mod(require("../../lib/codemirror"), require("./foldcode"));
+    else if (typeof define == "function" && define.amd) // AMD
+        define(["../../lib/codemirror", "./foldcode"], mod);
+    else // Plain browser env
+        mod(CodeMirror);
 })(function(CodeMirror) {
-  "use strict";
+    "use strict";
 
-	var colorpicker_class = 'codemirror-colorview';
+    var colorpicker_class = 'codemirror-colorview';
 
-	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; 
+    CodeMirror.defineOption("colorpicker", false, function (cm, val, old) {
+        if (old && old != CodeMirror.Init) {
 
-			}
-			// remove event listener 
-		}
+            if (cm.state.colorpicker)
+            {
+                cm.state.colorpicker.destroy();
+                cm.state.colorpicker = null;
 
-		if (val)
-		{
-			cm.state.colorpicker = new codemirror_colorpicker(cm, val);
-		}
-	});
+            }
+            // remove event listener
+        }
 
-	function onChange(cm) {
-		cm.state.colorpicker.style_color_update(cm.getCursor().line);
-	}
+        if (val)
+        {
+            cm.state.colorpicker = new codemirror_colorpicker(cm, val);
+        }
+    });
 
-	function onKeyup(cm) {
-		cm.state.colorpicker.keyup();
-	}
+    function onChange(cm) {
+        cm.state.colorpicker.style_color_update(cm.getCursor().line);
+    }
 
-	function onMousedown(cm, evt) {
-		if (cm.state.colorpicker.is_edit_mode())
-		{
-			cm.state.colorpicker.check_mousedown(evt);
-		}
-	}
+    function onKeyup(cm) {
+        cm.state.colorpicker.keyup();
+    }
 
-	function onPaste () {
-		// TODO: cm  객체를 어디서 얻어오나? 
-		//self.style_color_update();
-	}
-	
-	function codemirror_colorpicker (cm, opt) {
-		var self = this; 
+    function onMousedown(cm, evt) {
+        if (cm.state.colorpicker.is_edit_mode())
+        {
+            cm.state.colorpicker.check_mousedown(evt);
+        }
+    }
 
-		if (typeof opt == 'boolean')
-		{
-			opt = { mode : 'view' };
-		} else {
-			opt = Object.assign({ mode: 'view' }, opt || {});
-		}
+    function onPaste () {
+        // TODO: cm  객체를 어디서 얻어오나?
+        //self.style_color_update();
+    }
 
-		this.opt = opt; 
-		this.cm = cm; 
-		this.markers = {};
+    function onScroll (cm) {
+        cm.state.colorpicker.close_color_picker();
+    }
 
-		this.cm.on('mousedown', onMousedown);
-		this.cm.on('keyup', onKeyup);
-		this.cm.on('change', onChange)
-		this.cm.getWrapperElement().addEventListener('paste', onPaste);
+    function debounce (callback, delay) {
 
-		if (this.cm.colorpicker) {
-			this.colorpicker = this.cm.colorpicker();
-		} else if (this.opt.colorpicker) {
-			this.colorpicker = this.opt.colorpicker; 
-		}
+        var t = undefined;
 
-	}
+        return function (cm, e) {
+            if (t) {
+                clearTimeout(t);
+            }
 
-	codemirror_colorpicker.prototype.is_edit_mode = function () {
-		return this.opt.mode == 'edit';
-	}
+            t = setTimeout(function () {
+                callback(cm, e);
+            }, delay || 300);
+        }
+    }
 
-	codemirror_colorpicker.prototype.is_view_mode = function () {
-		return this.opt.mode == 'view';
-	}
+    function codemirror_colorpicker (cm, opt) {
+        var self = this;
 
-	codemirror_colorpicker.prototype.destroy = function () {
-		this.cm.off('mousedown', onMousedown);
-		this.cm.off('change', onChange)
-		this.cm.getWrapperElement().removeEventListener('paste', onPaste);
-	}
+        if (typeof opt == 'boolean')
+        {
+            opt = { mode : 'view' };
+        } else {
+            opt = Object.assign({ mode: 'view' }, opt || {});
+        }
 
-	codemirror_colorpicker.prototype.hasClass = function (el, className) {
-		if (!el.className)
-		{
-			return false; 
-		} else {
-			var newClass = ' ' + el.className + ' ';
-			return newClass.indexOf(' ' + className + ' ') > -1;
-		}
-	}
+        this.opt = opt;
+        this.cm = cm;
+        this.markers = {};
 
-	codemirror_colorpicker.prototype.check_mousedown = function (evt) {
-		if (this.hasClass(evt.target, colorpicker_class))
-		{
-			this.open_color_picker(evt.target);
-		}
-	}
+        this.cm.on('mousedown', onMousedown);
+        this.cm.on('keyup', onKeyup);
+        this.cm.on('change', onChange)
 
-	codemirror_colorpicker.prototype.open_color_picker = function (el) {
-		var lineNo = el.lineNo;
-		var ch = el.ch; 
-		var color = el.color; 
+        if (this.is_edit_mode())
+        {
+            this.cm.on('scroll', debounce(onScroll, 50));
+        }
 
+        this.cm.getWrapperElement().addEventListener('paste', onPaste);
 
-		if (this.colorpicker) {
-			var self = this; 
-			var prevColor = color;
+        if (this.cm.colorpicker) {
+            this.colorpicker = this.cm.colorpicker();
+        } else if (this.opt.colorpicker) {
+            this.colorpicker = this.opt.colorpicker;
+        }
+
+    }
+
+    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('change', onChange)
+        this.cm.getWrapperElement().removeEventListener('paste', onPaste);
+    }
+
+    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_class))
+        {
+            this.open_color_picker(evt.target);
+        } else {
+            this.close_color_picker();
+        }
+    }
+
+    codemirror_colorpicker.prototype.open_color_picker = function (el) {
+        var lineNo = el.lineNo;
+        var ch = el.ch;
+        var color = el.color;
+
+
+        if (this.colorpicker) {
+            var self = this;
+            var firstColor, prevColor;
+            firstColor = prevColor = color;
             var pos = this.cm.charCoords({line : lineNo, ch : ch });
             this.colorpicker.show({ left : pos.left, top : pos.bottom }, color, function (newColor) {
-				self.cm.replaceRange(newColor, { line : lineNo, ch : ch } , { line : lineNo, ch : ch + prevColor.length }, prevColor);
-				prevColor = newColor; 
-			});
+                self.cm.replaceRange(newColor, { line : lineNo, ch : ch } , { line : lineNo, ch : ch + prevColor.length }, '*' + firstColor);
+                prevColor = newColor;
+            });
 
-		}
+        }
 
-	}
+    }
 
-	codemirror_colorpicker.prototype.key = function (lineNo, ch) {
-		return [lineNo, ch].join(":");
-	}
+    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 () {
 
-		if (this.colorpicker) {
-			this.colorpicker.hide();
-		}
-	}
+    codemirror_colorpicker.prototype.keyup = function () {
 
-	codemirror_colorpicker.prototype.style_color_update = function (lineHandle) {
+        if (this.colorpicker) {
+            this.colorpicker.hide();
+        }
+    }
 
-		if (lineHandle) {
-			this.match(lineHandle);
-		} else {
-			var max = this.cm.lineCount();
+    codemirror_colorpicker.prototype.style_color_update = function (lineHandle) {
 
-			for(var lineNo = 0; lineNo < max; lineNo++) {
-				this.match(lineNo);
-			}
-		}
+        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);
-			delete this.markers[key];
-			list[i].marker.clear();
-		}
-	}
+    codemirror_colorpicker.prototype.empty_marker = function (lineNo, lineHandle) {
+        var list = lineHandle.markedSpans || [];
 
-	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;
+        for(var i = 0, len = list.length; i < len; i++) {
+            var key = this.key(lineNo, list[i].from);
+            delete this.markers[key];
+            list[i].marker.clear();
+        }
+    }
 
-	codemirror_colorpicker.prototype.match_result = function (lineHandle) {
-		return lineHandle.text.match(this.color_regexp);
-	}
+    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.match = function (lineNo) {
-		var lineHandle = this.cm.getLineHandle(lineNo);
+    codemirror_colorpicker.prototype.match_result = function (lineHandle) {
+        return lineHandle.text.match(this.color_regexp);
+    }
 
-		this.empty_marker(lineNo, lineHandle);
+    codemirror_colorpicker.prototype.match = function (lineNo) {
+        var lineHandle = this.cm.getLineHandle(lineNo);
 
-		var result = this.match_result(lineHandle);
+        this.empty_marker(lineNo, lineHandle);
 
-		if (result)
-		{
-			var obj = { next : 0 }; 
-			for(var i = 0, len = result.length; i < len; i++) {
-				this.render(obj, lineNo, lineHandle, result[i]);
-			}
-		}		
-	}
+        var result = this.match_result(lineHandle);
 
-	codemirror_colorpicker.prototype.make_element = function () {
-		var el = document.createElement('div');
+        if (result)
+        {
+            var obj = { next : 0 };
+            for(var i = 0, len = result.length; i < len; i++) {
+                this.render(obj, lineNo, lineHandle, result[i]);
+            }
+        }
+    }
 
-		el.className = colorpicker_class;
+    codemirror_colorpicker.prototype.make_element = function () {
+        var el = document.createElement('div');
 
-		if (this.is_edit_mode())
-		{
-			el.title ="open color picker";
-		} else {
-			el.title ="";
-		}
+        el.className = colorpicker_class;
 
+        if (this.is_edit_mode())
+        {
+            el.title ="open color picker";
+        } else {
+            el.title ="";
+        }
 
-		return el; 
-	}
 
-	codemirror_colorpicker.prototype.set_state = function (lineNo, start, color) {
-		var marker = this.create_marker(lineNo, start);
-		
-		
-		marker.lineNo = lineNo;
-		marker.ch = start; 
-		marker.color = color; 
+        return el;
+    }
 
-		return marker;
-	}
+    codemirror_colorpicker.prototype.set_state = function (lineNo, start, color) {
+        var marker = this.create_marker(lineNo, start);
 
-	codemirror_colorpicker.prototype.create_marker = function (lineNo, start) {
 
-		var key = this.key(lineNo,start);
+        marker.lineNo = lineNo;
+        marker.ch = start;
+        marker.color = color;
 
-		if (!this.markers[key]) {
-			this.markers[key] = this.make_element(); 
-		}
+        return marker;
+    }
 
+    codemirror_colorpicker.prototype.create_marker = function (lineNo, start) {
 
-		return this.markers[key];
+        var key = this.key(lineNo,start);
 
-	}
+        if (!this.markers[key]) {
+            this.markers[key] = this.make_element();
+        }
 
-	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.style.background = color;  
-	}
+        return this.markers[key];
 
-	codemirror_colorpicker.prototype.set_mark = function (line, ch, el) {
-		this.cm.setBookmark({ line : line, ch : ch}, { widget : el, handleMouseEvents : true} );
+    }
 
-	}
+    codemirror_colorpicker.prototype.has_marker = function (lineNo, start) {
+        var key = this.key(lineNo,start);
+        return !!(this.markers[key])
+    }
 
-	codemirror_colorpicker.prototype.render = function (cursor, lineNo, lineHandle, color) {
+    codemirror_colorpicker.prototype.update_element = function (el, color) {
+        el.style.background = color;
+    }
 
-		var start = lineHandle.text.indexOf(color, cursor.next);
+    codemirror_colorpicker.prototype.set_mark = function (line, ch, el) {
+        this.cm.setBookmark({ line : line, ch : ch}, { widget : el, handleMouseEvents : true} );
 
-		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);
-			return; 
-		}
+    codemirror_colorpicker.prototype.render = function (cursor, lineNo, lineHandle, color) {
 
-		var el  = this.create_marker(lineNo, start);
+        var start = lineHandle.text.indexOf(color, cursor.next);
 
-		this.update_element(el, color);
-		this.set_state(lineNo, start, color);
-		this.set_mark(lineNo, start, el);
-	}
+        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);
+            return;
+        }
+
+        var el  = this.create_marker(lineNo, start);
+
+        this.update_element(el, color);
+        this.set_state(lineNo, start, color);
+        this.set_mark(lineNo, start, el);
+    }
 });

package.json

 {
   "name": "codemirror-colorpicker",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "colorpicker for codemirror",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -9,2 +9,3 @@ # CodeMirror Colorpicker Addon
 <link rel="stylesheet" href="addon/colorpicker/colorpicker" />
+<script src="addon/colorpicker/colorview.js"></script>
 <script src="addon/colorpicker/colorpicker.js"></script>
@@ -42,3 +43,16 @@ ```
 
+# Install 
 
+## npm 
+
+```npm
+npm install codemirror-colorpicker
+```
+
+## bower 
+
+```
+bower install codemirror-colorpicker 
+```
+
 # License : MIT 

No alert changes

Improved metrics

Total package byte prevSize

117036

increased by2.32%

Lines of code

1457

increased by2.53%

Number of lines in readme file

57

increased by32.56%

No dependency changes