xuthus/pigallery2
1
0
Fork 0
mirror of https://github.com/xuthus83/pigallery2.git synced 2025-01-14 14:43:17 +08:00
Code Actions Projects Activity

updating docs and fixing fullscreen error

Browse Source
This commit is contained in:
Patrik J. Braun 2018-12-12 21:03:06 +01:00
parent afcf0e2032
commit 298a6600d3
9 changed files with 76 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
README.md
View File

@ -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

8
docs/index.html
View File

@ -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>

16
frontend/app/gallery/fullscreen.service.ts
View File

@ -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);
}

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

@ -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':

6
frontend/app/gallery/map/lightbox/lightbox.map.gallery.component.html
View File

@ -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>

27
frontend/app/gallery/map/lightbox/lightbox.map.gallery.component.ts
View File

@ -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;

6
frontend/app/gallery/map/map.gallery.component.html
View File

@ -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=""

12
frontend/translate/messages.en.xlf
View File

@ -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">

14
frontend/translate/messages.hu.xlf
View File

@ -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>