mirror of
https://github.com/xuthus83/pigallery2.git
synced 2025-01-14 14:43:17 +08:00
updating docs and fixing fullscreen error
This commit is contained in:
parent
afcf0e2032
commit
298a6600d3
@ -142,15 +142,17 @@ apt-get install build-essential libkrb5-dev gcc g++
|
||||
* saving generated thumbnails to TEMP folder for reuse
|
||||
* supporting multi-core CPUs
|
||||
* supporting hardware acceleration ([sharp](https://github.com/lovell/sharp) and [gm](https://github.com/aheckmann/gm) as optional and JS-based [Jimp](https://github.com/oliver-moran/jimp) as fallback)
|
||||
* Custom lightbox for full screen photo viewing
|
||||
* Custom lightbox for full screen photo and video viewing
|
||||
* keyboard support for navigation
|
||||
* showing low-res thumbnail while full image loads
|
||||
* Information panel for showing **Exif info**
|
||||
* Automatic playing
|
||||
* gesture support (swipe left, right, up)
|
||||
* shortcut support
|
||||
* Client side caching (directories and search results)
|
||||
* Rendering **photos** with GPS coordinates **on google map**
|
||||
* .gpx file support
|
||||
* Rendering **photos** with GPS coordinates **on open street maps**
|
||||
* .gpx file support: rendering paths to map
|
||||
* supports [OSM](https://www.openstreetmap.org) and [Mapbox](https://www.mapbox.com) by default, but you can add any provider that has a tile url
|
||||
* **Two modes: SQL database and no-database mode**
|
||||
* both modes supports
|
||||
* user management
|
||||
@ -162,6 +164,7 @@ apt-get install build-essential libkrb5-dev gcc g++
|
||||
* sharing
|
||||
* setting link expiration time
|
||||
* internalization / translation support
|
||||
* currently supported languages: eng, hun
|
||||
* Nice design
|
||||
* responsive design (phone, tablet desktop support)
|
||||
* Setup page
|
||||
|
@ -156,19 +156,21 @@
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Custom lightbox for full screen photo viewing
|
||||
<li>Custom lightbox for full screen photo and video viewing
|
||||
<ul>
|
||||
<li>keyboard support for navigation</li>
|
||||
<li>showing low-res thumbnail while full image loads</li>
|
||||
<li>Information panel for showing <strong>Exif info</strong></li>
|
||||
<li>Automatic playing</li>
|
||||
<li>gesture support (swipe left, right, up)</li>
|
||||
<li>shortcut support</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Client side caching (directories and search results)</li>
|
||||
<li>Rendering <strong>photos</strong> with GPS coordinates <strong>on google map</strong>
|
||||
<li>Rendering <strong>photos</strong> with GPS coordinates <strong>on open street map</strong>
|
||||
<ul>
|
||||
<li>.gpx file support</li>
|
||||
<li>.gpx file support: rendering paths to map</li>
|
||||
<li>supports OSM and Mapbox by default, but you can add any provider that has a tile url</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><strong>Two modes: SQL database and no-database mode</strong>
|
||||
|
@ -22,19 +22,19 @@ export class FullScreenService {
|
||||
document['webkitFullscreenElement']);
|
||||
}
|
||||
|
||||
public showFullScreen(element: any) {
|
||||
public showFullScreen(element: Element) {
|
||||
if (this.isFullScreenEnabled()) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (element.requestFullscreen) {
|
||||
element.requestFullscreen();
|
||||
} else if (element.mozRequestFullScreen) {
|
||||
element.mozRequestFullScreen();
|
||||
} else if (element.webkitRequestFullscreen) {
|
||||
element.webkitRequestFullscreen();
|
||||
} else if (element.msRequestFullscreen) {
|
||||
element.msRequestFullscreen();
|
||||
element.requestFullscreen().catch(console.error);
|
||||
} else if ((<any>element).mozRequestFullScreen) {
|
||||
(<any>element).mozRequestFullScreen();
|
||||
} else if ((<any>element).webkitRequestFullscreen) {
|
||||
(<any>element).webkitRequestFullscreen();
|
||||
} else if ((<any>element).msRequestFullscreen) {
|
||||
(<any>element).msRequestFullscreen();
|
||||
}
|
||||
this.OnFullScreenChange.trigger(true);
|
||||
}
|
||||
|
@ -39,7 +39,7 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
|
||||
|
||||
@ViewChild('photo') mediaElement: GalleryLightboxMediaComponent;
|
||||
@ViewChild('lightbox') lightboxElement: ElementRef;
|
||||
@ViewChild('root') root: HTMLElement;
|
||||
@ViewChild('root') root: ElementRef;
|
||||
|
||||
public navigation = {hasPrev: true, hasNext: true};
|
||||
public blackCanvasOpacity = 0;
|
||||
@ -251,7 +251,7 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
|
||||
if (this.fullScreenService.isFullScreenEnabled()) {
|
||||
this.fullScreenService.exitFullScreen();
|
||||
} else {
|
||||
this.fullScreenService.showFullScreen(this.root);
|
||||
this.fullScreenService.showFullScreen(this.root.nativeElement);
|
||||
}
|
||||
break;
|
||||
case 'c':
|
||||
|
@ -59,15 +59,15 @@
|
||||
<span>
|
||||
<span class="oi oi-fullscreen-exit highlight"
|
||||
*ngIf="fullScreenService.isFullScreenEnabled()"
|
||||
(click)="fullScreenService.exitFullScreen()" title="toggle fullscreen"></span>
|
||||
(click)="fullScreenService.exitFullScreen()" title="toggle fullscreen, key: f" i18n-title></span>
|
||||
</span>
|
||||
<span>
|
||||
<span class="oi oi-fullscreen-enter highlight"
|
||||
*ngIf="!fullScreenService.isFullScreenEnabled()"
|
||||
(click)="fullScreenService.showFullScreen(root)" title="toggle fullscreen"></span>
|
||||
(click)="fullScreenService.showFullScreen(root)" title="toggle fullscreen, key: f" i18n-title></span>
|
||||
</span>
|
||||
<span>
|
||||
<span class="oi oi-x highlight" (click)="hide()" title="close"></span>
|
||||
<span class="oi oi-x highlight" (click)="hide()" title="close, key: Escape" i18n-title></span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
@ -56,6 +56,25 @@ export class GalleryMapLightboxComponent implements OnChanges, AfterViewInit {
|
||||
|
||||
}
|
||||
|
||||
@HostListener('window:resize', ['$event'])
|
||||
async onResize() {
|
||||
this.lightboxDimension = <Dimension>{
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: this.getScreenWidth(),
|
||||
height: this.getScreenHeight()
|
||||
};
|
||||
this.mapDimension = <Dimension>{
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: this.getScreenWidth(),
|
||||
height: this.getScreenHeight()
|
||||
};
|
||||
await Utils.wait(0);
|
||||
this.yagaMap.invalidateSize();
|
||||
}
|
||||
|
||||
|
||||
|
||||
public async show(position: Dimension) {
|
||||
this.hideImages();
|
||||
@ -209,6 +228,14 @@ export class GalleryMapLightboxComponent implements OnChanges, AfterViewInit {
|
||||
}
|
||||
const event: KeyboardEvent = window.event ? <any>window.event : e;
|
||||
switch (event.key) {
|
||||
case 'f':
|
||||
case 'F':
|
||||
if (this.fullScreenService.isFullScreenEnabled()) {
|
||||
this.fullScreenService.exitFullScreen();
|
||||
} else {
|
||||
this.fullScreenService.showFullScreen(this.elementRef.nativeElement);
|
||||
}
|
||||
break;
|
||||
case 'Escape': // escape
|
||||
this.hide();
|
||||
break;
|
||||
|
@ -12,12 +12,6 @@
|
||||
*ngFor="let photo of mapPhotos"
|
||||
[lat]="photo.lat"
|
||||
[lng]="photo.lng">
|
||||
<!-- <yaga-icon
|
||||
[iconSize]="[25,41]"
|
||||
[iconAnchor]="[13,41]"
|
||||
iconUrl="assets/leaflet/marker-icon.png"
|
||||
shadowUrl="assets/leaflet/marker-shadow.png"
|
||||
></yaga-icon>-->
|
||||
</yaga-marker>
|
||||
<yaga-attribution-control
|
||||
prefix=""
|
||||
|
@ -126,6 +126,14 @@
|
||||
<context context-type="sourcefile">app/gallery/lightbox/lightbox.gallery.component.html</context>
|
||||
<context context-type="linenumber">47</context>
|
||||
</context-group>
|
||||
<context-group purpose="location">
|
||||
<context context-type="sourcefile">app/gallery/map/lightbox/lightbox.map.gallery.component.html</context>
|
||||
<context context-type="linenumber">62</context>
|
||||
</context-group>
|
||||
<context-group purpose="location">
|
||||
<context context-type="sourcefile">app/gallery/map/lightbox/lightbox.map.gallery.component.html</context>
|
||||
<context context-type="linenumber">67</context>
|
||||
</context-group>
|
||||
<target>toggle fullscreen, key: f</target>
|
||||
</trans-unit>
|
||||
<trans-unit id="d78be78234111c1ca3a1d28d981a05ed6ce5d38d" datatype="html">
|
||||
@ -134,6 +142,10 @@
|
||||
<context context-type="sourcefile">app/gallery/lightbox/lightbox.gallery.component.html</context>
|
||||
<context context-type="linenumber">54</context>
|
||||
</context-group>
|
||||
<context-group purpose="location">
|
||||
<context context-type="sourcefile">app/gallery/map/lightbox/lightbox.map.gallery.component.html</context>
|
||||
<context context-type="linenumber">70</context>
|
||||
</context-group>
|
||||
<target>close, key: Escape</target>
|
||||
</trans-unit>
|
||||
<trans-unit id="774684628600c4622be2ed1dab5e1525c03b7bd3" datatype="html">
|
||||
|
@ -126,6 +126,14 @@
|
||||
<context context-type="sourcefile">app/gallery/lightbox/lightbox.gallery.component.html</context>
|
||||
<context context-type="linenumber">47</context>
|
||||
</context-group>
|
||||
<context-group purpose="location">
|
||||
<context context-type="sourcefile">app/gallery/map/lightbox/lightbox.map.gallery.component.html</context>
|
||||
<context context-type="linenumber">62</context>
|
||||
</context-group>
|
||||
<context-group purpose="location">
|
||||
<context context-type="sourcefile">app/gallery/map/lightbox/lightbox.map.gallery.component.html</context>
|
||||
<context context-type="linenumber">67</context>
|
||||
</context-group>
|
||||
<target>teljes képernyős váltás, gyorsgomb: f</target>
|
||||
</trans-unit>
|
||||
<trans-unit id="d78be78234111c1ca3a1d28d981a05ed6ce5d38d" datatype="html">
|
||||
@ -134,6 +142,10 @@
|
||||
<context context-type="sourcefile">app/gallery/lightbox/lightbox.gallery.component.html</context>
|
||||
<context context-type="linenumber">54</context>
|
||||
</context-group>
|
||||
<context-group purpose="location">
|
||||
<context context-type="sourcefile">app/gallery/map/lightbox/lightbox.map.gallery.component.html</context>
|
||||
<context context-type="linenumber">70</context>
|
||||
</context-group>
|
||||
<target>bezárás, gyorsgomb: escape</target>
|
||||
</trans-unit>
|
||||
<trans-unit id="774684628600c4622be2ed1dab5e1525c03b7bd3" datatype="html">
|
||||
@ -1840,4 +1852,4 @@
|
||||
</trans-unit>
|
||||
</body>
|
||||
</file>
|
||||
</xliff>
|
||||
</xliff>
|
Loading…
x
Reference in New Issue
Block a user