diff options
| author | elioat <elioat@tilde.institute> | 2024-01-12 22:02:57 -0500 |
|---|---|---|
| committer | elioat <elioat@tilde.institute> | 2024-01-12 22:02:57 -0500 |
| commit | 321c41ffcc0d582bf63c4d68fb145672673ef3bf (patch) | |
| tree | 5161cec306370a5bbfe45240155fcd5608bea882 /js | |
| parent | 3c6b5bad54e05eec4c5da37c1e4293bb862398ab (diff) | |
| download | tour-321c41ffcc0d582bf63c4d68fb145672673ef3bf.tar.gz | |
*
Diffstat (limited to 'js')
| -rw-r--r-- | js/inknswitch/index.html | 6 | ||||
| -rw-r--r-- | js/inknswitch/ink.js | 40 |
2 files changed, 43 insertions, 3 deletions
diff --git a/js/inknswitch/index.html b/js/inknswitch/index.html index 535c41d..44e3808 100644 --- a/js/inknswitch/index.html +++ b/js/inknswitch/index.html @@ -27,6 +27,7 @@ margin: 0 auto; display: block; } + /* #toggleButton { border: 1px solid black; background-color: transparent; @@ -39,11 +40,12 @@ #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> + <!-- <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. Tap with two fingers to switch between modes on touchscreens."></textarea> <canvas id="drawingArea" width="500" height="500"></canvas> <script src="ink.js"></script> </body> diff --git a/js/inknswitch/ink.js b/js/inknswitch/ink.js index 58b923b..3a48ce6 100644 --- a/js/inknswitch/ink.js +++ b/js/inknswitch/ink.js @@ -75,6 +75,23 @@ canvas.addEventListener('mouseup', (e) => { } }); +canvas.addEventListener('touchstart', function(e) { + e.preventDefault(); + startDrawing(e.touches[0]); +}, false); + +canvas.addEventListener('touchmove', function(e) { + e.preventDefault(); + if (drawing) { + draw(e.touches[0]); + } +}, false); + +canvas.addEventListener('touchend', function(e) { + e.preventDefault(); + stopDrawing(); +}, false); + const savedImage = localStorage.getItem('canvasImage'); if (savedImage) { const img = new Image(); @@ -104,6 +121,7 @@ const toggle = () => { } }; +/* const toggleButton = document.getElementById('toggleButton'); toggleButton.style.pointerEvents = 'auto'; toggleButton.addEventListener('click', toggleMode); @@ -112,6 +130,7 @@ toggleButton.addEventListener('touchend', toggleMode); function toggleMode() { toggle(); } +*/ document.addEventListener('keydown', (e) => { // Cmd or Ctrl and D key to toggle modes @@ -139,4 +158,23 @@ document.addEventListener('keydown', (e) => { } localStorage.setItem('noteContent', noteArea.value); -}); \ No newline at end of file +}); + +let touchStartTimestamp; +let touchStartCount; + +document.addEventListener('touchstart', function(e) { + touchStartTimestamp = Date.now(); + touchStartCount = e.touches.length; +}, false); + +document.addEventListener('touchend', function(e) { + const touchEndTimestamp = Date.now(); + const touchEndCount = e.touches.length; + + // Check if the touch event was a two-finger tap + if (touchStartCount === 2 && touchEndCount === 0 && touchEndTimestamp - touchStartTimestamp < 500) { + // Two-finger tap detected + toggleMode(); + } +}, false); \ No newline at end of file |