*

author: elioat <hi@eli.li> 2024-01-15 17:21:34 -0500
committer: elioat <hi@eli.li> 2024-01-15 17:21:34 -0500
commit: 8b8fdf45ef7bdf8c00cc327f6b5a27ee5863b5e1 (patch)
tree: c6f8e2de804697a83828dcc64bee0a1b5ecc395b
parent: b30eb732887378ac07e85f0f644a3183d52b0a7a (diff)
download: tour-8b8fdf45ef7bdf8c00cc327f6b5a27ee5863b5e1.tar.gz
3 files changed, 128 insertions, 52 deletions
diff --git a/js/inknswitch/ChicagoFLF.ttf b/js/inknswitch/ChicagoFLF.ttf
new file mode 100644
index 0000000..60691e1
--- /dev/null
+++ b/js/inknswitch/ChicagoFLF.ttf
Binary files differdiff --git a/js/inknswitch/index.html b/js/inknswitch/index.html
index 0371a18..3f4fbda 100644
--- a/js/inknswitch/index.html
+++ b/js/inknswitch/index.html
@@ -11,15 +11,21 @@
             font-weight: normal;
             font-style: normal;
         }
+        @font-face {
+            font-family: 'ChicagoFLF';
+            src: url('./ChicagoFLF.ttf') format('truetype');
+            font-weight: normal;
+            font-style: normal;
+        }
         body {
             margin: 0;
             padding: 0;
-            font-family: 'Shantell Sans', cursive;
+            font-family: 'Shantell Sans', sans-serif;
         }
         textarea {
-            font-family: 'Shantell Sans', cursive;
+            font-family: 'Shantell Sans', sans-serif;
             font-size: 1.75em;
-            padding: 1em;
+            padding: 2em 1em;
             border: 0;
             outline: 0;
             width: 100%;
@@ -32,25 +38,66 @@
             margin: 0 auto;
             display: block;
         }
-        /*
-        #toggleButton {
-            border: 1px solid black;
-            background-color: transparent;
-            padding: 0.5em 1em;
-            position: fixed;
-            top: 10px;
-            right: 10px;
-            z-index: 1000;
+        #toolBar {
+            font-family: 'ChicagoFLF', sans-serif;
+            position: absolute;
+            top: 0;
+            left: 0;
+            z-index: 9999;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 2em;
+            background-color: white;
+            color: black;
+            font-size: 1.25em;
+            padding: 0 0.5em;
+            box-sizing: border-box;
+            border-bottom: 1px solid black;
         }
-        #toggleButton:hover {
+        select {
+            appearance: none;
+            -webkit-appearance: none;
+            -moz-appearance: none;
+            background: transparent;
+            border: none;
+            outline: none;
+            box-shadow: none;
+            padding: 0;
+            margin: 0;
+            font-family: inherit;
+            color: inherit;
+            font-size: inherit;
+        }
+        select, button {
+            font-family: 'ChicagoFLF', sans-serif;
+            background-color: transparent;
+            border: 0;
+            outline: 0;
+            padding: 0.5em;
+            font-size: 1em;
             cursor: pointer;
+            color: black;
         }
-        */
     </style>
 </head>
 <body>
-    <!-- <button id="toggleButton">Toggle</button> -->
-    <textarea id="noteArea" rows="10" cols="30" placeholder="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."></textarea>
+    <div id="toolBar">
+        <p>mode: <span id="mode">typing</span></p>
+        <div>
+            <select name="menu" id="menu">
+                <option value="null">menu</option>
+                <option value="clear">clear</option>
+                <option value="save">save</option>
+                <option value="help">help</option>
+            </select>
+            <button id="toggle">switch!</button>
+        </div>
+    </div>
+    <textarea id="noteArea" rows="10" cols="30" placeholder="Type text here."></textarea>
     <canvas id="drawingArea" width="500" height="500" tabindex="0"></canvas>
     <script src="ink.js"></script>
 </body>
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);
author	elioat <hi@eli.li>	2024-01-15 17:21:34 -0500
committer	elioat <hi@eli.li>	2024-01-15 17:21:34 -0500
commit	8b8fdf45ef7bdf8c00cc327f6b5a27ee5863b5e1 (patch)
tree	c6f8e2de804697a83828dcc64bee0a1b5ecc395b
parent	b30eb732887378ac07e85f0f644a3183d52b0a7a (diff)
download	tour-8b8fdf45ef7bdf8c00cc327f6b5a27ee5863b5e1.tar.gz