xuthus/pigallery2
1
0
Fork 0
mirror of https://github.com/xuthus83/pigallery2.git synced 2024-11-03 21:04:03 +08:00
Code Actions Projects Activity

finishing zoom bar design

Browse Source
This commit is contained in:
Patrik J. Braun 2018-12-19 21:41:01 +01:00
parent 135bdca095
commit c81e070f1c
4 changed files with 63 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
docs/index.html
View File

@ -12,6 +12,15 @@
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-131201011-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-131201011-1');
</script>
</head> </head>
<body class="text-center"> <body class="text-center">

30
frontend/app/gallery/lightbox/lightbox.gallery.component.css
View File

@ -204,15 +204,39 @@ app-info-panel {
bottom: 0; bottom: 0;
position: absolute; position: absolute;
margin-bottom: 10px; margin-bottom: 10px;
margin-right: 0;
margin-left: 0;
} }
.zoom-progress-wrapper { .zoom-progress-wrapper {
margin-top: 3px;
height: 11px; height: 11px;
border: 1px solid white; border: 1px solid white;
padding: 0; padding: 0;
} }
.zoom-progress {
height: 10px;
background: white;
input[type="range"].zoom-progress {
height: 11px;
margin-top: 3px;
border: 1px solid white;
background: transparent;
padding: 0;
}
input[type="range"].zoom-progress::-webkit-slider-runnable-track {
background: transparent;
}
input[type="range"].zoom-progress::-moz-range-track {
background: transparent;
}
.controls-zoom .oi {
cursor: pointer;
} }

12
frontend/app/gallery/lightbox/lightbox.gallery.component.html
View File

@ -80,9 +80,15 @@
class="oi oi-chevron-right"></span></div> class="oi oi-chevron-right"></span></div>
<div class="controls controls-zoom row" *ngIf="zoom > 1"> <div class="controls controls-zoom row" *ngIf="zoom > 1">
<div class="zoom-progress-wrapper offset-1 col-10 col-md-4 offset-md-4"> <div class="col-1 col-md-4">
<div class="zoom-progress" <span (click)="zoomOut()" class="oi oi-zoom-out float-right"></span>
[style.width.%]="(zoom-1)/(MAX_ZOOM-1)*100"></div> </div>
<input type="range"
[(ngModel)]="zoom" min="1" [max]="MAX_ZOOM" step="0.1"
value="1" class="col-10 col-md-4 zoom-progress">
<div class="col-1 col-md-4">
<span (click)="zoomIn()" class="oi oi-zoom-in float-left"></span>
</div> </div>
</div> </div>

21
frontend/app/gallery/lightbox/lightbox.gallery.component.ts
View File

@ -43,7 +43,7 @@ export enum PlayBackStates {
}) })
export class GalleryLightboxComponent implements OnDestroy, OnInit { export class GalleryLightboxComponent implements OnDestroy, OnInit {
readonly MAX_ZOOM=10; readonly MAX_ZOOM = 10;
@ViewChild('photo') mediaElement: GalleryLightboxMediaComponent; @ViewChild('photo') mediaElement: GalleryLightboxMediaComponent;
@ViewChild('lightbox') lightboxElement: ElementRef; @ViewChild('lightbox') lightboxElement: ElementRef;
@ -187,7 +187,11 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
return; return;
} }
this.showControls(); this.showControls();
this.setZoom(this.zoom + ($event.deltaY < 0 ? this.zoom / 10 : -this.zoom / 10)); if ($event.deltaY < 0) {
this.zoomIn();
} else {
this.zoomOut();
}
} }
@HostListener('pinch', ['$event']) @HostListener('pinch', ['$event'])
@ -229,6 +233,17 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
} }
} }
zoomIn() {
this.showControls();
this.setZoom(this.zoom + this.zoom / 10);
}
zoomOut() {
this.showControls();
this.setZoom(this.zoom - this.zoom / 10);
}
private setZoom(zoom: number) { private setZoom(zoom: number) {
if (!this.activePhoto || this.activePhoto.gridPhoto.isVideo()) { if (!this.activePhoto || this.activePhoto.gridPhoto.isVideo()) {
@ -300,7 +315,7 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
this.zoom = 1; this.zoom = 1;
} }
if (this.zoom > this.MAX_ZOOM) { if (this.zoom > this.MAX_ZOOM) {
this.zoom = this.MAX_ZOOM; this.zoom = this.MAX_ZOOM;
} }
fixDrag(this.drag); fixDrag(this.drag);
fixDrag(this.prevDrag); fixDrag(this.prevDrag);