index.html (3111B)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Freestyle</title> 8 </head> 9 <body style="margin:0;padding:0;height:100vh;width:100vw;"> 10 <div id="board" style="height: 100%;width: 100%;background-color: gainsboro;"></div> 11 <script type="text/javascript"> 12 let board = document.querySelector('#board') 13 let counter = 0; 14 15 16 function moveDone(e) { 17 e.preventDefault() 18 if (!moving.value) return 19 let dashboard = document.querySelector('#dashboard') 20 if (!dashboard) return 21 moving.value = false 22 let y = e.clientY 23 let wh = window.innerHeight 24 if (y > wh * size.value.LimitHalfSmall) { 25 dashboard.style.top = wh * size.value.SnapSmall + 'px' 26 } else if (y < wh * size.value.LimitFullHalf) { 27 dashboard.style.top = wh * size.value.SnapFull + 'px' 28 } else { 29 dashboard.style.top = wh * size.value.SnapHalf + 'px' 30 } 31 } 32 33 34 35 36 board.addEventListener('click', (e) => { 37 e.preventDefault() 38 if (e.target.getAttribute('id') !== 'board') return 39 console.log(e.target) 40 let x = e.clientX 41 let y = e.clientY 42 let note = document.createElement('div') 43 note.innerHTML = ` 44 <div class="toolbar">- X</div> 45 <div class="notewrap"><textarea style="background-color: gainsboro;"></textarea></div> 46 ` 47 note.id = 'new-note-' + counter++ 48 note.style.position = 'fixed' 49 note.style.border = '1px solid grey' 50 note.style.backgroundClip = 'gainsboro' 51 note.style.left = (x - 15) + 'px' 52 note.style.top = (y - 15) + 'px' 53 note.style.width = 'fit-content' 54 note.style.height = 'fit-content' 55 board.appendChild(note) 56 let textarea = document.querySelector(`#${note.id} .notewrap textarea`) 57 let toolbar = document.querySelector(`#${note.id} .toolbar`) 58 textarea.focus() 59 let moving = false 60 toolbar.addEventListener('pointerdown', (e) => { 61 e.preventDefault() 62 moving = true 63 }, true) 64 function moveDone(e) { 65 moving = false 66 } 67 document.addEventListener('pointercancel', moveDone, true) 68 document.addEventListener('pointerup', moveDone, true) 69 document.addEventListener('pointermove', (e) => { 70 e.preventDefault() 71 if (!note) return 72 if (!moving) return 73 let y = e.clientY 74 let x = e.clientX 75 note.style.top = (y - 10) + 'px' 76 note.style.left = (x - 10) + 'px' 77 }, true) 78 79 80 }) 81 </script> 82 </body> 83 </html>