* user selection disabled

* animations added
* history handling fixed

.angular-cli.json

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

package-lock.json

@@ -5273,6 +5273,11 @@
         "sort-keys": "1.1.2"
       }
     },
+    "normalize.css": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-7.0.0.tgz",
+      "integrity": "sha1-q/sd2CRwZ04DIrU86xqvQSk45L8="
+    },
     "npm-run-path": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",

package.json

@@ -24,6 +24,7 @@
     "@angular/platform-server": "^4.3.3",
     "@angular/router": "^4.2.4",
     "core-js": "^2.4.1",
+    "normalize.css": "^7.0.0",
     "pm2": "^2.6.1",
     "rxjs": "^5.4.2",
     "zone.js": "^0.8.14"

src/app/animations/fade-in.animation.ts

@@ -0,0 +1,14 @@
+import {trigger, state, animate, transition, style} from '@angular/animations';
+
+export const fadeInAnimation =
+  trigger('fadeInAnimation', [
+    // route 'enter' transition
+    transition(':enter', [
+
+      // styles at start of transition
+      style({opacity: 0}),
+
+      // animation and styles at end of transition
+      animate('3s', style({opacity: 1}))
+    ]),
+  ]);

src/app/animations/index.ts

@@ -0,0 +1,2 @@
+export * from './fade-in.animation';
+export * from './slide-in-out.animation';

src/app/animations/slide-in-out.animation.ts

@@ -0,0 +1,51 @@
+import {trigger, state, animate, transition, style} from '@angular/animations';
+
+export const slideInOutAnimation =
+  trigger('slideInOutAnimation', [
+
+    // end state styles for route container (host)
+    state('*', style({
+      // the view covers the whole screen with a semi tranparent background
+      position: 'fixed',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      // backgroundColor: 'rgba(0, 0, 0, 0.8)'
+    })),
+
+    // route 'enter' transition
+    transition(':enter', [
+
+      // styles at start of transition
+      style({
+        // start with the content positioned off the right of the screen,
+        // -400% is required instead of -100% because the negative position adds to the width of the element
+        top: '-100%',
+
+        // start with background opacity set to 0 (invisible)
+        // backgroundColor: 'rgba(0, 0, 0, 0)'
+      }),
+
+      // animation and styles at end of transition
+      animate('.5s ease-in-out', style({
+        // transition the right position to 0 which slides the content into view
+        top: 0,
+
+        // transition the background opacity to 0.8 to fade it in
+        // backgroundColor: 'rgba(0, 0, 0, 0.8)'
+      }))
+    ]),
+
+    // route 'leave' transition
+    transition(':leave', [
+      // animation and styles at end of transition
+      animate('.5s ease-in-out', style({
+        // transition the right position to -400% which slides the content out of view
+        top: '-100%',
+
+        // transition the background opacity to 0 to fade it out
+        // backgroundColor: 'rgba(0, 0, 0, 0)'
+      }))
+    ])
+  ]);

src/app/app.module.ts

@@ -1,4 +1,5 @@
 import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations"
 import { NgModule } from '@angular/core';
 
 import { AppRoutingModule } from './app-routing.module';
@@ -13,6 +14,7 @@ import { GalleryModule } from "./gallery/gallery.module";
     BrowserModule.withServerTransition({
       appId: 'angullary'
     }),
+    BrowserAnimationsModule,
     AppRoutingModule,
     GalleryModule,
   ],

src/app/gallery/album/album.component.ts

@@ -1,12 +1,12 @@
-import {Component, OnInit} from '@angular/core';
+import { Component, OnInit } from '@angular/core';
-import {ActivatedRoute} from "@angular/router";
+import { ActivatedRoute } from "@angular/router";
-import {Title} from "@angular/platform-browser";
+import { Title } from "@angular/platform-browser";
 
-import {Album} from "../shared/album.model";
+import { Album } from "../shared/album.model";
-import {DisplayImageService} from "../display-image/display-image.service";
+import { DisplayImageService } from "../display-image/display-image.service";
-import {environment} from "../../../environments/environment";
+import { environment } from "../../../environments/environment";
-import {Image} from "../shared/image.model";
+import { Image } from "../shared/image.model";
-import {Thumbnail} from "../shared/thumbnail.model";
+import { Thumbnail } from "../shared/thumbnail.model";
 
 const IDX_LEFT = 0;
 const IDX_MIDDLE = 1;
