42 lines
1.4 KiB
TypeScript
42 lines
1.4 KiB
TypeScript
|
import {AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild} from '@angular/core';
|
||
|
|
|
||
|
|
@Component({
|
||
|
|
selector: 'app-img-magnifier',
|
||
|
|
templateUrl: './img-magnifier.component.html',
|
||
|
|
styleUrls: ['./img-magnifier.component.scss']
|
||
|
|
})
|
||
|
|
export class ImgMagnifierComponent implements OnInit, AfterViewInit {
|
||
|
|
|
||
|
|
@Input('src') src: string;
|
||
|
|
@Input('zoom') zoom: number;
|
||
|
|
@Input('magnifierSize') magnifierSize: {width: number, height: number};
|
||
|
|
@ViewChild('mainImg') mainImg: ElementRef;
|
||
|
|
|
||
|
|
backgroundSize;
|
||
|
|
magnifierPos = {x: 0, y: 0};
|
||
|
|
showMagnifier = false;
|
||
|
|
|
||
|
|
constructor(
|
||
|
|
private window: Window
|
||
|
|
) { }
|
||
|
|
|
||
|
|
ngOnInit(): void {
|
||
|
|
}
|
||
|
|
|
||
|
|
ngAfterViewInit() {
|
||
|
|
setTimeout(() => {
|
||
|
|
this.calcBackgroundSize();
|
||
|
|
}, 1);
|
||
|
|
}
|
||
|
|
|
||
|
|
calcPos(event) {
|
||
|
|
const img = this.mainImg.nativeElement.getBoundingClientRect();
|
||
|
|
this.magnifierPos.x = Math.min(img.width - this.magnifierSize.width, Math.max(0, event.pageX - img.left - this.window.pageXOffset - this.magnifierSize.width / 2));
|
||
|
|
this.magnifierPos.y = Math.min(img.height - this.magnifierSize.height + 7, Math.max(0, event.pageY - img.top - this.window.pageYOffset - this.magnifierSize.height / 2));
|
||
|
|
}
|
||
|
|
|
||
|
|
calcBackgroundSize() {
|
||
|
|
this.backgroundSize = this.mainImg ? (this.mainImg.nativeElement.width * this.zoom - this.magnifierSize.width) + 'px ' + (this.mainImg.nativeElement.height * this.zoom - this.magnifierSize.height) + 'px ' : '0 0';
|
||
|
|
}
|
||
|
|
}
|