From 8b8fdf45ef7bdf8c00cc327f6b5a27ee5863b5e1 Mon Sep 17 00:00:00 2001 From: elioat Date: Mon, 15 Jan 2024 17:21:34 -0500 Subject: * --- js/inknswitch/ChicagoFLF.ttf | Bin 0 -> 31256 bytes js/inknswitch/index.html | 79 ++++++++++++++++++++++++++------- js/inknswitch/ink.js | 101 ++++++++++++++++++++++++++++--------------- 3 files changed, 128 insertions(+), 52 deletions(-) create mode 100644 js/inknswitch/ChicagoFLF.ttf (limited to 'js') diff --git a/js/inknswitch/ChicagoFLF.ttf b/js/inknswitch/ChicagoFLF.ttf new file mode 100644 index 0000000..60691e1 Binary files /dev/null and b/js/inknswitch/ChicagoFLF.ttf differ diff --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; } - */ - - + +

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); -- cgit 1.4.1-2-gfad0