@@ -32,20 +32,26 @@ export class AlbumComponent implements OnInit {
 
     constructor(private titleService: Title,
                 private route: ActivatedRoute,
-              private displayImageService: DisplayImageService) {}
+                private displayImageService: DisplayImageService) {
+    }
 
     ngOnInit() {
-    this.route.data.subscribe((data: { albums: Array<Album>}) => {
+        this.route.data.subscribe((data: { albums: Array<Album> }) => {
             this.album = data.albums.find(album => album.slug == this.route.snapshot.params.slug);
             this.titleService.setTitle(`${this.album.name} - photos.yvan.hu`);
             this.initThumbnails();
-      if(this.route.snapshot.params.image) {
+            this.route.params.subscribe((params: {
+                slug: string,
+                image: string
+            }) => {
+                if (params.image) {
                     this.imageClick(
-          this.route.snapshot.params.slug,
+                        params.slug,
-          this.route.snapshot.params.image
+                        params.image
-        );
+                    )
                 }
             });
+        });
     }
 
     private initThumbnails() {
@@ -62,7 +68,7 @@ export class AlbumComponent implements OnInit {
         }).map(thumbnail => {
             let heights = [this.leftHeight, this.middleHeight, this.rightHeight];
             let idx = heights.reduce((low, nxt, idx) => nxt < heights[low] ? idx : low, 0);
-      switch(idx) {
+            switch (idx) {
                 case IDX_LEFT:
                     this.thumbnailsLeft.push(thumbnail);
                     this.leftHeight += thumbnail.height + THUMB_MARGIN;
@@ -91,7 +97,7 @@ export class AlbumComponent implements OnInit {
         this.displayImageService.activate(slug, path, this.album.name);
     }
 
-  public switchImage(evnt:{direction: string, currentPath: string}) {
+    public switchImage(evnt: { direction: string, currentPath: string }) {
         switch (evnt.direction) {
             case 'next':
                 this.nextImage(evnt.currentPath);
@@ -104,20 +110,20 @@ export class AlbumComponent implements OnInit {
 
     private nextImage(path: string) {
         let currentIndex: number = this.album.images.findIndex(image => image.path == path);
-    if(this.album.images.length-1 > currentIndex) {
+        if (this.album.images.length - 1 > currentIndex) {
             this.displayImageService.activate(
                 this.album.slug,
-        this.album.images[currentIndex+1].path
+                this.album.images[currentIndex + 1].path
             )
         }
     }
 
     private prevImage(path: string) {
         let currentIndex: number = this.album.images.findIndex(image => image.path == path);
-    if(0 < currentIndex) {
+        if (0 < currentIndex) {
             this.displayImageService.activate(
                 this.album.slug,
-        this.album.images[currentIndex-1].path
+                this.album.images[currentIndex - 1].path
             )
         }
     }

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

@@ -4,6 +4,7 @@ import { Location } from "@angular/common";
 import { environment } from "../../../environments/environment";
 import { Title } from "@angular/platform-browser";
 import { DisplayImageService } from "./display-image.service";
+import { Router } from "@angular/router";
 
 @Component({
     selector: 'app-display-image',
@@ -24,12 +25,13 @@ export class DisplayImageComponent implements OnInit {
     private visible: boolean = false;
 
     public constructor(private titleService: Title,
-              private locationService: Location,
+                       private router: Router,
                        private displayImageService: DisplayImageService) {
         displayImageService.activate = this.activate.bind(this);
     }
 
-  public ngOnInit() {}
+    public ngOnInit() {
+    }
 
     public get modalStyle(): any {
         return {
@@ -43,17 +45,14 @@ export class DisplayImageComponent implements OnInit {
     }
 
     public get imageUrl(): string {
-    try {
+        let url = environment.apiUrl + `/image/${this.slug}/${this.image}`;
-      return environment.apiUrl + `/image/${this.slug}/${this.image}`;
+        return url;
-    } catch (e) {
-      return '';
-    }
     }
 
     public activate(slug = "", image = "", extitle = "") {
         this.init(slug, image, extitle);
 
-    this.locationService.go(`/album/${this.slug}/${this.image}`);
+        this.router.navigate([`/album/${this.slug}/${this.image}`]);
 
         return new Promise<boolean>(resolve => {
             this.show(resolve);
@@ -76,7 +75,7 @@ export class DisplayImageComponent implements OnInit {
     private hide() {
         this.visible = false;
         this.titleService.setTitle(`${this.albumTitle} - photos.yvan.hu`);
-    this.locationService.go(`/album/${this.slug}`);
+        this.router.navigate([`${this.albumTitle} - photos.yvan.hu`]);
     }
 
     private nextImage() {
@@ -114,7 +113,7 @@ export class DisplayImageComponent implements OnInit {
 
     @HostListener('click')
     private handleClick() {
-    if(this.visible) {
+        if (this.visible) {
             this.nextImage();
         }
     }
@@ -130,8 +129,8 @@ export class DisplayImageComponent implements OnInit {
         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 (Math.abs(xDiff) > Math.abs(yDiff)) {
-      if( xDiff>0 ) {
+            if (xDiff > 0) {
                 this.prevImage();
             } else {
                 this.nextImage();

src/app/gallery/thumbnail/thumbnail.component.css

@@ -1,3 +1,7 @@
+:host {
+    display: flex;
+}
+
 .thumbnail {
     position: relative;
     display: inline-block;

src/environments/environment.ts

@@ -5,5 +5,6 @@
 
 export const environment = {
     production: false,
-    apiUrl: 'http://localhost:8888',
+    // apiUrl: 'http://localhost:8888',
+    apiUrl: 'http://photos-api.yvan.hu',
 };

src/styles.css

@@ -1,25 +1,10 @@
 /* You can add global styles to this file, and also import other style files */
 @import url('https://fonts.googleapis.com/css?family=Source Sans Pro:400,700,400italic,700italic&subset=latin');
 
-*,
+/*html,*/
-*:before,
+/*body {*/
-*:after {
+    /*height: 100%;*/
-    box-sizing: inherit;
+/*}*/
-}
-
-html {
-    box-sizing: border-box;
-}
-
-body {
-    margin: 0;
-    background-color: #FFFFFF;
-}
-
-html,
-body {
-    height: 100%;
-}
 
 body {
     margin: 0;
@@ -31,6 +16,7 @@ body {
     font-size: 14px;
     line-height: 1.4285em;
     color: #839496;
+    user-select: none;
 }
 
 a {