yvan/gallery-frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

* angular2 uplift to version 5

Browse Source 
* meta tag stuff added
* ssr changes for universal
This commit is contained in:
Danyi Dávid
2018-02-25 21:18:58 +01:00
parent afa49a8400
commit 291ad5047f
15 changed files with 7164 additions and 2648 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/app/app.component.ts
View File

@@ -1,10 +1,10 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
title = 'app';
}

34
src/app/app.module.ts
View File

@@ -1,25 +1,33 @@
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from "@angular/platform-browser/animations"
import { NgModule } from '@angular/core';
import { PLATFORM_ID, APP_ID, Inject } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { GalleryModule } from "./gallery/gallery.module";
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule.withServerTransition({
appId: 'angullary'
}),
BrowserAnimationsModule,
AppRoutingModule,
GalleryModule,
],
providers: [],
bootstrap: [AppComponent]
declarations: [
AppComponent
],
imports: [
BrowserModule.withServerTransition({
appId: 'angullary'
}),
BrowserAnimationsModule,
AppRoutingModule,
GalleryModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
constructor(@Inject(PLATFORM_ID) private platformId: Object,
@Inject(APP_ID) private appId: string) {
const platform = isPlatformBrowser(platformId) ?
'in the browser' : 'on the server';
console.log(`Running ${platform} with appId=${appId}`);
}
}

20
src/app/app.server.module.ts
View File

@@ -1,14 +1,18 @@
import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { AppComponent } from './app.component';
import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';
@NgModule({
imports: [
AppModule,
ServerModule
],
bootstrap: [
AppComponent
]
imports: [
AppModule,
ServerModule,
ModuleMapLoaderModule,
],
bootstrap: [
AppComponent,
]
})
export class AppServerModule {}

14
src/app/gallery/album/album.component.ts
View File

@@ -1,11 +1,10 @@
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from "@angular/router";
import { Title } from "@angular/platform-browser";
import { Meta, Title } from "@angular/platform-browser";
import { Album } from "../shared/album.model";
import { DisplayImageService } from "../display-image/display-image.service";
import { environment } from "../../../environments/environment";
import { Image } from "../shared/image.model";
import { Album, Image } from "../shared";
import { DisplayImageService } from "../display-image/display-image.service";
import { Thumbnail } from "../shared/thumbnail.model";
const IDX_LEFT = 0;
@@ -32,7 +31,8 @@ export class AlbumComponent implements OnInit {
constructor(private titleService: Title,
private route: ActivatedRoute,
private displayImageService: DisplayImageService) {
private displayImageService: DisplayImageService,
private metaService: Meta) {
}
ngOnInit() {
@@ -40,6 +40,10 @@ export class AlbumComponent implements OnInit {
this.album = data.albums.find(album => album.slug == this.route.snapshot.params.slug);
this.titleService.setTitle(`${this.album.name} - photos.yvan.hu`);
this.initThumbnails();
this.metaService.updateTag({
property: 'og:image',
content: this.imageUrl(this.album.coverImage)
});
this.route.params.subscribe((params: {
slug: string,
image: string

121
src/app/gallery/gallery/gallery.component.ts
View File

@@ -1,10 +1,10 @@
import {Component, OnInit} from '@angular/core';
import {Title} from "@angular/platform-browser";
import { Component, OnInit } from '@angular/core';
import { Title, Meta } from "@angular/platform-browser";
import {Album} from "../shared";
import {ActivatedRoute} from "@angular/router";
import {environment} from "../../../environments/environment";
import {Thumbnail} from "../shared/thumbnail.model";
import { environment } from "../../../environments/environment";
import { Album } from "../shared";
import { ActivatedRoute } from "@angular/router";
import { Thumbnail } from "../shared/thumbnail.model";
const IDX_LEFT = 0;
const IDX_MIDDLE = 1;
@@ -12,66 +12,71 @@ const IDX_RIGHT = 2;
const THUMB_MARGIN = 10;
@Component({
selector: 'app-gallery',
templateUrl: './gallery.component.html',
styleUrls: ['./gallery.component.css'],
selector: 'app-gallery',
templateUrl: './gallery.component.html',
styleUrls: ['./gallery.component.css'],
})
export class GalleryComponent implements OnInit {
public albums: Array<Album> = [];
public albums: Array<Album> = [];
private leftHeight: number = 0;
private middleHeight: number = 0;
private rightHeight: number = 0;
private leftHeight: number = 0;
private middleHeight: number = 0;
private rightHeight: number = 0;
public thumbnailsLeft: Array<Thumbnail> = [];
public thumbnailsMiddle: Array<Thumbnail> = [];
public thumbnailsRight: Array<Thumbnail> = [];
public thumbnailsLeft: Array<Thumbnail> = [];
public thumbnailsMiddle: Array<Thumbnail> = [];
public thumbnailsRight: Array<Thumbnail> = [];
constructor(private titleService: Title,
private route: ActivatedRoute) {
}
constructor(private titleService: Title,
private route: ActivatedRoute,
private metaService: Meta) {
}
ngOnInit() {
this.titleService.setTitle('Albums - photos.yvan.hu');
this.route.data.subscribe((data: { albums: Array<Album> }) => {
this.albums = data.albums.filter(album => album.isPublic).reverse();
this.initThumbnails();
});
}
ngOnInit() {
this.titleService.setTitle('Albums - photos.yvan.hu');
this.route.data.subscribe((data: { albums: Array<Album> }) => {
this.albums = data.albums.filter(album => album.isPublic).reverse();
this.initThumbnails();
this.metaService.updateTag({
property: 'og:image',
content: this.imageUrl(this.albums[0])
});
});
}
private initThumbnails() {
this.albums.map(album => <Thumbnail>{
slug: album.slug,
image: this.imageUrl(album),
label: {
title: album.name,
extraRight: album.images.length + ' images',
extraLeft: album.date,
},
height: album.coverImage.thumbHeight,
}).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) {
case IDX_LEFT:
this.thumbnailsLeft.push(thumbnail);
this.leftHeight += thumbnail.height + THUMB_MARGIN;
break;
case IDX_MIDDLE:
this.thumbnailsMiddle.push(thumbnail);
this.middleHeight += thumbnail.height + THUMB_MARGIN;
break;
case IDX_RIGHT:
this.thumbnailsRight.push(thumbnail);
this.rightHeight += thumbnail.height + THUMB_MARGIN;
break;
}
});
}
private initThumbnails() {
this.albums.map(album => <Thumbnail>{
slug: album.slug,
image: this.imageUrl(album),
label: {
title: album.name,
extraRight: album.images.length + ' images',
extraLeft: album.date,
},
height: album.coverImage.thumbHeight,
}).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) {
case IDX_LEFT:
this.thumbnailsLeft.push(thumbnail);
this.leftHeight += thumbnail.height + THUMB_MARGIN;
break;
case IDX_MIDDLE:
this.thumbnailsMiddle.push(thumbnail);
this.middleHeight += thumbnail.height + THUMB_MARGIN;
break;
case IDX_RIGHT:
this.thumbnailsRight.push(thumbnail);
this.rightHeight += thumbnail.height + THUMB_MARGIN;
break;
}
});
}
private imageUrl(album: Album): string {
return environment.apiUrl + `/image/${album.slug}/${album.coverImage.path}/thumb`;
}
private imageUrl(album: Album): string {
return environment.apiUrl + `/image/${album.slug}/${album.coverImage.path}/thumb`;
}
}

