forked from akariv/speculatron
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
18 changed files
with
440 additions
and
120 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
18 changes: 14 additions & 4 deletions
18
projects/chronomaps/src/app/directory-page/directory-item/directory-item.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,10 +1,20 @@ | ||
| <div class='meta'> | ||
| <img [src]='chronomap.thumbnail()'> | ||
| <div class='titles'> | ||
| <div class='title' [style.color]='data.directory.secondaryColor()'>{{chronomap.title()}}</div> | ||
| <div class='title' [style.color]='data.directory.secondaryColor()'> | ||
| <span>{{chronomap.title()}}</span> | ||
| <div class='arrow-container' #arrowContainer> | ||
| <div class='arrow' [style.right]='arrowRight + "px"'> | ||
| <svg xmlns="http://www.w3.org/2000/svg" width="1999" height="9" viewBox="0 0 1999 9" fill="none"> | ||
| <path d="M1998.38 4.94371C1998.58 4.74845 1998.58 4.43187 1998.38 4.2366L1995.2 1.05462C1995 0.859362 1994.69 0.859362 1994.49 1.05462C1994.3 1.24989 1994.3 1.56647 1994.49 1.76173L1997.32 4.59016L1994.49 7.41858C1994.3 7.61385 1994.3 7.93043 1994.49 8.12569C1994.69 8.32095 1995 8.32095 1995.2 8.12569L1998.38 4.94371ZM0.0273438 5.09033L1998.03 5.09016L1998.03 4.09016L0.0273437 4.09033L0.0273438 5.09033Z" [attr.fill]='data.directory.primaryColor()'/> | ||
| </svg> | ||
| </div> | ||
| <div class='time'>Updated {{lastModified}}</div> | ||
| </div> | ||
| </div> | ||
| <div class='subtitle' [style.color]='data.directory.primaryColor()'>{{chronomap.subtitle()}}</div> | ||
| <div class='counts'>13 perspectives todo</div> | ||
| <div class='counts'>{{authorsMsg()}}</div> | ||
| </div> | ||
| <div class='time'>Updated 2 weeks ago</div> | ||
| </div> | ||
| <app-time-line [id]='chronomap.title()' [state]='timelineState'></app-time-line> | ||
| <app-time-line [id]='chronomap.title()' [state]='timelineState' [minDate]='minDate()' [maxDate]='maxDate()' | ||
| [chronomap]='chronomap' [showHovers]='false' [hoverable]='true' [hovered]='hovered'></app-time-line> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
68 changes: 64 additions & 4 deletions
68
projects/chronomaps/src/app/directory-page/directory-item/directory-item.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,17 +1,77 @@ | ||
| import { Component, Input, WritableSignal, effect, signal } from '@angular/core'; | ||
| import { ChronomapDatabase, DataService, DirectoryDatabase } from '../../data.service'; | ||
| import { AfterViewInit, Component, ElementRef, EventEmitter, Input, Output, ViewChild, WritableSignal, computed, effect, signal } from '@angular/core'; | ||
| import { Author, ChronomapDatabase, DataService, DirectoryDatabase } from '../../data.service'; | ||
| import * as dayjs from 'dayjs'; | ||
| import { last } from 'rxjs'; | ||
|
|
||
| @Component({ | ||
| selector: 'app-directory-item', | ||
| templateUrl: './directory-item.component.html', | ||
| styleUrl: './directory-item.component.less' | ||
| styleUrl: './directory-item.component.less', | ||
| host: { | ||
| '(mouseenter)': 'hovered.set(true)', | ||
| '(mouseleave)': 'hovered.set(false)', | ||
| } | ||
| }) | ||
| export class DirectoryItemComponent { | ||
| export class DirectoryItemComponent implements AfterViewInit { | ||
|
|
||
| @Input() chronomap: ChronomapDatabase; | ||
| @Input() timelineState: WritableSignal<string>; | ||
| @Input() minDate: WritableSignal<Date>; | ||
| @Input() maxDate: WritableSignal<Date>; | ||
| @Input() arrowRight: number; | ||
|
|
||
| @Output() alignment = new EventEmitter<number>(); | ||
|
|
||
| @ViewChild('arrowContainer') arrowContainer: ElementRef<HTMLElement>; | ||
|
|
||
| hovered = signal<boolean>(false); | ||
|
|
||
| authorsMsg = computed(() => { | ||
| const timeline = this.chronomap.timelineItems(); | ||
| const authors: {[key: string]: Author} = {}; | ||
| const editors: string[] = []; | ||
| let contrubutors = 0; | ||
| timeline.forEach((item) => { | ||
| item.authors?.forEach((author) => { | ||
| authors[author.name] = author; | ||
| }); | ||
| }); | ||
| Object.values(authors).forEach((author) => { | ||
| if (author.status === 'Editor') { | ||
| editors.push(author.name); | ||
| } else if (author.status === 'Contributor') { | ||
| contrubutors++; | ||
| } | ||
| }); | ||
| if (editors.length > 1) { | ||
| const last = editors.pop(); | ||
| editors[editors.length - 1] += ` and ${last}`; | ||
| } | ||
| let ret = editors.join(', '); | ||
| if (contrubutors > 0) { | ||
| if (ret.length > 0) { | ||
| ret += ` +${contrubutors} more`; | ||
| } else { | ||
| ret += `${contrubutors} contributor${contrubutors > 1 ? 's' : ''}`; | ||
| } | ||
| } | ||
| ret = `${timeline.length} perspectives by ${ret}`; | ||
| return ret; | ||
| }); | ||
|
|
||
| constructor(public data: DataService) { | ||
| effect(() => { | ||
| const items = this.chronomap.timelineItems(); | ||
| console.log('items', this.chronomap.title(), items); | ||
| console.log('timelineState', this.timelineState()); | ||
| }); | ||
| } | ||
|
|
||
| ngAfterViewInit(): void { | ||
| this.alignment.next(this.arrowContainer.nativeElement.getBoundingClientRect().width - 26); | ||
| } | ||
|
|
||
| get lastModified() { | ||
| return dayjs(this.chronomap.lastModified()).fromNow(); | ||
| } | ||
| } |
19 changes: 16 additions & 3 deletions
19
projects/chronomaps/src/app/directory-page/directory-page.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,12 +1,25 @@ | ||
| <div class='title'> | ||
| <img [src]="data.directory.titleImageUrl()"> | ||
| <div class='description'> | ||
| {{data.directory.titleImageUrl()}} | ||
| <div class='name'>{{data.directory.description()}}</div> | ||
| <div class='short' [style.color]='data.directory.secondaryColor()'> | ||
| {{data.directory.description()}} | ||
| <a class='toggle' (click)='fullDescription.set(true)' *ngIf='!fullDescription()' [style.color]='data.directory.primaryColor()'>more</a> | ||
| </div> | ||
| <div class='long' [style.color]='data.directory.primaryColor()' *ngIf='fullDescription()'> | ||
| <span [innerHTML]='marked(data.directory.fullDescription())'></span> | ||
| <a class='toggle' (click)='fullDescription.set(false)'>less</a> | ||
| </div> | ||
| <div class='logos' *ngIf='fullDescription()'> | ||
| @for (logo of data.directory.logos(); track $index) { | ||
| <a [href]='data.directory.logoLinks()[$index]' target="_blank"><img [src]='logo' [style.height]='"60px"'></a> | ||
| } | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class='chronomaps'> | ||
| @for (chronomap of data.directory.chronomaps(); track chronomap.id) { | ||
| <app-directory-item [chronomap]="chronomap" [timelineState]='timelineState'></app-directory-item> | ||
| <app-directory-item [chronomap]="chronomap" [timelineState]='timelineState' | ||
| [minDate]='minDate' [maxDate]='maxDate' | ||
| [arrowRight]='arrowRight()' (alignment)='align(chronomap.title(), $event)'></app-directory-item> | ||
| } | ||
| </div> |
Oops, something went wrong.