Commit 70c303b7 authored by Frederick Gnodtke (Prior99)'s avatar Frederick Gnodtke (Prior99)
Browse files

Change view to use services

parent e87e04af
Pipeline #103029711 failed with stages
in 6 minutes and 12 seconds
@import "../../variables.scss";
.FullscreenImage {
height: 100%;
width: 100%;
......
import * as React from "react";
import { Link } from "react-router-dom";
import { observer } from "mobx-react";
import * as classNames from "classnames";
import { ModelGallery, ModelImage } from "../../../common";
import { routeImage } from "../../pages";
import { GalleryFilmroll } from "../gallery-filmroll";
import { SourceSettedImage } from "../source-setted-image";
import "./fullscreen-image.scss";
import { external, inject } from "tsdi";
import { ServiceImages } from "../../services";
import { computed } from "mobx";
export interface FullscreenImageProps {
gallery: ModelGallery;
image: ModelImage;
}
@external @observer
export class FullscreenImage extends React.Component<{ id: string }> {
@inject private serviceImages: ServiceImages;
export class FullscreenImage extends React.Component<FullscreenImageProps> {
private get classes() {
@computed private get classes() {
return classNames(["FullscreenImage"]);
}
private get nextImage() {
const { image, gallery } = this.props;
const currentIndex = gallery.images.findIndex(otherImage => otherImage.id === image.id);
const nextIndex = (currentIndex + 1) % gallery.images.length;
return gallery.images[nextIndex];
@computed private get nextImage() {
return this.serviceImages.next(this.props.id);
}
@computed private get image() {
return this.serviceImages.byId(this.props.id);
}
@computed private get galleryId() {
if (!this.image) { return; }
return this.image.gallery.id;
}
public render() {
if (!this.image || !this.nextImage) { return <></>; }
return (
<article className={this.classes}>
<a href={routeImage.path(this.nextImage.id)}>
<SourceSettedImage image={this.props.image} className="FullscreenImage__image" />
</a>
<GalleryFilmroll {...this.props} className="FullscreenImage__filmroll" />
<Link to={routeImage.path(this.nextImage.id)}>
<SourceSettedImage id={this.props.id} className="FullscreenImage__image" />
</Link>
<GalleryFilmroll
id={this.galleryId}
activeId={this.props.id}
className="FullscreenImage__filmroll"
/>
</article>
);
}
......
export { FullscreenImage, FullscreenImageProps } from "./fullscreen-image";
export * from "./fullscreen-image";
@import "../../variables.scss";
.GalleryFilmroll {
$imagesHeight: 100px;
$navigationHeight: 40px;
......@@ -36,7 +38,8 @@
background-color: rgba($black, 0.5);
display: flex;
justify-content: center;
transition: all ease 0.2s;
transition: top ease 0.2s;
}
&__hint {
......@@ -63,15 +66,15 @@
}
&:hover {
& > .GalleryFilmroll__navigation {
.GalleryFilmroll__navigation {
top: 0;
}
& > .GalleryFilmroll__images {
.GalleryFilmroll__images {
top: $navigationHeight;
}
& > .GalleryFilmroll__hint {
.GalleryFilmroll__hint {
opacity: 0;
}
}
......
import * as React from "react";
import { Link } from "react-router-dom";
import * as classNames from "classnames";
import { observer } from "mobx-react";
import { external, inject } from "tsdi";
import { ImageThumb } from "../image-thumb";
import { ModelGallery, ModelImage } from "../../../common";
import { ModelGallery, ModelImage } from "../../../common";
import { Hint } from "../hint";
import { Triangle } from "../triangle";
import { routeImage, routeGallery } from "../../pages";
import "./gallery-filmroll.scss";
import { ServiceImages } from "../../services";
import { computed } from "mobx";
export interface GalleryFilmrollProps {
gallery: ModelGallery;
image: ModelImage;
id: string;
activeId: string;
className: string;
}
@external @observer
export class GalleryFilmroll extends React.Component<GalleryFilmrollProps> {
private get classes() {
@inject private serviceImages: ServiceImages;
@computed private get classes() {
return classNames(["GalleryFilmroll", this.props.className]);
}
private get images() {
const { images } = this.props.gallery;
const currentIndex = images.findIndex(image => image.id === this.props.image.id);
@computed private get images() {
const images = this.serviceImages.inGallery(this.props.id) || [];
if (!this.image) { return []; }
const currentIndex = images.findIndex(image => image.id === this.image.id);
const desiredIndex = Math.floor(images.length / 2);
return [
...images.slice(currentIndex - desiredIndex, images.length),
......@@ -28,37 +37,45 @@ export class GalleryFilmroll extends React.Component<GalleryFilmrollProps> {
];
}
private get nextImage() {
const { image, gallery } = this.props;
const currentIndex = gallery.images.findIndex(otherImage => otherImage.id === image.id);
const nextIndex = (currentIndex + 1) % gallery.images.length;
return gallery.images[nextIndex];
@computed private get nextImage() {
return this.serviceImages.next(this.props.activeId);
}
@computed private get previousImage() {
return this.serviceImages.previous(this.props.activeId);
}
private get previousImage() {
const { image, gallery } = this.props;
const currentIndex = gallery.images.findIndex(otherImage => otherImage.id === image.id);
const nextIndex = currentIndex === 0 ? gallery.images.length - 1 : currentIndex - 1;
return gallery.images[nextIndex];
@computed private get image() {
return this.serviceImages.byId(this.props.activeId);
}
public render() {
const { image } = this.props;
if (!this.image || !this.previousImage || !this.nextImage || !this.images) { return <></>; }
return (
<section className={this.classes}>
<div className="GalleryFilmroll__navigation">
<a href={routeImage.path(this.previousImage.id)} className="GalleryFilmroll__previousLink">
<Link to={routeImage.path(this.previousImage.id)} className="GalleryFilmroll__previousLink">
<Triangle direction="left" />
</a>
<a href={routeImage.path(this.nextImage.id)} className="GalleryFilmroll__nextLink">
</Link>
<Link to={routeImage.path(this.nextImage.id)} className="GalleryFilmroll__nextLink">
<Triangle direction="right" />
</a>
<a href={routeGallery.path(image.gallery.id)} className="GalleryFilmroll__galleryLink">
</Link>
<Link to={routeGallery.path(this.image.gallery.id)} className="GalleryFilmroll__galleryLink">
<Triangle direction="up" />
</a>
</Link>
</div>
<div className="GalleryFilmroll__images">
{this.images.map(info => <ImageThumb active={image.id === info.id} image={info} key={info.id} />)}
{
this.images.map(image => {
return (
<ImageThumb
active={this.image.id === image.id}
id={image.id}
key={image.id}
/>
);
})
}
</div>
<Hint className="GalleryFilmroll__hint" />
</section>
......
export { GalleryFilmroll, GalleryFilmrollProps } from "./gallery-filmroll";
export * from "./gallery-filmroll";
@import "../../variables.scss";
.GalleryImageThumb {
margin: 10px;
......
import * as React from "react";
import { ModelImage } from "../../../common";
import { Link } from "react-router-dom";
import { SourceSettedImage } from "../source-setted-image";
import { routeImage } from "../../pages";
import { external, inject } from "tsdi";
import { observer } from "mobx-react";
import { ServiceImages } from "../../services";
import { computed } from "mobx";
import "./gallery-image-thumb.scss";
export interface GalleryImageThumbProps {
image: ModelImage;
}
@external @observer
export class GalleryImageThumb extends React.Component<{ id: string }> {
@inject private serviceImages: ServiceImages;
@computed private get image() {
return this.serviceImages.byId(this.props.id);
}
export class GalleryImageThumb extends React.Component<GalleryImageThumbProps> {
public render() {
const { image } = this.props;
if (!this.image) { return <></>; }
return (
<div className="GalleryImageThumb">
<a className="GalleryImageThumb__link" href={routeImage.path(image.id)}>
<SourceSettedImage className="GalleryImageThumb__image" image={image}/>
</a>
<Link className="GalleryImageThumb__link" to={routeImage.path(this.image.id)}>
<SourceSettedImage className="GalleryImageThumb__image" id={this.image.id}/>
</Link>
</div>
);
}
......
export { GalleryImageThumb, GalleryImageThumbProps } from "./gallery-image-thumb";
export * from "./gallery-image-thumb";
@import "../../variables.scss";
.GalleryOverview {
display: flex;
flex-direction: column;
......
import * as React from "react";
import { Link } from "react-router-dom";
import { isAfter, format } from "date-fns";
import * as classNames from "classnames";
import { external, inject } from "tsdi";
import { observer } from "mobx-react";
import { GalleryImageThumb } from "../gallery-image-thumb";
import { ModelGallery } from "../../../common";
import { Mosaic } from "../mosaic";
import { Triangle } from "../triangle";
import { routeIndex } from "../../pages";
import "./gallery-overview.scss";
import { ServiceGalleries, ServiceImages } from "../../services";
import { computed } from "mobx";
export interface GalleryOverviewProps {
gallery: ModelGallery;
}
@external @observer
export class GalleryOverview extends React.Component<{ id: string }> {
@inject private serviceGalleries: ServiceGalleries;
@inject private serviceImages: ServiceImages;
@computed private get images() {
return this.serviceImages.inGallery(this.props.id) || [];
}
@computed private get gallery() {
return this.serviceGalleries.byId(this.props.id);
}
export class GalleryOverview extends React.Component<GalleryOverviewProps> {
get lastUpdate() {
return this.props.gallery.images
return this.images
.map(image => image.updated)
.reduce((result, current) => isAfter(result, current) ? result : current);
}
public render() {
const { name, images, description } = this.props.gallery;
if (!this.gallery || this.images.length === 0) { return <></>; }
const { name, description } = this.gallery;
const lastUpdate = format(this.lastUpdate, "yyyy-MM-dd");
return (
<article className="GalleryOverview">
......@@ -41,12 +54,12 @@ export class GalleryOverview extends React.Component<GalleryOverviewProps> {
</section>
}
<Mosaic className="GalleryOverview__images">
{images.map(info => <GalleryImageThumb image={info} key={info.id} />)}
{this.images.map(info => <GalleryImageThumb id={info.id} key={info.id} />)}
</Mosaic>
<section className="GalleryOverview__navigation">
<a href={routeIndex.path()} className="GalleryOverview__indexLink">
<Link to={routeIndex.path()} className="GalleryOverview__indexLink">
<Triangle direction="up" />
</a>
</Link>
</section>
</article>
);
......
export { GalleryOverview, GalleryOverviewProps } from "./gallery-overview";
export * from "./gallery-overview";
@import "../../variables.scss";
.Hint {
opacity: 0.4;
display: flex;
......
export { Hint, HintProps } from "./hint";
export * from "./hint";
@import "../../variables.scss";
.ImageThumb {
display: inline;
&__image {
box-sizing: border-box;
height: calc(100% - 10px);
height: calc(100% - 20px);
margin: 5px;
border: 5px solid transparent;
}
......
import * as React from "react";
import { Link } from "react-router-dom";
import * as classNames from "classnames";
import { ModelImage, imageSizeTiny } from "../../../common";
import { external, inject } from "tsdi";
import { imageSizeTiny } from "../../../common";
import { imageUrl } from "../../utils";
import "./image-thumb.scss";
import { observer } from "mobx-react";
import { ServiceImages } from "../../services";
import { computed } from "mobx";
import { routeImage } from "../../pages";
export interface ImageThumbProps {
image: ModelImage;
id: string;
active: boolean;
}
@external @observer
export class ImageThumb extends React.Component<ImageThumbProps> {
get classes() {
@inject private serviceImages: ServiceImages;
@computed get classes() {
return classNames({
"ImageThumb": true,
"ImageThumb--active": this.props.active,
});
}
get linkClasses() {
@computed get linkClasses() {
return classNames(["ImageThumb__link"]);
}
get imageClasses() {
@computed get imageClasses() {
return classNames(["ImageThumb__image"]);
}
@computed private get image() {
return this.serviceImages.byId(this.props.id);
}
public render() {
const { image } = this.props;
const { relativeUrl } = this.context;
const path = imageUrl(image.id, imageSizeTiny);
if (!this.image) { return <></>; }
const path = imageUrl(this.image.gallery.id, this.image.id, imageSizeTiny);
return (
<section className={this.classes}>
<a className={this.linkClasses} href={`../${image.id}/image.html`}>
<img className={this.imageClasses} src={path} alt={image.filename} />
</a>
</section>
<div className={this.classes}>
<Link className={this.linkClasses} to={routeImage.path(this.image.id)}>
<img className={this.imageClasses} src={path} alt={this.image.filename} />
</Link>
</div>
);
}
}
export { ImageThumb, ImageThumbProps } from "./image-thumb";
export * from "./image-thumb";
@import "../../variables.scss";
.IndexGalleryThumb {
$height: 50px;
......
import * as React from "react";
import { Link } from "react-router-dom";
import { imageSizeTiny, ModelGallery } from "../../../common";
import { routeGallery } from "../../pages";
import { imageUrl } from "../../utils";
import "./index-gallery-thumb.scss";
import { external, inject } from "tsdi";
import { observer } from "mobx-react";
import { ServiceGalleries, ServiceImages } from "../../services";
import { computed } from "mobx";
export interface IndexGalleryThumbProps {
gallery: ModelGallery;
}
@external @observer
export class IndexGalleryThumb extends React.Component<{ id: string }> {
@inject private serviceGalleries: ServiceGalleries;
@inject private serviceImages: ServiceImages;
@computed private get gallery() {
return this.serviceGalleries.byId(this.props.id);
}
@computed private get images() {
return this.serviceImages.inGallery(this.props.id) || [];
}
export class IndexGalleryThumb extends React.Component<IndexGalleryThumbProps> {
public render() {
const { gallery } = this.props;
const { relativeUrl } = this.context;
if (!this.gallery) { return <></>; }
return (
<div className="IndexGalleryThumb">
<a href={routeGallery.path(gallery.id)} className="IndexGalleryThumb__link">
<Link to={routeGallery.path(this.gallery.id)} className="IndexGalleryThumb__link">
<div className="IndexGalleryThumb__name">
{gallery.name}
{this.gallery.name}
</div>
<div className="IndexGalleryThumb__images">
{
gallery.images.slice(0, 3).map(image => (
this.images.slice(0, 3).map(image => (
<img
className="IndexGalleryThumb__image"
src={imageUrl(image.id, imageSizeTiny)}
src={imageUrl(this.gallery.id, image.id, imageSizeTiny)}
key={image.id}
/>
))
}
</div>
</a>
</Link>
</div>
);
}
......
export { IndexGalleryThumb, IndexGalleryThumbProps } from "./index-gallery-thumb";
export * from "./index-gallery-thumb";
export { Mosaic, MosaicProps } from "./mosaic";
export * from "./mosaic";
@import "../../variables.scss";
.Mosaic {
width: 100%;
box-sizing: border-box;
......
export { SiteIndex, SiteIndexProps } from "./site-index";
export * from "./site-index";
@import "../../variables.scss";
.SiteIndex {
display: flex;
flex-direction: column;
......
import * as React from "react";
import { ModelGallery } from "../../../common";
import { IndexGalleryThumb } from "../index-gallery-thumb";