forked from MapComplete/MapComplete
Fix: add glow effect when dropping an image in the file selector; fix #1496
This commit is contained in:
parent
86306b22a5
commit
426620a76c
1 changed files with 27 additions and 3 deletions
|
@ -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)
|
||||||
})
|
})
|
||||||
|
|
Loading…
Add table
Reference in a new issue