diff options
Diffstat (limited to 'js/inknswitch')
| -rw-r--r-- | js/inknswitch/ChicagoFLF.ttf | bin | 0 -> 31256 bytes | |||
| -rw-r--r-- | js/inknswitch/index.html | 79 | ||||
| -rw-r--r-- | js/inknswitch/ink.js | 101 |
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); |