diff --git a/.editorconfig b/.editorconfig index 6e87a00..9b73521 100644 --- a/.editorconfig +++ b/.editorconfig @@ -4,7 +4,7 @@ root = true [*] charset = utf-8 indent_style = space -indent_size = 2 +indent_size = 4 insert_final_newline = true trim_trailing_whitespace = true diff --git a/src/app/animations/fade-in.animation.ts b/src/app/animations/fade-in.animation.ts index 1604fd6..5472981 100644 --- a/src/app/animations/fade-in.animation.ts +++ b/src/app/animations/fade-in.animation.ts @@ -1,14 +1,14 @@ -import {trigger, state, animate, transition, style} from '@angular/animations'; +import { trigger, state, animate, transition, style } from '@angular/animations'; export const fadeInAnimation = - trigger('fadeInAnimation', [ - // route 'enter' transition - transition(':enter', [ + trigger('fadeInAnimation', [ + // route 'enter' transition + transition(':enter', [ - // styles at start of transition - style({opacity: 0}), + // styles at start of transition + style({opacity: 0}), - // animation and styles at end of transition - animate('3s', style({opacity: 1})) - ]), - ]); + // animation and styles at end of transition + animate('3s', style({opacity: 1})) + ]), + ]); diff --git a/src/app/animations/slide-in-out.animation.ts b/src/app/animations/slide-in-out.animation.ts index dec25ca..530e2d3 100644 --- a/src/app/animations/slide-in-out.animation.ts +++ b/src/app/animations/slide-in-out.animation.ts @@ -1,51 +1,51 @@ -import {trigger, state, animate, transition, style} from '@angular/animations'; +import { trigger, state, animate, transition, style } from '@angular/animations'; export const slideInOutAnimation = - trigger('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)' - })), + // 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', [ + // 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%', + // 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)' - }), + // 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, + // 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)' - })) - ]), + // 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%', + // 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)' - })) - ]) - ]); + // transition the background opacity to 0 to fade it out + // backgroundColor: 'rgba(0, 0, 0, 0)' + })) + ]) + ]); diff --git a/src/app/app.server.module.ts b/src/app/app.server.module.ts index 877e2ee..2408e98 100644 --- a/src/app/app.server.module.ts +++ b/src/app/app.server.module.ts @@ -6,11 +6,12 @@ import { AppComponent } from './app.component'; import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader'; @NgModule({ - imports: [ - AppModule, - ServerModule, - ModuleMapLoaderModule, - ], - bootstrap: [AppComponent], + imports: [ + AppModule, + ServerModule, + ModuleMapLoaderModule, + ], + bootstrap: [AppComponent], }) -export class AppServerModule {} +export class AppServerModule { +} diff --git a/src/app/gallery/album/album.component.html b/src/app/gallery/album/album.component.html index bcef6a4..168e44a 100644 --- a/src/app/gallery/album/album.component.html +++ b/src/app/gallery/album/album.component.html @@ -1,7 +1,7 @@

- {{album.name}} + {{album?.name}}

@@ -13,4 +13,4 @@ (click)="imageClick(album.slug, thumbnail.path)">
- \ No newline at end of file + diff --git a/src/app/gallery/display-image/display-image.component.ts b/src/app/gallery/display-image/display-image.component.ts index f82ebc5..e475a9c 100644 --- a/src/app/gallery/display-image/display-image.component.ts +++ b/src/app/gallery/display-image/display-image.component.ts @@ -1,5 +1,4 @@ import { Component, EventEmitter, HostListener, OnInit, Output } from '@angular/core'; -import { Location } from "@angular/common"; import { environment } from "../../../environments/environment"; import { Title } from "@angular/platform-browser"; @@ -45,8 +44,7 @@ export class DisplayImageComponent implements OnInit { } public get imageUrl(): string { - let url = environment.apiUrl + `/image/${this.slug}/${this.image}`; - return url; + return environment.apiUrl + `/image/${this.slug}/${this.image}`; } public activate(slug = "", image = "", extitle = "") { diff --git a/src/app/gallery/display-image/display-image.service.ts b/src/app/gallery/display-image/display-image.service.ts index a82fd71..76006b9 100644 --- a/src/app/gallery/display-image/display-image.service.ts +++ b/src/app/gallery/display-image/display-image.service.ts @@ -2,8 +2,5 @@ import { Injectable } from '@angular/core'; @Injectable() export class DisplayImageService { - - constructor() { } - activate: (message?: string, title?: string, extitle? :string) => Promise; - + activate: (message?: string, title?: string, extitle?: string) => Promise; } diff --git a/src/app/gallery/gallery-routing.module.ts b/src/app/gallery/gallery-routing.module.ts index b59943a..d53c52d 100644 --- a/src/app/gallery/gallery-routing.module.ts +++ b/src/app/gallery/gallery-routing.module.ts @@ -2,51 +2,52 @@ import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { GalleryComponent } from "./gallery/gallery.component"; -import { GalleryService } from "./shared/gallery.service"; +import { GalleryService } from "./shared"; import { AlbumComponent } from "./album/album.component"; import { DisplayImageComponent } from "./display-image/display-image.component"; const routes: Routes = [ - { - path: '', - children: [], - component: GalleryComponent, - resolve: { - albums: GalleryService, - }, - }, { - path: 'galleries', - children: [], - component: GalleryComponent, - resolve: { - albums: GalleryService, - }, - }, { - path: 'album/:slug', - children: [], - component: AlbumComponent, - resolve: { - albums: GalleryService, - }, - }, { - path: 'album/:slug/:image', - children: [], - component: AlbumComponent, - resolve: { - albums: GalleryService, - }, - }, { - path: 'image/:slug/:image', - children: [], - component: DisplayImageComponent, - resolve: { - albums: GalleryService, - }, - } + { + path: '', + children: [], + component: GalleryComponent, + resolve: { + albums: GalleryService, + }, + }, { + path: 'galleries', + children: [], + component: GalleryComponent, + resolve: { + albums: GalleryService, + }, + }, { + path: 'album/:slug', + children: [], + component: AlbumComponent, + resolve: { + albums: GalleryService, + }, + }, { + path: 'album/:slug/:image', + children: [], + component: AlbumComponent, + resolve: { + albums: GalleryService, + }, + }, { + path: 'image/:slug/:image', + children: [], + component: DisplayImageComponent, + resolve: { + albums: GalleryService, + }, + } ]; @NgModule({ - imports: [RouterModule.forChild(routes)], - exports: [RouterModule] + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] }) -export class GalleryRoutingModule { } +export class GalleryRoutingModule { +} diff --git a/src/app/gallery/gallery.module.ts b/src/app/gallery/gallery.module.ts index 418a6c9..9d6b2c7 100644 --- a/src/app/gallery/gallery.module.ts +++ b/src/app/gallery/gallery.module.ts @@ -10,20 +10,21 @@ import { DisplayImageService } from './display-image/display-image.service'; import { ThumbnailComponent } from './thumbnail/thumbnail.component'; @NgModule({ - imports: [ - CommonModule, - HttpClientModule, - GalleryRoutingModule, - ], - exports: [ - GalleryComponent, - ], - declarations: [ - GalleryComponent, - AlbumComponent, - DisplayImageComponent, - ThumbnailComponent, - ], - providers: [ GalleryService, DisplayImageService ] + imports: [ + CommonModule, + HttpClientModule, + GalleryRoutingModule, + ], + exports: [ + GalleryComponent, + ], + declarations: [ + GalleryComponent, + AlbumComponent, + DisplayImageComponent, + ThumbnailComponent, + ], + providers: [GalleryService, DisplayImageService] }) -export class GalleryModule { } +export class GalleryModule { +} diff --git a/src/app/gallery/gallery/gallery.component.ts b/src/app/gallery/gallery/gallery.component.ts index 76f65e5..7a46818 100644 --- a/src/app/gallery/gallery/gallery.component.ts +++ b/src/app/gallery/gallery/gallery.component.ts @@ -30,6 +30,14 @@ export class GalleryComponent implements OnInit { property: 'og:image', content: this.imageUrl(this.albums[0]) }); + this.metaService.updateTag({ + property: 'og:title', + content: "photos.yvan.hu" + }); + this.metaService.updateTag({ + property: 'og:description', + content: "My public photo gallery" + }); }); } diff --git a/src/app/gallery/shared/album.model.ts b/src/app/gallery/shared/album.model.ts index 740328b..b642f23 100644 --- a/src/app/gallery/shared/album.model.ts +++ b/src/app/gallery/shared/album.model.ts @@ -4,12 +4,12 @@ export const IMAGE_STANDARD = 0; export const IMAGE_PANORAMA = 1; export class Album { - public slug: string = ""; - public name: string = ""; - public date: string = ""; - public coverImage: Image; - public type: number = IMAGE_STANDARD; - public isNew: boolean = false; - public isPublic: boolean = true; - public images: Array = []; + public slug: string = ""; + public name: string = ""; + public date: string = ""; + public coverImage: Image; + public type: number = IMAGE_STANDARD; + public isNew: boolean = false; + public isPublic: boolean = true; + public images: Array = []; } diff --git a/src/app/gallery/shared/gallery.service.ts b/src/app/gallery/shared/gallery.service.ts index 0d11559..44cdd1f 100644 --- a/src/app/gallery/shared/gallery.service.ts +++ b/src/app/gallery/shared/gallery.service.ts @@ -7,33 +7,33 @@ import { environment } from "../../../environments/environment"; import { Album } from "./album.model"; @Injectable() -export class GalleryService implements Resolve|false> { +export class GalleryService implements Resolve | false> { - public albums: Array = []; + public albums: Array = []; - constructor( - private httpService: HttpClient, - ) {} + constructor( + private httpService: HttpClient, + ) {} - public listGalleries(): Observable> { - return this.httpService.get>(environment.apiUrl + '/api/galleries'); - } - - /** - * @param {ActivatedRouteSnapshot} route - * @returns {Promise>} - * @todo add some cache ttl to albums? - */ - public resolve(route: ActivatedRouteSnapshot): Promise|false> { - if(this.albums.length) { - return Promise.resolve(this.albums); + public listGalleries(): Observable> { + return this.httpService.get>(environment.apiUrl + '/api/galleries'); + } + + /** + * @param {ActivatedRouteSnapshot} route + * @returns {Promise>} + * @todo add some cache ttl to albums? + */ + public resolve(route: ActivatedRouteSnapshot): Promise | false> { + if (this.albums.length) { + return Promise.resolve(this.albums); + } + return this.listGalleries().toPromise().then(result => { + if (result) { + this.albums = result; + return result; + } + return false; + }); } - return this.listGalleries().toPromise().then(result => { - if(result) { - this.albums = result; - return result; - } - return false; - }); - } } diff --git a/src/app/gallery/shared/image.model.ts b/src/app/gallery/shared/image.model.ts index b7eaafb..676baaa 100644 --- a/src/app/gallery/shared/image.model.ts +++ b/src/app/gallery/shared/image.model.ts @@ -1,9 +1,9 @@ export class Image { - public dir: string = ""; - public label: string = ""; - public path: string = ""; - public width: number = 0; - public height: number = 0; - public thumbWidth: number = 0; - public thumbHeight: number = 0; + public dir: string = ""; + public label: string = ""; + public path: string = ""; + public width: number = 0; + public height: number = 0; + public thumbWidth: number = 0; + public thumbHeight: number = 0; } diff --git a/src/app/gallery/shared/thumb-label.model.ts b/src/app/gallery/shared/thumb-label.model.ts index 874f733..e2c7fd1 100644 --- a/src/app/gallery/shared/thumb-label.model.ts +++ b/src/app/gallery/shared/thumb-label.model.ts @@ -1,5 +1,5 @@ export class ThumbLabel { - public title: string = ""; - public extraLeft: string = ""; - public extraRight: string = ""; + public title: string = ""; + public extraLeft: string = ""; + public extraRight: string = ""; } diff --git a/src/app/gallery/shared/thumbnail.model.ts b/src/app/gallery/shared/thumbnail.model.ts index 46d30de..38121df 100644 --- a/src/app/gallery/shared/thumbnail.model.ts +++ b/src/app/gallery/shared/thumbnail.model.ts @@ -1,10 +1,10 @@ -import {ThumbLabel} from "./thumb-label.model"; +import { ThumbLabel } from "./thumb-label.model"; export class Thumbnail { - public slug: string = ''; - public image: string = ''; - public path: string = ''; - public label: ThumbLabel = new ThumbLabel(); - public height: number = 0; - public width: number = 0; + public slug: string = ''; + public image: string = ''; + public path: string = ''; + public label: ThumbLabel = new ThumbLabel(); + public height: number = 0; + public width: number = 0; } diff --git a/src/app/gallery/thumbnail/thumbnail.component.ts b/src/app/gallery/thumbnail/thumbnail.component.ts index 1db26ce..8a1f990 100644 --- a/src/app/gallery/thumbnail/thumbnail.component.ts +++ b/src/app/gallery/thumbnail/thumbnail.component.ts @@ -1,22 +1,16 @@ -import {Component, Input, OnInit} from '@angular/core'; +import { Component, Input } from '@angular/core'; -import {ThumbLabel} from "../shared/thumb-label.model"; +import { ThumbLabel } from "../shared/thumb-label.model"; @Component({ - selector: 'app-thumbnail, [app-thumbnail]', - templateUrl: './thumbnail.component.html', - styleUrls: ['./thumbnail.component.css'] + selector: 'app-thumbnail, [app-thumbnail]', + templateUrl: './thumbnail.component.html', + styleUrls: ['./thumbnail.component.css'] }) -export class ThumbnailComponent implements OnInit { - - @Input() image: string = ""; - @Input() label: ThumbLabel = null; - @Input() target: any = {}; - @Input() width: number = 0; - @Input() height: number = 0; - - constructor() {} - - ngOnInit() {} - +export class ThumbnailComponent { + @Input() image: string = ""; + @Input() label: ThumbLabel = null; + @Input() target: any = {}; + @Input() width: number = 0; + @Input() height: number = 0; } diff --git a/src/index.html b/src/index.html index a34e822..255c761 100644 --- a/src/index.html +++ b/src/index.html @@ -4,10 +4,6 @@ Gallery - - - -