* linkes replaced with icons

* touch events added to display-image

.angular-cli.json

@@ -19,6 +19,7 @@
       "testTsconfig": "tsconfig.spec.json",
       "prefix": "app",
       "styles": [
+        "assets/css/font-awesome.css",
         "styles.css"
       ],
       "scripts": [],
@@ -40,6 +41,7 @@
       "tsconfig": "tsconfig.app-ssr.json",
       "prefix": "app",
       "styles": [
+        "assets/css/font-awesome.css",
         "styles.css"
       ],
       "scripts": [],

src/app/gallery/album/album.component.html

@@ -1,5 +1,8 @@
 <div class="main container">
-  <h1>{{album.name}}<span class="align right"><a [href]="exportUrl">Export</a> * <a [routerLink]="['']">Back to album list</a></span></h1>
+  <h1>{{album.name}}<span class="align right">
+    <a [href]="exportUrl" title="Download compressed album"><i class="fa fa-download"></i></a>
+    <a [routerLink]="['']" title="Back to albums list"><i class="fa fa-level-up"></i></a>
+  </span></h1>
   <div class="row images">
     <app-thumbnail *ngFor="let thumbnail of thumbnailsLeft"
                    [image]="thumbnail.image"

src/app/gallery/display-image/display-image.component.ts

@@ -14,9 +14,12 @@ export class DisplayImageComponent implements OnInit {
   @Output()
   private imageChange: EventEmitter<any> = new EventEmitter();
 
+  private touchX: number = 0;
+  private touchY: number = 0;
+
   private slug: string = "";
   private image: string = "";
-  private extitle: string = "";
+  private albumTitle: string = "";
 
   private visible: boolean = false;
 
@@ -60,7 +63,7 @@ export class DisplayImageComponent implements OnInit {
   private init(slug, image, extitle) {
     this.slug = slug;
     this.image = image;
-    this.extitle = extitle;
+    this.albumTitle = extitle;
   }
 
   private show(resolve: (boolean) => any) {
@@ -72,7 +75,7 @@ export class DisplayImageComponent implements OnInit {
 
   private hide() {
     this.visible = false;
-    this.titleService.setTitle(`${this.extitle} - photos.yvan.hu`);
+    this.titleService.setTitle(`${this.albumTitle} - photos.yvan.hu`);
     this.locationService.go(`/album/${this.slug}`);
   }
 
@@ -91,7 +94,7 @@ export class DisplayImageComponent implements OnInit {
   }
 
   @HostListener('document:keyup', ['$event.key'])
-  public handleKeyPress(keyPressed: string) {
+  private handleKeyPress(keyPressed: string) {
     if (this.visible) {
       switch (keyPressed) {
         case 'Escape':
@@ -110,10 +113,41 @@ export class DisplayImageComponent implements OnInit {
   }
 
   @HostListener('click')
-  public handleClick() {
+  private handleClick() {
     if(this.visible) {
       this.nextImage();
     }
   }
 
+  @HostListener('touchstart', ['$event'])
+  private touchStart(touchEvent: TouchEvent) {
+    this.touchX = touchEvent.touches[0].clientX;
+    this.touchY = touchEvent.touches[0].clientY;
+  }
+
+  @HostListener('touchend', ['$event'])
+  private touchEnd(touchEvent: TouchEvent) {
+    let xDiff: number = this.touchX - touchEvent.changedTouches[0].clientX;
+    let yDiff: number = this.touchY - touchEvent.changedTouches[0].clientY;
+
+    if( Math.abs(xDiff) > Math.abs(yDiff) ) {
+      if( xDiff>0 ) {
+        this.prevImage();
+      } else {
+        this.nextImage();
+      }
+    } else {
+      this.hide();
+    }
+
+    this.touchX = 0;
+    this.touchY = 0;
+  }
+
+  @HostListener('touchcancel')
+  private touchCancel() {
+    this.touchX = 0;
+    this.touchY = 0;
+  }
+
 }