generated from projects/testosmaximus
refactor: rename RickLabel to RickPanel and enhance click handling with stay focused option
This commit is contained in:
parent
2c2db8edaf
commit
bd67f2fcf2
@ -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)
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user