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'
|
import { h, render, Component } from 'nano-jsx'
|
||||||
|
|
||||||
class RickLabel extends Component {
|
class RickPanel extends Component {
|
||||||
count = 0
|
count = 0
|
||||||
|
stayFocused = true
|
||||||
|
|
||||||
handleClick = () => {
|
handleClick = () => {
|
||||||
this.count++
|
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?.()
|
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() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
style="background:white; padding:8px 12px; border-radius:6px; cursor:pointer; font-family:sans-serif;"
|
style="
|
||||||
onclick={this.handleClick}
|
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>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export function insertRickLabel(target: HTMLElement | string = document.body): void {
|
export function insertRickPanel(target: HTMLElement | string = document.body): void {
|
||||||
const container = typeof target === 'string'
|
const container = typeof target === 'string'
|
||||||
? document.querySelector(target)
|
? document.querySelector(target)
|
||||||
: target
|
: target
|
||||||
|
|
||||||
if (container instanceof HTMLElement) {
|
if (container instanceof HTMLElement) {
|
||||||
render(<RickLabel />, container)
|
render(<RickPanel />, container)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user