-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #93 from Serhii-DV/dev
* [Feature] History widget improvement (#92) * Set version `0.15.1` * Make content tab wider * Added styles for visited history widget * `npm install @github/relative-time-element --save-dev` * Use related time component in the latest visited widget * Use related time component in the releases list component * Introduced releases group list element component * Output hostname instead of whole url * A better format for title/year * Update changelog * [Feature] History widget improvement (#92) * Set version `0.15.1` * Make content tab wider * Added styles for visited history widget * `npm install @github/relative-time-element --save-dev` * Use related time component in the latest visited widget * Use related time component in the releases list component * Introduced releases group list element component * Output hostname instead of whole url * A better format for title/year * Update changelog * [Feature] Bandcamp tab (#94) * [Feature] History widget improvement (#92) * Set version `0.15.1` * Make content tab wider * Added styles for visited history widget * `npm install @github/relative-time-element --save-dev` * Use related time component in the latest visited widget * Use related time component in the releases list component * Introduced releases group list element component * Output hostname instead of whole url * A better format for title/year * Update changelog * Rename dashboard to bandcamp tab * Fix go to history tab link * Update changelog
- Loading branch information
Showing
16 changed files
with
195 additions
and
126 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
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,79 @@ | ||
| import { Release } from 'src/app/release'; | ||
| import { createElementFromHTML } from '../../utils/html'; | ||
| import { VisitedDate } from '../../utils/storage'; | ||
|
|
||
| const HTMLElement = | ||
| globalThis.HTMLElement || (null as unknown as (typeof window)['HTMLElement']); | ||
|
|
||
| export class ReleasesGroupListElement extends HTMLElement { | ||
| static define(tag = 'releases-group-list', registry = customElements) { | ||
| registry.define(tag, this); | ||
| return this; | ||
| } | ||
|
|
||
| #groupElement: Element | null = createElementFromHTML( | ||
| `<div class="list-group"></div>` | ||
| ); | ||
|
|
||
| constructor() { | ||
| super(); | ||
|
|
||
| const self = this; | ||
| if (self.#groupElement) { | ||
| self.appendChild(self.#groupElement); | ||
| } | ||
| } | ||
|
|
||
| addItem( | ||
| url: string, | ||
| content: string | Element, | ||
| title: string = '', | ||
| targetBlank: boolean = true | ||
| ): Element | null { | ||
| const self = this; | ||
| const item = createElementFromHTML( | ||
| `<a href="${url}" class="list-group-item list-group-item-action" title="${title}"${targetBlank ? ' target="_blank"' : ''}></a>` | ||
| ); | ||
|
|
||
| if (self.#groupElement === null || item === null) { | ||
| return null; | ||
| } | ||
|
|
||
| if (content instanceof Element) { | ||
| item.appendChild(content); | ||
| } else { | ||
| item.textContent = content; | ||
| } | ||
| self.#groupElement.appendChild(item); | ||
|
|
||
| return item; | ||
| } | ||
|
|
||
| addRelease(release: Release, visitedDate: VisitedDate) { | ||
| const self = this; | ||
| const releaseTitle = `${release.title} (${release.year})`; | ||
| const releaseContentElement = createElementFromHTML(` | ||
| <div class="d-flex justify-content-between"> | ||
| <div class="flex-shrink-0"> | ||
| <img src="${release.image}" alt="${releaseTitle}" class="img-fluid" style="width: 80px; height: 80px;"> | ||
| </div> | ||
| <div class="flex-grow-1 ms-3"> | ||
| <div class="d-flex w-100 justify-content-between"> | ||
| <h6 class="release-artist mb-1">${release.artist}</h6> | ||
| <relative-time class="release-visited-date text-body-secondary" datetime="${visitedDate.date.toISOString()}">${visitedDate.date.toLocaleString()}</relative-time> | ||
| </div> | ||
| <p class="release-title mb-0">${releaseTitle}</p> | ||
| <small class="release-url text-body-secondary text-break">${release.hostname}</small> | ||
| </div> | ||
| </div>`); | ||
| if (releaseContentElement) { | ||
| self.addItem(release.url, releaseContentElement, release.url); | ||
| } | ||
|
|
||
| return self; | ||
| } | ||
| } | ||
|
|
||
| ReleasesGroupListElement.define(); | ||
|
|
||
| export default ReleasesGroupListElement; |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| .list-group-item { | ||
| padding: 5px; | ||
| } | ||
|
|
||
| .list-group-item .release-visited-date { | ||
| width: 30%; | ||
| font-size: 0.7em; | ||
| text-align: right; | ||
| } |
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 |
|---|---|---|
|
|
@@ -29,7 +29,7 @@ body { | |
| } | ||
|
|
||
| .content-text { | ||
| padding: 10px 20px; | ||
| padding: 10px; | ||
| } | ||
|
|
||
| .tab-pane { | ||
|
|
||
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| import { click, getDataAttribute } from '../../utils/html'; | ||
| import { log } from '../../utils/console'; | ||
| import { getLatestHistoryData, getReleasesByUuids } from '../../utils/storage'; | ||
| import { getOwnProperty } from '../../utils/utils'; | ||
|
|
||
| export function setupBandcampTab(btnHistoryTab) { | ||
| log('Setup bandcamp tab'); | ||
|
|
||
| setupLatestVisitedWidget(btnHistoryTab); | ||
| } | ||
|
|
||
| function setupLatestVisitedWidget(btnHistoryTab) { | ||
| const visitedReleasesWidget = document.getElementById('visitedReleases'); | ||
| const limit = getDataAttribute(visitedReleasesWidget, 'limit', 10); | ||
|
|
||
| getLatestHistoryData(limit).then((visitedDates) => { | ||
| const uuids = visitedDates.map((visitedDate) => visitedDate.uuid); | ||
| getReleasesByUuids(uuids).then((releaseMap) => { | ||
| visitedDates.forEach((visitedDate) => { | ||
| const release = getOwnProperty(releaseMap, visitedDate.uuid); | ||
| if (release) { | ||
| visitedReleasesWidget.addRelease(release, visitedDate); | ||
| } | ||
| }); | ||
|
|
||
| const item = visitedReleasesWidget.addItem( | ||
| '#history', | ||
| 'Go to history...', | ||
| 'Go to history...', | ||
| false | ||
| ); | ||
| item.addEventListener('click', (event) => { | ||
| click(btnHistoryTab); | ||
| event.preventDefault(); | ||
| }); | ||
| }); | ||
| }); | ||
| } |
Oops, something went wrong.