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

Display contributor and package additional information

Browse source
This commit is contained in:
Dennis Schoepf 2021-08-06 22:32:38 +02:00
parent 677d729584
commit 146924b262
6 changed files with 155 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

56
src/ui/info.ts
View file

@ -1,13 +1,21 @@
import moment from 'moment';
import { logger } from '../logger';
import { RevealableTypes } from '../sketchObjects/Revealable';
import store from '../store';
export interface Commit {
url: string;
message: string;
time: string;
}
export interface InfoMessageType {
type: RevealableTypes;
headline: string;
innerHTML: string;
imgUrl?: string;
url?: string;
commits?: Commit[];
version?: string;
}
export class InfoMessage {
@ -20,6 +28,10 @@ export class InfoMessage {
infoMessageClose: HTMLElement;
infoMessageImgRef: HTMLImageElement;
infoMessageLinkRef: HTMLAnchorElement;
infoMessageCommitsHeadlineRef: HTMLElement;
infoMessageCommitsRef: HTMLElement;
infoMessageVersionRef: HTMLElement;
backdrop: HTMLElement;
constructor() {
@ -30,6 +42,11 @@ export class InfoMessage {
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.infoMessageCommitsRef = document.getElementById('info-message-contents-commits');
this.infoMessageCommitsHeadlineRef = document.getElementById(
'info-message-content-commits-headline'
);
this.infoMessageVersionRef = document.getElementById('info-message-contents-version');
this.backdrop = document.getElementById('backdrop');
this.backdrop.addEventListener('click', this.onBackdropClick);
@ -63,6 +80,22 @@ export class InfoMessage {
this.infoMessageLinkRef.style.display = 'none';
}
if (this.type === RevealableTypes.CONTRIBUTOR) {
this.infoMessageCommitsRef.style.display = 'block';
this.infoMessageCommitsHeadlineRef.style.display = 'block';
this.setCommits(newMessage.commits);
} else {
this.infoMessageCommitsRef.style.display = 'none';
this.infoMessageCommitsHeadlineRef.style.display = 'none';
}
if (this.type === RevealableTypes.PACKAGE) {
this.infoMessageVersionRef.style.display = 'block';
this.setVersion(newMessage.version);
} else {
this.infoMessageVersionRef.style.display = 'none';
}
store.setState({ infoMessageShown: true });
}
});
@ -80,7 +113,28 @@ export class InfoMessage {
private setContents(headline: string, innerHTML: string) {
this.infoMessageHeadline.innerText = headline;
this.infoMessageContents.innerHTML = innerHTML;
// this.infoMessageContents.innerHTML = innerHTML;
}
private setVersion(version: string) {
this.infoMessageVersionRef.innerHTML = `This package is installed at<br/><h3>${version}</h3>`;
}
private setCommits(commits: Commit[]) {
const commitEls = commits.map(
({ message, url, time }) =>
`<div class="info-message-contents-commit">
<p>${message}</p>
<div>
<span>${moment(time).format(
'LLL'
)}</span> • <a href="${url}" target="_blank">Take a look on Github</a>
</div>
</div>`
);
console.log(commitEls);
this.infoMessageCommitsRef.innerHTML = commitEls.join('');
}
private setImg(imgUrl: string) {