Lint and fix Lit html (#216)
- Adds eslint lit plugin to catch linting errors in lit html - Fixes linting errors
This commit is contained in:
sua yoo
+11
-9
@@ -292,12 +292,11 @@ class CollIndex extends LitElement {
|
||||
class="input is-small"
|
||||
@input="${(e) => (this.query = e.currentTarget.value)}"
|
||||
.value="${this.query}"
|
||||
type="text"
|
||||
placeholder="Search by Archive Title or Source"
|
||||
/>
|
||||
<span class="icon is-left is-small"
|
||||
><fa-icon .svg="${fasSearch}"
|
||||
/></span>
|
||||
<span class="icon is-left is-small">
|
||||
<fa-icon .svg="${fasSearch}"></fa-icon>
|
||||
</span>
|
||||
</div>
|
||||
<wr-sorter
|
||||
id="index"
|
||||
@@ -327,8 +326,11 @@ class CollIndex extends LitElement {
|
||||
@click="${this.onDeleteColl}"
|
||||
></button>
|
||||
`
|
||||
: html`
|
||||
<span class="button delete-button is-loading is-static">Deleting</span`}
|
||||
: html` <span
|
||||
class="button delete-button is-loading is-static"
|
||||
>
|
||||
Deleting
|
||||
</span>`}
|
||||
</div>
|
||||
`,
|
||||
)}
|
||||
@@ -446,9 +448,9 @@ class CollInfo extends LitElement {
|
||||
: html` ${coll.sourceUrl} `}
|
||||
</span>
|
||||
|
||||
<a @click="${(e) => this.onCopy(e, coll.sourceUrl)}" class="copy"
|
||||
><fa-icon .svg="${fasCopy}"
|
||||
/></a>
|
||||
<a @click="${(e) => this.onCopy(e, coll.sourceUrl)}" class="copy">
|
||||
<fa-icon .svg="${fasCopy}"></fa-icon>
|
||||
</a>
|
||||
${coll.sourceUrl && coll.sourceUrl.startsWith("googledrive://")
|
||||
? html` <p><i>(${coll.filename})</i></p>`
|
||||
: ""}
|
||||
|
||||
+115
-70
@@ -203,45 +203,76 @@ export class RWPEmbedReceipt extends LitElement {
|
||||
const dateStr = tsToDate(this.ts).toLocaleString();
|
||||
|
||||
return html`
|
||||
<div class="dropdown mb-4 ${this.active ? "is-active" : ""}">
|
||||
<div class="dropdown-trigger embed-info-container">
|
||||
<button class="embed-info is-small is-rounded mt-4" aria-haspopup="true" aria-controls="embed-dropdown" @click="${
|
||||
this.onEmbedDrop
|
||||
}">
|
||||
<fa-icon class="menu-logo mr-2 embed-globe" size="1rem" aria-hidden="true" .svg=${btGlobe}></fa-icon>
|
||||
<span class="embed-info-buttontext">
|
||||
This embed is part of a web archive. Click here to learn more.
|
||||
</span>
|
||||
<span class="icon is-small mr-4 ml-2">
|
||||
<fa-icon title="Toggle" .svg="${
|
||||
this.active ? btAngleDoubleUp : btAngleDoubleDown
|
||||
}" aria-hidden="true"></fa-icon>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="dropdown-menu embed-info-container" id="embed-dropdown" role="menu">
|
||||
<div class="dropdown-content embed-info-drop">
|
||||
<p class="mb-4">
|
||||
Even if the original page goes offline or is changed, the content below will remain unchanged as it is loaded from a web archive.
|
||||
</p>
|
||||
<hr class="dropdown-divider">
|
||||
<h2 mt-4">Get A Copy!</h2>
|
||||
<p class="mt-2">After downloading, this web archive can be loaded and viewed directly in your browser via <a style="white-space: nowrap;" target="_blank" href="https://replayweb.page">replayweb.page</a>.</p>
|
||||
<a href="${sourceUrl}" class="button is-primary mt-4" @keyup="${clickOnSpacebarPress}">
|
||||
<span class="icon is-small">
|
||||
<fa-icon size="1.0em" aria-hidden="true" .svg="${fasDownload}"></fa-icon>
|
||||
<div class="dropdown mb-4 ${this.active ? "is-active" : ""}">
|
||||
<div class="dropdown-trigger embed-info-container">
|
||||
<button
|
||||
class="embed-info is-small is-rounded mt-4"
|
||||
aria-haspopup="true"
|
||||
aria-controls="embed-dropdown"
|
||||
@click="${this.onEmbedDrop}"
|
||||
>
|
||||
<fa-icon
|
||||
class="menu-logo mr-2 embed-globe"
|
||||
size="1rem"
|
||||
aria-hidden="true"
|
||||
.svg=${btGlobe}
|
||||
></fa-icon>
|
||||
<span class="embed-info-buttontext">
|
||||
This embed is part of a web archive. Click here to learn more.
|
||||
</span>
|
||||
<span>Download Archive</span>
|
||||
</a>
|
||||
<hr class="dropdown-divider mt-4">
|
||||
<h2 mt-4">Technical Information</h2>
|
||||
<div class="embed-info-drop-statscontainer mb-4">
|
||||
<h3>Original URL:</h3>
|
||||
<p><a target="_blank" href="${this.url}">${this.url}</a></p>
|
||||
<h3 class="mt-2">Archived On:</h3>
|
||||
<p>${dateStr}</p>
|
||||
${
|
||||
domain
|
||||
<span class="icon is-small mr-4 ml-2">
|
||||
<fa-icon
|
||||
title="Toggle"
|
||||
.svg="${this.active ? btAngleDoubleUp : btAngleDoubleDown}"
|
||||
aria-hidden="true"
|
||||
></fa-icon>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="dropdown-menu embed-info-container"
|
||||
id="embed-dropdown"
|
||||
role="menu"
|
||||
>
|
||||
<div class="dropdown-content embed-info-drop">
|
||||
<p class="mb-4">
|
||||
Even if the original page goes offline or is changed, the content
|
||||
below will remain unchanged as it is loaded from a web archive.
|
||||
</p>
|
||||
<hr class="dropdown-divider" />
|
||||
<h2 class="mt-4">Get A Copy!</h2>
|
||||
<p class="mt-2">
|
||||
After downloading, this web archive can be loaded and viewed
|
||||
directly in your browser via
|
||||
<a
|
||||
style="white-space: nowrap;"
|
||||
target="_blank"
|
||||
href="https://replayweb.page"
|
||||
>replayweb.page</a
|
||||
>.
|
||||
</p>
|
||||
<a
|
||||
href="${sourceUrl}"
|
||||
class="button is-primary mt-4"
|
||||
@keyup="${clickOnSpacebarPress}"
|
||||
>
|
||||
<span class="icon is-small">
|
||||
<fa-icon
|
||||
size="1.0em"
|
||||
aria-hidden="true"
|
||||
.svg="${fasDownload}"
|
||||
></fa-icon>
|
||||
</span>
|
||||
<span>Download Archive</span>
|
||||
</a>
|
||||
<hr class="dropdown-divider mt-4" />
|
||||
<h2 class="mt-4">Technical Information</h2>
|
||||
<div class="embed-info-drop-statscontainer mb-4">
|
||||
<h3>Original URL:</h3>
|
||||
<p><a target="_blank" href="${this.url}">${this.url}</a></p>
|
||||
<h3 class="mt-2">Archived On:</h3>
|
||||
<p>${dateStr}</p>
|
||||
${domain
|
||||
? html`
|
||||
<h3 class="mt-2">Observed By:</h3>
|
||||
<p>${domain}</p>
|
||||
@@ -256,47 +287,61 @@ export class RWPEmbedReceipt extends LitElement {
|
||||
: software
|
||||
? html` <h3 class="mt-2">Created With:</h3>
|
||||
<p>${software}</p>`
|
||||
: ""
|
||||
}
|
||||
${
|
||||
!domain && publicKey
|
||||
: ""}
|
||||
${!domain && publicKey
|
||||
? html` <h3 class="mt-2">Observer Public Key:</h3>
|
||||
<p class="show-key">${publicKey}</p>`
|
||||
: ""
|
||||
}
|
||||
<h3 class="mt-2">Validation:</h3>
|
||||
${
|
||||
numValid > 0 || numInvalid > 0
|
||||
: ""}
|
||||
<h3 class="mt-2">Validation:</h3>
|
||||
${numValid > 0 || numInvalid > 0
|
||||
? html` <p>
|
||||
${numValid} hashes
|
||||
verified${numInvalid ? html`, ${numInvalid} invalid` : ""}
|
||||
</p>`
|
||||
: html` <p>Not Available</p> `
|
||||
}
|
||||
<h3 class="mt-2">Package Hash:</h3>
|
||||
<p class="show-hash">${datapackageHash}</p>
|
||||
<h3 class="mt-2">Size</h3>
|
||||
<p>${prettyBytes(Number(this.collInfo.size || 0))}</p>
|
||||
: html` <p>Not Available</p> `}
|
||||
<h3 class="mt-2">Package Hash:</h3>
|
||||
<p class="show-hash">${datapackageHash}</p>
|
||||
<h3 class="mt-2">Size</h3>
|
||||
<p>${prettyBytes(Number(this.collInfo.size || 0))}</p>
|
||||
</div>
|
||||
${sourceUrl ? html`` : ""}
|
||||
<p
|
||||
class="is-size-7 is-flex is-justify-content-space-between"
|
||||
style="margin-top: 40px"
|
||||
>
|
||||
<span>
|
||||
<a
|
||||
class="has-text-black"
|
||||
target="_blank"
|
||||
href="https://github.com/webrecorder/replayweb.page"
|
||||
>
|
||||
<fa-icon
|
||||
class="menu-logo mr-1"
|
||||
size="1.0rem"
|
||||
aria-hidden="true"
|
||||
.svg=${this.appLogo}
|
||||
></fa-icon>
|
||||
Powered by ReplayWeb.page
|
||||
</a>
|
||||
</span>
|
||||
<span>
|
||||
<a
|
||||
class="has-text-black"
|
||||
target="_blank"
|
||||
href="https://github.com/webrecorder/replayweb.page"
|
||||
>Source Code
|
||||
<fa-icon
|
||||
class="menu-logo ml-1"
|
||||
size="1.0rem"
|
||||
aria-hidden="true"
|
||||
.svg=${fabGithub}
|
||||
></fa-icon>
|
||||
</a>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
${sourceUrl ? html`` : ""}
|
||||
<p class="is-size-7 is-flex is-justify-content-space-between" style="margin-top: 40px">
|
||||
<span>
|
||||
<a class="has-text-black" target="_blank" href="https://github.com/webrecorder/replayweb.page">
|
||||
<fa-icon class="menu-logo mr-1" size="1.0rem" aria-hidden="true" .svg=${
|
||||
this.appLogo
|
||||
}></fa-icon>
|
||||
Powered by ReplayWeb.page
|
||||
</a>
|
||||
</span>
|
||||
<span>
|
||||
<a class="has-text-black" target="_blank" href="https://github.com/webrecorder/replayweb.page">Source Code
|
||||
<fa-icon class="menu-logo ml-1" size="1.0rem" aria-hidden="true" .svg=${fabGithub}></fa-icon>
|
||||
</a>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
+3
-3
@@ -330,7 +330,7 @@ You can select a file to upload from the main page by clicking the 'Choose File.
|
||||
return html`
|
||||
<section class="container">
|
||||
<div class="has-text-centered is-flex">
|
||||
<wr-anim-logo class="logo" size="96px" />
|
||||
<wr-anim-logo class="logo" size="96px"></wr-anim-logo>
|
||||
</div>
|
||||
${!this.embed
|
||||
? html` <div class="level">
|
||||
@@ -352,7 +352,7 @@ You can select a file to upload from the main page by clicking the 'Choose File.
|
||||
return html`<wr-gdrive
|
||||
.sourceUrl=${this.sourceUrl}
|
||||
@load-ready=${this.onLoadReady}
|
||||
/>`;
|
||||
></wr-gdrive>`;
|
||||
|
||||
case "started":
|
||||
return html` <div class="progress-div">
|
||||
@@ -412,7 +412,7 @@ You can select a file to upload from the main page by clicking the 'Choose File.
|
||||
return html`<progress
|
||||
class="progress is-primary is-large"
|
||||
style="max-width: 400px"
|
||||
/>`;
|
||||
></progress>`;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+49
-43
@@ -549,7 +549,6 @@ class Pages extends LitElement {
|
||||
class="control has-icons-left ${this.loading ? "is-loading" : ""}"
|
||||
>
|
||||
<input
|
||||
type="search"
|
||||
class="input"
|
||||
@input="${this.onChangeQuery}"
|
||||
.value="${this.query}"
|
||||
@@ -661,49 +660,56 @@ class Pages extends LitElement {
|
||||
}
|
||||
|
||||
renderDownloadMenu() {
|
||||
return html`
|
||||
<div class="dropdown ${this.menuActive ? "is-active" : ""}">
|
||||
<div class="dropdown-trigger">
|
||||
<button @click="${
|
||||
this.onMenu
|
||||
}" class="button is-small" aria-haspopup="true" aria-expanded="${
|
||||
this.menuActive
|
||||
}" aria-controls="dropdown-menu">
|
||||
<span>Download</span>
|
||||
<span class="icon is-small">
|
||||
<fa-icon .svg="${fasAngleDown} aria-hidden="true"></fa-icon>
|
||||
</span>
|
||||
</button>
|
||||
return html` <div class="dropdown ${this.menuActive ? "is-active" : ""}">
|
||||
<div class="dropdown-trigger">
|
||||
<button
|
||||
@click="${this.onMenu}"
|
||||
class="button is-small"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="${this.menuActive}"
|
||||
aria-controls="dropdown-menu"
|
||||
>
|
||||
<span>Download</span>
|
||||
<span class="icon is-small">
|
||||
<fa-icon .svg="${fasAngleDown}" aria-hidden="true"></fa-icon>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="dropdown-menu" id="dropdown-menu">
|
||||
<div class="dropdown-content">
|
||||
<a
|
||||
role="button"
|
||||
href="#"
|
||||
@click="${(e) => this.onDownload(e, "wacz")}"
|
||||
@keyup="${clickOnSpacebarPress}"
|
||||
class="dropdown-item"
|
||||
>
|
||||
Download ${this.selectedPages.size === 0 ? "All" : "Selected"} as
|
||||
WACZ (Web Archive Collection Zip)
|
||||
</a>
|
||||
<a
|
||||
role="button"
|
||||
href="#"
|
||||
@click="${(e) => this.onDownload(e, "warc")}"
|
||||
@keyup="${clickOnSpacebarPress}"
|
||||
class="dropdown-item"
|
||||
>
|
||||
Download ${this.selectedPages.size === 0 ? "All" : "Selected"} as
|
||||
WARC 1.1 Only
|
||||
</a>
|
||||
<a
|
||||
role="button"
|
||||
href="#"
|
||||
@click="${(e) => this.onDownload(e, "warc1.0")}"
|
||||
@keyup="${clickOnSpacebarPress}"
|
||||
class="dropdown-item"
|
||||
>
|
||||
Download ${this.selectedPages.size === 0 ? "All" : "Selected"} as
|
||||
WARC 1.0 Only
|
||||
</a>
|
||||
</div>
|
||||
<div class="dropdown-menu" id="dropdown-menu">
|
||||
<div class="dropdown-content">
|
||||
<a role="button" href="#"
|
||||
@click="${(e) => this.onDownload(e, "wacz")}"
|
||||
@keyup="${clickOnSpacebarPress}"
|
||||
class="dropdown-item">
|
||||
Download ${
|
||||
this.selectedPages.size === 0 ? "All" : "Selected"
|
||||
} as WACZ (Web Archive Collection Zip)
|
||||
</a>
|
||||
<a role="button" href="#"
|
||||
@click="${(e) => this.onDownload(e, "warc")}"
|
||||
@keyup="${clickOnSpacebarPress}"
|
||||
class="dropdown-item">
|
||||
Download ${
|
||||
this.selectedPages.size === 0 ? "All" : "Selected"
|
||||
} as WARC 1.1 Only
|
||||
</a>
|
||||
<a role="button" href="#"
|
||||
@click="${(e) => this.onDownload(e, "warc1.0")}"
|
||||
@keyup="${clickOnSpacebarPress}"
|
||||
class="dropdown-item">
|
||||
Download ${
|
||||
this.selectedPages.size === 0 ? "All" : "Selected"
|
||||
} as WARC 1.0 Only
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
renderPageHeader() {
|
||||
|
||||
+1
-1
@@ -397,7 +397,7 @@ class Replay extends LitElement {
|
||||
.state="trymanual"
|
||||
.reauth="${true}"
|
||||
@load-ready="${this.onReAuthed}"
|
||||
/>`}
|
||||
></wr-gdrive>`}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+213
-131
@@ -315,148 +315,230 @@ class URLResources extends LitElement {
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<div role="heading" aria-level="${
|
||||
this.isSidebar ? "2" : "1"
|
||||
}" class="is-sr-only">URLs in ${this.collInfo.title}</div>
|
||||
<div
|
||||
role="heading"
|
||||
aria-level="${this.isSidebar ? "2" : "1"}"
|
||||
class="is-sr-only"
|
||||
>
|
||||
URLs in ${this.collInfo.title}
|
||||
</div>
|
||||
|
||||
<div role="heading" aria-level="${
|
||||
this.isSidebar ? "3" : "2"
|
||||
}" class="is-sr-only">Search and Filter</div>
|
||||
<div class="notification level is-marginless">
|
||||
<div class="level-left flex-auto">
|
||||
<div class="level-item flex-auto">
|
||||
<span class="is-hidden-mobile">Search: </span>
|
||||
<div class="select">
|
||||
<select @change="${this.onChangeTypeSearch}">
|
||||
${URLResources.filters.map(
|
||||
(filter) => html`
|
||||
<option
|
||||
value="${filter.filter}"
|
||||
?selected="${filter.filter === this.currMime}"
|
||||
>
|
||||
${filter.name}
|
||||
</option>
|
||||
`,
|
||||
)}
|
||||
</select>
|
||||
</div>
|
||||
<div class="field flex-auto">
|
||||
<div class="control has-icons-left ${
|
||||
this.loading ? "is-loading" : ""
|
||||
}">
|
||||
<input type="text" class="input" @input="${
|
||||
this.onChangeQuery
|
||||
}" .value="${
|
||||
this.query
|
||||
}" type="text" placeholder="Enter URL to Search">
|
||||
<span class="icon is-left"><fa-icon .svg="${fasSearch}"/></span>
|
||||
<div
|
||||
role="heading"
|
||||
aria-level="${this.isSidebar ? "3" : "2"}"
|
||||
class="is-sr-only"
|
||||
>
|
||||
Search and Filter
|
||||
</div>
|
||||
<div class="notification level is-marginless">
|
||||
<div class="level-left flex-auto">
|
||||
<div class="level-item flex-auto">
|
||||
<span class="is-hidden-mobile">Search: </span>
|
||||
<div class="select">
|
||||
<select @change="${this.onChangeTypeSearch}">
|
||||
${URLResources.filters.map(
|
||||
(filter) => html`
|
||||
<option
|
||||
value="${filter.filter}"
|
||||
?selected="${filter.filter === this.currMime}"
|
||||
>
|
||||
${filter.name}
|
||||
</option>
|
||||
`,
|
||||
)}
|
||||
</select>
|
||||
</div>
|
||||
<div class="field flex-auto">
|
||||
<div
|
||||
class="control has-icons-left ${this.loading
|
||||
? "is-loading"
|
||||
: ""}"
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
class="input"
|
||||
@input="${this.onChangeQuery}"
|
||||
.value="${this.query}"
|
||||
placeholder="Enter URL to Search"
|
||||
/>
|
||||
<span class="icon is-left"
|
||||
><fa-icon .svg="${fasSearch}"></fa-icon
|
||||
></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control level-right">
|
||||
<div style="margin-left: 1em" class="control">
|
||||
<label class="radio has-text-left"><input type="radio" name="urltype" value="contains" ?checked="${
|
||||
this.urlSearchType === "contains"
|
||||
}" @click="${this.onClickUrlType}"> Contains</label>
|
||||
<label class="radio has-text-left"><input type="radio" name="urltype" value="prefix" ?checked="${
|
||||
this.urlSearchType === "prefix"
|
||||
}" @click="${this.onClickUrlType}"> Prefix</label>
|
||||
<label class="radio has-text-left"><input type="radio" name="urltype" value="exact" ?checked="${
|
||||
this.urlSearchType === "exact"
|
||||
}" @click="${this.onClickUrlType}"> Exact</label>
|
||||
<span id="num-results" class="num-results" is-pulled-right" aria-live="polite" aria-atomic="true">${
|
||||
this.filteredResults.length
|
||||
} Result(s)</span>
|
||||
<div class="control level-right">
|
||||
<div style="margin-left: 1em" class="control">
|
||||
<label class="radio has-text-left"
|
||||
><input
|
||||
type="radio"
|
||||
name="urltype"
|
||||
value="contains"
|
||||
?checked="${this.urlSearchType === "contains"}"
|
||||
@click="${this.onClickUrlType}"
|
||||
/> Contains</label
|
||||
>
|
||||
<label class="radio has-text-left"
|
||||
><input
|
||||
type="radio"
|
||||
name="urltype"
|
||||
value="prefix"
|
||||
?checked="${this.urlSearchType === "prefix"}"
|
||||
@click="${this.onClickUrlType}"
|
||||
/> Prefix</label
|
||||
>
|
||||
<label class="radio has-text-left"
|
||||
><input
|
||||
type="radio"
|
||||
name="urltype"
|
||||
value="exact"
|
||||
?checked="${this.urlSearchType === "exact"}"
|
||||
@click="${this.onClickUrlType}"
|
||||
/> Exact</label
|
||||
>
|
||||
<span
|
||||
id="num-results"
|
||||
class="num-results"
|
||||
is-pulled-right
|
||||
aria-live="polite"
|
||||
aria-atomic="true"
|
||||
>${this.filteredResults.length} Result(s)</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sort-header is-hidden-tablet">
|
||||
<wr-sorter id="urls"
|
||||
.sortKey="${this.sortKey}"
|
||||
.sortDesc="${this.sortDesc}"
|
||||
.sortKeys="${URLResources.sortKeys}"
|
||||
.data="${this.filteredResults}"
|
||||
@sort-changed="${this.onSortChanged}">
|
||||
</wr-sorter>
|
||||
</div>
|
||||
<div class="sort-header is-hidden-tablet">
|
||||
<wr-sorter
|
||||
id="urls"
|
||||
.sortKey="${this.sortKey}"
|
||||
.sortDesc="${this.sortDesc}"
|
||||
.sortKeys="${URLResources.sortKeys}"
|
||||
.data="${this.filteredResults}"
|
||||
@sort-changed="${this.onSortChanged}"
|
||||
>
|
||||
</wr-sorter>
|
||||
</div>
|
||||
|
||||
<div role="heading" aria-level="${
|
||||
this.isSidebar ? "3" : "2"
|
||||
}" id="results-heading" class="is-sr-only">Results</div>
|
||||
<div
|
||||
role="heading"
|
||||
aria-level="${this.isSidebar ? "3" : "2"}"
|
||||
id="results-heading"
|
||||
class="is-sr-only"
|
||||
>
|
||||
Results
|
||||
</div>
|
||||
|
||||
<table class="all-results" aria-labelledby="results-heading num-results">
|
||||
<thead>
|
||||
<tr class="columns results-head has-text-weight-bold">
|
||||
<th scope="col" class="column col-url is-6 is-hidden-mobile"><a role="button" href="#" @click="${
|
||||
this.onSort
|
||||
}" @keyup="${clickOnSpacebarPress}" data-key="url" class="${
|
||||
this.sortKey === "url" ? (this.sortDesc ? "desc" : "asc") : ""
|
||||
}">URL</a></th>
|
||||
<th scope="col" class="column col-ts is-2 is-hidden-mobile"><a role="button" href="#" @click="${
|
||||
this.onSort
|
||||
}" @keyup="${clickOnSpacebarPress}" data-key="ts" class="${
|
||||
this.sortKey === "ts" ? (this.sortDesc ? "desc" : "asc") : ""
|
||||
}">Date</a></th>
|
||||
<th scope="col" class="column col-mime is-3 is-hidden-mobile"><a role="button" href="#" @click="${
|
||||
this.onSort
|
||||
}" @keyup="${clickOnSpacebarPress}" data-key="mime" class="${
|
||||
this.sortKey === "mime" ? (this.sortDesc ? "desc" : "asc") : ""
|
||||
}">Mime Type</a></th>
|
||||
<th scope="col" class="column col-status is-1 is-hidden-mobile"><a role="button" href="#" @click="${
|
||||
this.onSort
|
||||
}" @keyup="${clickOnSpacebarPress}" data-key="status" class="${
|
||||
this.sortKey === "status" ? (this.sortDesc ? "desc" : "asc") : ""
|
||||
}">Status</a></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<table class="all-results" aria-labelledby="results-heading num-results">
|
||||
<thead>
|
||||
<tr class="columns results-head has-text-weight-bold">
|
||||
<th scope="col" class="column col-url is-6 is-hidden-mobile">
|
||||
<a
|
||||
role="button"
|
||||
href="#"
|
||||
@click="${this.onSort}"
|
||||
@keyup="${clickOnSpacebarPress}"
|
||||
data-key="url"
|
||||
class="${this.sortKey === "url"
|
||||
? this.sortDesc
|
||||
? "desc"
|
||||
: "asc"
|
||||
: ""}"
|
||||
>URL</a
|
||||
>
|
||||
</th>
|
||||
<th scope="col" class="column col-ts is-2 is-hidden-mobile">
|
||||
<a
|
||||
role="button"
|
||||
href="#"
|
||||
@click="${this.onSort}"
|
||||
@keyup="${clickOnSpacebarPress}"
|
||||
data-key="ts"
|
||||
class="${this.sortKey === "ts"
|
||||
? this.sortDesc
|
||||
? "desc"
|
||||
: "asc"
|
||||
: ""}"
|
||||
>Date</a
|
||||
>
|
||||
</th>
|
||||
<th scope="col" class="column col-mime is-3 is-hidden-mobile">
|
||||
<a
|
||||
role="button"
|
||||
href="#"
|
||||
@click="${this.onSort}"
|
||||
@keyup="${clickOnSpacebarPress}"
|
||||
data-key="mime"
|
||||
class="${this.sortKey === "mime"
|
||||
? this.sortDesc
|
||||
? "desc"
|
||||
: "asc"
|
||||
: ""}"
|
||||
>Mime Type</a
|
||||
>
|
||||
</th>
|
||||
<th scope="col" class="column col-status is-1 is-hidden-mobile">
|
||||
<a
|
||||
role="button"
|
||||
href="#"
|
||||
@click="${this.onSort}"
|
||||
@keyup="${clickOnSpacebarPress}"
|
||||
data-key="status"
|
||||
class="${this.sortKey === "status"
|
||||
? this.sortDesc
|
||||
? "desc"
|
||||
: "asc"
|
||||
: ""}"
|
||||
>Status</a
|
||||
>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody class="main-scroll" @scroll="${this.onScroll}">
|
||||
${
|
||||
this.sortedResults.length
|
||||
? this.sortedResults.map(
|
||||
(result) => html`
|
||||
<tr class="columns result">
|
||||
<td class="column col-url is-6">
|
||||
<p class="minihead is-hidden-tablet">URL</p>
|
||||
<a
|
||||
@click="${this.onReplay}"
|
||||
data-url="${result.url}"
|
||||
data-ts="${result.ts}"
|
||||
href="${getReplayLink(
|
||||
"resources",
|
||||
result.url,
|
||||
result.ts,
|
||||
)}"
|
||||
>
|
||||
<keyword-mark keywords="${this.query}"
|
||||
>${result.url}</keyword-mark
|
||||
<tbody class="main-scroll" @scroll="${this.onScroll}">
|
||||
${this.sortedResults.length
|
||||
? this.sortedResults.map(
|
||||
(result) => html`
|
||||
<tr class="columns result">
|
||||
<td class="column col-url is-6">
|
||||
<p class="minihead is-hidden-tablet">URL</p>
|
||||
<a
|
||||
@click="${this.onReplay}"
|
||||
data-url="${result.url}"
|
||||
data-ts="${result.ts}"
|
||||
href="${getReplayLink(
|
||||
"resources",
|
||||
result.url,
|
||||
result.ts,
|
||||
)}"
|
||||
>
|
||||
</a>
|
||||
</td>
|
||||
<td class="column col-ts is-2">
|
||||
<p class="minihead is-hidden-tablet">Date</p>
|
||||
${new Date(result.date).toLocaleString()}
|
||||
</td>
|
||||
<td class="column col-mime is-3">
|
||||
<p class="minihead is-hidden-tablet">Mime Type</p>
|
||||
${result.mime}
|
||||
</td>
|
||||
<td class="column col-status is-1">
|
||||
<p class="minihead is-hidden-tablet">Status</p>
|
||||
${result.status}
|
||||
</td>
|
||||
</tr>
|
||||
`,
|
||||
)
|
||||
: html`<tr class="section">
|
||||
<td colspan="4"><i>No Results Found.</i></td>
|
||||
</tr>`
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
`;
|
||||
<keyword-mark keywords="${this.query}"
|
||||
>${result.url}</keyword-mark
|
||||
>
|
||||
</a>
|
||||
</td>
|
||||
<td class="column col-ts is-2">
|
||||
<p class="minihead is-hidden-tablet">Date</p>
|
||||
${new Date(result.date).toLocaleString()}
|
||||
</td>
|
||||
<td class="column col-mime is-3">
|
||||
<p class="minihead is-hidden-tablet">Mime Type</p>
|
||||
${result.mime}
|
||||
</td>
|
||||
<td class="column col-status is-1">
|
||||
<p class="minihead is-hidden-tablet">Status</p>
|
||||
${result.status}
|
||||
</td>
|
||||
</tr>
|
||||
`,
|
||||
)
|
||||
: html`<tr class="section">
|
||||
<td colspan="4"><i>No Results Found.</i></td>
|
||||
</tr>`}
|
||||
</tbody>
|
||||
</table>
|
||||
`;
|
||||
}
|
||||
|
||||
onSort(event) {
|
||||
|
||||
Reference in New Issue
Block a user