Added colorPicker input(for any color)

- Added clear canvas tool
souravtecken · Mar 26, 2020 · 2f4b682 · 2f4b682
1 parent b8bcf63
commit 2f4b682
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 8 deletions.
diff --git a/css/index.css b/css/index.css
@@ -54,4 +54,14 @@ canvas {
 
 #colorPalette {
     padding: 0 !important;
+}
+
+.colorOption .rainbow {
+    background-image: linear-gradient( red,orange,yellow,green,blue,indigo,violet);    
+}
+
+#colorPicker {
+    border: none;
+    background-color: transparent;
+    outline: none;
 }
diff --git a/index.html b/index.html
@@ -12,17 +12,17 @@
 
 <body>    
     <div id="toolBarContainer" class="ui mini left fixed vertical menu">
-        <div class="toolButtonBox">
+        <div id="pencilTool" class="toolButtonBox">
             <button class="toolButton">
                 <i class="pencil icon"></i>
             </button>
         </div>
-        <div class="toolButtonBox">
+        <div id="brushTool" class="toolButtonBox">
             <button class="toolButton">
                 <i class="paint brush icon"></i>
             </button>
         </div>
-        <div class="ui left pointing dropdown link toolButtonBox">
+        <div id="colorPaletteTool" class="ui left pointing dropdown link toolButtonBox">
             <div class="menu">
                 <div id="colorPalette" class="item">
                     <table class="ui very basic collapsing celled table">                                                                                                                                                                                                                                                                                                                                         
@@ -53,6 +53,7 @@
                             </tr>
                             <tr>
                                 <td class="colorOption"><div class="ui black empty circular big label"></div></td>
+                                <td class="colorOption"><div class="ui rainbow empty circular big label"><input id="colorPicker" type="color"/></div></td>
                             </tr>                            
                         </tbody>
                     </table>
@@ -63,12 +64,12 @@
             </button>
         </div>
 
-        <div class="toolButtonBox">
+        <div id="eraserTool" class="toolButtonBox">
             <button class="toolButton">
                 <i class="eraser icon"></i>
             </button>
         </div>
-        <div class="toolButtonBox">
+        <div id="clearTool" class="toolButtonBox">
             <button class="toolButton">
                 <i class="trash icon"></i>
             </button>

diff --git a/js/index.js b/js/index.js
@@ -29,16 +29,34 @@ function initToolBox(){
         .dropdown();
 }
 
-$(".colorOption").click((event) => {
+$('.colorOption').click((event) => {
+    event.stopPropagation(); // To prevent dropdown from closing
     const child = event.target.querySelector('div');
+    const colorPicker = event.target.querySelector('input');
+    if (colorPicker !== null){
+        $(colorPicker).click();
+        return;
+    }
     let color;
     if(child === null)
-        color = window.getComputedStyle(event.target, null).getPropertyValue("background-color");
+        color = window.getComputedStyle(event.target, null).getPropertyValue('background-color');
     else
-        color = window.getComputedStyle(event.target.querySelector('div'), null).getPropertyValue("background-color");
+        color = window.getComputedStyle(event.target.querySelector('div'), null).getPropertyValue('background-color');
     setStrokeColor(ctx, color);
     setFillColor(ctx, color);
+    $('#colorPaletteTool button').css('color', color);
 });
 
+$('#colorPicker').on('input', ((event) => {
+    const color = event.target.value;
+    setStrokeColor(ctx, color);
+    setFillColor(ctx, color);
+    $('#colorPaletteTool button').css('color', color);
+}))
+
+$('#clearTool').click((event) => {
+    initCanvas(ctx);
+})
+
 initCanvas(ctx);
 initToolBox();