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 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 | 77x 77x 77x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | import { Directive, ElementRef, HostBinding, Input, OnDestroy, OnInit } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { Ref } from '../model/ref';
import { ConfigService } from '../service/config.service';
import { Dim, height, ImageService, width } from '../service/image.service';
import { Store } from '../store/store';
@Directive({ selector: '[appImage]' })
export class ImageDirective implements OnInit, OnDestroy {
@Input()
grid = false;
@Input()
padding = 8;
@Input()
ref?: Ref;
@Input('defaultWidth')
defaultWidth?: number;
@Input('defaultHeight')
defaultHeight?: number;
@HostBinding('class.loading')
loading = true;
private dim: Dim = { width: 0, height: 0 };
private resizeObserver?: ResizeObserver;
private loadingUrl = '';
constructor(
private config: ConfigService,
private store: Store,
private elRef: ElementRef,
private imgs: ImageService,
) {
this.store.eventBus.events.pipe(takeUntilDestroyed()).subscribe(event => {
if (event.event === 'refresh') {
if (this.ref?.url && this.store.eventBus.isRef(event, this.ref)) {
if (this.loading && this.loadingUrl) {
this.url = this.loadingUrl;
}
}
}
});
}
ngOnInit() {
if (this.grid) {
this.resizeObserver = window.ResizeObserver && new ResizeObserver(() => this.onResize());
this.resizeObserver?.observe(this.el);
} else {
if (this.config.mobile) {
this.el.style.width = this.defaultWidthPx || null;
this.el.style.height = this.defaultHeightPx || this.el.clientWidth + 'px';
} else {
this.el.style.width = this.defaultWidthPx || '600px';
this.el.style.height = this.defaultHeightPx || '600px';
}
}
}
ngOnDestroy() {
this.resizeObserver?.disconnect();
}
get el() {
return this.elRef.nativeElement;
}
get parentWidth() {
let parent = this.el.parentElement;
while (parent && !parent.offsetWidth) parent = parent.parentElement;
return parent?.offsetWidth || 0;
}
get defaultWidthPx() {
if (!this.defaultWidth) return undefined;
if (this.config.mobile && this.defaultWidth > window.innerWidth) return 'calc(100vw - 32px)'
return this.defaultWidth + 'px'
}
get defaultHeightPx() {
if (!this.defaultHeight) return undefined;
return this.defaultHeight + 'px'
}
@Input('appImage')
set url(value: string) {
this.loading = true;
this.loadingUrl = value;
this.el.style.backgroundRepeat = 'no-repeat';
this.el.style.backgroundPosition = 'center center';
this.el.style.backgroundSize = 'unset';
this.imgs.getImage(value)
.then((dim: Dim) => {
this.loading = false;
this.el.style.backgroundImage = `url('${value}')`;
this.el.style.backgroundSize = this.config.mobile ? 'cover' : 'contain';
this.dim = dim;
this.onResize();
});
}
private onResize() {
if (this.defaultWidth && this.defaultHeight) {
this.el.style.width = this.defaultWidth + 'px';
this.el.style.height = this.defaultHeight + 'px';
this.el.style.backgroundSize = '100% 100%';
return;
}
const parentWidth = this.parentWidth - (this.grid ? 0 : this.padding);
if (this.config.mobile && !this.grid && (!this.defaultWidth || this.defaultWidth >= window.innerWidth)) {
this.el.style.width = parentWidth + 'px';
this.el.style.height = this.defaultHeightPx || height(parentWidth, this.dim) + 'px';
} else if (this.grid || this.dim.width > parentWidth && (!this.defaultWidth || this.defaultWidth >= parentWidth)) {
this.el.style.width = parentWidth + 'px';
this.el.style.height = this.defaultHeightPx || height(parentWidth, this.dim) + 'px';
} else if (this.defaultWidth) {
this.el.style.width = this.defaultWidthPx;
this.el.style.height = this.defaultHeightPx || height(this.defaultWidth, this.dim) + 'px';
} else if (this.defaultHeight) {
this.el.style.width = width(this.defaultHeight, this.dim) + 'px';
this.el.style.height = this.defaultHeightPx;
} else {
this.el.style.width = this.dim.width + 'px';
this.el.style.height = this.dim.height + 'px';
}
}
}
|