OpenSlides/client/src/app/shared/directives/resized.directive.ts
2019-01-19 21:26:05 +01:00

60 lines
1.6 KiB
TypeScript

import { OnInit, ElementRef, Directive, Input } from '@angular/core';
import { ResizeSensor } from 'css-element-queries';
import { Subject } from 'rxjs';
/**
* This directive takes a Subject<void> as input and everytime the surrounding element
* was resized, the subject is fired.
*
* Usage:
* `<div [osRezised]="mySubject">...content...</div>`
*/
@Directive({
selector: '[osResized]'
})
export class ResizedDirective implements OnInit {
@Input()
public osResized: Subject<void>;
/**
* Old width, to check, if the width has actually changed.
*/
private oldWidth: number;
/**
* Old height, to check, if the height has actually changed.
*/
private oldHeight: number;
public constructor(private element: ElementRef) {}
/**
* Inits the ResizeSensor. triggers initial size change.
*/
public ngOnInit(): void {
// tslint:disable-next-line:no-unused-expression
new ResizeSensor(this.element.nativeElement, x => this.onSizeChanged());
this.onSizeChanged();
}
/**
* The size has changed. Check, if the size actually hs changed. If so,
* trigger the given subject.
*/
private onSizeChanged(): void {
const newWidth = this.element.nativeElement.clientWidth;
const newHeight = this.element.nativeElement.clientHeight;
if (newWidth === this.oldWidth && newHeight === this.oldHeight) {
return;
}
this.oldWidth = newWidth;
this.oldHeight = newHeight;
if (this.osResized) {
this.osResized.next();
}
}
}