Compare commits
8 Commits
row-based-
...
master
| Author | SHA1 | Date | |
|---|---|---|---|
|
9bd38ddaf5 | ||
|
|
0d0ed38966 | ||
|
|
0e9f2a448a | ||
|
|
5e1b402681 | ||
|
|
182376f97d | ||
|
|
313766b9cf | ||
|
|
43f9eabaed | ||
|
|
1b15d33841 |
@ -1,87 +0,0 @@
|
||||
{
|
||||
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
||||
"project": {
|
||||
"name": "frontend"
|
||||
},
|
||||
"apps": [
|
||||
{
|
||||
"root": "src",
|
||||
"outDir": "dist/browser",
|
||||
"assets": [
|
||||
"assets",
|
||||
"favicon.ico"
|
||||
],
|
||||
"index": "index.html",
|
||||
"main": "main.ts",
|
||||
"polyfills": "polyfills.ts",
|
||||
"test": "test.ts",
|
||||
"tsconfig": "tsconfig.app.json",
|
||||
"testTsconfig": "tsconfig.spec.json",
|
||||
"prefix": "app",
|
||||
"styles": [
|
||||
"../node_modules/normalize.css/normalize.css",
|
||||
"assets/css/font-awesome.css",
|
||||
"styles.css"
|
||||
],
|
||||
"scripts": [],
|
||||
"environmentSource": "environments/environment.ts",
|
||||
"environments": {
|
||||
"dev": "environments/environment.ts",
|
||||
"prod": "environments/environment.prod.ts"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "ssr",
|
||||
"platform": "server",
|
||||
"root": "src",
|
||||
"outDir": "dist/server",
|
||||
"assets": [
|
||||
"assets",
|
||||
"favicon.ico"
|
||||
],
|
||||
"index": "index.html",
|
||||
"main": "main-ssr.ts",
|
||||
"tsconfig": "tsconfig.app-ssr.json",
|
||||
"prefix": "app",
|
||||
"styles": [
|
||||
"../node_modules/normalize.css/normalize.css",
|
||||
"assets/css/font-awesome.css",
|
||||
"styles.css"
|
||||
],
|
||||
"scripts": [],
|
||||
"environmentSource": "environments/environment.ts",
|
||||
"environments": {
|
||||
"dev": "environments/environment.ts",
|
||||
"prod": "environments/environment.prod.ts"
|
||||
}
|
||||
}
|
||||
],
|
||||
"e2e": {
|
||||
"protractor": {
|
||||
"config": "./protractor.conf.js"
|
||||
}
|
||||
},
|
||||
"lint": [
|
||||
{
|
||||
"project": "src/tsconfig.app.json",
|
||||
"exclude": "**/node_modules/**"
|
||||
},
|
||||
{
|
||||
"project": "src/tsconfig.spec.json",
|
||||
"exclude": "**/node_modules/**"
|
||||
},
|
||||
{
|
||||
"project": "e2e/tsconfig.e2e.json",
|
||||
"exclude": "**/node_modules/**"
|
||||
}
|
||||
],
|
||||
"test": {
|
||||
"karma": {
|
||||
"config": "./karma.conf.js"
|
||||
}
|
||||
},
|
||||
"defaults": {
|
||||
"styleExt": "css",
|
||||
"component": {}
|
||||
}
|
||||
}
|
||||
@ -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
|
||||
|
||||
|
||||
13
.gitignore
vendored
13
.gitignore
vendored
@ -5,10 +5,16 @@
|
||||
/dist
|
||||
/tmp
|
||||
/out-tsc
|
||||
# Only exists if Bazel was run
|
||||
/bazel-out
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
|
||||
# profiling files
|
||||
chrome-profiler-events*.json
|
||||
speed-measure-plugin*.json
|
||||
|
||||
# IDEs and editors
|
||||
/.idea
|
||||
.project
|
||||
@ -24,6 +30,7 @@
|
||||
!.vscode/tasks.json
|
||||
!.vscode/launch.json
|
||||
!.vscode/extensions.json
|
||||
.history/*
|
||||
|
||||
# misc
|
||||
/.sass-cache
|
||||
@ -31,13 +38,9 @@
|
||||
/coverage
|
||||
/libpeerconnection.log
|
||||
npm-debug.log
|
||||
yarn-error.log
|
||||
testem.log
|
||||
/typings
|
||||
yarn-error.log
|
||||
|
||||
# e2e
|
||||
/e2e/*.js
|
||||
/e2e/*.map
|
||||
|
||||
# System Files
|
||||
.DS_Store
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# Frontend
|
||||
# Manupgrade
|
||||
|
||||
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.3.0-rc.5.
|
||||
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.3.13.
|
||||
|
||||
## Development server
|
||||
|
||||
@ -12,7 +12,7 @@ Run `ng generate component component-name` to generate a new component. You can
|
||||
|
||||
## Build
|
||||
|
||||
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
|
||||
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
|
||||
|
||||
## Running unit tests
|
||||
|
||||
@ -21,7 +21,6 @@ Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.
|
||||
## Running end-to-end tests
|
||||
|
||||
Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
|
||||
Before running the tests make sure you are serving the app via `ng serve`.
|
||||
|
||||
## Further help
|
||||
|
||||
|
||||
149
angular.json
Normal file
149
angular.json
Normal file
@ -0,0 +1,149 @@
|
||||
{
|
||||
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
||||
"version": 1,
|
||||
"newProjectRoot": "projects",
|
||||
"projects": {
|
||||
"gallery-frontend": {
|
||||
"projectType": "application",
|
||||
"schematics": {},
|
||||
"root": "",
|
||||
"sourceRoot": "src",
|
||||
"prefix": "app",
|
||||
"architect": {
|
||||
"build": {
|
||||
"builder": "@angular-devkit/build-angular:browser",
|
||||
"options": {
|
||||
"outputPath": "dist/browser",
|
||||
"index": "src/index.html",
|
||||
"main": "src/main.ts",
|
||||
"polyfills": "src/polyfills.ts",
|
||||
"tsConfig": "src/tsconfig.app.json",
|
||||
"aot": false,
|
||||
"assets": [
|
||||
"src/favicon.ico",
|
||||
"src/assets"
|
||||
],
|
||||
"styles": [
|
||||
"node_modules/normalize.css/normalize.css",
|
||||
"src/styles.css"
|
||||
],
|
||||
"scripts": []
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"fileReplacements": [
|
||||
{
|
||||
"replace": "src/environments/environment.ts",
|
||||
"with": "src/environments/environment.prod.ts"
|
||||
}
|
||||
],
|
||||
"optimization": true,
|
||||
"outputHashing": "all",
|
||||
"sourceMap": false,
|
||||
"extractCss": true,
|
||||
"namedChunks": false,
|
||||
"aot": true,
|
||||
"extractLicenses": true,
|
||||
"vendorChunk": false,
|
||||
"buildOptimizer": true,
|
||||
"budgets": [
|
||||
{
|
||||
"type": "initial",
|
||||
"maximumWarning": "2mb",
|
||||
"maximumError": "5mb"
|
||||
},
|
||||
{
|
||||
"type": "anyComponentStyle",
|
||||
"maximumWarning": "6kb",
|
||||
"maximumError": "10kb"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"serve": {
|
||||
"builder": "@angular-devkit/build-angular:dev-server",
|
||||
"options": {
|
||||
"browserTarget": "gallery-frontend:build"
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"browserTarget": "gallery-frontend:build:production"
|
||||
}
|
||||
}
|
||||
},
|
||||
"extract-i18n": {
|
||||
"builder": "@angular-devkit/build-angular:extract-i18n",
|
||||
"options": {
|
||||
"browserTarget": "gallery-frontend:build"
|
||||
}
|
||||
},
|
||||
"test": {
|
||||
"builder": "@angular-devkit/build-angular:karma",
|
||||
"options": {
|
||||
"main": "src/test.ts",
|
||||
"polyfills": "src/polyfills.ts",
|
||||
"tsConfig": "tsconfig.spec.json",
|
||||
"karmaConfig": "karma.conf.js",
|
||||
"assets": [
|
||||
"src/favicon.ico",
|
||||
"src/assets"
|
||||
],
|
||||
"styles": [
|
||||
"src/styles.css"
|
||||
],
|
||||
"scripts": []
|
||||
}
|
||||
},
|
||||
"lint": {
|
||||
"builder": "@angular-devkit/build-angular:tslint",
|
||||
"options": {
|
||||
"tsConfig": [
|
||||
"src/tsconfig.app.json",
|
||||
"src/tsconfig.spec.json",
|
||||
"e2e/tsconfig.json"
|
||||
],
|
||||
"exclude": [
|
||||
"**/node_modules/**"
|
||||
]
|
||||
}
|
||||
},
|
||||
"e2e": {
|
||||
"builder": "@angular-devkit/build-angular:protractor",
|
||||
"options": {
|
||||
"protractorConfig": "e2e/protractor.conf.js",
|
||||
"devServerTarget": "gallery-frontend:serve"
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"devServerTarget": "gallery-frontend:serve:production"
|
||||
}
|
||||
}
|
||||
},
|
||||
"server": {
|
||||
"builder": "@angular-devkit/build-angular:server",
|
||||
"options": {
|
||||
"outputPath": "dist/server",
|
||||
"main": "src/main.server.ts",
|
||||
"tsConfig": "src/tsconfig.server.json"
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"fileReplacements": [
|
||||
{
|
||||
"replace": "src/environments/environment.ts",
|
||||
"with": "src/environments/environment.prod.ts"
|
||||
}
|
||||
],
|
||||
"sourceMap": false,
|
||||
"optimization": {
|
||||
"scripts": false,
|
||||
"styles": true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}},
|
||||
"defaultProject": "gallery-frontend"
|
||||
}
|
||||
12
browserslist
Normal file
12
browserslist
Normal file
@ -0,0 +1,12 @@
|
||||
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
|
||||
# For additional information regarding the format and rule options, please see:
|
||||
# https://github.com/browserslist/browserslist#queries
|
||||
|
||||
# You can see what browsers were selected by your queries by running:
|
||||
# npx browserslist
|
||||
|
||||
> 0.5%
|
||||
last 2 versions
|
||||
Firefox ESR
|
||||
not dead
|
||||
not IE 9-11 # For IE 9-11 support, remove 'not'.
|
||||
@ -27,19 +27,20 @@ host('alfheim.ragnarok.yvan.hu')
|
||||
desc('Prepare release');
|
||||
task('deploy:ng-prepare', function() {
|
||||
runLocally("npm run build:ssr");
|
||||
runLocally("tar -cJf dist.tar.xz dist server.js package.json pm2.json");
|
||||
runLocally("tar -cJf dist.tar.xz dist package.json pm2.json");
|
||||
});
|
||||
|
||||
desc('Upload release');
|
||||
task('deploy:ng-upload', function() {
|
||||
upload("dist.tar.xz", "{{release_path}}/dist.tar.xz");
|
||||
run("tar -C {{release_path}} -xJf {{release_path}}/dist.tar.xz");
|
||||
upload("robots.txt", "{{release_path}}/dist/browser/robots.txt");
|
||||
within("{{release_path}}", function () {
|
||||
run("npm install --production");
|
||||
run("npm install express --production");
|
||||
});
|
||||
run("rm -f {{release_path}}/dist.tar.xz");
|
||||
runLocally("rm -rf dist.tar.xz dist dist-ssr");
|
||||
runLocally("rm -rf dist.tar.xz dist");
|
||||
});
|
||||
|
||||
desc('Start app server');
|
||||
@ -47,7 +48,6 @@ task('deploy:pm2-restart', function() {
|
||||
within("{{release_path}}", function () {
|
||||
run("pm2 stop --silent gallery-frontend");
|
||||
run("pm2 delete --silent gallery-frontend");
|
||||
|
||||
run("pm2 start pm2.json");
|
||||
});
|
||||
});
|
||||
|
||||
@ -4,30 +4,29 @@
|
||||
module.exports = function (config) {
|
||||
config.set({
|
||||
basePath: '',
|
||||
frameworks: ['jasmine', '@angular/cli'],
|
||||
frameworks: ['jasmine', '@angular-devkit/build-angular'],
|
||||
plugins: [
|
||||
require('karma-jasmine'),
|
||||
require('karma-chrome-launcher'),
|
||||
require('karma-jasmine-html-reporter'),
|
||||
require('karma-coverage-istanbul-reporter'),
|
||||
require('@angular/cli/plugins/karma')
|
||||
require('@angular-devkit/build-angular/plugins/karma')
|
||||
],
|
||||
client:{
|
||||
client: {
|
||||
clearContext: false // leave Jasmine Spec Runner output visible in browser
|
||||
},
|
||||
coverageIstanbulReporter: {
|
||||
reports: [ 'html', 'lcovonly' ],
|
||||
dir: require('path').join(__dirname, './coverage/manupgrade'),
|
||||
reports: ['html', 'lcovonly', 'text-summary'],
|
||||
fixWebpackSourcePaths: true
|
||||
},
|
||||
angularCli: {
|
||||
environment: 'dev'
|
||||
},
|
||||
reporters: ['progress', 'kjhtml'],
|
||||
port: 9876,
|
||||
colors: true,
|
||||
logLevel: config.LOG_INFO,
|
||||
autoWatch: true,
|
||||
browsers: ['Chrome'],
|
||||
singleRun: false
|
||||
singleRun: false,
|
||||
restartOnFileChange: true
|
||||
});
|
||||
};
|
||||
|
||||
19217
package-lock.json
generated
19217
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
79
package.json
79
package.json
@ -1,7 +1,6 @@
|
||||
{
|
||||
"name": "frontend",
|
||||
"version": "0.0.0",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
"start": "ng serve",
|
||||
@ -9,50 +8,52 @@
|
||||
"test": "ng test",
|
||||
"lint": "ng lint",
|
||||
"e2e": "ng e2e",
|
||||
"build:ssr": "npm run build:client-and-server-bundles",
|
||||
"serve:ssr": "node dist/server.js",
|
||||
"build:client-and-server-bundles": "ng build --prod && ng build --prod --app ssr --output-hashing=false"
|
||||
"build:ssr": "npm run build:client-and-server-bundles && npm run compile:server",
|
||||
"serve:ssr": "node dist/server",
|
||||
"build:client-and-server-bundles": "ng build --prod && ng run gallery-frontend:server:production --bundleDependencies all",
|
||||
"compile:server": "webpack --config webpack.server.config.js --progress --colors"
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "^5.2.0",
|
||||
"@angular/common": "^5.2.0",
|
||||
"@angular/compiler": "^5.2.0",
|
||||
"@angular/core": "^5.2.0",
|
||||
"@angular/forms": "^5.2.0",
|
||||
"@angular/http": "^5.2.0",
|
||||
"@angular/platform-browser": "^5.2.0",
|
||||
"@angular/platform-browser-dynamic": "^5.2.0",
|
||||
"@angular/platform-server": "^5.2.0",
|
||||
"@angular/router": "^5.2.0",
|
||||
"@nguniversal/express-engine": "^5.0.0-beta.5",
|
||||
"@nguniversal/module-map-ngfactory-loader": "^5.0.0-beta.5",
|
||||
"core-js": "^2.4.1",
|
||||
"normalize.css": "^7.0.0",
|
||||
"pm2": "^2.6.1",
|
||||
"reflect-metadata": "^0.1.12",
|
||||
"rxjs": "^5.5.6",
|
||||
"zone.js": "^0.8.19"
|
||||
"@angular/animations": "~8.2.11",
|
||||
"@angular/common": "~8.2.11",
|
||||
"@angular/compiler": "~8.2.11",
|
||||
"@angular/core": "~8.2.11",
|
||||
"@angular/forms": "~8.2.11",
|
||||
"@angular/platform-browser": "~8.2.11",
|
||||
"@angular/platform-browser-dynamic": "~8.2.11",
|
||||
"@angular/platform-server": "~8.2.11",
|
||||
"@angular/router": "~8.2.11",
|
||||
"@nguniversal/express-engine": "~8.1.1",
|
||||
"@nguniversal/module-map-ngfactory-loader": "~8.1.1",
|
||||
"express": "^4.15.2",
|
||||
"normalize.css": "^8.0.1",
|
||||
"pm2": "~4.1.2",
|
||||
"rxjs": "~6.4.0",
|
||||
"tslib": "^1.10.0",
|
||||
"zone.js": "~0.9.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular/cli": "^1.7.1",
|
||||
"@angular/compiler-cli": "^5.2.0",
|
||||
"@angular/language-service": "^5.2.0",
|
||||
"@types/jasmine": "~2.8.3",
|
||||
"@types/jasminewd2": "~2.0.2",
|
||||
"@types/node": "~6.0.60",
|
||||
"codelyzer": "~4.0.1",
|
||||
"jasmine-core": "~2.8.0",
|
||||
"@angular-devkit/build-angular": "~0.803.13",
|
||||
"@angular/cli": "~8.3.13",
|
||||
"@angular/compiler-cli": "~8.2.11",
|
||||
"@angular/language-service": "~8.2.11",
|
||||
"@types/node": "~8.9.4",
|
||||
"@types/jasmine": "~3.3.8",
|
||||
"@types/jasminewd2": "~2.0.3",
|
||||
"codelyzer": "^5.0.0",
|
||||
"jasmine-core": "~3.4.0",
|
||||
"jasmine-spec-reporter": "~4.2.1",
|
||||
"karma": "~2.0.0",
|
||||
"karma": "~4.1.0",
|
||||
"karma-chrome-launcher": "~2.2.0",
|
||||
"karma-cli": "~1.0.1",
|
||||
"karma-coverage-istanbul-reporter": "^1.2.1",
|
||||
"karma-jasmine": "~1.1.0",
|
||||
"karma-jasmine-html-reporter": "^0.2.2",
|
||||
"protractor": "~5.1.2",
|
||||
"ts-node": "~4.1.0",
|
||||
"tslint": "~5.9.1",
|
||||
"typescript": "~2.5.3"
|
||||
"karma-coverage-istanbul-reporter": "~2.0.1",
|
||||
"karma-jasmine": "~2.0.1",
|
||||
"karma-jasmine-html-reporter": "^1.4.0",
|
||||
"protractor": "~5.4.0",
|
||||
"ts-loader": "^5.2.0",
|
||||
"ts-node": "~7.0.0",
|
||||
"tslint": "~5.15.0",
|
||||
"typescript": "~3.5.3",
|
||||
"webpack-cli": "^3.1.0"
|
||||
}
|
||||
}
|
||||
|
||||
2
pm2.json
2
pm2.json
@ -1,7 +1,7 @@
|
||||
{
|
||||
"apps" : [{
|
||||
"name" : "gallery-frontend",
|
||||
"script" : "./server.js",
|
||||
"script" : "dist/server.js",
|
||||
"watch" : true,
|
||||
"env": {
|
||||
"NODE_ENV": "development"
|
||||
|
||||
2
robots.txt
Normal file
2
robots.txt
Normal file
@ -0,0 +1,2 @@
|
||||
User-agent: *
|
||||
Disallow: /export-album/
|
||||
43
server.js
43
server.js
@ -1,43 +0,0 @@
|
||||
"use strict";
|
||||
require("zone.js/dist/zone-node");
|
||||
require("reflect-metadata");
|
||||
|
||||
const { enableProdMode } = require('@angular/core');
|
||||
|
||||
const express = require('express');
|
||||
const { join } = require('path');
|
||||
|
||||
enableProdMode();
|
||||
|
||||
// Express server
|
||||
const app = express();
|
||||
|
||||
const PORT = process.env.PORT || 4000;
|
||||
const DIST_FOLDER = join(process.cwd(), 'dist');
|
||||
|
||||
// * NOTE :: leave this as require() since this file is built Dynamically from webpack
|
||||
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main.bundle');
|
||||
|
||||
// Express Engine
|
||||
const { ngExpressEngine } = require("@nguniversal/express-engine");
|
||||
// Import module map for lazy loading
|
||||
const { provideModuleMap } = require("@nguniversal/module-map-ngfactory-loader");
|
||||
|
||||
app.engine('html', ngExpressEngine({
|
||||
bootstrap: AppServerModuleNgFactory,
|
||||
providers: [
|
||||
provideModuleMap(LAZY_MODULE_MAP)
|
||||
]
|
||||
}));
|
||||
app.set('view engine', 'html');
|
||||
app.set('views', join(DIST_FOLDER, 'browser'));
|
||||
// Server static files from /browser
|
||||
app.get('*.*', express.static(join(DIST_FOLDER, 'browser')));
|
||||
// All regular routes use the Universal engine
|
||||
app.get('*', function (req, res) {
|
||||
res.render(join(DIST_FOLDER, 'browser', 'index.html'), { req: req });
|
||||
});
|
||||
// Start up the Node server
|
||||
app.listen(PORT, function () {
|
||||
console.log("Node server listening on http://localhost:" + PORT);
|
||||
});
|
||||
58
server.ts
Normal file
58
server.ts
Normal file
@ -0,0 +1,58 @@
|
||||
/**
|
||||
* *** NOTE ON IMPORTING FROM ANGULAR AND NGUNIVERSAL IN THIS FILE ***
|
||||
*
|
||||
* If your application uses third-party dependencies, you'll need to
|
||||
* either use Webpack or the Angular CLI's `bundleDependencies` feature
|
||||
* in order to adequately package them for use on the server without a
|
||||
* node_modules directory.
|
||||
*
|
||||
* However, due to the nature of the CLI's `bundleDependencies`, importing
|
||||
* Angular in this file will create a different instance of Angular than
|
||||
* the version in the compiled application code. This leads to unavoidable
|
||||
* conflicts. Therefore, please do not explicitly import from @angular or
|
||||
* @nguniversal in this file. You can export any needed resources
|
||||
* from your application's main.server.ts file, as seen below with the
|
||||
* import for `ngExpressEngine`.
|
||||
*/
|
||||
|
||||
import 'zone.js/dist/zone-node';
|
||||
|
||||
import * as express from 'express';
|
||||
import {join} from 'path';
|
||||
|
||||
// Express server
|
||||
const app = express();
|
||||
|
||||
const PORT = process.env.PORT || 4000;
|
||||
const DIST_FOLDER = join(process.cwd(), 'dist/browser');
|
||||
|
||||
// * NOTE :: leave this as require() since this file is built Dynamically from webpack
|
||||
const {AppServerModuleNgFactory, LAZY_MODULE_MAP, ngExpressEngine, provideModuleMap} = require('./dist/server/main');
|
||||
|
||||
// Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
|
||||
app.engine('html', ngExpressEngine({
|
||||
bootstrap: AppServerModuleNgFactory,
|
||||
providers: [
|
||||
provideModuleMap(LAZY_MODULE_MAP)
|
||||
]
|
||||
}));
|
||||
|
||||
app.set('view engine', 'html');
|
||||
app.set('views', DIST_FOLDER);
|
||||
|
||||
// Example Express Rest API endpoints
|
||||
// app.get('/api/**', (req, res) => { });
|
||||
// Serve static files from /browser
|
||||
app.get('*.*', express.static(DIST_FOLDER, {
|
||||
maxAge: '1y'
|
||||
}));
|
||||
|
||||
// All regular routes use the Universal engine
|
||||
app.get('*', (req, res) => {
|
||||
res.render('index', { req });
|
||||
});
|
||||
|
||||
// Start up the Node server
|
||||
app.listen(PORT, () => {
|
||||
console.log(`Node Express server listening on http://localhost:${PORT}`);
|
||||
});
|
||||
@ -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}))
|
||||
]),
|
||||
]);
|
||||
|
||||
@ -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)'
|
||||
}))
|
||||
])
|
||||
]);
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { ServerModule } from '@angular/platform-server';
|
||||
import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader';
|
||||
|
||||
import { AppModule } from './app.module';
|
||||
import { AppComponent } from './app.component';
|
||||
import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
@ -11,8 +11,7 @@ import { AppComponent } from './app.component';
|
||||
ServerModule,
|
||||
ModuleMapLoaderModule,
|
||||
],
|
||||
bootstrap: [
|
||||
AppComponent,
|
||||
]
|
||||
bootstrap: [AppComponent],
|
||||
})
|
||||
export class AppServerModule {}
|
||||
export class AppServerModule {
|
||||
}
|
||||
|
||||
@ -1,23 +1,48 @@
|
||||
.main.container {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-left: 10px;
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: block;
|
||||
float: left;
|
||||
width: 510px;
|
||||
line-height: 0;
|
||||
column-gap: 20px;
|
||||
}
|
||||
|
||||
.align.right {
|
||||
float: right;
|
||||
a {
|
||||
cursor: pointer;
|
||||
color: #2AA198;
|
||||
text-decoration: none;
|
||||
transition-property: color;
|
||||
transition-duration: 0.5s;
|
||||
transition-timing-function: ease-out;
|
||||
}
|
||||
|
||||
.align.left {
|
||||
float: left;
|
||||
a:hover {
|
||||
color: #2a70a1;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
h1 {
|
||||
padding-right: 15px;
|
||||
/* mobile */
|
||||
@media only screen and (max-width: 779px) {
|
||||
.row {
|
||||
column-count: 1;
|
||||
}
|
||||
.main.container {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* tablet */
|
||||
@media only screen and (min-width: 780px) and (max-width: 1219px) {
|
||||
.row {
|
||||
column-count: 3;
|
||||
}
|
||||
}
|
||||
|
||||
/* desktop */
|
||||
@media screen and (min-width: 1220px) {
|
||||
.row {
|
||||
column-count: 5;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,25 +1,16 @@
|
||||
<div class="main container">
|
||||
<h1>{{album.name}}<span class="align right">
|
||||
<a [href]="exportUrl" title="Download compressed album"><i class="fa fa-download"></i></a>
|
||||
<h1>
|
||||
<a [routerLink]="['']" title="Back to albums list"><i class="fa fa-level-up"></i></a>
|
||||
</span></h1>
|
||||
{{album?.name}}
|
||||
<a rel="nofollow" [href]="exportUrl" title="Download compressed album"><i class="fa fa-download"></i></a>
|
||||
</h1>
|
||||
<div class="row images">
|
||||
<app-thumbnail *ngFor="let thumbnail of thumbnailsLeft"
|
||||
[image]="thumbnail.image"
|
||||
[label]="thumbnail.label"
|
||||
(click)="imageClick(album.slug, thumbnail.path)"></app-thumbnail>
|
||||
</div>
|
||||
<div class="row images">
|
||||
<app-thumbnail *ngFor="let thumbnail of thumbnailsMiddle"
|
||||
[image]="thumbnail.image"
|
||||
[label]="thumbnail.label"
|
||||
(click)="imageClick(album.slug, thumbnail.path)"></app-thumbnail>
|
||||
</div>
|
||||
<div class="row images">
|
||||
<app-thumbnail *ngFor="let thumbnail of thumbnailsRight"
|
||||
[image]="thumbnail.image"
|
||||
[label]="thumbnail.label"
|
||||
(click)="imageClick(album.slug, thumbnail.path)"></app-thumbnail>
|
||||
<a app-thumbnail *ngFor="let thumbnail of thumbnails" href="#"
|
||||
[image]="thumbnail.image"
|
||||
[label]="thumbnail.label"
|
||||
[width]="thumbnail.width"
|
||||
[height]="thumbnail.height"
|
||||
(click)="imageClick(album.slug, thumbnail.path)"></a>
|
||||
</div>
|
||||
</div>
|
||||
<app-display-image (imageChange)="switchImage($event)"></app-display-image>
|
||||
<app-display-image (imageChange)="switchImage($event)"></app-display-image>
|
||||
|
||||
@ -7,11 +7,6 @@ import { Album, Image } from "../shared";
|
||||
import { DisplayImageService } from "../display-image/display-image.service";
|
||||
import { Thumbnail } from "../shared/thumbnail.model";
|
||||
|
||||
const IDX_LEFT = 0;
|
||||
const IDX_MIDDLE = 1;
|
||||
const IDX_RIGHT = 2;
|
||||
const THUMB_MARGIN = 10;
|
||||
|
||||
@Component({
|
||||
selector: 'app-album',
|
||||
templateUrl: './album.component.html',
|
||||
@ -20,14 +15,7 @@ const THUMB_MARGIN = 10;
|
||||
export class AlbumComponent implements OnInit {
|
||||
|
||||
public album: Album = new Album();
|
||||
|
||||
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 thumbnails: Array<Thumbnail> = [];
|
||||
|
||||
constructor(private titleService: Title,
|
||||
private route: ActivatedRoute,
|
||||
@ -44,6 +32,14 @@ export class AlbumComponent implements OnInit {
|
||||
property: 'og:image',
|
||||
content: this.imageUrl(this.album.coverImage)
|
||||
});
|
||||
this.metaService.updateTag({
|
||||
property: 'og:title',
|
||||
content: this.album.name
|
||||
});
|
||||
this.metaService.updateTag({
|
||||
property: 'og:description',
|
||||
content: this.album.date
|
||||
});
|
||||
this.route.params.subscribe((params: {
|
||||
slug: string,
|
||||
image: string
|
||||
@ -69,24 +65,8 @@ export class AlbumComponent implements OnInit {
|
||||
extraLeft: '',
|
||||
},
|
||||
height: image.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;
|
||||
}
|
||||
});
|
||||
width: image.thumbWidth
|
||||
}).map(thumbnail => this.thumbnails.push(thumbnail));
|
||||
}
|
||||
|
||||
public get exportUrl(): string {
|
||||
@ -99,6 +79,7 @@ export class AlbumComponent implements OnInit {
|
||||
|
||||
public imageClick(slug: string, path: string) {
|
||||
this.displayImageService.activate(slug, path, this.album.name);
|
||||
return false;
|
||||
}
|
||||
|
||||
public switchImage(evnt: { direction: string, currentPath: string }) {
|
||||
|
||||
@ -10,22 +10,19 @@
|
||||
-webkit-transition: opacity 150ms ease-in;
|
||||
-moz-transition: opacity 150ms ease-in;
|
||||
transition: opacity 150ms ease-in;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 15px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.modal-padding {
|
||||
overflow: hidden;
|
||||
max-height: calc(100% - 30px);
|
||||
max-width: calc(100% - 30px);
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.modal-container .image {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-height: calc(100% - 30px);
|
||||
width: auto;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@ -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 = "") {
|
||||
@ -93,7 +91,7 @@ export class DisplayImageComponent implements OnInit {
|
||||
}
|
||||
|
||||
@HostListener('document:keyup', ['$event.key'])
|
||||
private handleKeyPress(keyPressed: string) {
|
||||
public handleKeyPress(keyPressed: string) {
|
||||
if (this.visible) {
|
||||
switch (keyPressed) {
|
||||
case 'Escape':
|
||||
@ -112,20 +110,20 @@ export class DisplayImageComponent implements OnInit {
|
||||
}
|
||||
|
||||
@HostListener('click')
|
||||
private handleClick() {
|
||||
public handleClick() {
|
||||
if (this.visible) {
|
||||
this.nextImage();
|
||||
}
|
||||
}
|
||||
|
||||
@HostListener('touchstart', ['$event'])
|
||||
private touchStart(touchEvent: TouchEvent) {
|
||||
public touchStart(touchEvent: TouchEvent) {
|
||||
this.touchX = touchEvent.touches[0].clientX;
|
||||
this.touchY = touchEvent.touches[0].clientY;
|
||||
}
|
||||
|
||||
@HostListener('touchend', ['$event'])
|
||||
private touchEnd(touchEvent: TouchEvent) {
|
||||
public touchEnd(touchEvent: TouchEvent) {
|
||||
let xDiff: number = this.touchX - touchEvent.changedTouches[0].clientX;
|
||||
let yDiff: number = this.touchY - touchEvent.changedTouches[0].clientY;
|
||||
|
||||
@ -145,7 +143,7 @@ export class DisplayImageComponent implements OnInit {
|
||||
}
|
||||
|
||||
@HostListener('touchcancel')
|
||||
private touchCancel() {
|
||||
public touchCancel() {
|
||||
this.touchX = 0;
|
||||
this.touchY = 0;
|
||||
}
|
||||
|
||||
@ -2,8 +2,5 @@ import { Injectable } from '@angular/core';
|
||||
|
||||
@Injectable()
|
||||
export class DisplayImageService {
|
||||
|
||||
constructor() { }
|
||||
activate: (message?: string, title?: string, extitle? :string) => Promise<boolean>;
|
||||
|
||||
activate: (message?: string, title?: string, extitle?: string) => Promise<boolean>;
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { HttpModule } from "@angular/http";
|
||||
import { GalleryService } from './shared/gallery.service';
|
||||
import { HttpClientModule } from "@angular/common/http";
|
||||
import { GalleryService } from './shared';
|
||||
import { GalleryComponent } from './gallery/gallery.component';
|
||||
import { AlbumComponent } from './album/album.component';
|
||||
import { DisplayImageComponent } from './display-image/display-image.component';
|
||||
@ -10,20 +10,21 @@ import { DisplayImageService } from './display-image/display-image.service';
|
||||
import { ThumbnailComponent } from './thumbnail/thumbnail.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
HttpModule,
|
||||
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 {
|
||||
}
|
||||
|
||||
@ -1,11 +1,34 @@
|
||||
.main.container {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-left: 10px;
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: block;
|
||||
float: left;
|
||||
width: 510px;
|
||||
line-height: 0;
|
||||
column-gap: 20px;
|
||||
}
|
||||
|
||||
/* mobile */
|
||||
@media only screen and (max-width: 779px) {
|
||||
.row {
|
||||
column-count: 1;
|
||||
}
|
||||
.main.container {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* tablet */
|
||||
@media only screen and (min-width: 780px) and (max-width: 1219px) {
|
||||
.row {
|
||||
column-count: 3;
|
||||
}
|
||||
}
|
||||
|
||||
/* desktop */
|
||||
@media screen and (min-width: 1220px) {
|
||||
.row {
|
||||
column-count: 5;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,21 +1,11 @@
|
||||
<div class="main container">
|
||||
<h1>Albums</h1>
|
||||
<div class="row images">
|
||||
<a app-thumbnail *ngFor="let thumbnail of thumbnailsLeft"
|
||||
[image]="thumbnail.image"
|
||||
[label]="thumbnail.label"
|
||||
[routerLink]="['/album', thumbnail.slug]"></a>
|
||||
</div>
|
||||
<div class="row images">
|
||||
<a app-thumbnail *ngFor="let thumbnail of thumbnailsMiddle"
|
||||
[image]="thumbnail.image"
|
||||
[label]="thumbnail.label"
|
||||
[routerLink]="['/album', thumbnail.slug]"></a>
|
||||
</div>
|
||||
<div class="row images">
|
||||
<a app-thumbnail *ngFor="let thumbnail of thumbnailsRight"
|
||||
<a app-thumbnail *ngFor="let thumbnail of thumbnails"
|
||||
[image]="thumbnail.image"
|
||||
[label]="thumbnail.label"
|
||||
[width]="thumbnail.width"
|
||||
[height]="thumbnail.height"
|
||||
[routerLink]="['/album', thumbnail.slug]"></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -6,11 +6,6 @@ import { Album } from "../shared";
|
||||
import { ActivatedRoute } from "@angular/router";
|
||||
import { Thumbnail } from "../shared/thumbnail.model";
|
||||
|
||||
const IDX_LEFT = 0;
|
||||
const IDX_MIDDLE = 1;
|
||||
const IDX_RIGHT = 2;
|
||||
const THUMB_MARGIN = 10;
|
||||
|
||||
@Component({
|
||||
selector: 'app-gallery',
|
||||
templateUrl: './gallery.component.html',
|
||||
@ -19,14 +14,7 @@ const THUMB_MARGIN = 10;
|
||||
export class GalleryComponent implements OnInit {
|
||||
|
||||
public albums: Array<Album> = [];
|
||||
|
||||
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 thumbnails: Array<Thumbnail> = [];
|
||||
|
||||
constructor(private titleService: Title,
|
||||
private route: ActivatedRoute,
|
||||
@ -42,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"
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
@ -55,24 +51,8 @@ export class GalleryComponent implements OnInit {
|
||||
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;
|
||||
}
|
||||
});
|
||||
width: album.coverImage.thumbWidth
|
||||
}).map(thumbnail => this.thumbnails.push(thumbnail));
|
||||
}
|
||||
|
||||
private imageUrl(album: Album): string {
|
||||
|
||||
@ -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<Image> = [];
|
||||
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<Image> = [];
|
||||
}
|
||||
|
||||
@ -1,40 +1,39 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Http } from "@angular/http";
|
||||
import { HttpClient } from "@angular/common/http";
|
||||
import { ActivatedRouteSnapshot, Resolve } from "@angular/router";
|
||||
import { Observable } from "rxjs/Observable";
|
||||
import 'rxjs/Rx';
|
||||
import { Observable } from "rxjs";
|
||||
|
||||
import { environment } from "../../../environments/environment";
|
||||
import { Album, Image } from ".";
|
||||
import { Album } from "./album.model";
|
||||
|
||||
@Injectable()
|
||||
export class GalleryService implements Resolve<Array<Album>|false> {
|
||||
export class GalleryService implements Resolve<Array<Album> | false> {
|
||||
|
||||
public albums: Array<Album> = [];
|
||||
public albums: Array<Album> = [];
|
||||
|
||||
constructor(
|
||||
private httpService: Http,
|
||||
) {}
|
||||
constructor(
|
||||
private httpService: HttpClient,
|
||||
) {}
|
||||
|
||||
public listGalleries(): Observable<Array<Album>> {
|
||||
return this.httpService.get(environment.apiUrl + '/api/galleries').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>|false> {
|
||||
if(this.albums.length) {
|
||||
return Promise.resolve(this.albums);
|
||||
public listGalleries(): Observable<Array<Album>> {
|
||||
return this.httpService.get<Array<Album>>(environment.apiUrl + '/api/galleries');
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {ActivatedRouteSnapshot} route
|
||||
* @returns {Promise<Array<Album>>}
|
||||
* @todo add some cache ttl to albums?
|
||||
*/
|
||||
public resolve(route: ActivatedRouteSnapshot): Promise<Array<Album> | 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;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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 = "";
|
||||
}
|
||||
|
||||
@ -1,9 +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 slug: string = '';
|
||||
public image: string = '';
|
||||
public path: string = '';
|
||||
public label: ThumbLabel = new ThumbLabel();
|
||||
public height: number = 0;
|
||||
public width: number = 0;
|
||||
}
|
||||
|
||||
@ -1,12 +1,24 @@
|
||||
:host {
|
||||
display: flex;
|
||||
display: block;
|
||||
margin: 0 0 20px 0;
|
||||
}
|
||||
|
||||
/* mobile */
|
||||
@media only screen and (max-width: 779px) {
|
||||
:host {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.thumbnail img.image {
|
||||
@ -21,15 +33,32 @@
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
line-height: 1rem;
|
||||
transform-origin: 50% 100%;
|
||||
transition-property: transform;
|
||||
transition-duration: 0.15s;
|
||||
transition-timing-function: ease-out;
|
||||
transform: scaleY(0);
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
a:link,
|
||||
a:visited,
|
||||
a:hover,
|
||||
a:active
|
||||
{
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.thumbnail > div.label > h1 {
|
||||
font-size: 150%;
|
||||
}
|
||||
|
||||
.thumbnail > div.label > h2 {
|
||||
font-size: 120%;
|
||||
}
|
||||
|
||||
.thumbnail:hover > div.label {
|
||||
transform: scaleY(1);
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.align.right {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<a class="thumbnail">
|
||||
<img class="image" src="{{image}}">
|
||||
<img class="image" src="{{image}}" [width]="width" [height]="height">
|
||||
<div class="label" *ngIf="label">
|
||||
<h1 class="title">{{label.title}}</h1>
|
||||
<h2 class="extra">{{label.extraLeft}}<span class="align right">{{label.extraRight}}</span></h2>
|
||||
|
||||
@ -1,20 +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 = {};
|
||||
|
||||
constructor() {}
|
||||
|
||||
ngOnInit() {}
|
||||
|
||||
export class ThumbnailComponent {
|
||||
@Input() image: string = "";
|
||||
@Input() label: ThumbLabel = null;
|
||||
@Input() target: any = {};
|
||||
@Input() width: number = 0;
|
||||
@Input() height: number = 0;
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
export const environment = {
|
||||
production: true,
|
||||
apiUrl: 'http://photos-api.yvan.hu',
|
||||
apiUrl: 'https://photos-api.yvan.hu',
|
||||
};
|
||||
|
||||
@ -6,5 +6,5 @@
|
||||
export const environment = {
|
||||
production: false,
|
||||
// apiUrl: 'http://localhost:8888',
|
||||
apiUrl: 'http://photos-api.yvan.hu',
|
||||
apiUrl: '//photos-api.yvan.hu',
|
||||
};
|
||||
|
||||
@ -4,11 +4,8 @@
|
||||
<meta charset="utf-8">
|
||||
<title>Gallery</title>
|
||||
<base href="/">
|
||||
|
||||
<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="stylesheet" href="assets/css/font-awesome.min.css">
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
12
src/main.server.ts
Normal file
12
src/main.server.ts
Normal file
@ -0,0 +1,12 @@
|
||||
import { enableProdMode } from '@angular/core';
|
||||
|
||||
import { environment } from './environments/environment';
|
||||
|
||||
if (environment.production) {
|
||||
enableProdMode();
|
||||
}
|
||||
|
||||
export { AppServerModule } from './app/app.server.module';
|
||||
export { ngExpressEngine } from "@nguniversal/express-engine";
|
||||
export { provideModuleMap } from "@nguniversal/module-map-ngfactory-loader";
|
||||
|
||||
@ -8,4 +8,6 @@ if (environment.production) {
|
||||
enableProdMode();
|
||||
}
|
||||
|
||||
platformBrowserDynamic().bootstrapModule(AppModule);
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
platformBrowserDynamic().bootstrapModule(AppModule);
|
||||
});
|
||||
|
||||
@ -38,8 +38,8 @@
|
||||
// import 'classlist.js'; // Run `npm install --save classlist.js`.
|
||||
|
||||
/** Evergreen browsers require these. **/
|
||||
import 'core-js/es6/reflect';
|
||||
import 'core-js/es7/reflect';
|
||||
//import 'core-js/es6/reflect';
|
||||
//import 'core-js/es7/reflect';
|
||||
|
||||
|
||||
/**
|
||||
|
||||
@ -1,51 +1,44 @@
|
||||
/* 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,*/
|
||||
/*body {*/
|
||||
/*height: 100%;*/
|
||||
/*}*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-x: hidden;
|
||||
min-width: 320px;
|
||||
background: #002B36;
|
||||
background: #ffffff;
|
||||
font-family: "Source Sans Pro", 'Helvetica Neue', Arial, Helvetica, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 1.4285em;
|
||||
color: #839496;
|
||||
color: rgb(30%, 30%, 30%);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
a {
|
||||
cursor: pointer;
|
||||
color: #2AA198;
|
||||
text-decoration: none;
|
||||
a:link,
|
||||
a:visited,
|
||||
a:hover,
|
||||
a:active
|
||||
{
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #2AA198;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
/* app style */
|
||||
@media screen and (min-width: 600px) {
|
||||
/* mobile */
|
||||
@media only screen and (max-width: 779px) {
|
||||
.main.container {
|
||||
width: 515px;
|
||||
width: calc(100% - 20px);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1200px) {
|
||||
/* tablet */
|
||||
@media only screen and (min-width: 780px) and (max-width: 1219px) {
|
||||
.main.container {
|
||||
width: 1030px;
|
||||
width: calc(100% - 80px);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1600px) {
|
||||
/* desktop */
|
||||
@media screen and (min-width: 1220px) {
|
||||
.main.container {
|
||||
width: 1545px;
|
||||
width: calc(100% - 80px);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,16 +0,0 @@
|
||||
{
|
||||
"extends": "../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "../out-tsc/app",
|
||||
"baseUrl": "./",
|
||||
"module": "commonjs",
|
||||
"types": []
|
||||
},
|
||||
"exclude": [
|
||||
"test.ts",
|
||||
"**/*.spec.ts"
|
||||
],
|
||||
"angularCompilerOptions": {
|
||||
"entryModule": "app/app.server.module#AppServerModule"
|
||||
}
|
||||
}
|
||||
@ -2,10 +2,15 @@
|
||||
"extends": "../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "../out-tsc/app",
|
||||
"baseUrl": "./",
|
||||
"module": "es2015",
|
||||
"types": []
|
||||
},
|
||||
"files": [
|
||||
"main.ts",
|
||||
"polyfills.ts"
|
||||
],
|
||||
"include": [
|
||||
"**/*.ts"
|
||||
],
|
||||
"exclude": [
|
||||
"test.ts",
|
||||
"**/*.spec.ts"
|
||||
|
||||
13
src/tsconfig.server.json
Normal file
13
src/tsconfig.server.json
Normal file
@ -0,0 +1,13 @@
|
||||
{
|
||||
"extends": "./tsconfig.app.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "../out-tsc/app-server",
|
||||
"module": "commonjs"
|
||||
},
|
||||
"files": [
|
||||
"main.server.ts"
|
||||
],
|
||||
"angularCompilerOptions": {
|
||||
"entryModule": "./app/app.server.module#AppServerModule"
|
||||
}
|
||||
}
|
||||
@ -2,16 +2,14 @@
|
||||
"extends": "../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "../out-tsc/spec",
|
||||
"baseUrl": "./",
|
||||
"module": "commonjs",
|
||||
"target": "es5",
|
||||
"types": [
|
||||
"jasmine",
|
||||
"node"
|
||||
]
|
||||
},
|
||||
"files": [
|
||||
"test.ts"
|
||||
"test.ts",
|
||||
"polyfills.ts"
|
||||
],
|
||||
"include": [
|
||||
"**/*.spec.ts",
|
||||
|
||||
@ -1,19 +1,26 @@
|
||||
{
|
||||
"compileOnSave": false,
|
||||
"compilerOptions": {
|
||||
"baseUrl": "./",
|
||||
"outDir": "./dist/out-tsc",
|
||||
"sourceMap": true,
|
||||
"declaration": false,
|
||||
"moduleResolution": "node",
|
||||
"emitDecoratorMetadata": true,
|
||||
"downlevelIteration": true,
|
||||
"experimentalDecorators": true,
|
||||
"target": "es5",
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"importHelpers": true,
|
||||
"target": "es2015",
|
||||
"typeRoots": [
|
||||
"node_modules/@types"
|
||||
],
|
||||
"lib": [
|
||||
"es2017",
|
||||
"es2018",
|
||||
"dom"
|
||||
]
|
||||
},
|
||||
"angularCompilerOptions": {
|
||||
"fullTemplateTypeCheck": true,
|
||||
"strictInjectionParameters": true
|
||||
}
|
||||
}
|
||||
|
||||
51
webpack.server.config.js
Normal file
51
webpack.server.config.js
Normal file
@ -0,0 +1,51 @@
|
||||
// Work around for https://github.com/angular/angular-cli/issues/7200
|
||||
|
||||
const path = require('path');
|
||||
const webpack = require('webpack');
|
||||
|
||||
module.exports = {
|
||||
mode: 'none',
|
||||
entry: {
|
||||
// This is our Express server for Dynamic universal
|
||||
server: './server.ts'
|
||||
},
|
||||
externals: {
|
||||
'./dist/server/main': 'require("./server/main")'
|
||||
},
|
||||
target: 'node',
|
||||
resolve: { extensions: ['.ts', '.js'] },
|
||||
optimization: {
|
||||
minimize: true
|
||||
},
|
||||
output: {
|
||||
// Puts the output at the root of the dist folder
|
||||
path: path.join(__dirname, 'dist'),
|
||||
filename: '[name].js'
|
||||
},
|
||||
module: {
|
||||
noParse: /polyfills-.*\.js/,
|
||||
rules: [
|
||||
{ test: /\.ts$/, loader: 'ts-loader' },
|
||||
{
|
||||
// Mark files inside `@angular/core` as using SystemJS style dynamic imports.
|
||||
// Removing this will cause deprecation warnings to appear.
|
||||
test: /(\\|\/)@angular(\\|\/)core(\\|\/).+\.js$/,
|
||||
parser: { system: true },
|
||||
},
|
||||
]
|
||||
},
|
||||
plugins: [
|
||||
new webpack.ContextReplacementPlugin(
|
||||
// fixes WARNING Critical dependency: the request of a dependency is an expression
|
||||
/(.+)?angular(\\|\/)core(.+)?/,
|
||||
path.join(__dirname, 'src'), // location of your src
|
||||
{} // a map of your routes
|
||||
),
|
||||
new webpack.ContextReplacementPlugin(
|
||||
// fixes WARNING Critical dependency: the request of a dependency is an expression
|
||||
/(.+)?express(\\|\/)(.+)?/,
|
||||
path.join(__dirname, 'src'),
|
||||
{}
|
||||
)
|
||||
]
|
||||
};
|
||||
Loading…
x
Reference in New Issue
Block a user