Fix: add glow effect when dropping an image in the file selector; fix #1496

This commit is contained in:
Pieter Vander Vennet 2023-07-16 03:10:22 +02:00
parent 86306b22a5
commit 426620a76c

View file

@ -1,12 +1,12 @@
import BaseUIElement from "../BaseUIElement" import BaseUIElement from "../BaseUIElement"
import { InputElement } from "./InputElement" import {InputElement} from "./InputElement"
import { UIEventSource } from "../../Logic/UIEventSource" import {UIEventSource} from "../../Logic/UIEventSource"
/** /**
* @deprecated * @deprecated
*/ */
export default class FileSelectorButton extends InputElement<FileList> { export default class FileSelectorButton extends InputElement<FileList> {
private static _nextid private static _nextid = 0
private readonly _value = new UIEventSource<FileList>(undefined) private readonly _value = new UIEventSource<FileList>(undefined)
private readonly _label: BaseUIElement private readonly _label: BaseUIElement
private readonly _acceptType: string private readonly _acceptType: string
@ -67,21 +67,45 @@ export default class FileSelectorButton extends InputElement<FileList> {
if (actualInputElement.files !== null) { if (actualInputElement.files !== null) {
self._value.setData(actualInputElement.files) self._value.setData(actualInputElement.files)
} }
actualInputElement.classList.remove("glowing-shadow");
e.preventDefault() e.preventDefault()
}) })
el.appendChild(actualInputElement) el.appendChild(actualInputElement)
function setDrawAttention(isOn: boolean){
if(isOn){
label.classList.add("glowing-shadow")
}else{
label.classList.remove("glowing-shadow")
}
}
el.addEventListener("dragover", (event) => { el.addEventListener("dragover", (event) => {
event.stopPropagation() event.stopPropagation()
event.preventDefault() event.preventDefault()
setDrawAttention(true)
// Style the drag-and-drop as a "copy file" operation. // Style the drag-and-drop as a "copy file" operation.
event.dataTransfer.dropEffect = "copy" event.dataTransfer.dropEffect = "copy"
}) })
window.document.addEventListener("dragenter", () =>{
setDrawAttention(true)
})
window.document.addEventListener("dragend", () => {
setDrawAttention(false)
})
el.addEventListener("drop", (event) => { el.addEventListener("drop", (event) => {
event.stopPropagation() event.stopPropagation()
event.preventDefault() event.preventDefault()
label.classList.remove("glowing-shadow")
const fileList = event.dataTransfer.files const fileList = event.dataTransfer.files
this._value.setData(fileList) this._value.setData(fileList)
}) })