#10 removes locking functionality

FAC-11 · Nov 17, 2017 · 02400af · 02400af
1 parent 8420028
commit 02400af
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 44 deletions.
diff --git a/public/draw.js b/public/draw.js
@@ -7,8 +7,17 @@
 
   fabric.Object.prototype.transparentCorners = false;
 
-  var drawingModeEl = $('drawing-mode'),
-    drawingOptionsEl = $('drawing-mode-options'),
+      canvas.setWidth = 500;
+  // make canvas responsive
+  window.addEventListener('resize', function() {
+    function resizeCanvas() {
+      var container = $('dual-input');
+      console.log(container.offsetWidth);
+    }
+    resizeCanvas();
+  }, true);
+
+    var drawingOptionsEl = $('drawing-mode-options'),
     drawingColorEl = $('drawing-color'),
     drawingLineWidthEl = $('drawing-line-width'),
     clearEl = $('clear-canvas'),
@@ -56,31 +65,6 @@
     canvas.clear()
   };
 
-  drawingModeEl.onclick = function(e) {
-    e.preventDefault();
-    imgEl = drawingModeEl.getElementsByTagName('img')[0];
-    canvas.isDrawingMode = !canvas.isDrawingMode;
-    if (canvas.isDrawingMode) {
-      imgEl.src = '/padlock-locked.png';
-      drawingOptionsEl.style.display = '';
-    }
-    else {
-      imgEl.src = '/padlock-unlocked.png';
-      drawingOptionsEl.style.display = 'none';
-    }
-  };
-
-  var brushOptions = document.getElementsByName('brush-options');
-  brushOptions.forEach(function(option) {
-    option.addEventListener('click', function(e) {
-      canvas.freeDrawingBrush = new fabric[this.value + 'Brush'](canvas);
-      if (canvas.freeDrawingBrush) {
-        canvas.freeDrawingBrush.color = drawingColorEl.value;
-        canvas.freeDrawingBrush.width = parseInt(drawingLineWidthEl.value, 10) || 1;
-      }
-    });
-  });
-
   drawingColorEl.onchange = function() {
     canvas.freeDrawingBrush.color = this.value;
   };

diff --git a/public/padlock-locked.png b/public/padlock-locked.png
diff --git a/public/padlock-unlocked.png b/public/padlock-unlocked.png
diff --git a/src/views/partials/draw.hbs b/src/views/partials/draw.hbs
@@ -1,21 +1,24 @@
-<canvas id="c" width="500" height="500" style="border:1px solid #aaa"></canvas>
+<div class="drawing-input">
+    <canvas id="c" width="200" height="100" style="border:1px solid #aaa"></canvas>
 
-<div style="display: inline-block; margin-left: 10px">
-    <button id="save-canvas" class="btn btn-info bn bg-transparent w3 h3 pointer" data-user-id="{{userId}}">
-    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M13 3h2.996v5h-2.996v-5zm11 1v20h-24v-24h20l4 4zm-17 5h10v-7h-10v7zm15-4.171l-2.828-2.829h-.172v9h-14v-9h-3v20h20v-17.171z"/></svg>
-        Save
-    </button><br>
-    <button id="drawing-mode" class="btn btn-info bn bg-transparent w3 h3 pointer"><img src="/padlock-locked.png"></button><br>
-    <button id="clear-canvas" class="btn btn-info bn bg-transparent w3 h3 pointer">
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 3.752l-4.423-3.752-7.771 9.039-7.647-9.008-4.159 4.278c2.285 2.885 5.284 5.903 8.362 8.708l-8.165 9.447 1.343 1.487c1.978-1.335 5.981-4.373 10.205-7.958 4.304 3.67 8.306 6.663 10.229 8.006l1.449-1.278-8.254-9.724c3.287-2.973 6.584-6.354 8.831-9.245z"/></svg>
-        Clear
-    </button><br>
+    <div style="display: inline-block; margin-left: 10px">
+        <div class="flex">
+            <button id="save-canvas" class="btn btn-info bn bg-transparent w3 h3 f5 pointer" data-user-id="{{userId}}">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M13 3h2.996v5h-2.996v-5zm11 1v20h-24v-24h20l4 4zm-17 5h10v-7h-10v7zm15-4.171l-2.828-2.829h-.172v9h-14v-9h-3v20h20v-17.171z"/></svg>
+                <span class="f6">Save</span>
+            </button><br>
+            <button id="clear-canvas" class="btn btn-info bn bg-transparent w3 h3 f5 pointer">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 3.752l-4.423-3.752-7.771 9.039-7.647-9.008-4.159 4.278c2.285 2.885 5.284 5.903 8.362 8.708l-8.165 9.447 1.343 1.487c1.978-1.335 5.981-4.373 10.205-7.958 4.304 3.67 8.306 6.663 10.229 8.006l1.449-1.278-8.254-9.724c3.287-2.973 6.584-6.354 8.831-9.245z"/></svg>
+                <span class="f6">Clear</span>
+            </button><br>
+        </div>
 
-  <div id="drawing-mode-options">
-    <label for="drawing-line-width">Line width:</label>
-    <span class="info">30</span><input type="range" value="30" min="0" max="150" id="drawing-line-width"><br>
+        <div id="drawing-mode-options">
+            <label for="drawing-line-width">Line width:</label>
+            <span class="info">30</span><input type="range" value="30" min="0" max="150" id="drawing-line-width"><br>
 
-    <label for="drawing-color">Line color:</label>
-    <input type="color" value="#005E7A" id="drawing-color"><br>
-  </div>
+            <label for="drawing-color">Line color:</label>
+            <input type="color" value="#005E7A" id="drawing-color"><br>
+        </div>
+    </div>
 </div>