banana/definma-ui
2
Fork 0
Code Releases Activity

Properly indent all source files

Browse Source
This commit is contained in:
Kai S. K. Engelbart
2021-01-25 12:34:23 +01:00
parent 2d3782cc82
commit 2f6231a6b5
106 changed files with 5170 additions and 5171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/app/img-magnifier/img-magnifier.component.html
View File

@@ -1,17 +1,17 @@
<div class="img-container">
<div class="magnifier"
[ngStyle]="{
'background-size': backgroundSize,
'background-image': 'url(\'' + src + '\')',
'background-position': '-' + magnifierPos.x * zoom + 'px -' + magnifierPos.y * zoom + 'px',
left: magnifierPos.x + 'px',
top: magnifierPos.y + 'px',
width: magnifierSize.width + 'px',
height: magnifierSize.height + 'px'
}"
(mousemove)="calcPos($event)"
(mouseleave)="showMagnifier = false"
*ngIf="showMagnifier">
</div>
<img [src]="src" alt="" (mousemove)="calcPos($event)" (mouseenter)="showMagnifier = true" #mainImg>
<div class="magnifier"
[ngStyle]="{
'background-size': backgroundSize,
'background-image': 'url(\'' + src + '\')',
'background-position': '-' + magnifierPos.x * zoom + 'px -' + magnifierPos.y * zoom + 'px',
left: magnifierPos.x + 'px',
top: magnifierPos.y + 'px',
width: magnifierSize.width + 'px',
height: magnifierSize.height + 'px'
}"
(mousemove)="calcPos($event)"
(mouseleave)="showMagnifier = false"
*ngIf="showMagnifier">
</div>
<img [src]="src" alt="" (mousemove)="calcPos($event)" (mouseenter)="showMagnifier = true" #mainImg>
</div>

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

@@ -1,18 +1,18 @@
@import "~@inst-iot/bosch-angular-ui-components/styles/variables/colors";
.img-container {
position:relative;
overflow: hidden;
position:relative;
overflow: hidden;
& > img {
width: 100%;
}
& > img {
width: 100%;
}
}
.magnifier {
position: absolute;
background: #FFF no-repeat -500px -500px;
z-index: 99;
border: 1px solid #FFF;
box-shadow: 10px 10px 25px $color-bosch-light-gray-b25;
position: absolute;
background: #FFF no-repeat -500px -500px;
z-index: 99;
border: 1px solid #FFF;
box-shadow: 10px 10px 25px $color-bosch-light-gray-b25;
}

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

@@ -1,48 +1,48 @@
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']
selector: 'app-img-magnifier',
templateUrl: './img-magnifier.component.html',
styleUrls: ['./img-magnifier.component.scss']
})
export class ImgMagnifierComponent implements OnInit, AfterViewInit {
@Input() src: string; // Image source
@Input() zoom: number; // Zoom level
@Input() magnifierSize: {width: number, height: number}; // Size of the magnifier
@ViewChild('mainImg') mainImg: ElementRef;
@Input() src: string; // Image source
@Input() zoom: number; // Zoom level
@Input() magnifierSize: {width: number, height: number}; // Size of the magnifier
@ViewChild('mainImg') mainImg: ElementRef;
backgroundSize;
magnifierPos = {x: 0, y: 0}; // Position of the magnifier
showMagnifier = false;
backgroundSize;
magnifierPos = {x: 0, y: 0}; // Position of the magnifier
showMagnifier = false;
constructor(
private window: Window
) { }
constructor(
private window: Window
) { }
ngOnInit(): void {
}
ngOnInit(): void {
}
ngAfterViewInit() {
setTimeout(() => {
this.calcBackgroundSize();
}, 1);
}
ngAfterViewInit() {
setTimeout(() => {
this.calcBackgroundSize();
}, 1);
}
calcPos(event) { // Calculate the current magnifier position
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)
);
}
calcPos(event) { // Calculate the current magnifier position
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';
}
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';
}
}