From 0ef8f955db2c12377f16f4fcfe4266e617c1c00e Mon Sep 17 00:00:00 2001 From: Ilya Kreymer Date: Sun, 25 Apr 2021 16:45:40 -0700 Subject: [PATCH] 1.4.0 Release (#45) * customizations for chooser, coll-index and appmain to support usage in archiveweb.page - chooser: support panel/message view - move apiPrefix to misc - make coll-index extensible, overridable styles, filtering * api changes: make configurable in coll-index, now using '/w/' instead of '/wabac/', '/c/' prefix for coll apis * lint pass! * bulma: update to 0.9.2, fix delete spinner with latest bulma * ui fixes: - show 'Loading Archives...' on initial load until first api response succeeds - fix typo in oncontrollerchange not actually resolving the promise! * embed sandbox: add other allow options, except top-nav - first api load: keep loading message until first successful api load - don't reset hash on purge to keep current page - sw config: fix typo with latest wabac.js - embed: add 'noSandbox' option to avoid adding sandbox to iframe, needed to show PDFs, add more allow rules (all except top-navigation) * ui improvements: - refresh: ensure location refresh from hitting enter in location bar always resets url - pageentry doubleclick: ensure double-clicking on page in sidebar always triggers reload, even if current page - pageentry typo fix: fix missing var causing selection error (fixes webrecorder/archivewebpage#25) - lint: don't include 'event' as global - use latest wabac.js 2.7.0-beta.1 * add CHANGES for 1.4.0, add 'noSandbox' to embedding options - electron app: fix path to 'w/' - bump electron to 11.4.3 * docs: autoload current version from package.json - chooser: support .json files for multiwacz (experimental) - update CHANGES.md - add missing .eslintrc.js file * bump version to 1.4.0 --- .eslintrc.js | 33 +++++++ CHANGES.md | 17 ++++ _config.yml | 4 - docs/embedding.md | 11 +-- package.json | 11 +-- src/appmain.js | 64 ++++++------- src/chooser.js | 61 ++++++++----- src/coll-index.js | 113 ++++++++++++++--------- src/coll.js | 178 +++++++++++++++++++----------------- src/electron-main.js | 6 +- src/electron-preload.js | 10 +-- src/electron-replay-app.js | 91 ++++++++++--------- src/embed.js | 26 ++++-- src/gdrive.js | 38 ++++---- src/loader.js | 163 ++++++++++++++++----------------- src/misc.js | 25 +++--- src/pageentry.js | 50 ++++++----- src/pages.js | 89 +++++++++--------- src/pageutils.js | 21 ++--- src/replay.js | 31 ++++--- src/sorter.js | 14 +-- src/story.js | 34 +++---- src/sw.js | 6 +- src/ui.js | 30 +++---- src/url-resources.js | 28 +++--- sw.js | 12 ++- ui.js | 179 +++++++++++++++++++++---------------- webpack.config.js | 93 +++++++++---------- yarn.lock | 57 +++++------- 29 files changed, 832 insertions(+), 663 deletions(-) create mode 100644 .eslintrc.js diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 0000000..53152e6 --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,33 @@ +module.exports = { + "env": { + "browser": true, + "es6": true + }, + "extends": "eslint:recommended", + "parserOptions": { + "ecmaVersion": 2018, + "sourceType": "module" + }, + "rules": { + "no-restricted-globals": [ + 2, + "event", "error" + ], + "indent": [ + "error", + 2 + ], + "linebreak-style": [ + "error", + "unix" + ], + "quotes": [ + "error", + "double" + ], + "semi": [ + "error", + "always" + ] + } +}; diff --git a/CHANGES.md b/CHANGES.md index 3bf9458..d18647d 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -1,5 +1,22 @@ ## CHANGES +v1.4.0 +- Embed: add 'noSandbox' option to not add sandbox to embed iframe +- UI: Double-clicking on page entry causes reload. +- UI: Fix location bar enter not always reloading specified URL +- UI: Fix 'Purge and Reload' to reload current page +- UI: Fix initial load not properly waiting for service worker +- UI: Show 'Loading Archives...' on initial load, until first API response succeeds, instead of 'No Archives' +- Fidelity: Improved fuzzy matching for dynamic sites +- Fidelity: Fix for multipart/form-data replay dropping certain query params +- Fidelity: don't remove spaces in css urls +- Fidelity: Better detection of JSON responses served in response to 'Accept: application/json' but with wrong content-type +- Docs: copy package.json to 'data' to allow access to version in UI, use latest fixed version in Collec +- API: Switch from /wabac/ -> /w/ for replay paths, make path configurable +- Extensibility: Make file chooser, collection list more extensible/stylable (for use with archiveweb.page) +- Lint pass on code base +- Dependencies: wabac 2.7.0, bulma 0.9.2, electron 11.4.3 + v1.3.15 - Fidelity: fix encoding issues with UTF-8 encoded JS/CSS introduced in 1.3.13 (fixed via wabac 2.6.9) - Dependencies: wabac 2.6.9 diff --git a/_config.yml b/_config.yml index 8596dd0..c60f861 100644 --- a/_config.yml +++ b/_config.yml @@ -22,10 +22,6 @@ logo: "/assets/logo.svg" plugins: - jekyll-remote-theme - -version: - - 1.3.12 - #baseUrl: '/' exclude: diff --git a/docs/embedding.md b/docs/embedding.md index 790f400..0d3e00f 100644 --- a/docs/embedding.md +++ b/docs/embedding.md @@ -23,7 +23,7 @@ the following snippet to your HTML page: my-web-archive-embed.html ```html - + ``` @@ -39,7 +39,7 @@ one-line script ./replay/sw.js ```javascript -importScripts("https://cdn.jsdelivr.net/npm/replaywebpage@{{ site.version }}/sw.js"); +importScripts("https://cdn.jsdelivr.net/npm/replaywebpage@{{ site.data.package.version }}/sw.js"); ``` Thus, if the HTML snippet was added to `https://my-site.example.com/path/my-web-archive-embed.html` @@ -71,16 +71,17 @@ The `` tag is a web component and supports a number of addition | `replayBase` | Location of the `sw.js` file, defaults to `./replay/` as mentioned above, but can be overridden. | | `coll` | Internal id for this collection, usually generated automatically. | `config` | Extra per collection config options (such as custom fuzzy matching rules, TODO add more info!) | +| `noSandbox` | (`true` / `false`) if set to true, don't wrap iframe in `sandbox`. Used as extra precaution to avoid escaping iframe, but prevents PDFs from loading in embed archive. Set for archives of known/trusted sites. | ### Versioning Note that the above example uses the paths as, which is a CDN for Javascript packages at a specific version: -- `https://cdn.jsdelivr.net/npm/replaywebpage@{{ site.version }}/ui.js` -- `https://cdn.jsdelivr.net/npm/replaywebpage@{{ site.version }}/sw.js` +- `https://cdn.jsdelivr.net/npm/replaywebpage@{{ site.data.package.version }}/ui.js` +- `https://cdn.jsdelivr.net/npm/replaywebpage@{{ site.data.package.version }}/sw.js` -These URLs point to a specific version of ReplayWeb.page software released on NPM, eg. `{{ site.version }}`, meaning that your replay should stay stable, even if ReplayWeb.page is updated. +These URLs point to a specific version of ReplayWeb.page software released on NPM, eg. `{{ site.data.package.version }}`, meaning that your replay should stay stable, even if ReplayWeb.page is updated. Although ReplayWeb.page strives to remain backwards compatible, this addresses any potential issue of older embeds breaking when the replay system is updated. diff --git a/package.json b/package.json index 2a603e0..ca0aaca 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "replaywebpage", "productName": "ReplayWeb.page", - "version": "1.3.15", + "version": "1.4.0", "description": "Serverless Web Archive Replay", "repository": "https://github.com/webrecorder/replayweb.page", "homepage": "https://replayweb.page/", @@ -9,8 +9,8 @@ "license": "AGPL-3.0-or-later", "dependencies": { "@fortawesome/fontawesome-free": "^5.13.0", - "@webrecorder/wabac": "^2.6.9", - "bulma": "^0.9.0", + "@webrecorder/wabac": "^2.7.0", + "bulma": "^0.9.2", "electron-log": "^4.3.0", "electron-updater": "^4.3.5", "fetch-ndjson": "^1.1.0", @@ -28,7 +28,7 @@ "devDependencies": { "copy-webpack-plugin": "^6.3.0", "css-loader": "^3.5.3", - "electron": "^11.3.0", + "electron": "^11.4.3", "electron-builder": "^22.7.0", "electron-notarize": "^1.0.0", "http-server": "^0.12.3", @@ -62,7 +62,8 @@ "start-jekyll": "yarn run build-docs && bundle exec jekyll serve", "dist": "yarn run build && yarn run pack", "dist-dev": "yarn run build-dev && yarn run pack", - "release": "yarn run build && electron-builder" + "release": "yarn run build && electron-builder", + "lint": "eslint ./src/ webpack.config.js" }, "build": { "afterSign": "build/notarize.js", diff --git a/src/appmain.js b/src/appmain.js index 524497e..06e7c6a 100644 --- a/src/appmain.js +++ b/src/appmain.js @@ -1,11 +1,11 @@ -import { LitElement, html, css } from 'lit-element'; -import { wrapCss, rwpLogo, IS_APP, clickOnSpacebarPress } from './misc'; +import { LitElement, html, css } from "lit-element"; +import { wrapCss, rwpLogo, IS_APP, VERSION, clickOnSpacebarPress } from "./misc"; -import { registerSW } from './pageutils'; +import { registerSW } from "./pageutils"; -import fasHelp from '@fortawesome/fontawesome-free/svgs/solid/question-circle.svg'; -import fasArrowLeft from '@fortawesome/fontawesome-free/svgs/solid/arrow-left.svg'; -import fasArrowRight from '@fortawesome/fontawesome-free/svgs/solid/arrow-right.svg'; +import fasHelp from "@fortawesome/fontawesome-free/svgs/solid/question-circle.svg"; +import fasArrowLeft from "@fortawesome/fontawesome-free/svgs/solid/arrow-left.svg"; +import fasArrowRight from "@fortawesome/fontawesome-free/svgs/solid/arrow-right.svg"; // =========================================================================== @@ -16,7 +16,7 @@ class ReplayWebApp extends LitElement this.sourceUrl = null; this.collTitle = null; this.showAbout = false; - this.pageParams = {}; + this.pageParams = new URLSearchParams(); this.inited = false; this.navMenuShown = false; @@ -25,6 +25,9 @@ class ReplayWebApp extends LitElement this.pageTitle = ""; this.pageReplay = false; + this.loadInfo = null; + + // eslint-disable-next-line no-undef registerSW(__SW_NAME__); this.safariKeyframes(); @@ -52,7 +55,7 @@ class ReplayWebApp extends LitElement pageTitle: { type: String }, pageReplay: { type: Boolean }, source: { type: String } - } + }; } static get styles() { @@ -168,30 +171,30 @@ class ReplayWebApp extends LitElement   /  ${this.pageReplay ? html`${this.pageTitle}` : this.pageTitle} - ` : ``} + ` : ""} `: html` `} + class="navbar-burger burger ${this.navMenuShown ? "is-active" : ""}" aria-label="main menu" aria-haspopup="true" aria-expanded="${this.navMenuShown}"> ${!this.sourceUrl ? html` -
+
${IS_APP ? html` - +  Go Back - +  Go Forward - ` : ``} + ` : ""}
${!this.embed ? html`
@@ -211,8 +214,8 @@ class ReplayWebApp extends LitElement -- NB: the About modal is currently inaccessible to people using keyboards or screen readers. -- Should all the JS and infrastructure for accessible modals be added, or should About be a normal page? --> - About - ` + About + `; } renderColl() { @@ -225,7 +228,7 @@ class ReplayWebApp extends LitElement @replay-favicons=${this.onFavIcons} @update-title=${this.onTitle} @coll-loaded=${this.onCollLoaded} - @about-show=${(e) => this.showAbout = true}>`; + @about-show=${() => this.showAbout = true}>`; } renderHomeIndex() { @@ -233,7 +236,7 @@ class ReplayWebApp extends LitElement ${!IS_APP ? html`

Explore and Replay Interactive Archived Webpages Directly in your Browser. (See Examples)

- ` : ``} + ` : ""} `; } @@ -244,17 +247,17 @@ class ReplayWebApp extends LitElement } return html` - ${!this.embed || this.embed === "full" ? this.renderNavBar() : ''} + ${!this.embed || this.embed === "full" ? this.renderNavBar() : ""} ${this.sourceUrl ? this.renderColl() : this.renderHomeIndex()} - ${this.showAbout ? this.renderAbout() : ``} + ${this.showAbout ? this.renderAbout() : ""} `; } firstUpdated() { this.initRoute(); - window.addEventListener("popstate", (event) => { + window.addEventListener("popstate", () => { this.initRoute(); }); } @@ -266,7 +269,7 @@ class ReplayWebApp extends LitElement } onFavIcons(event) { - const head = document.querySelector('head'); + const head = document.querySelector("head"); const oldLinks = document.querySelectorAll("link[rel*='icon']"); for (const link of oldLinks) { @@ -274,7 +277,7 @@ class ReplayWebApp extends LitElement } for (const icon of event.detail.icons) { - const link = document.createElement('link'); + const link = document.createElement("link"); link.rel = icon.rel; link.href = icon.href; head.appendChild(link); @@ -285,7 +288,7 @@ class ReplayWebApp extends LitElement // This is a workaround, since this app's routing doesn't permit normal // following of in-page anchors. event.preventDefault(); - this.renderRoot.querySelector("#skip-main-target").focus() + this.renderRoot.querySelector("#skip-main-target").focus(); } onNavMenu(event) { @@ -348,7 +351,7 @@ class ReplayWebApp extends LitElement if (this.pageParams.get("config")) { if (!this.loadInfo) { - this.loadInfo = {} + this.loadInfo = {}; } try { this.loadInfo.extraConfig = JSON.parse(this.pageParams.get("config")); @@ -359,7 +362,7 @@ class ReplayWebApp extends LitElement if (this.pageParams.get("basePageUrl")) { if (!this.loadInfo) { - this.loadInfo = {extraConfig: {}} + this.loadInfo = {extraConfig: {}}; } if (!this.loadInfo.extraConfig) { this.loadInfo.extraConfig = {}; @@ -369,18 +372,19 @@ class ReplayWebApp extends LitElement if (this.pageParams.get("customColl")) { if (!this.loadInfo) { - this.loadInfo = {} + this.loadInfo = {}; } this.loadInfo.customColl = this.pageParams.get("customColl"); } if (IS_APP && this.sourceUrl.startsWith("file://")) { + // eslint-disable-next-line no-undef const url = new URL(__APP_FILE_SERVE_PREFIX__); url.searchParams.set("filename", this.sourceUrl.slice("file://".length)); this.loadInfo = { sourceUrl: this.sourceUrl, loadUrl: url.href, - } + }; } } @@ -456,7 +460,7 @@ class ReplayWebApp extends LitElement
-

About ReplayWeb.page ${IS_APP ? 'App' : ''}

+

About ReplayWeb.page ${IS_APP ? "App" : ""}

@@ -465,7 +469,7 @@ class ReplayWebApp extends LitElement
-
${IS_APP ? 'App' : ''} v${__VERSION__}
+
${IS_APP ? "App" : ""} v${VERSION}
${IS_APP ? html` diff --git a/src/chooser.js b/src/chooser.js index c90604b..4316814 100644 --- a/src/chooser.js +++ b/src/chooser.js @@ -1,7 +1,7 @@ -import { LitElement, html, css } from 'lit-element'; -import { IS_APP, wrapCss } from './misc'; +import { LitElement, html, css } from "lit-element"; +import { IS_APP, wrapCss } from "./misc"; -import fasUpload from '@fortawesome/fontawesome-free/svgs/solid/upload.svg'; +import fasUpload from "@fortawesome/fontawesome-free/svgs/solid/upload.svg"; // =========================================================================== @@ -14,12 +14,18 @@ class Chooser extends LitElement this.file = null; this.hasNativeFS = !!window.showOpenFilePicker && !IS_APP; + + this.newFullImport = false; + + this.noHead = false; } static get properties() { return { - fileDisplayName: { type: String } - } + fileDisplayName: { type: String }, + newFullImport: { type: Boolean }, + noHead: { type: Boolean } + }; } onChooseFile(event) { @@ -40,16 +46,17 @@ class Chooser extends LitElement const options = { types: [ { - description: 'WARC, WACZ, HAR and WBN Files', + description: "WARC, WACZ, HAR and WBN Files", accept: { - 'application/warc': ['.warc', '.gz'], - 'application/har': ['.har'], - 'application/wacz': ['.wacz'], - 'application/wbn': ['.wbn'] + "application/warc": [".warc", ".gz"], + "application/har": [".har"], + "application/wacz": [".wacz"], + "application/wbn": [".wbn"], + "application/json": [".json"], } } ] - } + }; const [fileHandle] = await window.showOpenFilePicker(options); this.fileHandle = fileHandle; @@ -71,12 +78,13 @@ class Chooser extends LitElement loadInfo.isFile = true; // file.path only available in electron app if (this.file.path) { + // eslint-disable-next-line no-undef const url = new URL(__APP_FILE_SERVE_PREFIX__); url.searchParams.set("filename", this.file.path); loadInfo.loadUrl = url.href; loadInfo.noCache = true; } else if (this.fileHandle) { - loadInfo.loadUrl = this.fileDisplayName + "-" + this.randomId(); + loadInfo.loadUrl = this.fileDisplayName; loadInfo.extra = {fileHandle: this.fileHandle}; loadInfo.noCache = false; } else { @@ -88,6 +96,8 @@ class Chooser extends LitElement loadInfo.name = this.fileDisplayName; } + loadInfo.newFullImport = this.newFullImport; + this.dispatchEvent(new CustomEvent("load-start", {detail: loadInfo})); return false; @@ -119,11 +129,18 @@ class Chooser extends LitElement } .panel-heading { background-color: #cff3ff; + } + .message-header { + background-color: #cff3ff; + color: black; + } + .heading-size { font-size: 0.85rem; } form { flex-grow: 1; flex-shrink: 0; + margin-bottom: 0; } p.control.is-expanded { width: min-content; @@ -149,20 +166,20 @@ class Chooser extends LitElement } } `); - }; + } render() { return html` -
-
-

Load Web Archive

-
+
+
+
${this.newFullImport ? "Import Existing" : "Load"} Web Archive
+
` : ""}
${this.renderContent()} @@ -281,11 +284,11 @@ You can select a file to upload from the main page by clicking the \'Choose File renderContent() { switch (this.state) { - case "googledrive": - return html`` + case "googledrive": + return html``; - case "started": - return html` + case "started": + return html`
@@ -294,31 +297,31 @@ You can select a file to upload from the main page by clicking the \'Choose File

Loaded ${prettyBytes(this.currentSize)} of ${prettyBytes(this.totalSize)}

` : html``} ${!this.embed ? html` - ` : ``} + ` : ""}
`; - case "errored": - return html` + case "errored": + return html`
${this.error}
${this.errorAllowRetry ? html` - window.parent.location.reload()}>Try Again` : ``} + window.parent.location.reload()}>Try Again` : ""} ${this.embed ? html`` : html` Back`}
`; - case "permission_needed": - return html` + case "permission_needed": + return html`
Permission is needed to reload the archive file. (Click Cancel to cancel loading this archive.)
Cancel
`; - case "waiting": - default: - return html``; + case "waiting": + default: + return html``; } } @@ -333,4 +336,4 @@ You can select a file to upload from the main page by clicking the \'Choose File customElements.define("wr-loader", Loader); -export { Loader }; \ No newline at end of file +export { Loader }; diff --git a/src/misc.js b/src/misc.js index 3a30b91..25bd32d 100644 --- a/src/misc.js +++ b/src/misc.js @@ -1,12 +1,15 @@ "use strict"; -import { LitElement, html, css, unsafeCSS } from 'lit-element'; -import { unsafeSVG } from 'lit-html/directives/unsafe-svg'; -import { styleMap } from 'lit-html/directives/style-map'; +import { LitElement, html, css, unsafeCSS } from "lit-element"; +import { unsafeSVG } from "lit-html/directives/unsafe-svg"; +import { styleMap } from "lit-html/directives/style-map"; -import allCssRaw from '../assets/main.scss'; +import allCssRaw from "../assets/main.scss"; -import rwpLogo from '../assets/logo.svg'; +import rwpLogo from "../assets/logo.svg"; + +const apiPrefix = "./w/api"; +const replayPrefix = "./w"; // =========================================================================== @@ -15,8 +18,10 @@ function wrapCss(custom) { return [allCss, custom]; } -const IS_APP = window.IS_APP || window.electron && window.electron.IS_APP || window.matchMedia('(display-mode: standalone)').matches; +const IS_APP = window.IS_APP || window.electron && window.electron.IS_APP || window.matchMedia("(display-mode: standalone)").matches; +// eslint-disable-next-line no-undef +const VERSION = __VERSION__; // =========================================================================== // Buttons are expected to respond to both enter/return and spacebar. @@ -45,7 +50,7 @@ class FaIcon extends LitElement size: { type: String }, width: { type: String }, height: { type: String } - } + }; } static get styles() { @@ -137,7 +142,7 @@ class WrModal extends LitElement return { title: { type: String }, bgClass: { type: String } - } + }; } static get styles() { @@ -178,5 +183,5 @@ customElements.define("wr-anim-logo", AnimLogo); customElements.define("wr-modal", WrModal); -export { wrapCss, IS_APP, clickOnSpacebarPress, rwpLogo, FaIcon, AnimLogo, WrModal, - LitElement, html, css, unsafeCSS, unsafeSVG }; +export { wrapCss, IS_APP, VERSION, clickOnSpacebarPress, rwpLogo, FaIcon, AnimLogo, WrModal, + LitElement, html, css, unsafeCSS, unsafeSVG, apiPrefix, replayPrefix }; diff --git a/src/pageentry.js b/src/pageentry.js index 9213304..223236b 100644 --- a/src/pageentry.js +++ b/src/pageentry.js @@ -1,12 +1,12 @@ -import prettyBytes from 'pretty-bytes'; +import prettyBytes from "pretty-bytes"; -import { LitElement, html, css, unsafeCSS } from 'lit-element'; +import { LitElement, html, css, unsafeCSS } from "lit-element"; import "keyword-mark-element/lib/keyword-mark.js"; -import { getReplayLink } from './pageutils'; +import { getReplayLink } from "./pageutils"; -import { wrapCss } from './misc'; +import { wrapCss } from "./misc"; // =========================================================================== @@ -39,7 +39,7 @@ class PageEntry extends LitElement index: { type: Number }, isCurrent: { type: Boolean }, isSidebar: { type: Boolean }, - } + }; } static get styles() { @@ -95,7 +95,7 @@ class PageEntry extends LitElement align-self: center; } - .delete { + .delete-button { position: absolute; top: 8px; right: 8px; @@ -190,12 +190,12 @@ class PageEntry extends LitElement -
` : ``} +
` : ""}
${this.index ? html`
${this.index}.
- ` : ``} + ` : ""}
${date ? date.toLocaleDateString() : ""}
${date ? date.toLocaleTimeString() : ""}
@@ -205,13 +205,13 @@ class PageEntry extends LitElement

${this.iconValid ? html` - ` : html` + ` : html` `}

-
+
` : ""}
${editable ? html` ${!this.deleting ? html` - ` : html` - - `}` : ''} + ` : html` + + `}` : ""} `; } @@ -268,7 +268,7 @@ class PageEntry extends LitElement if (!this.query || !this.page.text) { this.textSnippet = null; - this.requestUpdate('textSnippet', oldVal); + this.requestUpdate("textSnippet", oldVal); return; } @@ -285,7 +285,7 @@ class PageEntry extends LitElement if (inx < 0) { this.textSnippet = null; - this.requestUpdate('textSnippet', oldVal); + this.requestUpdate("textSnippet", oldVal); return; } @@ -305,25 +305,29 @@ class PageEntry extends LitElement this.textSnippet = "..." + textContent.slice(inx, lastInx) + "..."; } - this.requestUpdate('textSnippet', oldVal); + this.requestUpdate("textSnippet", oldVal); } - onReplay(event) { + onReplay(event, reload = false) { event.preventDefault(); const data = { url: this.page.url, ts: this.page.timestamp, }; - this.sendChangeEvent(data); + this.sendChangeEvent(data, reload); return false; } - sendChangeEvent(data) { - this.dispatchEvent(new CustomEvent("coll-tab-nav", {bubbles: true, composed: true, detail: {data}})); + onReload(event) { + return this.onReplay(event, true); } - onSendDeletePage(event) { + sendChangeEvent(data, reload) { + this.dispatchEvent(new CustomEvent("coll-tab-nav", {bubbles: true, composed: true, detail: {data, reload}})); + } + + onSendDeletePage() { const page = this.page; this.dispatchEvent(new CustomEvent("delete-page", {detail: {page}})); } diff --git a/src/pages.js b/src/pages.js index 2a27f3c..55e5462 100644 --- a/src/pages.js +++ b/src/pages.js @@ -1,18 +1,18 @@ "use strict"; -import { LitElement, html, css, unsafeCSS } from 'lit-element'; -import { wrapCss, clickOnSpacebarPress } from './misc'; -import ndjson from 'fetch-ndjson'; +import { LitElement, html, css, unsafeCSS } from "lit-element"; +import { wrapCss, clickOnSpacebarPress } from "./misc"; +import ndjson from "fetch-ndjson"; -import FlexSearch from 'flexsearch'; -import prettyBytes from 'pretty-bytes'; +import FlexSearch from "flexsearch"; +import prettyBytes from "pretty-bytes"; -import { getTS, getPageDateTS } from './pageutils'; +import { getTS, getPageDateTS } from "./pageutils"; -import fasSearch from '@fortawesome/fontawesome-free/svgs/solid/search.svg'; -import fasAngleDown from '@fortawesome/fontawesome-free/svgs/solid/angle-down.svg'; +import fasSearch from "@fortawesome/fontawesome-free/svgs/solid/search.svg"; +import fasAngleDown from "@fortawesome/fontawesome-free/svgs/solid/angle-down.svg"; -import fasEdit from '@fortawesome/fontawesome-free/svgs/solid/edit.svg'; +import fasEdit from "@fortawesome/fontawesome-free/svgs/solid/edit.svg"; // =========================================================================== @@ -99,7 +99,7 @@ class Pages extends LitElement toDeletePages: { type: Object }, toDeletePage: { type: Object } - } + }; } _timedUpdate() { @@ -131,7 +131,7 @@ class Pages extends LitElement this.sortKey = ""; this.sortDesc = false; } else { - this.sortKey = "date" + this.sortKey = "date"; this.sortDesc = true; } const sorter = this.renderRoot.querySelector("wr-sorter"); @@ -143,11 +143,11 @@ class Pages extends LitElement if (changedProperties.has("sortedPages") && this.isSidebar) { //if (await this.updateComplete) { - const selected = this.renderRoot.querySelector(".current"); - if (selected) { - const opts = {behavior: "smooth", block: "nearest", inline: "nearest"}; - setTimeout(() => selected.scrollIntoView(opts), 100); - } + const selected = this.renderRoot.querySelector(".current"); + if (selected) { + const opts = {behavior: "smooth", block: "nearest", inline: "nearest"}; + setTimeout(() => selected.scrollIntoView(opts), 100); + } //} } } @@ -241,13 +241,13 @@ class Pages extends LitElement let lines = []; - async function flush() { + const flush = async () => { let curr = lines; lines = []; await flex.add(curr); console.log("added " + count + " " + curr.length); console.log(flex.info()); - } + }; for await (const line of ndjson(resp.body.getReader())) { if (!line.text) { @@ -516,9 +516,9 @@ class Pages extends LitElement Pages in ${this.collInfo.title}
- ${this.isSidebar ? html `

