Refactoring color picker

kode-team · Aug 27, 2018 · 994e6a2 · 994e6a2
1 parent 745fec7
commit 994e6a2
Show file tree

Hide file tree

Showing 16 changed files with 494 additions and 451 deletions.
diff --git a/addon/codemirror-colorpicker.css b/addon/codemirror-colorpicker.css
@@ -441,7 +441,9 @@
           padding-left: 14px;
           overflow: hidden;
           text-overflow: ellipsis;
-          white-space: nowrap; }
+          white-space: nowrap;
+          color: #000;
+          text-align: left; }
         .codemirror-colorpicker > .color-chooser .color-chooser-container .colorsets-item-header .items {
           -webkit-box-flex: 1;
               -ms-flex: 1;
@@ -450,7 +452,7 @@
           padding-right: 10px;
           display: block;
           height: 100%;
-          line-height: 1.6;
+          line-height: 2;
           cursor: pointer; }
       .codemirror-colorpicker > .color-chooser .color-chooser-container .colorsets-list {
         position: absolute;
@@ -485,7 +487,9 @@
             font-size: 13px;
             overflow: hidden;
             text-overflow: ellipsis;
-            white-space: nowrap; }
+            white-space: nowrap;
+            color: #000;
+            text-align: left; }
           .codemirror-colorpicker > .color-chooser .color-chooser-container .colorsets-list .colorsets-item .items {
             -webkit-box-flex: 3;
                 -ms-flex: 3;

diff --git a/addon/codemirror-colorpicker.js b/addon/codemirror-colorpicker.js
diff --git a/dist/codemirror-colorpicker.css b/dist/codemirror-colorpicker.css
@@ -441,7 +441,9 @@
           padding-left: 14px;
           overflow: hidden;
           text-overflow: ellipsis;
-          white-space: nowrap; }
+          white-space: nowrap;
+          color: #000;
+          text-align: left; }
         .codemirror-colorpicker > .color-chooser .color-chooser-container .colorsets-item-header .items {
           -webkit-box-flex: 1;
               -ms-flex: 1;
@@ -450,7 +452,7 @@
           padding-right: 10px;
           display: block;
           height: 100%;
-          line-height: 1.6;
+          line-height: 2;
           cursor: pointer; }
       .codemirror-colorpicker > .color-chooser .color-chooser-container .colorsets-list {
         position: absolute;
@@ -485,7 +487,9 @@
             font-size: 13px;
             overflow: hidden;
             text-overflow: ellipsis;
-            white-space: nowrap; }
+            white-space: nowrap;
+            color: #000;
+            text-align: left; }
           .codemirror-colorpicker > .color-chooser .color-chooser-container .colorsets-list .colorsets-item .items {
             -webkit-box-flex: 3;
                 -ms-flex: 3;

diff --git a/dist/codemirror-colorpicker.js b/dist/codemirror-colorpicker.js
diff --git a/dist/codemirror-colorpicker.min.js b/dist/codemirror-colorpicker.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "codemirror-colorpicker",
-  "version": "1.9.11",
+  "version": "1.9.12",
   "description": "colorpicker for codemirror",
   "main": "./dist/codemirror-colorpicker.js",
   "scripts": {

diff --git a/src/colorpicker/chromedevtool/ColorControl.js b/src/colorpicker/chromedevtool/ColorControl.js
@@ -11,25 +11,28 @@ export default class ColorControl extends EventMachin {
         this.colorpicker = colorpicker; 
         this.initialize();
     } 
-
-    initialize () {
-        this.template(`
-            <div class="control">
-                <div ref="$hue" class="hue">
-                    <div ref="$hueContainer" class="hue-container">
-                        <div ref="$drag_bar" class="drag-bar"></div>
-                    </div>
+
+    template () {
+        return `
+        <div class="control">
+            <div ref="$hue" class="hue">
+                <div ref="$hueContainer" class="hue-container">
+                    <div ref="$drag_bar" class="drag-bar"></div>
                 </div>
-                <div ref="$opacity" class="opacity">
-                    <div ref="$opacityContainer" class="opacity-container">
-                        <div ref="$opacityColorBar" class="color-bar"></div>
-                        <div ref="$opacity_drag_bar" class="drag-bar2"></div>
-                    </div>
+            </div>
+            <div ref="$opacity" class="opacity">
+                <div ref="$opacityContainer" class="opacity-container">
+                    <div ref="$opacityColorBar" class="color-bar"></div>
+                    <div ref="$opacity_drag_bar" class="drag-bar2"></div>
                 </div>
-                <div ref="$controlPattern" class="empty"></div>
-                <div ref="$controlColor" class="color"></div>
             </div>
-        `)
+            <div ref="$controlPattern" class="empty"></div>
+            <div ref="$controlColor" class="color"></div>
+        </div>
+        `
+    }
+
+    initialize () {
 
         this.drag_bar_pos = {}
         this.opacity_drag_bar_pos = {}      
@@ -196,6 +199,15 @@ export default class ColorControl extends EventMachin {
         this.setHueColor(null, true)
     }       
 
+    // Event Bindings 
+    'mouseup document' (e) {
+        this.EventDocumentMouseUp(e);
+    }
+
+    'mousemove document' (e) {
+        this.EventDocumentMouseMove(e);
+    }
+
     'mousedown $drag_bar' (e) {
         e.preventDefault();
         this.isHueDown = true; 

diff --git a/src/colorpicker/chromedevtool/ColorInformation.js b/src/colorpicker/chromedevtool/ColorInformation.js
@@ -13,59 +13,61 @@ export default class ColorInformation extends EventMachin {
 
     }
 
-    initialize () {
-
-        this.template(`
-            <div class="information hex">
-                <div ref="$informationChange" class="information-change">
-                    <button ref="$formatChangeButton" type="button" class="format-change-button arrow-button"></button>
+    template () {
+        return `
+        <div class="information hex">
+            <div ref="$informationChange" class="information-change">
+                <button ref="$formatChangeButton" type="button" class="format-change-button arrow-button"></button>
+            </div>
+            <div class="information-item hex">
+                <div class="input-field hex">
+                    <input ref="$hexCode" class="input" type="text" />
+                    <div class="title">HEX</div>
                 </div>
-                <div class="information-item hex">
-                    <div class="input-field hex">
-                        <input ref="$hexCode" class="input" type="text" />
-                        <div class="title">HEX</div>
-                    </div>
+            </div>
+            <div class="information-item rgb">
+                <div class="input-field rgb-r">
+                    <input ref="$rgb_r" class="input" type="number" step="1" min="0" max="255" />
+                    <div class="title">R</div>
+                </div>
+                <div class="input-field rgb-g">
+                    <input ref="$rgb_g" class="input" type="number" step="1" min="0" max="255" />
+                    <div class="title">G</div>
                 </div>
-                <div class="information-item rgb">
-                    <div class="input-field rgb-r">
-                        <input ref="$rgb_r" class="input" type="number" step="1" min="0" max="255" />
-                        <div class="title">R</div>
-                    </div>
-                    <div class="input-field rgb-g">
-                        <input ref="$rgb_g" class="input" type="number" step="1" min="0" max="255" />
-                        <div class="title">G</div>
-                    </div>
-                    <div class="input-field rgb-b">
-                        <input ref="$rgb_b" class="input" type="number" step="1" min="0" max="255" />
-                        <div class="title">B</div>
-                    </div>          
-                    <div class="input-field rgb-a">
-                        <input ref="$rgb_a" class="input" type="number" step="0.01" min="0" max="1" />
-                        <div class="title">A</div>
-                    </div>                                                            
+                <div class="input-field rgb-b">
+                    <input ref="$rgb_b" class="input" type="number" step="1" min="0" max="255" />
+                    <div class="title">B</div>
+                </div>          
+                <div class="input-field rgb-a">
+                    <input ref="$rgb_a" class="input" type="number" step="0.01" min="0" max="1" />
+                    <div class="title">A</div>
+                </div>                                                            
+            </div>
+            <div class="information-item hsl">
+                <div class="input-field hsl-h">
+                    <input ref="$hsl_h" class="input" type="number" step="1" min="0" max="360" />
+                    <div class="title">H</div>
                 </div>
-                <div class="information-item hsl">
-                    <div class="input-field hsl-h">
-                        <input ref="$hsl_h" class="input" type="number" step="1" min="0" max="360" />
-                        <div class="title">H</div>
-                    </div>
-                    <div class="input-field hsl-s">
-                        <input ref="$hsl_s" class="input" type="number" step="1" min="0" max="100" />
-                        <div class="postfix">%</div>
-                        <div class="title">H</div>
-                    </div>
-                    <div class="input-field hsl-l">
-                        <input ref="$hsl_l" class="input" type="number" step="1" min="0" max="100" />
-                        <div class="postfix">%</div>                        
-                        <div class="title">L</div>
-                    </div>
-                    <div class="input-field hsl-a">
-                        <input ref="$hsl_a" class="input" type="number" step="0.01" min="0" max="1" />
-                        <div class="title">A</div>
-                    </div>
+                <div class="input-field hsl-s">
+                    <input ref="$hsl_s" class="input" type="number" step="1" min="0" max="100" />
+                    <div class="postfix">%</div>
+                    <div class="title">H</div>
+                </div>
+                <div class="input-field hsl-l">
+                    <input ref="$hsl_l" class="input" type="number" step="1" min="0" max="100" />
+                    <div class="postfix">%</div>                        
+                    <div class="title">L</div>
+                </div>
+                <div class="input-field hsl-a">
+                    <input ref="$hsl_a" class="input" type="number" step="0.01" min="0" max="1" />
+                    <div class="title">A</div>
                 </div>
             </div>
-        `)
+        </div>
+        `
+    }
+
+    initialize () {
 
         this.format = 'hex'; 
     }

diff --git a/src/colorpicker/chromedevtool/ColorPalette.js b/src/colorpicker/chromedevtool/ColorPalette.js
@@ -9,18 +9,21 @@ export default class ColorPallet extends EventMachin {
         this.colorpicker = colorpicker; 
         this.initialize();
     } 
+
+    template () {
+        return `
+        <div class="color">
+            <div ref="$saturation" class="saturation">
+                <div ref="$value" class="value">
+                    <div ref="$drag_pointer" class="drag-pointer"></div>
+                </div>
+            </div>        
+        </div>        
+        `
+    }
 
     initialize () {
 
-        this.template(`
-            <div class="color">
-                <div ref="$saturation" class="saturation">
-                    <div ref="$value" class="value">
-                        <div ref="$drag_pointer" class="drag-pointer"></div>
-                    </div>
-                </div>        
-            </div>
-        `)
     }
 
     setBackgroundColor (color) {
@@ -92,6 +95,13 @@ export default class ColorPallet extends EventMachin {
         }
     } 
 
+    'mouseup document' (e) {
+        this.EventDocumentMouseUp(e);
+    }    
+
+    'mousemove document' (e) {
+        this.EventDocumentMouseMove(e);
+    }
 
     mousedown (e) {
         this.isDown = true; 

diff --git a/src/colorpicker/chromedevtool/ColorSetsChooser.js b/src/colorpicker/chromedevtool/ColorSetsChooser.js
@@ -12,65 +12,50 @@ export default class ColorSetsChooser extends EventMachin {
         this.initialize();
     } 
 
-    initialize () {
-
-        this.template(`
+    template () {
+        return `
             <div class="color-chooser">
                 <div class="color-chooser-container">
                     <div class="colorsets-item colorsets-item-header">
-                        <h1 class="title">Color Paletts</h1>
+                        <h1 class="title">Color Palettes</h1>
                         <span ref="$toggleButton" class="items">&times;</span>
                     </div>
                     <div ref="$colorsetsList" class="colorsets-list"></div>
                 </div>
             </div>
-        `)
-
-        this.refresh();
+        `
     }
 
-    refresh () {
-        this.refs.$colorsetsList.html(this.makeColorSetsList());
-    }
-
-    makeColorItemList (colors, maxCount = 5) {
-
-        var $list = new Dom('div');
-
-        for(var i = 0; i < maxCount; i++) {
-            var color = colors[i] || 'rgba(255, 255, 255, 1)';
-            var $item = $list.createChild('div', 'color-item', {
-                title: color
-            });
+    initialize () {
 
-            $item.createChild('div', 'color-view', null, {         
-                'background-color': color 
-            });
-        }
-
-        return $list;         
+        this.load();
     }
 
-    makeColorSetsList () {
-        const $div = new Dom('div');
-
+    // loadable 
+    'load $colorsetsList' () {
         // colorsets 
         const colorSets = this.colorpicker.getColorSetsList();
-        colorSets.forEach( (element, index) => {
-            if (this.colorpicker.isPaletteType() && element.edit ) {
-                // NOOP
-            } else {
-                const $item = $div.createChild('div', 'colorsets-item', {
-                    [DATA_COLORSETS_INDEX] : index 
-                });
 
-                $item.createChild('h1', 'title').html(element.name)
-
-                $item.createChild('div', 'items').append(this.makeColorItemList(element.colors, 5))
-            }
-        });
-
-        return $div; 
+        return `
+            <div>
+                ${colorSets.map( (element, index) => {
+                    return `
+                        <div class="colorsets-item" data-colorsets-index="${index}" >
+                            <h1 class="title">${element.name}</h1>
+                            <div class="items">
+                                <div>
+                                    ${element.colors.filter((color, i) => i < 5).map(color => {
+                                        color = color || 'rgba(255, 255, 255, 1)';
+                                        return  `<div class="color-item" title="${color}">
+                                                <div class="color-view" style="background-color: ${color}"></div>
+                                            </div>`
+                                    }).join('')}
+                                </div>
+                            </div>
+                        </div>`
+                }).join('')}
+            </div>
+        `
     }
 
     show () {