2018-04-04 20:18:42 +02:00
|
|
|
import {
|
|
|
|
Directive,
|
|
|
|
ElementRef,
|
|
|
|
HostListener,
|
|
|
|
OnInit,
|
|
|
|
} from '@angular/core';
|
|
|
|
|
|
|
|
@Directive({
|
|
|
|
selector: '[appBoxRow]',
|
|
|
|
})
|
|
|
|
export class BoxRowDirective implements OnInit {
|
|
|
|
el: HTMLElement = null;
|
2018-06-05 19:28:09 +02:00
|
|
|
formEls: Element[];
|
2018-04-04 20:18:42 +02:00
|
|
|
|
|
|
|
constructor(private elRef: ElementRef) {
|
|
|
|
this.el = elRef.nativeElement;
|
|
|
|
}
|
|
|
|
|
|
|
|
ngOnInit(): void {
|
2018-06-05 19:28:09 +02:00
|
|
|
this.formEls = Array.from(this.el.querySelectorAll('input:not([type="hidden"]), select, textarea'));
|
2021-02-04 16:49:23 +01:00
|
|
|
this.formEls.forEach(formEl => {
|
2018-04-04 20:18:42 +02:00
|
|
|
formEl.addEventListener('focus', (event: Event) => {
|
|
|
|
this.el.classList.add('active');
|
|
|
|
}, false);
|
|
|
|
|
|
|
|
formEl.addEventListener('blur', (event: Event) => {
|
|
|
|
this.el.classList.remove('active');
|
|
|
|
}, false);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
@HostListener('click', ['$event']) onClick(event: Event) {
|
2018-11-15 21:33:52 +01:00
|
|
|
const target = event.target as HTMLElement;
|
|
|
|
if (target !== this.el && !target.classList.contains('progress') &&
|
|
|
|
!target.classList.contains('progress-bar')) {
|
2018-04-04 20:18:42 +02:00
|
|
|
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();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|