banana/definma-ui
2
Fork 0
Code Releases Activity

small fixes

Browse Source
This commit is contained in:
VLE2FE
2020-08-12 11:06:46 +02:00
parent 638868875b
commit 737ba40817
19 changed files with 137 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/img-magnifier/img-magnifier.component.scss
View File

@ -11,9 +11,7 @@
.magnifier {
position: absolute;
background: #FFF;
background-repeat: no-repeat;
background-position: -500px -500px;
background: #FFF no-repeat -500px -500px;
z-index: 99;
border: 1px solid #FFF;
box-shadow: 10px 10px 25px $color-bosch-light-gray-b25;

19
src/app/img-magnifier/img-magnifier.component.ts
View File

@ -7,9 +7,9 @@ import {AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild} from '@a
})
export class ImgMagnifierComponent implements OnInit, AfterViewInit {
@Input('src') src: string;
@Input('zoom') zoom: number;
@Input('magnifierSize') magnifierSize: {width: number, height: number};
@Input() src: string;
@Input() zoom: number;
@Input() magnifierSize: {width: number, height: number};
@ViewChild('mainImg') mainImg: ElementRef;
backgroundSize;
@ -31,11 +31,18 @@ export class ImgMagnifierComponent implements OnInit, AfterViewInit {
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));
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';
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';
}
}