diff --git a/.vscode/settings.json b/.vscode/settings.json index bc3732e..a981944 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -9,6 +9,7 @@ "froms", "leds", "mesmerising", + "mixins", "optimisations", "optimised", "organiser", diff --git a/src/data/photos.ts b/src/data/photos.ts index 42f036f..438f053 100644 --- a/src/data/photos.ts +++ b/src/data/photos.ts @@ -8,6 +8,17 @@ export const photosTimelineElement = { date: `2016 summer`, title: `Photos`, figure: new Image(photosWebP, photosJpeg, `a picture of the website`), - description: `A simple web page where you can view my photos.`, + description: `A simple webpage where you can view my photos.`, + more: [ + ` + Taking time to appreciate the world around us fills me with joy. That's why I like + to go on walks with a camera. I might not end up with great photos, nonetheless, I usually + end up with some inspiration regarding my current or next project. + `, + ` + As for the webpage, a webpack script generates the site from the photos in a directory, + automatic resizing to multiple quality settings is also part of the pipeline. + `, + ], links: [new Open('https://photo.schmelczer.dev')], }; diff --git a/src/page/timeline/timeline-element/timeline-element.ts b/src/page/timeline/timeline-element/timeline-element.ts index ad6e01a..26c582f 100644 --- a/src/page/timeline/timeline-element/timeline-element.ts +++ b/src/page/timeline/timeline-element/timeline-element.ts @@ -11,41 +11,32 @@ export interface TimelineElementParameters { figure: Image | Video | Preview; title: string; description: string; - more?: Array; + more: Array; links: Array; } export class PageTimelineElement extends PageElement { - private isOpen: boolean; - private more?: HTMLElement; - private showMore: string; - private showLess: string; + private isOpen = false; + private more: HTMLElement; public constructor( timelineElement: TimelineElementParameters, - showMore: string, - showLess: string + private readonly showMore: string, + private readonly showLess: string ) { - const root = createElement(generate(timelineElement, showMore)); - - if (timelineElement.more) { - const content = new PageContent(timelineElement.more); - super(root); - this.children = [content]; - this.isOpen = false; - this.more = this.query('.more'); - this.more.appendChild(content.htmlRoot); - addEventListener('resize', this.handleResize.bind(this)); - - this.query('.info-button').addEventListener('click', this.toggleOpen.bind(this)); - } else super(root); + super(createElement(generate(timelineElement, showMore))); + const content = new PageContent(timelineElement.more); + this.children = [content]; + this.isOpen = false; + this.more = this.query('.more'); + this.more.appendChild(content.htmlRoot); + addEventListener('resize', this.handleResize.bind(this)); + this.query('.info-button').addEventListener('click', this.toggleOpen.bind(this)); this.attachElementByReplacing('.figure', timelineElement.figure); this.query('.description').innerText = timelineElement.description; timelineElement.links.forEach(l => this.attachElementAsChildOf('.buttons', l)); - this.showMore = showMore; - this.showLess = showLess; this.isOpen = false; }