61 lines
1.7 KiB
JavaScript
61 lines
1.7 KiB
JavaScript
|
function buttonInputClick() {
|
||
|
|
this.style.display = 'none'
|
||
|
|
|
||
|
|
const buttonInput = document.createElement('div')
|
||
|
|
buttonInput.classList.add('button-input-container')
|
||
|
|
|
||
|
|
if(this.dataset.instruction){
|
||
|
|
const label = document.createElement('label')
|
||
|
|
buttonInput.appendChild(label)
|
||
|
|
label.innerText = this.dataset.instruction
|
||
|
|
}
|
||
|
|
|
||
|
|
const input = document.createElement('input')
|
||
|
|
buttonInput.appendChild(input)
|
||
|
|
input.type = 'text'
|
||
|
|
if(this.dataset.placeholder){
|
||
|
|
input.placeholder = this.dataset.placeholder
|
||
|
|
}
|
||
|
|
|
||
|
|
const button = document.createElement('button')
|
||
|
|
buttonInput.appendChild(button)
|
||
|
|
button.innerText = "Submit"
|
||
|
|
button.addEventListener('click', () => {
|
||
|
|
if(this.onsubmit){
|
||
|
|
const event = new Event('button-input-value')
|
||
|
|
event.value = input.value
|
||
|
|
this.onsubmit(event)
|
||
|
|
}
|
||
|
|
|
||
|
|
buttonInput.parentNode.removeChild(buttonInput)
|
||
|
|
if(this.dataset.success){
|
||
|
|
const span = document.createElement('span')
|
||
|
|
span.classList.add('success')
|
||
|
|
span.innerText = this.dataset.success
|
||
|
|
setTimeout(() => {
|
||
|
|
span.parentNode.removeChild(span)
|
||
|
|
this.style.display = null
|
||
|
|
}, 5000);
|
||
|
|
this.parentNode.insertBefore(span, this.nextSibling)
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
this.style.display = null
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
input.addEventListener("keypress", function(event) {
|
||
|
|
if (event.key === "Enter") {
|
||
|
|
event.preventDefault();
|
||
|
|
button.click();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
this.parentNode.insertBefore(buttonInput, this.nextSibling)
|
||
|
|
input.focus()
|
||
|
|
}
|
||
|
|
|
||
|
|
document.addEventListener('DOMContentLoaded', () => {
|
||
|
|
document.querySelectorAll('.button-input').forEach(button => {
|
||
|
|
button.addEventListener('click', buttonInputClick)
|
||
|
|
});
|
||
|
|
}, false);
|