Fix on FF and cleanup

Juicy · Dec 27, 2017 · 7ad77c1 · 7ad77c1
1 parent 372111b
commit 7ad77c1
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 24 deletions.
diff --git a/index.html b/index.html
@@ -7,7 +7,7 @@
     <link href="/src/juicy-color-picker.html" rel="import" />
 
     <style>
-        div {
+        body > div {
             width: 120px;
             padding: 5px;
             border: 1px solid #C0C0C0;

diff --git a/src/juicy-color-picker.html b/src/juicy-color-picker.html
@@ -20,21 +20,16 @@
         }
 
         input[type=color] {
-            background-color: #FFF;
-            position: absolute;
-            width: 100%;
-            height: 100%;
-            opacity: 0;
-            top: 0;
-            left: 0;
-            min-width: 0px;
+            width: 30px;
+            padding: 0px;
         }
 
         .moreColors {
             position: relative;
             margin-left: -25px;
             width: 25px;
             white-space: nowrap;
+            padding: 0px;
         }
 
         button.crayon {
@@ -46,25 +41,26 @@
         }
 
         button.crayon.transparent {
-            background-color: transparent;
+            background-color: #eee;
+            background-image: linear-gradient(45deg, #999 25%, transparent 25%, transparent 75%, #999 75%, #999), 
+            linear-gradient(45deg, #999 25%, transparent 25%, transparent 75%, #999 75%, #999);
+            background-size: 6px 6px;
+            background-position:0 0, 3px 3px;
             border: 1px solid #bbb;
-            color: red;
-            margin-left: 5px;
+            color: transparent;
+            margin-left: 2px;
+            height: 100%;
         }
 
         button.crayon:hover {
-            z-index: 2;
-            -webkit-transform: scale(1.3, 1.3);
-            transform: scale(1.3, 1.3);
+            border: 1px solid #333;
         }
     </style>
     <div class="crayons"></div>
     <div class="customCrayons">
-        <input type="text" class="val" /><button class="moreColors">
-            ...
-            <input type="color" class="color" />
-        </button>
-        <button class="editable crayon transparent" value="transparent">╱</button>
+        <input type="text" class="val" />
+        <input type="color" title="more colors" class="color" />
+        <button class="crayon transparent" value="transparent">╱</button>
     </div>
 </template>
 
@@ -135,12 +131,9 @@
             attributeChangedCallback(name, oldVal, newVal) {
                 switch (name) {
                     case "value":
-                        var event = new CustomEvent("change", { "target": this, oldValue: oldVal, newValue: newVal });
-
                         this.value = newVal;
                         this.$.valueInput.value = newVal;
                         this.$.colorInput.value = newVal;
-                        this.dispatchEvent(event);
                         break;
                     case "pallete":
                         this.colors = palletes[newVal];
@@ -162,10 +155,16 @@
                 this.renderColors();
 
                 this.$.valueInput.addEventListener("change", this.setColor.bind(this));
+                this.$.colorInput.addEventListener("change", this.setColor.bind(this));
             }
 
             setColor(e) {
-                this.setAttribute("value", e.target.value);
+                const oldValue = this.getAttribute("value"); 
+                const newValue = e.target.value;
+
+                this.setAttribute("value", newValue);                
+                var event = new CustomEvent("change", { "target": this, oldValue, newValue });
+                this.dispatchEvent(event);
             }
 
             renderColors() {