diff options
| author | elioat <elioat@tilde.institute> | 2024-01-13 07:55:59 -0500 |
|---|---|---|
| committer | elioat <elioat@tilde.institute> | 2024-01-13 07:55:59 -0500 |
| commit | 11b0eb351dfae0467df2e94cc1ff0073091e4104 (patch) | |
| tree | 774aa2c13bd3cdd4888123261a589f8e53e61e76 | |
| parent | c31a29fa54b77d4bd238ac7d576c190c0c46d7cb (diff) | |
| download | tour-11b0eb351dfae0467df2e94cc1ff0073091e4104.tar.gz | |
still doesn't work great on mobile...but, do I care?
| -rw-r--r-- | js/inknswitch/index.html | 4 | ||||
| -rw-r--r-- | js/inknswitch/ink.js | 24 |
2 files changed, 20 insertions, 8 deletions
diff --git a/js/inknswitch/index.html b/js/inknswitch/index.html index 4fa3356..b0fe0a0 100644 --- a/js/inknswitch/index.html +++ b/js/inknswitch/index.html @@ -45,8 +45,8 @@ </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 images that'll also be saved to the browser. You are in typing mode right now. To toggle between modes tap cmd or ctrl + d. When in drawing mode, tap c to clear the canvas, tap s to save the contents of the canvas to a png."></textarea> - <canvas id="drawingArea" width="500" height="500"></canvas> + <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 images that'll also be saved to the browser. You are in typing mode right now. To toggle between modes tap either or 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> + <canvas id="drawingArea" width="500" height="500" tabindex="0"></canvas> <script src="ink.js"></script> </body> </html> \ No newline at end of file diff --git a/js/inknswitch/ink.js b/js/inknswitch/ink.js index 317dbcb..03f5991 100644 --- a/js/inknswitch/ink.js +++ b/js/inknswitch/ink.js @@ -1,3 +1,5 @@ +document.getElementById('noteArea').focus(); // ensures that textarea is focused when the page loads + const canvas = document.getElementById('drawingArea'); const ctx = canvas.getContext('2d'); @@ -110,18 +112,29 @@ const toggle = () => { noteArea.style.backgroundColor = 'rgba(255, 255, 255, 0.25)'; noteArea.style.color = '#bbb'; canvas.style.cursor = 'pointer'; - toggleButton.textContent = 'Write' + canvas.focus(); + noteArea.blur(); + localStorage.setItem('noteContents', noteArea.value); + localStorage.setItem('noteContent', noteArea.value); + // toggleButton.textContent = 'Write' } else { // Note mode canvas.style.pointerEvents = 'none'; noteArea.style.pointerEvents = 'auto'; noteArea.style.backgroundColor = 'rgba(255, 255, 255, 0.75)'; noteArea.style.color = 'black'; - toggleButton.textContent = 'Draw' + canvas.blur(); + noteArea.focus(); + localStorage.setItem('noteContents', noteArea.value); + localStorage.setItem('noteContent', noteArea.value); + // toggleButton.textContent = 'Draw' } }; -/* +/* +// 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); @@ -132,10 +145,9 @@ function toggleMode() { } */ - document.addEventListener('keydown', (e) => { - // Cmd or Ctrl and D key to toggle modes - if ((e.metaKey || e.ctrlKey) && e.key === 'd') { + // 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(); toggle(); } |