💻 Address Bar Code Editor Bookmarklet Part 3 (971b) - Toggle Horizontal-Vertical Views

#README.md

💻 Address Bar Code Editor Bookmarklet Part 3 (988b) - Toggle Horizontal-Vertical Views

• Part 1: 💻 Address Bar Code Editor Bookmarklet (841b)
• Part 2: 💻 Address Bar Code Editor Bookmarklet Part 2 (876b) - Keeping It Dark

Initially when I started this project, I wanted to keep it as tiny as possible, which made me hesistant to add more features. But since I started to care about that less, I started to add more features. First it was showing the cursor's line number, column, selected number of characters, and total character count. Then I added a better "dark mode" and now, I enabled the ability to toggle between horizontal and vertical views. This is especially useful on my rotated monitor. On my main set up, my side monitor is rotated to accomodate fitting a large monitor and a smaller one on my monitor stand.

Here's the code. Copy-paste this into your address bar to try it out. Save as a bookmark to use it anytime.

data:text/html,<title>code</title><link rel=icon href='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 99 99"><text y="85" font-size="72">&%23128187;</text></svg>'><textarea id=d spellcheck=false onkeypress=e=event;k=e.keyCode;(e.ctrlKey&&k==13)||k==10?f.srcdoc=d.value:0 style=resize:none><style>:root{color-scheme:dark}</style>%0d<p id=o></p>%0d<script>%0do.innerHTML = 0;%0d</script></textarea><iframe id=f></iframe><p id=p></p><script>D=0,d.onkeyup=d.onclick=n=>{clearTimeout(D),D=setTimeout(n=>{A=d.selectionStart,B=d.selectionEnd,V=d.value,E=V.substr(0,B).split`\n`,p.innerHTML=`<button onclick=document.body.classList.toggle('h')>H</button> Ln:${E.length}, Col:${E.pop().length+1}, ${A==B?"Pos:"+B:"Sel:"+(B-A)}, Len:${V.length}`},99)}</script><style>*{color-scheme:dark;box-sizing:border-box;margin:0}%23d,%23f{width:50%;height:100%;vertical-align:top}.h>%23d,.h>%23f{width:100%;height:50%}%23p{position:fixed;bottom:1;background:%23333}.h>%23p{bottom:50%}

This makes the app useful when I want the option to make my window more narrow, especially when using the split screen feature on Chrome (though I mainly use Firefox).

Some potential next features:

• Ctrl + G Go to line
• Ctrl + S Save as html file
• Ctrl + H Search and replace

I can't think of any more features besides code highlighting, but that might require too much code to put into the address bar.