Last active
August 17, 2024 03:46
-
-
Save emvaized/8a8f5c9ec89acb2c4e140e989178fd0b to your computer and use it in GitHub Desktop.
Basic note tab URL, which saves it's content between browser restarts and shows the first line as a tab title (paste whole snippet to addressbar and open like a regular link)
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
| data:text/html, | |
| <html> | |
| <head> | |
| <title>Empty note</title> | |
| <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='20' width='20' fill-opacity='70%'><path fill='none' d='M0 0h20v20H0z'/><path d='M3 5h9v1.5H3V5zm0 6.25h6v1.5H3v-1.5zm0-3.13h9v1.5H3v-1.5zm13.78 3.87.65-.65c.29-.29.29-.77 0-1.06l-.71-.71a.754.754 0 0 0-1.06 0l-.65.65 1.77 1.77zm-.59.59L11.77 17H10v-1.77l4.42-4.42 1.77 1.77z'/></svg>" /> | |
| <style> | |
| .editor { | |
| display: inline-flex; | |
| gap: 10px; | |
| line-height: 21px; | |
| padding: 8px; | |
| background: background; | |
| border-radius: 4px; | |
| border: 1px solid lightgray; | |
| width: 100%; height: fit-content; min-height:100%; | |
| } | |
| textarea { | |
| line-height: 21px; | |
| overflow-y: hidden; | |
| padding: 0; | |
| border: 0; | |
| min-width: 500px; | |
| outline: none; | |
| resize: none; | |
| background: none; | |
| width: 100%; | |
| transform:translate(-20px); | |
| } | |
| .numbers { | |
| width: 20px; | |
| text-align: right; | |
| transform: translate(-40px); | |
| } | |
| .numbers span { | |
| counter-increment: linenumber; | |
| } | |
| .numbers span::before { | |
| content: counter(linenumber); | |
| display: block; | |
| color: lightgrey; | |
| } | |
| </style> | |
| </head> | |
| <body style="margin:10%"> | |
| <div class="editor"> | |
| <div class="numbers"> | |
| <span></span> | |
| </div> | |
| <textarea class="textarea" cols="30" rows="10" autofocus></textarea> | |
| </div> | |
| </body> | |
| <script> | |
| const textarea = document.querySelector(".textarea"); | |
| const numbers = document.querySelector(".numbers"); | |
| let inputTimeout; | |
| textarea.addEventListener("input", (e) => { | |
| clearTimeout(inputTimeout); | |
| inputTimeout = setTimeout(function(){ | |
| onTextInput(e.target.value); | |
| setLineNumbers(); | |
| },100) | |
| }); | |
| textarea.addEventListener("keydown", (e) => { | |
| if (e.key === "Tab") { | |
| const start = textarea.selectionStart; | |
| const end = textarea.selectionEnd; | |
| textarea.value = | |
| textarea.value.substring(0, start) + | |
| "\t" + | |
| textarea.value.substring(end); | |
| e.preventDefault(); | |
| } | |
| }); | |
| if (window.location.hash) { | |
| const prevText = decodeURI(window.location.hash.slice(1)); | |
| textarea.value = prevText; | |
| onTextInput(prevText); | |
| setLineNumbers(); | |
| } | |
| function onTextInput(text){ | |
| document.title = text.split('\n')[0]; | |
| window.location.hash = encodeURI(text); | |
| } | |
| function setLineNumbers(){ | |
| const num = textarea.value.split("\n").length; | |
| numbers.innerHTML = Array(num).fill("<span></span>").join(""); | |
| } | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment