diff options
Diffstat (limited to 'js/inknswitch')
| -rw-r--r-- | js/inknswitch/index.html | 13 | ||||
| -rw-r--r-- | js/inknswitch/ink.js | 48 |
2 files changed, 45 insertions, 16 deletions
diff --git a/js/inknswitch/index.html b/js/inknswitch/index.html index 91f9ff2..535c41d 100644 --- a/js/inknswitch/index.html +++ b/js/inknswitch/index.html @@ -27,9 +27,22 @@ 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; + } + #toggleButton:hover { + cursor: pointer; + } </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 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> <script src="ink.js"></script> diff --git a/js/inknswitch/ink.js b/js/inknswitch/ink.js index bd5fb6d..58b923b 100644 --- a/js/inknswitch/ink.js +++ b/js/inknswitch/ink.js @@ -1,7 +1,7 @@ const canvas = document.getElementById('drawingArea'); const ctx = canvas.getContext('2d'); -const noteArea = document.getElementById('noteArea'); +const noteArea = document.getElementById('noteArea'); noteArea.value = localStorage.getItem('noteContent') || ''; noteArea.style.width = '100vw'; @@ -20,7 +20,7 @@ let drawing = false; let prevX = 0; let prevY = 0; -canvas.style.pointerEvents = 'none'; // Disable mouse events on the canvas +canvas.style.pointerEvents = 'none'; const getCursorPosition = (e) => { const rect = canvas.getBoundingClientRect(); @@ -62,13 +62,11 @@ const saveCanvasImage = () => { }; canvas.addEventListener('mousedown', startDrawing); - canvas.addEventListener('mousemove', (e) => { if (drawing) { draw(e); } }); - canvas.addEventListener('mouseup', (e) => { if (drawing) { draw(e); @@ -86,22 +84,40 @@ if (savedImage) { img.src = savedImage; } +// Toggle between drawing and note mode +const toggle = () => { + if (canvas.style.pointerEvents === 'none') { + // Drawing mode + canvas.style.pointerEvents = 'auto'; + noteArea.style.pointerEvents = 'none'; + noteArea.style.backgroundColor = 'rgba(255, 255, 255, 0.25)'; + noteArea.style.color = '#bbb'; + canvas.style.cursor = 'pointer'; + 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' + } +}; + +const toggleButton = document.getElementById('toggleButton'); +toggleButton.style.pointerEvents = 'auto'; +toggleButton.addEventListener('click', toggleMode); +toggleButton.addEventListener('touchend', toggleMode); + +function toggleMode() { + toggle(); +} + document.addEventListener('keydown', (e) => { // Cmd or Ctrl and D key to toggle modes if ((e.metaKey || e.ctrlKey) && e.key === 'd') { e.preventDefault(); - if (canvas.style.pointerEvents === 'none') { - canvas.style.pointerEvents = 'auto'; - noteArea.style.pointerEvents = 'none'; - noteArea.style.backgroundColor = 'rgba(255, 255, 255, 0.25)'; - noteArea.style.color = '#bbb'; - canvas.style.cursor = 'pointer'; - } else { - canvas.style.pointerEvents = 'none'; - noteArea.style.pointerEvents = 'auto'; - noteArea.style.backgroundColor = 'rgba(255, 255, 255, 0.75)'; - noteArea.style.color = 'black'; - } + toggle(); } // C key to clear the canvas |