/
htmlUtils.ts
49 lines (40 loc) · 1.64 KB
/
htmlUtils.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
export function removeClass(el: HTMLElement, className: string) {
if (el.classList) el.classList.remove(className);
else el.className = el.className.replace(new RegExp("(^|\\b)" + className.split(" ").join("|") + "(\\b|$)", "gi"), " ");
}
export function addClass(el: HTMLElement, className: string) {
if (el.classList) el.classList.add(className);
else el.className += " " + className;
}
// From http://stackoverflow.com/questions/8869403/drag-drop-json-into-chrome
export function DnDFileController(this: any, selector: string, onDropCallback: (files: FileList, e: unknown) => any) {
const el_ = document.querySelector(selector);
this.dragenter = function(e: DragEvent) {
e.stopPropagation();
e.preventDefault();
el_?.classList.add("dropping");
};
this.dragover = function(e: DragEvent) {
e.stopPropagation();
e.preventDefault();
};
this.dragleave = function(e: DragEvent) {
e.stopPropagation();
e.preventDefault();
// el_.classList.remove('dropping');
};
this.drop = function(e: DragEvent) {
e.stopPropagation();
e.preventDefault();
el_?.classList.remove("dropping");
onDropCallback(e.dataTransfer?.files!, e);
};
el_?.addEventListener("dragenter", this.dragenter, false);
el_?.addEventListener("dragover", this.dragover, false);
el_?.addEventListener("dragleave", this.dragleave, false);
el_?.addEventListener("drop", this.drop, false);
}
export function setButtonColor(button: HTMLButtonElement, color: string, text: string) {
button.style.background = color;
button.style.color = text;
}