Last active
July 10, 2023 19:47
-
-
Save joegaffey/643ab30187028cb5bba9ae9478daca9b to your computer and use it in GitHub Desktop.
Basic annotation UI// source https://jsbin.com/xogegejowe
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name="description" content="Basic annotation UI"> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <p> | |
| I will arise and go now, and go to Innisfree, | |
| And a small cabin build there, of clay and wattles made; | |
| Nine bean-rows will I have there, a hive for the honey-bee, | |
| And live alone in the bee-loud glade. | |
| </p> | |
| <p> | |
| And I shall have some peace there, for peace comes dropping slow, | |
| Dropping from the veils of the morning to where the cricket sings; | |
| There midnight’s all a glimmer, and noon a purple glow, | |
| And evening full of the linnet’s wings. | |
| </p> | |
| <p> | |
| I will arise and go now, for always night and day | |
| I hear lake water lapping with low sounds by the shore; | |
| While I stand on the roadway, or on the pavements grey, | |
| I hear it in the deep heart’s core. | |
| </p> | |
| <style id="jsbin-css"> | |
| .selected { | |
| background-color: orange; | |
| } | |
| .tooltip { | |
| display: none; | |
| background-color: black; | |
| color: white; | |
| padding: 4px; | |
| position: absolute; | |
| margin-left: 10; | |
| margin-top: 15px; | |
| } | |
| .selected:hover .tooltip { | |
| display: inline-block; | |
| } | |
| p { | |
| /* position: relative; */ | |
| font-family: helvetica; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script id="jsbin-javascript"> | |
| let timer; | |
| function debounce(callback, delay) { | |
| timer = setTimeout(() => { | |
| callback() | |
| }, delay); | |
| } | |
| function handleSelection(){ | |
| let selection = document.getSelection(); | |
| let selectedText = selection.toString(); | |
| if(selectedText.trim().length > 1 && selection.baseNode == selection.extentNode) { | |
| let range = selection.getRangeAt(0); | |
| selection.empty(); | |
| let comment = prompt('Enter comment'); | |
| if(comment.length < 1) { | |
| return; | |
| } | |
| makeComment(range, comment); | |
| } | |
| } | |
| function makeComment(range, comment) { | |
| let span = document.createElement('span'); | |
| span.className = 'selected'; | |
| span.appendChild(range.extractContents()); | |
| range.insertNode(span); | |
| let tooltip = document.createElement('span'); | |
| tooltip.className = 'tooltip'; | |
| tooltip.innerText = comment; | |
| span.prepend(tooltip); | |
| } | |
| document.onselectionchange = () => { | |
| debounce(handleSelection, 1000); | |
| }; | |
| </script> | |
| <script id="jsbin-source-css" type="text/css">.selected { | |
| background-color: orange; | |
| } | |
| .tooltip { | |
| display: none; | |
| background-color: black; | |
| color: white; | |
| padding: 4px; | |
| position: absolute; | |
| margin-left: 10; | |
| margin-top: 15px; | |
| } | |
| .selected:hover .tooltip { | |
| display: inline-block; | |
| } | |
| p { | |
| /* position: relative; */ | |
| font-family: helvetica; | |
| }</script> | |
| <script id="jsbin-source-javascript" type="text/javascript"> | |
| let timer; | |
| function debounce(callback, delay) { | |
| timer = setTimeout(() => { | |
| callback() | |
| }, delay); | |
| } | |
| function handleSelection(){ | |
| let selection = document.getSelection(); | |
| let selectedText = selection.toString(); | |
| if(selectedText.trim().length > 1 && selection.baseNode == selection.extentNode) { | |
| let range = selection.getRangeAt(0); | |
| selection.empty(); | |
| let comment = prompt('Enter comment'); | |
| if(comment.length < 1) { | |
| return; | |
| } | |
| makeComment(range, comment); | |
| } | |
| } | |
| function makeComment(range, comment) { | |
| let span = document.createElement('span'); | |
| span.className = 'selected'; | |
| span.appendChild(range.extractContents()); | |
| range.insertNode(span); | |
| let tooltip = document.createElement('span'); | |
| tooltip.className = 'tooltip'; | |
| tooltip.innerText = comment; | |
| span.prepend(tooltip); | |
| } | |
| document.onselectionchange = () => { | |
| debounce(handleSelection, 1000); | |
| };</script></body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .selected { | |
| background-color: orange; | |
| } | |
| .tooltip { | |
| display: none; | |
| background-color: black; | |
| color: white; | |
| padding: 4px; | |
| position: absolute; | |
| margin-left: 10px; | |
| margin-top: 20px; | |
| } | |
| .selected:hover .tooltip { | |
| display: inline-block; | |
| } | |
| p { | |
| font-family: helvetica; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| let timer; | |
| function debounce(callback, delay) { | |
| timer = setTimeout(() => { | |
| callback() | |
| }, delay); | |
| } | |
| function handleSelection(){ | |
| let selection = document.getSelection(); | |
| let selectedText = selection.toString(); | |
| if(selectedText.trim().length > 1 && selection.baseNode == selection.extentNode) { | |
| let range = selection.getRangeAt(0); | |
| selection.empty(); | |
| let comment = prompt('Enter comment'); | |
| if(comment.length < 1) { | |
| return; | |
| } | |
| makeComment(range, comment); | |
| } | |
| } | |
| function makeComment(range, comment) { | |
| let span = document.createElement('span'); | |
| span.className = 'selected'; | |
| span.appendChild(range.extractContents()); | |
| range.insertNode(span); | |
| let tooltip = document.createElement('span'); | |
| tooltip.className = 'tooltip'; | |
| tooltip.innerText = comment; | |
| span.prepend(tooltip); | |
| } | |
| document.onselectionchange = () => { | |
| debounce(handleSelection, 1000); | |
| }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment