54 lines
1.0 KiB
JavaScript
54 lines
1.0 KiB
JavaScript
css(`
|
|
input-box {
|
|
display: block;
|
|
width: 60vw;
|
|
position: fixed;
|
|
left: 20vw;
|
|
bottom: 2vw;
|
|
}
|
|
|
|
.input {
|
|
width: 100%;
|
|
background-color: var(--accent2);
|
|
opacity: 0.5;
|
|
border-radius: 12px;
|
|
border: none;
|
|
resize: none;
|
|
color: var(--orange);
|
|
padding: 1em;
|
|
height: 1em;
|
|
outline: none;
|
|
transition: opacity .1s, scale .1s
|
|
}
|
|
|
|
.input:focus {
|
|
opacity: 80%;
|
|
scale: 1.02
|
|
}
|
|
`)
|
|
|
|
export default class InputBox extends HTMLElement {
|
|
hovered = false
|
|
|
|
connectedCallback() {
|
|
this.render()
|
|
this.addListeners()
|
|
}
|
|
|
|
render() {
|
|
this.innerHTML = /* html */`
|
|
<textarea class="input"></textarea>
|
|
`
|
|
}
|
|
|
|
addListeners() {
|
|
this.$("textarea").addEventListener("keydown", (e) => {
|
|
if(e.key === "Enter") {
|
|
e.preventDefault()
|
|
e.target.blur()
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
customElements.define("input-box", InputBox) |