Search and Filter Pages

` : ``} + ${this.isSidebar ? html `

Search and Filter Pages

` : ""}
-
+
@@ -531,7 +531,7 @@ class Pages extends LitElement ${this.editable && this.editing ? html`
` : html` -
${this.collInfo.title}
`} +
${this.collInfo.title}
`} ${this.editable ? html`` : html``} @@ -540,25 +540,25 @@ class Pages extends LitElement ${this.editable ? html`
${this.renderDownloadMenu()} -
` : ``} +
` : ""} ${this.collInfo.lists.length ? html`
  • - All Pages
    • ${this.collInfo.lists.map(list => html`
  • ${list.title} + class="${currList === list.id ? "is-active" : ""}">${list.title}
    • `)}
- ` : ``} + ` : ""}
Page List
@@ -571,7 +571,7 @@ class Pages extends LitElement renderDownloadMenu() { return html` -
+
- + `; } @@ -688,10 +688,10 @@ class Pages extends LitElement
    ${this.sortedPages.length ? html` ${this.sortedPages.map((p, i) => { - const selected = this.selectedPages.has(p.id); + const selected = this.selectedPages.has(p.id); - return html` -
  • + return html` +
  • -
    • ` })}` : html`

    ${this.getNoResultsMessage()}

    `} + `; })}` : html`

    ${this.getNoResultsMessage()}

    `}
`; } @@ -729,7 +729,7 @@ class Pages extends LitElement const body = JSON.stringify({title}); - fetch(`${this.collInfo.apiPrefix}/metadata`, {method: 'POST', body}).then((res) => { + fetch(`${this.collInfo.apiPrefix}/metadata`, {method: "POST", body}).then((res) => { if (res.status === 200) { this.dispatchEvent(new CustomEvent("coll-update", {detail: {title}})); } @@ -828,9 +828,14 @@ class Pages extends LitElement } for (const id of this.toDeletePages) { - const resp = await fetch(`${this.collInfo.apiPrefix}/page/${id}`, {method: 'DELETE'}); + const resp = await fetch(`${this.collInfo.apiPrefix}/page/${id}`, {method: "DELETE"}); const json = await resp.json(); + if (json.error) { + console.warn(json.error); + continue; + } + const page = pageMap[id]; if (!page) { @@ -866,7 +871,7 @@ class Pages extends LitElement } if (this.updatingSearch) { - return "Initializing Search..." + return "Initializing Search..."; } if (this.loading) { diff --git a/src/pageutils.js b/src/pageutils.js index a0b9b25..2e809bb 100644 --- a/src/pageutils.js +++ b/src/pageutils.js @@ -1,4 +1,4 @@ -import { register } from 'register-service-worker'; +import { register } from "register-service-worker"; // =========================================================================== @@ -17,13 +17,13 @@ function registerSW(name = "sw.js", scope = "./") { register(scope + name, { registrationOptions: { scope }, - registered (reg) { - console.log('Service worker is registered'); + registered () { + console.log("Service worker is registered"); resolve(); }, error (error) { - console.error('Error during service worker registration:', error); + console.error("Error during service worker registration:", error); reject(); } }); @@ -36,6 +36,7 @@ let dbworker = null; function initDBWorker() { if (dbworker === null) { + // eslint-disable-next-line no-undef dbworker = new Worker(__SW_NAME__); } return dbworker; @@ -47,7 +48,7 @@ async function digestMessage(message, hashtype) { const msgUint8 = new TextEncoder().encode(message); // encode as (utf-8) Uint8Array const hashBuffer = await crypto.subtle.digest(hashtype, msgUint8); // hash the message const hashArray = Array.from(new Uint8Array(hashBuffer)); // convert buffer to byte array - const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join(''); // convert bytes to hex string + const hashHex = hashArray.map(b => b.toString(16).padStart(2, "0")).join(""); // convert bytes to hex string return hashHex; } @@ -70,7 +71,7 @@ function tsToDate(ts) { ts.substring(12, 14) + "-00:00"); return new Date(datestr); -}; +} // =========================================================================== function getPageDateTS(page) { @@ -78,7 +79,7 @@ function getPageDateTS(page) { try { date = new Date(page.ts || page.date); } catch (e) { - + // leave date unchanged in case of error } const timestamp = (date && !isNaN(date)) ? getTS(date.toISOString()) : ""; @@ -88,7 +89,7 @@ function getPageDateTS(page) { // =========================================================================== function getTS(iso) { - return iso.replace(/[-:T]/g, '').slice(0, 14); + return iso.replace(/[-:T]/g, "").slice(0, 14); } @@ -104,7 +105,7 @@ function getReplayLink(view, url, ts) { // =========================================================================== async function sourceToId(url) { - const digest = await digestMessage(url, 'SHA-256'); + const digest = await digestMessage(url, "SHA-256"); const coll = "id-" + digest.slice(0, 12); return {url, coll}; } @@ -144,4 +145,4 @@ function parseURLSchemeHostPath(url) { export { digestMessage, tsToDate, getTS, getPageDateTS, getReplayLink, sourceToId, parseURLSchemeHostPath, - registerSW, initDBWorker }; + registerSW, initDBWorker }; diff --git a/src/replay.js b/src/replay.js index ccce2c5..8b587cf 100644 --- a/src/replay.js +++ b/src/replay.js @@ -1,5 +1,5 @@ -import { LitElement, html, css } from 'lit-element'; -import { wrapCss, rwpLogo } from './misc'; +import { LitElement, html, css } from "lit-element"; +import { wrapCss, rwpLogo } from "./misc"; @@ -38,7 +38,7 @@ class Replay extends LitElement showAuth: { type: Boolean }, authFileHandle: { type: Object } - } + }; } firstUpdated() { @@ -57,7 +57,9 @@ class Replay extends LitElement this.refresh(); return; } - } catch (e) {} + } catch (e) { + console.warn(e); + } } else { this.authFileHandle = null; } @@ -147,8 +149,8 @@ class Replay extends LitElement // google drive reauth const headers = event.detail.headers; - const resp = await fetch(`${this.collInfo.apiPrefix}/updateAuth`, { - method: 'POST', + await fetch(`${this.collInfo.apiPrefix}/updateAuth`, { + method: "POST", body: JSON.stringify({headers}) }); } else { @@ -173,7 +175,7 @@ class Replay extends LitElement const iframe = this.renderRoot.querySelector("iframe"); if (!iframe || !iframe.contentDocument || !iframe.contentWindow || (iframe.contentDocument.readyState === "complete" && !iframe.contentWindow._WBWombat)) { - this.clearLoading(iframe && iframe.contentWindow); + this.clearLoading(iframe && iframe.contentWindow); } }, 5000); } @@ -200,9 +202,16 @@ class Replay extends LitElement refresh() { const iframe = this.renderRoot.querySelector("iframe"); - if (iframe) { + if (!iframe) { + return; + } + + const oldIframeUrl = this.iframeUrl; + // set iframe url to expected, refresh if same url + this.doSetIframeUrl(); + if (oldIframeUrl === this.iframeUrl) { this.waitForLoad(); - iframe.contentWindow.location.reload(); + iframe.contentWindow.location.href = this.iframeUrl; } } @@ -262,7 +271,7 @@ class Replay extends LitElement } render() { - const title = `Replay of ${this.title ? `${this.title}:` :``} ${this.url}`; + const title = `Replay of ${this.title ? `${this.title}:` :""} ${this.url}`; return html` @@ -302,7 +311,7 @@ class Replay extends LitElement
- `: ``} + `: ""}
`}`; } diff --git a/src/sorter.js b/src/sorter.js index d3912f4..4efbcf6 100644 --- a/src/sorter.js +++ b/src/sorter.js @@ -1,8 +1,8 @@ -import { LitElement, html, css } from 'lit-element'; -import { wrapCss } from './misc'; +import { LitElement, html, css } from "lit-element"; +import { wrapCss } from "./misc"; -import fasSortDown from '@fortawesome/fontawesome-free/svgs/solid/sort-down.svg'; -import fasSortUp from '@fortawesome/fontawesome-free/svgs/solid/sort-up.svg'; +import fasSortDown from "@fortawesome/fontawesome-free/svgs/solid/sort-down.svg"; +import fasSortUp from "@fortawesome/fontawesome-free/svgs/solid/sort-up.svg"; // =========================================================================== @@ -16,7 +16,7 @@ class Sorter extends LitElement this.pageResults = 0; this.numResults = 0; - this.sortKey = null + this.sortKey = null; this.sortDesc = null; } @@ -31,7 +31,7 @@ class Sorter extends LitElement sortKey: { type: String }, sortDesc: { type: Boolean }, - } + }; } firstUpdated() { @@ -126,7 +126,7 @@ class Sorter extends LitElement `)}
-