9
src/app/gallery/shared/gallery.service.ts
View File

@@ -8,7 +8,7 @@ import { environment } from "../../../environments/environment";
import { Album, Image } from ".";
@Injectable()
export class GalleryService implements Resolve<Array<Album>> {
export class GalleryService implements Resolve<Array<Album>|false> {
public albums: Array<Album> = [];
@@ -20,17 +20,12 @@ export class GalleryService implements Resolve<Array<Album>> {
return this.httpService.get(environment.apiUrl + '/api/galleries').map(res => res.json());
}
// public listGalleryImages(gallerySlug: string): Observable<Image> {
// return this.httpService.get(environment.apiUrl + '/api/gallery/' + gallerySlug).map(res => res.json());
// }
/**
*
* @param {ActivatedRouteSnapshot} route
* @returns {Promise<Array<Album>>}
* @todo add some cache ttl to albums?
*/
public resolve(route: ActivatedRouteSnapshot): Promise<Array<Album>> {
public resolve(route: ActivatedRouteSnapshot): Promise<Array<Album>|false> {
if(this.albums.length) {
return Promise.resolve(this.albums);
}

27
src/index.html
View File

@@ -1,23 +1,26 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Gallery</title>
<base href="/">
<meta charset="utf-8">
<title>Gallery</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<meta name="og:title" content="Angullery"/>
<meta name="og:description" content="A really simple photo album"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root>
<app-root>
<div class="ui main container">
<div class="ui visible massive floating icon message">
<i class="notched circle loading icon"></i>
<div class="content">
<div class="header">Loading ...</div>
<div class="ui visible massive floating icon message">
<i class="notched circle loading icon"></i>
<div class="content">
<div class="header">Loading ...</div>
</div>
</div>
</div>
</div>
</app-root>
</app-root>
</body>
</html>

2
src/main.ts
View File

@@ -5,7 +5,7 @@ import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);