ng-devui
Version:
DevUI components based on Angular
63 lines • 7.85 kB
JavaScript
import { Directive, ElementRef, Input, Renderer2 } from '@angular/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { DBreakpoints } from './layout.types';
import { DScreenMediaQueryService } from './screen-media-query.service';
import * as i0 from "@angular/core";
import * as i1 from "./screen-media-query.service";
export class DClassDirective {
constructor(elementRef, renderer, screenQueryService) {
this.elementRef = elementRef;
this.renderer = renderer;
this.screenQueryService = screenQueryService;
this.destroy$ = new Subject();
this.executedClassList = [];
}
ngAfterViewInit() {
this.screenQueryService
.getPoint()
.pipe(takeUntil(this.destroy$))
.subscribe(({ currentPoint }) => {
this.updateClass(currentPoint);
});
}
/* TODO: 参数需要优化，不仅可以设置断点，还可以设置通用 */
updateClass(currentPoint) {
let finalClassList = [];
if (!Array.isArray(this.dClass)) {
for (const point of DBreakpoints) {
if (this.dClass[point]) {
finalClassList = [...finalClassList, ...this.dClass[point]];
}
if (currentPoint === point) {
break;
}
}
}
else if (this.dClass) {
finalClassList = [...this.dClass];
}
this.executedClassList.forEach((className) => {
this.renderer.removeClass(this.elementRef.nativeElement, className);
});
finalClassList.forEach((className) => {
this.renderer.addClass(this.elementRef.nativeElement, className);
});
this.executedClassList = finalClassList;
}
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DClassDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.DScreenMediaQueryService }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: DClassDirective, selector: "[dClass]", inputs: { dClass: "dClass" }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DClassDirective, decorators: [{
type: Directive,
args: [{
selector: `[dClass]`,
}]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.DScreenMediaQueryService }], propDecorators: { dClass: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2xhc3MuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vZGV2dWkvbGF5b3V0L2NsYXNzLmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQWlCLFNBQVMsRUFBRSxVQUFVLEVBQUUsS0FBSyxFQUFhLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNsRyxPQUFPLEVBQUUsT0FBTyxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBQy9CLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUMzQyxPQUFPLEVBQUUsWUFBWSxFQUFzQixNQUFNLGdCQUFnQixDQUFDO0FBQ2xFLE9BQU8sRUFBRSx3QkFBd0IsRUFBRSxNQUFNLDhCQUE4QixDQUFDOzs7QUFLeEUsTUFBTSxPQUFPLGVBQWU7SUFNMUIsWUFBb0IsVUFBc0IsRUFBVSxRQUFtQixFQUFVLGtCQUE0QztRQUF6RyxlQUFVLEdBQVYsVUFBVSxDQUFZO1FBQVUsYUFBUSxHQUFSLFFBQVEsQ0FBVztRQUFVLHVCQUFrQixHQUFsQixrQkFBa0IsQ0FBMEI7UUFIckgsYUFBUSxHQUFHLElBQUksT0FBTyxFQUFRLENBQUM7UUFDL0Isc0JBQWlCLEdBQWEsRUFBRSxDQUFDO0lBRXVGLENBQUM7SUFFakksZUFBZTtRQUNiLElBQUksQ0FBQyxrQkFBa0I7YUFDcEIsUUFBUSxFQUFFO2FBQ1YsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLENBQUM7YUFDOUIsU0FBUyxDQUFDLENBQUMsRUFBRSxZQUFZLEVBQUUsRUFBRSxFQUFFO1lBQzlCLElBQUksQ0FBQyxXQUFXLENBQUMsWUFBWSxDQUFDLENBQUM7UUFDakMsQ0FBQyxDQUFDLENBQUM7SUFDUCxDQUFDO0lBRUQsbUNBQW1DO0lBQ25DLFdBQVcsQ0FBQyxZQUFZO1FBQ3RCLElBQUksY0FBYyxHQUFHLEVBQUUsQ0FBQztRQUV4QixJQUFJLENBQUMsS0FBSyxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLEVBQUUsQ0FBQztZQUNoQyxLQUFLLE1BQU0sS0FBSyxJQUFJLFlBQVksRUFBRSxDQUFDO2dCQUNqQyxJQUFJLElBQUksQ0FBQyxNQUFNLENBQUMsS0FBSyxDQUFDLEVBQUUsQ0FBQztvQkFDdkIsY0FBYyxHQUFHLENBQUMsR0FBRyxjQUFjLEVBQUUsR0FBRyxJQUFJLENBQUMsTUFBTSxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUM7Z0JBQzlELENBQUM7Z0JBQ0QsSUFBSSxZQUFZLEtBQUssS0FBSyxFQUFFLENBQUM7b0JBQzNCLE1BQU07Z0JBQ1IsQ0FBQztZQUNILENBQUM7UUFDSCxDQUFDO2FBQU0sSUFBSSxJQUFJLENBQUMsTUFBTSxFQUFFLENBQUM7WUFDdkIsY0FBYyxHQUFHLENBQUMsR0FBRyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUM7UUFDcEMsQ0FBQztRQUVELElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxPQUFPLENBQUMsQ0FBQyxTQUFTLEVBQUUsRUFBRTtZQUMzQyxJQUFJLENBQUMsUUFBUSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsRUFBRSxTQUFTLENBQUMsQ0FBQztRQUN0RSxDQUFDLENBQUMsQ0FBQztRQUVILGNBQWMsQ0FBQyxPQUFPLENBQUMsQ0FBQyxTQUFTLEVBQUUsRUFBRTtZQUNuQyxJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsRUFBRSxTQUFTLENBQUMsQ0FBQztRQUNuRSxDQUFDLENBQUMsQ0FBQztRQUVILElBQUksQ0FBQyxpQkFBaUIsR0FBRyxjQUFjLENBQUM7SUFDMUMsQ0FBQztJQUVELFdBQVc7UUFDVCxJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksRUFBRSxDQUFDO1FBQ3JCLElBQUksQ0FBQyxRQUFRLENBQUMsUUFBUSxFQUFFLENBQUM7SUFDM0IsQ0FBQzsrR0FoRFUsZUFBZTttR0FBZixlQUFlOzs0RkFBZixlQUFlO2tCQUgzQixTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxVQUFVO2lCQUNyQjs4SUFFVSxNQUFNO3NCQUFkLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBBZnRlclZpZXdJbml0LCBEaXJlY3RpdmUsIEVsZW1lbnRSZWYsIElucHV0LCBPbkRlc3Ryb3ksIFJlbmRlcmVyMiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgU3ViamVjdCB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgdGFrZVVudGlsIH0gZnJvbSAncnhqcy9vcGVyYXRvcnMnO1xuaW1wb3J0IHsgREJyZWFrcG9pbnRzLCBEUmVzcG9uc2VQYXJhbWV0ZXIgfSBmcm9tICcuL2xheW91dC50eXBlcyc7XG5pbXBvcnQgeyBEU2NyZWVuTWVkaWFRdWVyeVNlcnZpY2UgfSBmcm9tICcuL3NjcmVlbi1tZWRpYS1xdWVyeS5zZXJ2aWNlJztcblxuQERpcmVjdGl2ZSh7XG4gIHNlbGVjdG9yOiBgW2RDbGFzc11gLFxufSlcbmV4cG9ydCBjbGFzcyBEQ2xhc3NEaXJlY3RpdmUgaW1wbGVtZW50cyBPbkRlc3Ryb3ksIEFmdGVyVmlld0luaXQge1xuICBASW5wdXQoKSBkQ2xhc3M6IERSZXNwb25zZVBhcmFtZXRlcjxzdHJpbmdbXT47XG5cbiAgcHJpdmF0ZSBkZXN0cm95JCA9IG5ldyBTdWJqZWN0PHZvaWQ+KCk7XG4gIHByaXZhdGUgZXhlY3V0ZWRDbGFzc0xpc3Q6IHN0cmluZ1tdID0gW107XG5cbiAgY29uc3RydWN0b3IocHJpdmF0ZSBlbGVtZW50UmVmOiBFbGVtZW50UmVmLCBwcml2YXRlIHJlbmRlcmVyOiBSZW5kZXJlcjIsIHByaXZhdGUgc2NyZWVuUXVlcnlTZXJ2aWNlOiBEU2NyZWVuTWVkaWFRdWVyeVNlcnZpY2UpIHt9XG5cbiAgbmdBZnRlclZpZXdJbml0KCk6IHZvaWQge1xuICAgIHRoaXMuc2NyZWVuUXVlcnlTZXJ2aWNlXG4gICAgICAuZ2V0UG9pbnQoKVxuICAgICAgLnBpcGUodGFrZVVudGlsKHRoaXMuZGVzdHJveSQpKVxuICAgICAgLnN1YnNjcmliZSgoeyBjdXJyZW50UG9pbnQgfSkgPT4ge1xuICAgICAgICB0aGlzLnVwZGF0ZUNsYXNzKGN1cnJlbnRQb2ludCk7XG4gICAgICB9KTtcbiAgfVxuXG4gIC8qIFRPRE86IOWPguaVsOmcgOimgeS8mOWMlu+8jOS4jeS7heWPr+S7peiuvue9ruaWreeCue+8jOi/mOWPr+S7peiuvue9rumAmueUqCAqL1xuICB1cGRhdGVDbGFzcyhjdXJyZW50UG9pbnQpIHtcbiAgICBsZXQgZmluYWxDbGFzc0xpc3QgPSBbXTtcblxuICAgIGlmICghQXJyYXkuaXNBcnJheSh0aGlzLmRDbGFzcykpIHtcbiAgICAgIGZvciAoY29uc3QgcG9pbnQgb2YgREJyZWFrcG9pbnRzKSB7XG4gICAgICAgIGlmICh0aGlzLmRDbGFzc1twb2ludF0pIHtcbiAgICAgICAgICBmaW5hbENsYXNzTGlzdCA9IFsuLi5maW5hbENsYXNzTGlzdCwgLi4udGhpcy5kQ2xhc3NbcG9pbnRdXTtcbiAgICAgICAgfVxuICAgICAgICBpZiAoY3VycmVudFBvaW50ID09PSBwb2ludCkge1xuICAgICAgICAgIGJyZWFrO1xuICAgICAgICB9XG4gICAgICB9XG4gICAgfSBlbHNlIGlmICh0aGlzLmRDbGFzcykge1xuICAgICAgZmluYWxDbGFzc0xpc3QgPSBbLi4udGhpcy5kQ2xhc3NdO1xuICAgIH1cblxuICAgIHRoaXMuZXhlY3V0ZWRDbGFzc0xpc3QuZm9yRWFjaCgoY2xhc3NOYW1lKSA9PiB7XG4gICAgICB0aGlzLnJlbmRlcmVyLnJlbW92ZUNsYXNzKHRoaXMuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50LCBjbGFzc05hbWUpO1xuICAgIH0pO1xuXG4gICAgZmluYWxDbGFzc0xpc3QuZm9yRWFjaCgoY2xhc3NOYW1lKSA9PiB7XG4gICAgICB0aGlzLnJlbmRlcmVyLmFkZENsYXNzKHRoaXMuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50LCBjbGFzc05hbWUpO1xuICAgIH0pO1xuXG4gICAgdGhpcy5leGVjdXRlZENsYXNzTGlzdCA9IGZpbmFsQ2xhc3NMaXN0O1xuICB9XG5cbiAgbmdPbkRlc3Ryb3koKTogdm9pZCB7XG4gICAgdGhpcy5kZXN0cm95JC5uZXh0KCk7XG4gICAgdGhpcy5kZXN0cm95JC5jb21wbGV0ZSgpO1xuICB9XG59XG4iXX0=