diff --git a/src/components/big_picture.tsx b/src/components/big_picture.tsx index c31185d..a096b34 100644 --- a/src/components/big_picture.tsx +++ b/src/components/big_picture.tsx @@ -3,42 +3,48 @@ import * as Model from "../model"; import * as React from "react"; export interface Props { - image: Model.Image; - onClose: () => void; - width: number; + image: Model.Image; + onClose: () => void; + width: number; } export class BigPicture extends React.PureComponent { - static displayName = "BigPicture"; + static displayName = "BigPicture"; - render() { - const src = `img/1600/${this.props.image.src}`; - return
-
-
-
- - Download - - - Close - -
-
; - } + render() { + const src = `img/1600/${this.props.image.src}`; + return ( +
+
+
+ + Download + + + Close + +
+
+ ); + } - private _keyPress = (e: React.KeyboardEvent) => { - if (e.key === "Enter") { - this.props.onClose(); - } + private _keyPress = (e: React.KeyboardEvent) => { + if (e.key === "Enter") { + this.props.onClose(); } + }; } diff --git a/src/components/grid.tsx b/src/components/grid.tsx index f0d7da2..dd427ae 100644 --- a/src/components/grid.tsx +++ b/src/components/grid.tsx @@ -4,71 +4,76 @@ import * as Model from "../model"; import * as React from "react"; export interface Props { - images: Model.Image[]; - onImageSelected: (image: Model.Image) => void; - width: number; + images: Model.Image[]; + onImageSelected: (image: Model.Image) => void; + width: number; } export const ROW_HEIGHT = 200; export const MOBILE_ROW_HEIGHT = 100; interface Row { - images: Model.Image[]; - width: number; + images: Model.Image[]; + width: number; } export class Grid extends React.PureComponent { - static displayName = "Grid"; + static displayName = "Grid"; - render() { - let row: Model.Image[] = []; - const rows: Row[] = []; - let rowWidth = 0; + render() { + let row: Model.Image[] = []; + const rows: Row[] = []; + let rowWidth = 0; - this.props.images.forEach(image => { - const newWidth = rowWidth + (image.width/image.height); - const height = this.props.width / newWidth; + this.props.images.forEach(image => { + const newWidth = rowWidth + image.width / image.height; + const height = this.props.width / newWidth; - if (height < this._rowHeight()) { - rows.push({ - images: row, - width: rowWidth - }); - - row = []; - rowWidth = (image.width/image.height); - } else { - rowWidth = newWidth; - } - row.push(image); - }); + if (height < this._rowHeight()) { rows.push({ - images: row, - width: rowWidth + images: row, + width: rowWidth }); - const images = rows.map(row => { - const height = this.props.width / row.width; + row = []; + rowWidth = image.width / image.height; + } else { + rowWidth = newWidth; + } + row.push(image); + }); + rows.push({ + images: row, + width: rowWidth + }); - const pics = row.images.map(image => { - return this.props.onImageSelected(image)} - key={image.src} - width={image.width/image.height * height} - /> - }); - return
image.src).join(",")}> - {pics} -
; - }); + const images = rows.map(row => { + const height = this.props.width / row.width; - return
{images}
; - } + const pics = row.images.map(image => { + return ( + this.props.onImageSelected(image)} + key={image.src} + width={(image.width / image.height) * height} + /> + ); + }); + return ( +
image.src).join(",")} + > + {pics} +
+ ); + }); - private _rowHeight = (): number => - this.props.width > 500 ? ROW_HEIGHT : MOBILE_ROW_HEIGHT; + return
{images}
; + } + + private _rowHeight = (): number => + this.props.width > 500 ? ROW_HEIGHT : MOBILE_ROW_HEIGHT; } diff --git a/src/components/image_set.tsx b/src/components/image_set.tsx index a6d8727..39d32f7 100644 --- a/src/components/image_set.tsx +++ b/src/components/image_set.tsx @@ -4,21 +4,26 @@ import * as Model from "../model"; import * as React from "react"; export interface Props { - imageSet: Model.ImageSet; - onImageSelected: (img: Model.Image) => void; - width: number; + imageSet: Model.ImageSet; + onImageSelected: (img: Model.Image) => void; + width: number; } export class ImageSet extends React.PureComponent { - static displayName = "ImageSet"; + static displayName = "ImageSet"; - render() { - return
-

{ this.props.imageSet.location } · { this.props.imageSet.description }

- -
; - } + render() { + return ( +
+

+ {this.props.imageSet.location} · {this.props.imageSet.description} +

+ +
+ ); + } } diff --git a/src/components/picture.tsx b/src/components/picture.tsx index a9fed35..1f31ed1 100644 --- a/src/components/picture.tsx +++ b/src/components/picture.tsx @@ -3,39 +3,42 @@ import * as Model from "../model"; import * as React from "react"; export interface Props { - image: Model.Image; - onClick: () => void; - width: number; + image: Model.Image; + onClick: () => void; + width: number; } export class Picture extends React.PureComponent { - static displayName = "Picture"; + static displayName = "Picture"; - render() { - const src = `img/600/${this.props.image.src}`; - return ; - } + render() { + const src = `img/600/${this.props.image.src}`; + return ( + + ); + } - private _srcset = (): string => { - const srcs: string[] = []; + private _srcset = (): string => { + const srcs: string[] = []; - Model.SIZES.forEach(size => { - const width = this.props.image.width > this.props.image.height - ? size - : this.props.image.width / this.props.image.height * size; + Model.SIZES.forEach(size => { + const width = + this.props.image.width > this.props.image.height + ? size + : (this.props.image.width / this.props.image.height) * size; - const scale = width / this.props.width; + const scale = width / this.props.width; - if (scale >= 1) { - srcs.push(`img/${size}/${this.props.image.src} ${scale}x`); - } - }); + if (scale >= 1) { + srcs.push(`img/${size}/${this.props.image.src} ${scale}x`); + } + }); - return srcs.join(","); - } + return srcs.join(","); + }; } diff --git a/src/components/root.tsx b/src/components/root.tsx index 98dd67e..c86e187 100644 --- a/src/components/root.tsx +++ b/src/components/root.tsx @@ -7,84 +7,88 @@ import * as React from "react"; export interface Props {} export interface State { - data?: Model.Data | null; - selectedImage?: Model.Image | null; - width: number; + data?: Model.Data | null; + selectedImage?: Model.Image | null; + width: number; } export class Root extends React.PureComponent { - static displayName = "Root"; + static displayName = "Root"; - state: State = { - width: window.innerWidth - } + state: State = { + width: window.innerWidth + }; - componentDidMount() { - window.fetch(Model.URL) - .then(data => data.json()) - .then(json => this.setState({ data: json })) - .then(this._loadHash) - .catch(e => console.error("Error fetching data", e)); + componentDidMount() { + window + .fetch(Model.URL) + .then(data => data.json()) + .then(json => this.setState({ data: json })) + .then(this._loadHash) + .catch(e => console.error("Error fetching data", e)); - window.onresize = () => { - this.setState({ width: window.innerWidth }); + window.onresize = () => { + this.setState({ width: window.innerWidth }); + }; + + window.onpopstate = this._loadHash; + } + + render() { + const imageSets = this.state.data + ? this.state.data.sets.map(set => ( + + )) + : null; + + return ( +
+ {this._bigPicture()} +

Ski

+ {imageSets} +
+ ); + } + + private _bigPicture = () => + this.state.selectedImage ? ( + + ) : null; + + private _loadHash = () => { + if (window.location.hash.length > 0 && this.state.data) { + const src = window.location.hash.slice(1); + let selectedImage: Model.Image | null = null; + + this.state.data.sets.forEach(set => { + const image = set.images.find(image => image.src === src); + if (image) { + selectedImage = image; } + }); - window.onpopstate = this._loadHash; - + this.setState({ selectedImage: selectedImage }); + } else { + this.setState({ selectedImage: null }); } + }; - render() { - const imageSets = this.state.data - ? this.state.data.sets.map(set => - - ) - : null; + private _onImageSelected = (img: Model.Image) => { + this.setState({ selectedImage: img }); + window.history.pushState(null, "", `#${img.src}`); + }; - return
- { this._bigPicture() } -

Ski

- { imageSets } -
; - } - - private _bigPicture = () => - this.state.selectedImage - ? - : null - - private _loadHash = () => { - if (window.location.hash.length > 0 && this.state.data) { - const src = window.location.hash.slice(1); - let selectedImage: Model.Image | null = null; - - this.state.data.sets.forEach(set => { - const image = set.images.find(image => image.src === src); - if (image) { - selectedImage = image; - } - }); - - this.setState({ selectedImage: selectedImage }); - } else { - this.setState({ selectedImage: null }); - } - } - - private _onImageSelected = (img: Model.Image) => { - this.setState({ selectedImage: img }); - window.history.pushState(null, "", `#${img.src}`); - } - - private _showGrid = () => { - this.setState({ selectedImage: null }); - window.history.pushState(null, "", "#"); - } + private _showGrid = () => { + this.setState({ selectedImage: null }); + window.history.pushState(null, "", "#"); + }; } diff --git a/src/model.ts b/src/model.ts index 92f61af..5134342 100644 --- a/src/model.ts +++ b/src/model.ts @@ -2,17 +2,17 @@ export const SIZES = [1600, 1200, 800, 600, 400, 200]; export const URL = "img/data.json"; export interface Data { - sets: ImageSet[] + sets: ImageSet[]; } export interface ImageSet { - location: string; - description: string; - images: Image[] + location: string; + description: string; + images: Image[]; } export interface Image { - src: string; - height: number; - width: number; + src: string; + height: number; + width: number; }