ng-devui
Version:
DevUI components based on Angular
87 lines • 11.2 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 DSpaceDirective {
constructor(elementRef, renderer, screenQueryService) {
this.elementRef = elementRef;
this.renderer = renderer;
this.screenQueryService = screenQueryService;
this.destroy$ = new Subject();
this.executedSpace = [null, null];
}
ngAfterViewInit() {
this.screenQueryService
.getPoint()
.pipe(takeUntil(this.destroy$))
.subscribe(({ currentPoint }) => {
this.updateSpace(currentPoint);
});
}
getCurrentSpace(currentPoint) {
let finalSpace = [null, null];
if (Array.isArray(this.dSpace) || typeof this.dSpace === 'number') {
finalSpace = this._transSpaceToArray(this.dSpace);
}
else {
for (const point of DBreakpoints) {
if (this.dSpace[point] !== undefined) {
finalSpace = this._transSpaceToArray(this.dSpace[point]);
}
if (currentPoint === point) {
break;
}
}
}
return finalSpace;
}
_transSpaceToArray(space) {
let finalSpace = space;
if (typeof space === 'number') {
finalSpace = [space, null];
}
if (this.dSpaceDirection === 'horizontal') {
finalSpace = finalSpace.reverse();
}
return finalSpace;
}
updateSpace(currentPoint) {
const finalSpace = this.getCurrentSpace(currentPoint);
const items = this.elementRef.nativeElement.children;
for (let i = 0; i < items.length - 1; i++) {
if (finalSpace[0] !== null) {
this.renderer.setStyle(items[i], 'margin-bottom', finalSpace[0] + 'px');
}
else if (this.executedSpace[0] !== null) {
this.renderer.removeStyle(items[i], 'margin-bottom');
}
if (finalSpace[1] !== null) {
this.renderer.setStyle(items[i], 'margin-right', finalSpace[1] + 'px');
}
else if (this.executedSpace[1] !== null) {
this.renderer.removeStyle(items[i], 'margin-right');
}
}
this.executedSpace = finalSpace;
}
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DSpaceDirective, 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: DSpaceDirective, selector: "[dSpace]", inputs: { dSpace: "dSpace", dSpaceDirection: "dSpaceDirection" }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DSpaceDirective, decorators: [{
type: Directive,
args: [{
selector: `[dSpace]`,
}]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.DScreenMediaQueryService }], propDecorators: { dSpace: [{
type: Input
}], dSpaceDirection: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3BhY2UuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vZGV2dWkvbGF5b3V0L3NwYWNlLmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQWlCLFNBQVMsRUFBRSxVQUFVLEVBQUUsS0FBSyxFQUFhLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNsRyxPQUFPLEVBQUUsT0FBTyxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBQy9CLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUMzQyxPQUFPLEVBQUUsWUFBWSxFQUFzQixNQUFNLGdCQUFnQixDQUFDO0FBQ2xFLE9BQU8sRUFBRSx3QkFBd0IsRUFBRSxNQUFNLDhCQUE4QixDQUFDOzs7QUFLeEUsTUFBTSxPQUFPLGVBQWU7SUFPMUIsWUFBb0IsVUFBc0IsRUFBVSxRQUFtQixFQUFVLGtCQUE0QztRQUF6RyxlQUFVLEdBQVYsVUFBVSxDQUFZO1FBQVUsYUFBUSxHQUFSLFFBQVEsQ0FBVztRQUFVLHVCQUFrQixHQUFsQixrQkFBa0IsQ0FBMEI7UUFOckgsYUFBUSxHQUFHLElBQUksT0FBTyxFQUFRLENBQUM7UUFDL0Isa0JBQWEsR0FBcUIsQ0FBQyxJQUFJLEVBQUUsSUFBSSxDQUFDLENBQUM7SUFLeUUsQ0FBQztJQUVqSSxlQUFlO1FBQ2IsSUFBSSxDQUFDLGtCQUFrQjthQUNwQixRQUFRLEVBQUU7YUFDVixJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQzthQUM5QixTQUFTLENBQUMsQ0FBQyxFQUFFLFlBQVksRUFBRSxFQUFFLEVBQUU7WUFDOUIsSUFBSSxDQUFDLFdBQVcsQ0FBQyxZQUFZLENBQUMsQ0FBQztRQUNqQyxDQUFDLENBQUMsQ0FBQztJQUNQLENBQUM7SUFFTyxlQUFlLENBQUMsWUFBWTtRQUNsQyxJQUFJLFVBQVUsR0FBcUIsQ0FBQyxJQUFJLEVBQUUsSUFBSSxD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M0IsQ0FBQzsrR0F4RVUsZUFBZTttR0FBZixlQUFlOzs0RkFBZixlQUFlO2tCQUgzQixTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxVQUFVO2lCQUNyQjs4SUFLVSxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0csZUFBZTtzQkFBdkIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEFmdGVyVmlld0luaXQsIERpcmVjdGl2ZSwgRWxlbWVudFJlZiwgSW5wdXQsIE9uRGVzdHJveSwgUmVuZGVyZXIyIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBTdWJqZWN0IH0gZnJvbSAncnhqcyc7XG5pbXBvcnQgeyB0YWtlVW50aWwgfSBmcm9tICdyeGpzL29wZXJhdG9ycyc7XG5pbXBvcnQgeyBEQnJlYWtwb2ludHMsIERSZXNwb25zZVBhcmFtZXRlciB9IGZyb20gJy4vbGF5b3V0LnR5cGVzJztcbmltcG9ydCB7IERTY3JlZW5NZWRpYVF1ZXJ5U2VydmljZSB9IGZyb20gJy4vc2NyZWVuLW1lZGlhLXF1ZXJ5LnNlcnZpY2UnO1xuXG5ARGlyZWN0aXZlKHtcbiAgc2VsZWN0b3I6IGBbZFNwYWNlXWAsXG59KVxuZXhwb3J0IGNsYXNzIERTcGFjZURpcmVjdGl2ZSBpbXBsZW1lbnRzIE9uRGVzdHJveSwgQWZ0ZXJWaWV3SW5pdCB7XG4gIHByaXZhdGUgZGVzdHJveSQgPSBuZXcgU3ViamVjdDx2b2lkPigpO1xuICBwcml2YXRlIGV4ZWN1dGVkU3BhY2U6IFtudW1iZXIsIG51bWJlcl0gPSBbbnVsbCwgbnVsbF07XG5cbiAgQElucHV0KCkgZFNwYWNlOiBEUmVzcG9uc2VQYXJhbWV0ZXI8bnVtYmVyIHwgW251bWJlciwgbnVtYmVyXT47XG4gIEBJbnB1dCgpIGRTcGFjZURpcmVjdGlvbjogRFJlc3BvbnNlUGFyYW1ldGVyPCd2ZXJ0aWNhbCcgfCAnaG9yaXpvbnRhbCc+O1xuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgZWxlbWVudFJlZjogRWxlbWVudFJlZiwgcHJpdmF0ZSByZW5kZXJlcjogUmVuZGVyZXIyLCBwcml2YXRlIHNjcmVlblF1ZXJ5U2VydmljZTogRFNjcmVlbk1lZGlhUXVlcnlTZXJ2aWNlKSB7fVxuXG4gIG5nQWZ0ZXJWaWV3SW5pdCgpOiB2b2lkIHtcbiAgICB0aGlzLnNjcmVlblF1ZXJ5U2VydmljZVxuICAgICAgLmdldFBvaW50KClcbiAgICAgIC5waXBlKHRha2VVbnRpbCh0aGlzLmRlc3Ryb3kkKSlcbiAgICAgIC5zdWJzY3JpYmUoKHsgY3VycmVudFBvaW50IH0pID0+IHtcbiAgICAgICAgdGhpcy51cGRhdGVTcGFjZShjdXJyZW50UG9pbnQpO1xuICAgICAgfSk7XG4gIH1cblxuICBwcml2YXRlIGdldEN1cnJlbnRTcGFjZShjdXJyZW50UG9pbnQpOiBbbnVtYmVyLCBudW1iZXJdIHtcbiAgICBsZXQgZmluYWxTcGFjZTogW251bWJlciwgbnVtYmVyXSA9IFtudWxsLCBudWxsXTtcbiAgICBpZiAoQXJyYXkuaXNBcnJheSh0aGlzLmRTcGFjZSkgfHwgdHlwZW9mIHRoaXMuZFNwYWNlID09PSAnbnVtYmVyJykge1xuICAgICAgZmluYWxTcGFjZSA9IHRoaXMuX3RyYW5zU3BhY2VUb0FycmF5KHRoaXMuZFNwYWNlKTtcbiAgICB9IGVsc2Uge1xuICAgICAgZm9yIChjb25zdCBwb2ludCBvZiBEQnJlYWtwb2ludHMpIHtcbiAgICAgICAgaWYgKHRoaXMuZFNwYWNlW3BvaW50XSAhPT0gdW5kZWZpbmVkKSB7XG4gICAgICAgICAgZmluYWxTcGFjZSA9IHRoaXMuX3RyYW5zU3BhY2VUb0FycmF5KHRoaXMuZFNwYWNlW3BvaW50XSk7XG4gICAgICAgIH1cbiAgICAgICAgaWYgKGN1cnJlbnRQb2ludCA9PT0gcG9pbnQpIHtcbiAgICAgICAgICBicmVhaztcbiAgICAgICAgfVxuICAgICAgfVxuICAgIH1cblxuICAgIHJldHVybiBmaW5hbFNwYWNlO1xuICB9XG5cbiAgcHJpdmF0ZSBfdHJhbnNTcGFjZVRvQXJyYXkoc3BhY2UpOiBbbnVtYmVyLCBudW1iZXJdIHtcbiAgICBsZXQgZmluYWxTcGFjZSA9IHNwYWNlO1xuICAgIGlmICh0eXBlb2Ygc3BhY2UgPT09ICdudW1iZXInKSB7XG4gICAgICBmaW5hbFNwYWNlID0gW3NwYWNlLCBudWxsXTtcbiAgICB9XG4gICAgaWYgKHRoaXMuZFNwYWNlRGlyZWN0aW9uID09PSAnaG9yaXpvbnRhbCcpIHtcbiAgICAgIGZpbmFsU3BhY2UgPSBmaW5hbFNwYWNlLnJldmVyc2UoKSBhcyBbbnVtYmVyLCBudW1iZXJdO1xuICAgIH1cblxuICAgIHJldHVybiBmaW5hbFNwYWNlO1xuICB9XG5cbiAgdXBkYXRlU3BhY2UoY3VycmVudFBvaW50KSB7XG4gICAgY29uc3QgZmluYWxTcGFjZSA9IHRoaXMuZ2V0Q3VycmVudFNwYWNlKGN1cnJlbnRQb2ludCk7XG5cbiAgICBjb25zdCBpdGVtcyA9IHRoaXMuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50LmNoaWxkcmVuO1xuXG4gICAgZm9yIChsZXQgaSA9IDA7IGkgPCBpdGVtcy5sZW5ndGggLSAxOyBpKyspIHtcbiAgICAgIGlmIChmaW5hbFNwYWNlWzBdICE9PSBudWxsKSB7XG4gICAgICAgIHRoaXMucmVuZGVyZXIuc2V0U3R5bGUoaXRlbXNbaV0sICdtYXJnaW4tYm90dG9tJywgZmluYWxTcGFjZVswXSArICdweCcpO1xuICAgICAgfSBlbHNlIGlmICh0aGlzLmV4ZWN1dGVkU3BhY2VbMF0gIT09IG51bGwpIHtcbiAgICAgICAgdGhpcy5yZW5kZXJlci5yZW1vdmVTdHlsZShpdGVtc1tpXSwgJ21hcmdpbi1ib3R0b20nKTtcbiAgICAgIH1cbiAgICAgIGlmIChmaW5hbFNwYWNlWzFdICE9PSBudWxsKSB7XG4gICAgICAgIHRoaXMucmVuZGVyZXIuc2V0U3R5bGUoaXRlbXNbaV0sICdtYXJnaW4tcmlnaHQnLCBmaW5hbFNwYWNlWzFdICsgJ3B4Jyk7XG4gICAgICB9IGVsc2UgaWYgKHRoaXMuZXhlY3V0ZWRTcGFjZVsxXSAhPT0gbnVsbCkge1xuICAgICAgICB0aGlzLnJlbmRlcmVyLnJlbW92ZVN0eWxlKGl0ZW1zW2ldLCAnbWFyZ2luLXJpZ2h0Jyk7XG4gICAgICB9XG4gICAgfVxuXG4gICAgdGhpcy5leGVjdXRlZFNwYWNlID0gZmluYWxTcGFjZTtcbiAgfVxuXG4gIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgIHRoaXMuZGVzdHJveSQubmV4dCgpO1xuICAgIHRoaXMuZGVzdHJveSQuY29tcGxldGUoKTtcbiAgfVxufVxuIl19