1
0
mirror of https://github.com/xuthus83/pigallery2.git synced 2024-11-03 21:04:03 +08:00
pigallery2/frontend/app/gallery/map/lightbox/lightbox.map.gallery.component.html
2018-12-09 13:59:51 +01:00

76 lines
2.7 KiB
HTML

<div [hidden]="!visible" #root>
<div class="lightbox"
[style.width.px]="lightboxDimension.width"
[style.height.px]="lightboxDimension.height"
[style.top.px]="lightboxDimension.top"
[style.left.px]="lightboxDimension.left"
[style.opacity]="opacity">
<yaga-map #yagaMap
[style.width.px]="mapDimension.width"
[style.height.px]="mapDimension.height">
<yaga-polyline *ngFor="let path of paths"
[latLngs]="path">
</yaga-polyline>
<yaga-marker
*ngFor="let path of paths"
[lat]="path[0].lat"
[lng]="path[1].lng">
</yaga-marker>
<yaga-marker
*ngFor="let photo of mapPhotos"
[lat]="photo.lat"
[lng]="photo.lng">
<yaga-icon
*ngIf="photo.iconUrl"
[iconUrl]="photo.iconUrl"
[iconSize]="yagaMap.zoom < 15 ? smallIconSize : iconSize"
></yaga-icon>
<yaga-popup
(open)="loadPreview(photo)"
[minWidth]="photo.preview.width">
<img *ngIf="photo.preview.thumbnail.Src"
[style.width.px]="photo.preview.width"
[style.height.px]="photo.preview.height"
[src]="photo.preview.thumbnail.Src | fixOrientation:photo.orientation | async">
<div class="preview-loading"
*ngIf="!photo.preview.thumbnail.Src"
[style.width.px]="photo.preview.width"
[style.height.px]="photo.preview.height">
<span class="oi"
[ngClass]="photo.preview.thumbnail.Error ? 'oi-warning' : 'oi-picture'"
aria-hidden="true">
</span>
</div>
</yaga-popup>
</yaga-marker>
<yaga-attribution-control
prefix=""
[attributions]="mapService.Attributions">
</yaga-attribution-control>
<yaga-tile-layer [url]="mapService.MapLayer"></yaga-tile-layer>
</yaga-map>
</div>
<div id="controllers-container" *ngIf="controllersVisible">
<div id="controls">
<span>
<span class="oi oi-fullscreen-exit highlight"
*ngIf="fullScreenService.isFullScreenEnabled()"
(click)="fullScreenService.exitFullScreen()" title="toggle fullscreen"></span>
</span>
<span>
<span class="oi oi-fullscreen-enter highlight"
*ngIf="!fullScreenService.isFullScreenEnabled()"
(click)="fullScreenService.showFullScreen(root)" title="toggle fullscreen"></span>
</span>
<span>
<span class="oi oi-x highlight" (click)="hide()" title="close"></span>
</span>
</div>
</div>
</div>