1 files changed, 65 insertions, 36 deletions

diff --git a/js/inknswitch/ink.js b/js/inknswitch/ink.js
index 03f5991..70a2231 100644
--- a/js/inknswitch/ink.js
+++ b/js/inknswitch/ink.js
@@ -6,8 +6,8 @@ const ctx = canvas.getContext('2d');
 const noteArea = document.getElementById('noteArea');
 noteArea.value = localStorage.getItem('noteContent') || '';
 
-noteArea.style.width = '100vw';
-noteArea.style.height = '100vh';
+noteArea.style.width = '98vw';
+noteArea.style.height = '94vh';
 noteArea.style.boxSizing = 'border-box';
 noteArea.style.position = 'absolute';
 noteArea.style.backgroundColor = 'rgba(255, 255, 255, 0.75)';
@@ -63,36 +63,48 @@ const saveCanvasImage = () => {
     localStorage.setItem('canvasImage', dataUrl);
 };
 
-canvas.addEventListener('mousedown', startDrawing);
-canvas.addEventListener('mousemove', (e) => {
+const handleMouseDown = (e) => {
+    startDrawing(e);
+};
+
+const handleMouseMove = (e) => {
     if (drawing) {
         draw(e);
     }
-});
-canvas.addEventListener('mouseup', (e) => {
+};
+
+const handleMouseUp = (e) => {
     if (drawing) {
         draw(e);
         drawing = false;
         saveCanvasImage();
     }
-});
+};
 
-canvas.addEventListener('touchstart', function(e) {
+const handleTouchStart = (e) => {
     e.preventDefault();
     startDrawing(e.touches[0]);
-}, false);
+};
 
-canvas.addEventListener('touchmove', function(e) {
+const handleTouchMove = (e) => {
     e.preventDefault();
     if (drawing) {
         draw(e.touches[0]);
     }
-}, false);
+};
 
-canvas.addEventListener('touchend', function(e) {
+const handleTouchEnd = (e) => {
     e.preventDefault();
-    stopDrawing();
-}, false);
+    saveCanvasImage();
+};
+
+canvas.addEventListener('mousedown', handleMouseDown);
+canvas.addEventListener('mousemove', handleMouseMove);
+canvas.addEventListener('mouseup', handleMouseUp);
+
+canvas.addEventListener('touchstart', handleTouchStart, false);
+canvas.addEventListener('touchmove', handleTouchMove, false);
+canvas.addEventListener('touchend', handleTouchEnd, false);
 
 const savedImage = localStorage.getItem('canvasImage');
 if (savedImage) {
@@ -111,12 +123,9 @@ const toggle = () => {
         noteArea.style.pointerEvents = 'none';
         noteArea.style.backgroundColor = 'rgba(255, 255, 255, 0.25)';
         noteArea.style.color = '#bbb';
-        canvas.style.cursor = 'pointer';
+        canvas.style.cursor = 'crosshair';
         canvas.focus();
         noteArea.blur();
-        localStorage.setItem('noteContents', noteArea.value);
-        localStorage.setItem('noteContent', noteArea.value);
-        // toggleButton.textContent = 'Write'
     } else {
         // Note mode
         canvas.style.pointerEvents = 'none';
@@ -125,27 +134,45 @@ const toggle = () => {
         noteArea.style.color = 'black';
         canvas.blur();
         noteArea.focus();
-        localStorage.setItem('noteContents', noteArea.value);
-        localStorage.setItem('noteContent', noteArea.value);
-        // toggleButton.textContent = 'Draw'
     }
+    localStorage.setItem('noteContents', noteArea.value);
+    localStorage.setItem('noteContent', noteArea.value);
+    document.getElementById('mode').innerHTML = canvas.style.pointerEvents === 'none' ? 'typing' : 'drawing';
 };
 
-/* 
-// This button doesn't work great
-// the hope was that it'd work on mobile
-// one day I'll fix this...one day
-const toggleButton = document.getElementById('toggleButton');
-toggleButton.style.pointerEvents = 'auto';
-toggleButton.addEventListener('click', toggleMode);
-toggleButton.addEventListener('touchend', toggleMode);
-
-function toggleMode() {
-    toggle();
-}
-*/
+const toggleButton = document.getElementById('toggle');
+toggleButton.addEventListener('click', toggle);
+
+const helpText = "This is a modal note taking tool. With it, you can type text that'll be saved to the browser, and you can draw pictures that'll also be saved to the browser. You are in typing mode right now. To toggle between modes tap either cmd + d, ctrl + d or cmd + 1, or ctrl + 1. When in drawing mode, tap c to clear the canvas, tap s to save the contents of the canvas to a png."
 
-document.addEventListener('keydown', (e) => {
+const handleSelectChange = () => {
+    if (selectElement.value === 'clear') {
+        const confirmClear = confirm('Do you really want to clear the canvas?');
+        if (confirmClear) {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            localStorage.removeItem('canvasImage');
+        }
+    } else if (selectElement.value === 'save') {
+        const confirmDownload = confirm('Do you really want to save the canvas as an image?');
+        if (confirmDownload) {
+            const dataUrl = canvas.toDataURL();
+            const a = document.createElement('a');
+            a.href = dataUrl;
+            a.download = 'canvas.png';
+            a.click();
+        }
+    } else if (selectElement.value === 'help') {
+        alert(helpText);
+    }
+
+    // Reset select element to default option
+    selectElement.selectedIndex = 0;
+};
+
+const selectElement = document.getElementById('menu');
+selectElement.addEventListener('change', handleSelectChange);
+
+const handleKeyDown = (e) => {
     // Cmd or Ctrl and D/Cmd or Ctrl and 1 to toggle modes
     if (((e.metaKey || e.ctrlKey) && e.key === 'd') || ((e.metaKey || e.ctrlKey) && e.key === '1')) {
         e.preventDefault();
@@ -171,4 +198,6 @@ document.addEventListener('keydown', (e) => {
     }
 
     localStorage.setItem('noteContent', noteArea.value);
-});
\ No newline at end of file
+};
+
+document.addEventListener('keydown', handleKeyDown);