106 lines
2.5 KiB
JavaScript
106 lines
2.5 KiB
JavaScript
const { LitElement, html, css } = require('lit-element')
|
|
|
|
class LegacyTextField extends LitElement {
|
|
constructor () {
|
|
super()
|
|
this.size = '200px'
|
|
this.id = ''
|
|
this.value = ''
|
|
this.label = ''
|
|
}
|
|
|
|
static get properties () {
|
|
return {
|
|
size: {
|
|
type: String,
|
|
attribute: 'field-width'
|
|
},
|
|
label: {
|
|
type: String,
|
|
attribute: 'field-label'
|
|
},
|
|
id: {
|
|
type: String,
|
|
attribute: 'field-id'
|
|
},
|
|
value: {
|
|
type: String,
|
|
attribute: 'field-value'
|
|
}
|
|
}
|
|
}
|
|
|
|
static get styles () {
|
|
return css`
|
|
:host {
|
|
--guiScale: var(--guiScaleFactor, 3);
|
|
}
|
|
|
|
.text-field-div {
|
|
--borderColor: grey;
|
|
position: relative;
|
|
padding: 0;
|
|
margin: 0;
|
|
|
|
width: 100%;
|
|
height: calc(22px * var(--guiScale));
|
|
|
|
box-sizing: border-box;
|
|
|
|
background: black;
|
|
border: calc(1px * var(--guiScale)) solid var(--borderColor);
|
|
|
|
padding: calc(4px * var(--guiScale));
|
|
}
|
|
|
|
.text-field-div:focus-within {
|
|
--borderColor: white;
|
|
}
|
|
|
|
.text-field-div label {
|
|
position: absolute;
|
|
z-index: 2;
|
|
pointer-events: none;
|
|
|
|
bottom: calc(21px * var(--guiScale));
|
|
left: 0;
|
|
padding: 0;
|
|
margin: 0;
|
|
|
|
font-family: mojangles, minecraft, monospace;
|
|
font-size: calc(10px * var(--guiScale));
|
|
|
|
color: rgb(206, 206, 206);
|
|
text-shadow: calc(1px * var(--guiScale)) calc(1px * var(--guiScale)) black;
|
|
}
|
|
|
|
.legacy-text-field {
|
|
outline: none;
|
|
border: none;
|
|
background: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
font-family: mojangles, minecraft, monospace;
|
|
font-size: calc(8px * var(--guiScale));
|
|
|
|
color: white;
|
|
text-shadow: calc(1px * var(--guiScale)) calc(1px * var(--guiScale)) black;
|
|
}
|
|
`
|
|
}
|
|
|
|
render () {
|
|
return html`
|
|
<div class="text-field-div" style="width: calc(${this.size.endsWith('%') ? this.size : this.size + ' * var(--guiScale)'});">
|
|
<label for="${this.id}">${this.label}</label>
|
|
<input id="${this.id}" type="text" name="" spellcheck="false" required="" autocomplete="off" value="${this.value}" @input=${(e) => { this.value = e.target.value }} class="legacy-text-field">
|
|
</div>
|
|
`
|
|
}
|
|
}
|
|
|
|
window.customElements.define('legacy-text-field', LegacyTextField)
|