refactor: rename RickLabel to RickPanel and enhance click handling with stay focused option

This commit is contained in:
Chipperfluff 2025-07-19 23:38:19 +02:00
parent 2c2db8edaf
commit bd67f2fcf2

View File

@ -1,32 +1,84 @@
import { h, render, Component } from 'nano-jsx'
class RickLabel extends Component {
class RickPanel extends Component {
count = 0
stayFocused = true
handleClick = () => {
this.count++
window.open('https://www.youtube.com/watch?v=dQw4w9WgXcQ', '_blank')
const win = window.open('https://www.youtube.com/watch?v=dQw4w9WgXcQ', '_blank')
if (!this.stayFocused && win) {
win.focus()
}
this.update?.()
}
handleCheckbox = (e: Event) => {
const input = e.target as HTMLInputElement
this.stayFocused = input.checked
}
handleSansClick = () => {
window.open('https://www.youtube.com/watch?v=ZcoqR9Bwx1Y', '_blank') // Megalovania 🎶
}
render() {
return (
<div
style="background:white; padding:8px 12px; border-radius:6px; cursor:pointer; font-family:sans-serif;"
onclick={this.handleClick}
style="
background: #fefefe;
color: #111;
font-family: sans-serif;
padding: 16px;
border: 1px solid #ccc;
border-radius: 10px;
width: fit-content;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
"
>
Rickroll Me ({this.count})
<div style="margin-bottom: 10px;">
<strong>🔥 Rickroll Panel</strong>
</div>
<button
onclick={this.handleClick}
style="padding: 6px 12px; border: none; background: #007bff; color: white; border-radius: 5px; cursor: pointer;"
>
Rickroll Me ({this.count})
</button>
<div style="margin-top: 10px; font-size: 0.9em;">
<label>
<input
type="checkbox"
onchange={this.handleCheckbox}
checked={this.stayFocused}
style="margin-right: 6px;"
/>
Stay in new tab
</label>
</div>
<div
onclick={this.handleSansClick}
style="margin-top: 14px; color: #666; font-size: 0.8em; cursor: pointer; text-decoration: underline;"
>
sans.
</div>
</div>
)
}
}
export function insertRickLabel(target: HTMLElement | string = document.body): void {
export function insertRickPanel(target: HTMLElement | string = document.body): void {
const container = typeof target === 'string'
? document.querySelector(target)
: target
if (container instanceof HTMLElement) {
render(<RickLabel />, container)
render(<RickPanel />, container)
}
}