dennis/codewanderer
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Implement edge highlighting and finished state

Browse source
This commit is contained in:
Dennis Schoepf 2021-08-01 22:39:51 +02:00
parent 3633b32b3f
commit 748e1e0739
8 changed files with 141 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

29
src/ui/info.ts
View file

@ -3,6 +3,8 @@ import store from '../store';
export interface InfoMessageType {
headline: string;
innerHTML: string;
imgUrl?: string;
url?: string;
}
export class InfoMessage {
@ -10,6 +12,8 @@ export class InfoMessage {
infoMessageHeadline: HTMLElement;
infoMessageContents: HTMLElement;
infoMessageClose: HTMLElement;
infoMessageImgRef: HTMLImageElement;
infoMessageLinkRef: HTMLAnchorElement;
backdrop: HTMLElement;
constructor() {
@ -17,6 +21,8 @@ export class InfoMessage {
this.infoMessageHeadline = document.getElementById('info-message-headline');
this.infoMessageContents = document.getElementById('info-message-contents');
this.infoMessageClose = document.getElementById('info-message-close');
this.infoMessageImgRef = document.getElementById('info-message-img') as HTMLImageElement;
this.infoMessageLinkRef = document.getElementById('info-message-link') as HTMLAnchorElement;
this.backdrop = document.getElementById('backdrop');
this.backdrop.addEventListener('click', this.onBackdropClick);
@ -32,6 +38,19 @@ export class InfoMessage {
if (state.infoMessages.length > prevState.infoMessages.length) {
const newMessage = state.infoMessages[state.infoMessages.length - 1];
this.setContents(newMessage.headline, newMessage.innerHTML);
if (newMessage.imgUrl) {
this.setImg(newMessage.imgUrl);
} else {
this.infoMessageImgRef.style.display = 'none';
}
if (newMessage.url) {
this.setLink(newMessage.url);
} else {
this.infoMessageLinkRef.style.display = 'none';
}
store.setState({ infoMessageShown: true });
}
});
@ -42,6 +61,16 @@ export class InfoMessage {
this.infoMessageContents.innerHTML = innerHTML;
}
private setImg(imgUrl: string) {
this.infoMessageImgRef.src = imgUrl;
this.infoMessageImgRef.style.display = 'block';
}
private setLink(url: string) {
this.infoMessageLinkRef.href = url;
this.infoMessageLinkRef.style.display = 'block';
}
private show() {
this.infoMessage.style.display = 'block';
this.backdrop.style.display = 'block';