contrapunctus/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Lots of refactoring, first version of the import helper

Browse source
This commit is contained in:
Pieter Vander Vennet 2022-01-19 20:34:04 +01:00
parent 612b8136ad
commit 3402ac0954
54 changed files with 1104 additions and 315 deletions
Download patch file Download diff file Expand all files Collapse all files

26
UI/Input/FileSelectorButton.ts
View file

@ -6,16 +6,20 @@ export default class FileSelectorButton extends InputElement<FileList> {
private static _nextid;
IsSelected: UIEventSource<boolean>;
private readonly _value = new UIEventSource(undefined);
private readonly _value = new UIEventSource<FileList>(undefined);
private readonly _label: BaseUIElement;
private readonly _acceptType: string;
private readonly allowMultiple: boolean;
constructor(label: BaseUIElement, acceptType: string = "image/*") {
constructor(label: BaseUIElement, options?:
{ acceptType: "image/*" | string,
allowMultiple: true | boolean}) {
super();
this._label = label;
this._acceptType = acceptType;
this._acceptType = options?.acceptType ?? "image/*";
this.SetClass("block cursor-pointer")
label.SetClass("cursor-pointer")
this.allowMultiple = options?.allowMultiple ?? true
}
GetValue(): UIEventSource<FileList> {
@ -38,7 +42,7 @@ export default class FileSelectorButton extends InputElement<FileList> {
actualInputElement.type = "file";
actualInputElement.accept = this._acceptType;
actualInputElement.name = "picField";
actualInputElement.multiple = true;
actualInputElement.multiple = this.allowMultiple;
actualInputElement.id = "fileselector" + FileSelectorButton._nextid;
FileSelectorButton._nextid++;
@ -59,6 +63,20 @@ export default class FileSelectorButton extends InputElement<FileList> {
el.appendChild(actualInputElement)
el.addEventListener('dragover', (event) => {
event.stopPropagation();
event.preventDefault();
// Style the drag-and-drop as a "copy file" operation.
event.dataTransfer.dropEffect = 'copy';
});
el.addEventListener('drop', (event) => {
event.stopPropagation();
event.preventDefault();
const fileList = event.dataTransfer.files;
this._value.setData(fileList)
});
return el;
}