Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 | 73x 91x 27x 27x 27x 27x 27x 27x 26x 26x 27x 26x 26x 26x 26x | import { AfterViewInit, Directive, ElementRef, HostListener, Input, OnDestroy } from '@angular/core';
import { throttle } from 'lodash-es';
import { ConfigService } from '../service/config.service';
@Directive({ selector: '[appFillWidth]' })
export class FillWidthDirective implements OnDestroy, AfterViewInit {
@Input('appFillWidth')
parent?: HTMLElement;
@Input()
padding = 4;
resizeObserver = window.ResizeObserver && new ResizeObserver(() => this.onResize()) || undefined;
dragging = false;
constructor(
private config: ConfigService,
private el: ElementRef<HTMLTextAreaElement>,
) {
this.resizeObserver?.observe(el.nativeElement);
}
ngAfterViewInit() {
this.onResize();
}
ngOnDestroy() {
this.resizeObserver?.disconnect();
}
@HostListener('window:resize', ['$event'])
onWindowResize(event: UIEvent) {
this.onResize();
}
@HostListener('pointerdown', ['$event'])
onWindowPointerDown(event: PointerEvent) {
this.dragging = true;
}
@HostListener('pointerup', ['$event'])
onWindowPointerUp(event: PointerEvent) {
this.dragging = false;
}
get max() {
const left = this.el.nativeElement.getBoundingClientRect().left;
return window.innerWidth - left;
}
private onResize = throttle(() => {
Iif (this.config.mobile) {
if (this.el.nativeElement.style.minWidth) {
this.el.nativeElement.style.minWidth = '';
}
if (this.el.nativeElement.style.width) {
this.el.nativeElement.style.width = '';
}
I} else if (this.dragging) {
this.el.nativeElement.style.minWidth = '504px';
} else {
const parentWidth = this.parent?.clientWidth || 0;
Iif (this.el.nativeElement.offsetWidth < parentWidth) {
this.el.nativeElement.style.minWidth = Math.min(this.max, parentWidth - this.padding * 2) - 8 + 'px';
}
}
}, 16, { leading: true, trailing: true });
}
|