andras/schmelczer-dev
1
0
Fork 0
Code Issues Pull requests 6 Projects Releases Packages Wiki Activity Actions

Add description to photos

Browse source
This commit is contained in:
schmelczerandras 2020-11-26 22:57:16 +01:00
parent 3c27d8fc81
commit 476db8cf65
3 changed files with 26 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

1
.vscode/settings.json vendored
View file

@ -9,6 +9,7 @@
"froms",
"leds",
"mesmerising",
"mixins",
"optimisations",
"optimised",
"organiser",

13
src/data/photos.ts
View file

@ -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')],
};

35
src/page/timeline/timeline-element/timeline-element.ts
View file

@ -11,41 +11,32 @@ export interface TimelineElementParameters {
figure: Image | Video | Preview;
title: string;
description: string;
more?: Array<string>;
more: Array<string>;
links: Array<PageElement>;
}
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;
}