@ux-aspects/ux-aspects
Version:
Open source user interface framework for building modern, responsive, mobile big data applications
73 lines • 10.5 kB
JavaScript
import { ContentChildren, Directive, ElementRef, inject, Input, ViewContainerRef } from '@angular/core';
import { ResizeService } from '../resize/index';
import { LayoutSwitcherItemDirective } from './layout-switcher-item.directive';
import * as i0 from "@angular/core";
export class LayoutSwitcherDirective {
constructor() {
this.resizeService = inject(ResizeService);
this._elementRef = inject(ElementRef);
this._viewContainerRef = inject(ViewContainerRef);
// watch for changes to the container size
this.resizeService.addResizeListener(this._elementRef.nativeElement).subscribe(event => {
this._width = event.width;
// render the appropriate layout
this.updateActiveLayout();
});
}
ngOnChanges(changes) {
// if the active group has changed then render the appropriate layout
if (changes.group.currentValue !== changes.group.previousValue) {
this.updateActiveLayout();
}
}
getActiveLayout() {
// if there are currently no layouts then do nothing
if (!this._layouts) {
return null;
}
// otherwise find layouts that match the active group and that meet the constraints
return this._layouts.filter(layout => this.group === layout.getConfig().group).find(layout => {
const minWidth = layout.getConfig().minWidth || 0;
const maxWidth = layout.getConfig().maxWidth || Infinity;
return this._width >= minWidth && this._width < maxWidth;
});
}
updateActiveLayout() {
// get the layout that should be shown
const layout = this.getActiveLayout();
// check if we are currently showing the layout
if (this._activeLayout === layout) {
return;
}
// remove the current layout
if (this._activeLayout) {
this._activeLayout.deactivate();
}
// store the new active layout
this._activeLayout = layout;
// if there is an active layout then activate
if (this._activeLayout) {
this._activeLayout.activate();
}
}
ngAfterContentInit() {
// store the initial current element width
this._width = this._elementRef.nativeElement.offsetWidth;
// render the appropriate layout - need a delay as Angular doesn't like changes like this in these lifecycle hooks
requestAnimationFrame(this.updateActiveLayout.bind(this));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: LayoutSwitcherDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.12", type: LayoutSwitcherDirective, selector: "[uxLayoutSwitcher]", inputs: { group: "group" }, queries: [{ propertyName: "_layouts", predicate: LayoutSwitcherItemDirective }], usesOnChanges: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: LayoutSwitcherDirective, decorators: [{
type: Directive,
args: [{
selector: '[uxLayoutSwitcher]'
}]
}], ctorParameters: () => [], propDecorators: { group: [{
type: Input
}], _layouts: [{
type: ContentChildren,
args: [LayoutSwitcherItemDirective]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGF5b3V0LXN3aXRjaGVyLmRpcmVjdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9kaXJlY3RpdmVzL2xheW91dC1zd2l0Y2hlci9sYXlvdXQtc3dpdGNoZXIuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBb0IsZUFBZSxFQUFFLFNBQVMsRUFBRSxVQUFVLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBdUMsZ0JBQWdCLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDL0osT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQ2hELE9BQU8sRUFBRSwyQkFBMkIsRUFBRSxNQUFNLGtDQUFrQyxDQUFDOztBQUsvRSxNQUFNLE9BQU8sdUJBQXVCO0lBYWhDO1FBWlMsa0JBQWEsR0FBRyxNQUFNLENBQUMsYUFBYSxDQUFDLENBQUM7UUFFOUIsZ0JBQVcsR0FBRyxNQUFNLENBQUMsVUFBVSxDQUFDLENBQUM7UUFFakMsc0JBQWlCLEdBQUcsTUFBTSxDQUFDLGdCQUFnQixDQUFDLENBQUM7UUFVMUQsMENBQTBDO1FBQzFDLElBQUksQ0FBQyxhQUFhLENBQUMsaUJBQWlCLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxhQUFhLENBQUMsQ0FBQyxTQUFTLENBQUMsS0FBSyxDQUFDLEVBQUU7WUFDbkYsSUFBSSxDQUFDLE1BQU0sR0FBRyxLQUFLLENBQUMsS0FBSyxDQUFDO1lBRTFCLGdDQUFnQztZQUNoQyxJQUFJLENBQUMsa0JBQWtCLEVBQUUsQ0FBQztRQUM5QixDQUFDLENBQUMsQ0FBQztJQUNQLENBQUM7SUFFRCxXQUFXLENBQUMsT0FBc0I7UUFFOUIscUVBQXFFO1FBQ3JFLElBQUksT0FBTyxDQUFDLEtBQUssQ0FBQyxZQUFZLEtBQUssT0FBTyxDQUFDLEtBQUssQ0FBQyxhQUFhLEVBQUUsQ0FBQztZQUM3RCxJQUFJLENBQUMsa0JBQWtCLEVBQUUsQ0FBQztRQUM5QixDQUFDO0lBQ0wsQ0FBQztJQUVELGVBQWU7UUFFWCxvREFBb0Q7UUFDcEQsSUFBSSxDQUFDLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQztZQUNqQixPQUFPLElBQUksQ0FBQztRQUNoQixDQUFDO1FBRUQsbUZBQW1GO1FBQ25GLE9BQU8sSUFBSSxDQUFDLFFBQVEsQ0FBQyxNQUFNLENBQUMsTUFBTSxDQUFDLEVBQUUsQ0FBQyxJQUFJLENBQUMsS0FBSyxLQUFLLE1BQU0sQ0FBQyxTQUFTLEVBQUUsQ0FBQyxLQUFLLENBQUMsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLEVBQUU7WUFFekYsTUFBTSxRQUFRLEdBQUcsTUFBTSxDQUFDLFNBQVMsRUFBRSxDQUFDLFFBQVEsSUFBSSxDQUFDLENBQUM7WUFDbEQsTUFBTSxRQUFRLEdBQUcsTUFBTSxDQUFDLFNBQVMsRUFBRSxDQUFDLFFBQVEsSUFBSSxRQUFRLENBQUM7WUFFekQsT0FBTyxJQUFJLENBQUMsTUFBTSxJQUFJLFFBQVEsSUFBSSxJQUFJLENBQUMsTUFBTSxHQUFHLFFBQVEsQ0FBQztRQUM3RCxDQUFDLENBQUMsQ0FBQztJQUNQLENBQUM7SUFFRCxrQkFBa0I7UUFFZCxzQ0FBc0M7UUFDdEMsTUFBTSxNQUFNLEdBQUcsSUFBSSxDQUFDLGVBQWUsRUFBRSxDQUFDO1FBRXRDLCtDQUErQztRQUMvQyxJQUFJLElBQUksQ0FBQyxhQUFhLEtBQUssTUFBTSxFQUFFLENBQUM7WUFDaEMsT0FBTztRQUNYLENBQUM7UUFFRCw0QkFBNEI7UUFDNUIsSUFBSSxJQUFJLENBQUMsYUFBYSxFQUFFLENBQUM7WUFDckIsSUFBSSxDQUFDLGFBQWEsQ0FBQyxVQUFVLEVBQUUsQ0FBQztRQUNwQyxDQUFDO1FBRUQsOEJBQThCO1FBQzlCLElBQUksQ0FBQyxhQUFhLEdBQUcsTUFBTSxDQUFDO1FBRTVCLDZDQUE2QztRQUM3QyxJQUFJLElBQUksQ0FBQyxhQUFhLEVBQUUsQ0FBQztZQUNyQixJQUFJLENBQUMsYUFBYSxDQUFDLFFBQVEsRUFBRSxDQUFDO1FBQ2xDLENBQUM7SUFDTCxDQUFDO0lBRUQsa0JBQWtCO1FBRWQsMENBQTBDO1FBQzFDLElBQUksQ0FBQyxNQUFNLEdBQUcsSUFBSSxDQUFDLFdBQVcsQ0FBQyxhQUFhLENBQUMsV0FBVyxDQUFDO1FBRXpELGtIQUFrSDtRQUNsSCxxQkFBcUIsQ0FBQyxJQUFJLENBQUMsa0JBQWtCLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUM7SUFDOUQsQ0FBQzsrR0FoRlEsdUJBQXVCO21HQUF2Qix1QkFBdUIsK0dBUWYsMkJBQTJCOzs0RkFSbkMsdUJBQXVCO2tCQUhuQyxTQUFTO21CQUFDO29CQUNQLFFBQVEsRUFBRSxvQkFBb0I7aUJBQ2pDO3dEQVFZLEtBQUs7c0JBQWIsS0FBSztnQkFDeUQsUUFBUTtzQkFBdEUsZUFBZTt1QkFBQywyQkFBMkIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBBZnRlckNvbnRlbnRJbml0LCBDb250ZW50Q2hpbGRyZW4sIERpcmVjdGl2ZSwgRWxlbWVudFJlZiwgaW5qZWN0LCBJbnB1dCwgT25DaGFuZ2VzLCBRdWVyeUxpc3QsIFNpbXBsZUNoYW5nZXMsIFZpZXdDb250YWluZXJSZWYgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFJlc2l6ZVNlcnZpY2UgfSBmcm9tICcuLi9yZXNpemUvaW5kZXgnO1xuaW1wb3J0IHsgTGF5b3V0U3dpdGNoZXJJdGVtRGlyZWN0aXZlIH0gZnJvbSAnLi9sYXlvdXQtc3dpdGNoZXItaXRlbS5kaXJlY3RpdmUnO1xuXG5ARGlyZWN0aXZlKHtcbiAgICBzZWxlY3RvcjogJ1t1eExheW91dFN3aXRjaGVyXSdcbn0pXG5leHBvcnQgY2xhc3MgTGF5b3V0U3dpdGNoZXJEaXJlY3RpdmUgaW1wbGVtZW50cyBBZnRlckNvbnRlbnRJbml0LCBPbkNoYW5nZXMge1xuICAgIHJlYWRvbmx5IHJlc2l6ZVNlcnZpY2UgPSBpbmplY3QoUmVzaXplU2VydmljZSk7XG5cbiAgICBwcml2YXRlIHJlYWRvbmx5IF9lbGVtZW50UmVmID0gaW5qZWN0KEVsZW1lbnRSZWYpO1xuXG4gICAgcHJpdmF0ZSByZWFkb25seSBfdmlld0NvbnRhaW5lclJlZiA9IGluamVjdChWaWV3Q29udGFpbmVyUmVmKTtcblxuICAgIEBJbnB1dCgpIGdyb3VwOiBzdHJpbmc7XG4gICAgQENvbnRlbnRDaGlsZHJlbihMYXlvdXRTd2l0Y2hlckl0ZW1EaXJlY3RpdmUpIHByaXZhdGUgcmVhZG9ubHkgX2xheW91dHM6IFF1ZXJ5TGlzdDxMYXlvdXRTd2l0Y2hlckl0ZW1EaXJlY3RpdmU+O1xuXG4gICAgcHJpdmF0ZSBfd2lkdGg6IG51bWJlcjtcbiAgICBwcml2YXRlIF9hY3RpdmVMYXlvdXQ6IExheW91dFN3aXRjaGVySXRlbURpcmVjdGl2ZTtcblxuICAgIGNvbnN0cnVjdG9yKCkge1xuXG4gICAgICAgIC8vIHdhdGNoIGZvciBjaGFuZ2VzIHRvIHRoZSBjb250YWluZXIgc2l6ZVxuICAgICAgICB0aGlzLnJlc2l6ZVNlcnZpY2UuYWRkUmVzaXplTGlzdGVuZXIodGhpcy5fZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50KS5zdWJzY3JpYmUoZXZlbnQgPT4ge1xuICAgICAgICAgICAgdGhpcy5fd2lkdGggPSBldmVudC53aWR0aDtcblxuICAgICAgICAgICAgLy8gcmVuZGVyIHRoZSBhcHByb3ByaWF0ZSBsYXlvdXRcbiAgICAgICAgICAgIHRoaXMudXBkYXRlQWN0aXZlTGF5b3V0KCk7XG4gICAgICAgIH0pO1xuICAgIH1cblxuICAgIG5nT25DaGFuZ2VzKGNoYW5nZXM6IFNpbXBsZUNoYW5nZXMpOiB2b2lkIHtcblxuICAgICAgICAvLyBpZiB0aGUgYWN0aXZlIGdyb3VwIGhhcyBjaGFuZ2VkIHRoZW4gcmVuZGVyIHRoZSBhcHByb3ByaWF0ZSBsYXlvdXRcbiAgICAgICAgaWYgKGNoYW5nZXMuZ3JvdXAuY3VycmVudFZhbHVlICE9PSBjaGFuZ2VzLmdyb3VwLnByZXZpb3VzVmFsdWUpIHtcbiAgICAgICAgICAgIHRoaXMudXBkYXRlQWN0aXZlTGF5b3V0KCk7XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICBnZXRBY3RpdmVMYXlvdXQoKTogTGF5b3V0U3dpdGNoZXJJdGVtRGlyZWN0aXZlIHwgbnVsbCB7XG5cbiAgICAgICAgLy8gaWYgdGhlcmUgYXJlIGN1cnJlbnRseSBubyBsYXlvdXRzIHRoZW4gZG8gbm90aGluZ1xuICAgICAgICBpZiAoIXRoaXMuX2xheW91dHMpIHtcbiAgICAgICAgICAgIHJldHVybiBudWxsO1xuICAgICAgICB9XG5cbiAgICAgICAgLy8gb3RoZXJ3aXNlIGZpbmQgbGF5b3V0cyB0aGF0IG1hdGNoIHRoZSBhY3RpdmUgZ3JvdXAgYW5kIHRoYXQgbWVldCB0aGUgY29uc3RyYWludHNcbiAgICAgICAgcmV0dXJuIHRoaXMuX2xheW91dHMuZmlsdGVyKGxheW91dCA9PiB0aGlzLmdyb3VwID09PSBsYXlvdXQuZ2V0Q29uZmlnKCkuZ3JvdXApLmZpbmQobGF5b3V0ID0+IHtcblxuICAgICAgICAgICAgY29uc3QgbWluV2lkdGggPSBsYXlvdXQuZ2V0Q29uZmlnKCkubWluV2lkdGggfHwgMDtcbiAgICAgICAgICAgIGNvbnN0IG1heFdpZHRoID0gbGF5b3V0LmdldENvbmZpZygpLm1heFdpZHRoIHx8IEluZmluaXR5O1xuXG4gICAgICAgICAgICByZXR1cm4gdGhpcy5fd2lkdGggPj0gbWluV2lkdGggJiYgdGhpcy5fd2lkdGggPCBtYXhXaWR0aDtcbiAgICAgICAgfSk7XG4gICAgfVxuXG4gICAgdXBkYXRlQWN0aXZlTGF5b3V0KCk6IHZvaWQge1xuXG4gICAgICAgIC8vIGdldCB0aGUgbGF5b3V0IHRoYXQgc2hvdWxkIGJlIHNob3duXG4gICAgICAgIGNvbnN0IGxheW91dCA9IHRoaXMuZ2V0QWN0aXZlTGF5b3V0KCk7XG5cbiAgICAgICAgLy8gY2hlY2sgaWYgd2UgYXJlIGN1cnJlbnRseSBzaG93aW5nIHRoZSBsYXlvdXRcbiAgICAgICAgaWYgKHRoaXMuX2FjdGl2ZUxheW91dCA9PT0gbGF5b3V0KSB7XG4gICAgICAgICAgICByZXR1cm47XG4gICAgICAgIH1cblxuICAgICAgICAvLyByZW1vdmUgdGhlIGN1cnJlbnQgbGF5b3V0XG4gICAgICAgIGlmICh0aGlzLl9hY3RpdmVMYXlvdXQpIHtcbiAgICAgICAgICAgIHRoaXMuX2FjdGl2ZUxheW91dC5kZWFjdGl2YXRlKCk7XG4gICAgICAgIH1cblxuICAgICAgICAvLyBzdG9yZSB0aGUgbmV3IGFjdGl2ZSBsYXlvdXRcbiAgICAgICAgdGhpcy5fYWN0aXZlTGF5b3V0ID0gbGF5b3V0O1xuXG4gICAgICAgIC8vIGlmIHRoZXJlIGlzIGFuIGFjdGl2ZSBsYXlvdXQgdGhlbiBhY3RpdmF0ZVxuICAgICAgICBpZiAodGhpcy5fYWN0aXZlTGF5b3V0KSB7XG4gICAgICAgICAgICB0aGlzLl9hY3RpdmVMYXlvdXQuYWN0aXZhdGUoKTtcbiAgICAgICAgfVxuICAgIH1cblxuICAgIG5nQWZ0ZXJDb250ZW50SW5pdCgpOiB2b2lkIHtcblxuICAgICAgICAvLyBzdG9yZSB0aGUgaW5pdGlhbCBjdXJyZW50IGVsZW1lbnQgd2lkdGhcbiAgICAgICAgdGhpcy5fd2lkdGggPSB0aGlzLl9lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQub2Zmc2V0V2lkdGg7XG5cbiAgICAgICAgLy8gcmVuZGVyIHRoZSBhcHByb3ByaWF0ZSBsYXlvdXQgLSBuZWVkIGEgZGVsYXkgYXMgQW5ndWxhciBkb2Vzbid0IGxpa2UgY2hhbmdlcyBsaWtlIHRoaXMgaW4gdGhlc2UgbGlmZWN5Y2xlIGhvb2tzXG4gICAgICAgIHJlcXVlc3RBbmltYXRpb25GcmFtZSh0aGlzLnVwZGF0ZUFjdGl2ZUxheW91dC5iaW5kKHRoaXMpKTtcbiAgICB9XG59Il19