` @@ -1042,32 +1167,16 @@ class Item extends LitElement { // } return html` `; } @@ -1166,23 +1291,19 @@ class Item extends LitElement { ? html` - + ` : ""} @@ -1196,12 +1317,7 @@ class Item extends LitElement { aria-label="Back" > - + - + ${!this.isLoading ? html` - + .svg="${iconArrowClockwise}" + > ` : ""} @@ -1264,37 +1373,42 @@ class Item extends LitElement { @click="${this.skipMenu}" >Skip replay navigation - +
+ +

Skipped

`; } @@ -1303,7 +1417,7 @@ class Item extends LitElement { id="click-download-msg" class="loc-overlay has-background-link-light is-size-7" > -
+
Select image or media highlighted with 🟦 (blue box) on hover to download.
@@ -1322,10 +1436,7 @@ class Item extends LitElement { ? dateTimeFormatter.format(tsToDate(this.ts) as Date) : ""; - return html` `; + ? html` + + Archive Info + ` + : nothing} + + + + About ${this.appName} + ${this.appVersion} + + + + `; } private renderTimestamp() { @@ -1541,7 +1598,7 @@ class Item extends LitElement {
${currDateStr}
${timestampStrs.length}
- +
@@ -1610,11 +1667,7 @@ class Item extends LitElement { renderItemInfo() { if (!this.itemInfo) return html` - + Archive info is not available
Please reload and try again.
`; @@ -1629,13 +1682,15 @@ class Item extends LitElement { // @ts-expect-error [// TODO: Fix this the next time the file is edited.] - TS7006 - Parameter 'isSidebar' implicitly has an 'any' type. renderItemTabs(isSidebar) { - const isStory = this.hasStory && this.tabData.view === "story"; - const isPages = this.tabData.view === "pages"; - const isResources = this.tabData.view === "resources"; + const isStory = + this.hasStory && this.tabData.view === EmbedReplayDataView.Story; + const isPages = this.tabData.view === EmbedReplayDataView.Pages; + const isResources = this.tabData.view === EmbedReplayDataView.Resources; return html` ${isStory ? html` { - this.menuActive = false; - }, - { once: true }, - ); - } - } - // @ts-expect-error [// TODO: Fix this the next time the file is edited.] - TS7006 - Parameter 'event' implicitly has an 'any' type. onFullscreenToggle(event) { event.preventDefault(); - this.menuActive = false; + if (!this.isFullscreen) { // TODO: Fix this the next time the file is edited. // eslint-disable-next-line @typescript-eslint/no-floating-promises @@ -1742,22 +1785,19 @@ class Item extends LitElement { } } - // @ts-expect-error [// TODO: Fix this the next time the file is edited.] - TS7006 - Parameter 'event' implicitly has an 'any' type. - onGoBack(event) { + onGoBack(event: Event) { event.preventDefault(); - this.menuActive = false; + window.history.back(); } - // @ts-expect-error [// TODO: Fix this the next time the file is edited.] - TS7006 - Parameter 'event' implicitly has an 'any' type. - onGoForward(event) { + onGoForward(event: Event) { event.preventDefault(); - this.menuActive = false; + window.history.forward(); } - // @ts-expect-error [// TODO: Fix this the next time the file is edited.] - TS7006 - Parameter 'event' implicitly has an 'any' type. - onShowPages(event) { + onShowPages(event: Event) { event.preventDefault(); // show sidebar for tablet or wider, or hide sidebar if (this.showSidebar || document.documentElement.clientWidth >= 769) { @@ -1772,14 +1812,23 @@ class Item extends LitElement { } } - // @ts-expect-error [// TODO: Fix this the next time the file is edited.] - TS7006 - Parameter 'event' implicitly has an 'any' type. - onFullPageView(event) { + onFullPageView(event: MouseEvent) { event.preventDefault(); + + this.tabDataBeforeFullView = this.tabData; this.updateTabData({ url: "", ts: "" }); } - // @ts-expect-error [// TODO: Fix this the next time the file is edited.] - TS7006 - Parameter 'event' implicitly has an 'any' type. - onHideSidebar(event) { + onSplitView(event: MouseEvent) { + event.preventDefault(); + + if (this.tabDataBeforeFullView) { + this.updateTabData(this.tabDataBeforeFullView); + this.tabDataBeforeFullView = undefined; + } + } + + onHideSidebar(event: MouseEvent) { event.preventDefault(); this.showSidebar = false; } @@ -1907,14 +1956,13 @@ class Item extends LitElement { this.updateTabData({ ts: item.value }); } - // @ts-expect-error [// TODO: Fix this the next time the file is edited.] - TS7006 - Parameter 'value' implicitly has an 'any' type. - navigateTo(value) { + navigateTo(value: string, { ts } = { ts: "" }) { let data: TabData; if (value.startsWith("http://") || value.startsWith("https://")) { - data = { url: value }; + data = { url: value, ts }; - if (value === this.tabData.url) { + if (value === this.tabData.url && (!ts || ts === this.tabData.ts)) { const replay = this.renderRoot.querySelector("wr-coll-replay"); if (replay) { replay.refresh(); @@ -1923,18 +1971,16 @@ class Item extends LitElement { } } else { if (!value.startsWith(RWP_SCHEME)) { - data = { query: value, view: "pages" }; + data = { query: value, view: EmbedReplayDataView.Pages }; } else { data = this._stringToParams(value); } } + this.updateTabData(data); } - // @ts-expect-error [// TODO: Fix this the next time the file is edited.] - TS7006 - Parameter 'value' implicitly has an 'any' type. - _stringToParams(value) { - // TODO: Fix this the next time the file is edited. - // eslint-disable-next-line @typescript-eslint/no-unsafe-argument + _stringToParams(value: string) { const q = new URLSearchParams(value.slice(RWP_SCHEME.length)); const data: Partial = {}; data.url = ""; @@ -1979,8 +2025,6 @@ class Item extends LitElement { event.preventDefault(); } - this.menuActive = false; - if (this.tabData.url) { const replay = this.renderRoot.querySelector("wr-coll-replay"); if (replay) { diff --git a/src/misc.ts b/src/misc.ts index 191bc29..fc6d40f 100644 --- a/src/misc.ts +++ b/src/misc.ts @@ -57,6 +57,9 @@ export function updateFaviconLinks(data: FavIconEventDetail) { } // =========================================================================== +/** + * @deprecated Use `` + */ class FaIcon extends LitElement { constructor() { super(); diff --git a/src/pageentry.ts b/src/pageentry.ts index eb975a0..a934e2f 100644 --- a/src/pageentry.ts +++ b/src/pageentry.ts @@ -1,10 +1,19 @@ import prettyBytes from "pretty-bytes"; -import { LitElement, html, css, unsafeCSS, type PropertyValues } from "lit"; +import { + LitElement, + html, + css, + unsafeCSS, + type PropertyValues, + nothing, +} from "lit"; import { property, state } from "lit/decorators.js"; import "keyword-mark-element/lib/keyword-mark.js"; +import iconImageAlt from "~icons/image-alt.svg"; + import { getPageDateTS, getReplayLink } from "./pageutils"; import { wrapCss } from "./misc"; @@ -15,6 +24,7 @@ import { timeFormatter, } from "./utils/dateTimeFormatter"; import type { TabNavEvent } from "./events"; +import { ifDefined } from "lit/directives/if-defined.js"; // =========================================================================== class PageEntry extends LitElement { @@ -48,6 +58,9 @@ class PageEntry extends LitElement { @property({ type: Boolean }) isSidebar = false; + @property({ type: Boolean }) + useFaviconFallback = false; + @state() thumbnailValid = true; @@ -70,6 +83,26 @@ class PageEntry extends LitElement { width: unset !important; } + :host(.sidebar) .page-title { + font-size: var(--sl-font-size-small); + } + + :host(.sidebar) .page-title, + :host(.sidebar) .page-url { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + overflow: hidden; + } + + :host(.sidebar) .page-link:not(.current):hover { + background-color: var(--sl-color-neutral-50); + } + + :host(.sidebar) .current { + background-color: var(--sl-color-blue-100); + } + :host(.sidebar) { width: 100%; } @@ -92,23 +125,62 @@ class PageEntry extends LitElement { margin-bottom: calc(-0.75rem + 2px); } - .favicon { - display: inline-block; - vertical-align: text-bottom; + .thumbnail { + background-color: var(--sl-color-neutral-100); + border: 1px solid var(--sl-color-neutral-200); + border-radius: var(--sl-border-radius-large); + } + + .thumbnail-placeholder { + position: relative; + } + + .thumbnail-placeholder-content { + position: absolute; + inset: 0; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + overflow: hidden; + padding: var(--sl-spacing-2x-small); + } + + .thumbnail-placeholder-content .icon { + margin: var(--sl-spacing-2x-small) 0; + color: var(--sl-color-neutral-300); + } + + .thumbnail-placeholder-label { + font-size: var(--sl-font-size-2x-small); + color: var(--sl-color-neutral-500); + line-height: 1; + } + + .page-link { + transition: background-color var(--sl-transition-x-fast); + } + + .page-link:hover .page-title { + color: var(--sl-color-blue-700); + } + + .page-title { + font-weight: var(--sl-font-weight-bold); + color: var(--sl-color-blue-600); + transition: color var(--sl-transition-x-fast); } .media-left .favicon { - width: 2rem; - height: 2rem; - } - .media-left img.favicon { - filter: drop-shadow(1px 1px 2px grey); + object-fit: contain; } .media-content .favicon { width: 1.15rem; height: 1.15rem; margin: 0 0.25rem; + display: inline-block; + vertical-align: -0.25rem; } .media-left { @@ -141,18 +213,6 @@ class PageEntry extends LitElement { ${PageEntry.sidebarStyles(unsafeCSS`:host(.sidebar)`)} - .current a { - background-color: rgb(207, 243, 255); - font-style: italic; - display: block; - } - - .current .curr-page { - font-style: italic; - font-size: 9px; - color: black; - } - .is-inline-date { display: none; } @@ -164,6 +224,16 @@ class PageEntry extends LitElement { .col-date { font-variant-numeric: tabular-nums; } + + .date-time, + .is-inline-date { + font-size: var(--sl-font-size-small); + color: var(--sl-color-neutral-700); + } + + .page-url { + font-size: var(--sl-font-size-small); + } `); } @@ -185,10 +255,6 @@ class PageEntry extends LitElement { } ${prefix} .is-inline-date { display: initial !important; - font-style: italic; - } - ${prefix} .media-left { - padding-left: 0.75rem; } `; } @@ -229,12 +295,15 @@ class PageEntry extends LitElement { : ""}
${date ? dateFormatter.format(date) : ""}
-
${date ? timeFormatter.format(date) : ""}
+
${date ? timeFormatter.format(date) : ""}
-
+