60 lines
1.4 KiB
TypeScript
60 lines
1.4 KiB
TypeScript
import { Directive, ElementRef, HostListener, OnInit } from "@angular/core";
|
|
|
|
@Directive({
|
|
selector: "[appBoxRow]",
|
|
})
|
|
export class BoxRowDirective implements OnInit {
|
|
el: HTMLElement = null;
|
|
formEls: Element[];
|
|
|
|
constructor(elRef: ElementRef) {
|
|
this.el = elRef.nativeElement;
|
|
}
|
|
|
|
ngOnInit(): void {
|
|
this.formEls = Array.from(
|
|
this.el.querySelectorAll('input:not([type="hidden"]), select, textarea')
|
|
);
|
|
this.formEls.forEach((formEl) => {
|
|
formEl.addEventListener(
|
|
"focus",
|
|
() => {
|
|
this.el.classList.add("active");
|
|
},
|
|
false
|
|
);
|
|
|
|
formEl.addEventListener(
|
|
"blur",
|
|
() => {
|
|
this.el.classList.remove("active");
|
|
},
|
|
false
|
|
);
|
|
});
|
|
}
|
|
|
|
@HostListener("click", ["$event"]) onClick(event: Event) {
|
|
const target = event.target as HTMLElement;
|
|
if (
|
|
target !== this.el &&
|
|
!target.classList.contains("progress") &&
|
|
!target.classList.contains("progress-bar")
|
|
) {
|
|
return;
|
|
}
|
|
|
|
if (this.formEls.length > 0) {
|
|
const formEl = this.formEls[0] as HTMLElement;
|
|
if (formEl.tagName.toLowerCase() === "input") {
|
|
const inputEl = formEl as HTMLInputElement;
|
|
if (inputEl.type != null && inputEl.type.toLowerCase() === "checkbox") {
|
|
inputEl.click();
|
|
return;
|
|
}
|
|
}
|
|
formEl.focus();
|
|
}
|
|
}
|
|
}
|