big ui update, page search + full text

- split file chooser from coll index, insert as header, make file chooser collapsible
- revamp collection index to be responsive
- add separate sorter component, used for collection index and pages
- combine 'curated lists' + pages, with page search + narrative
- ensure page + narrative lists are collapsible
- page search: support title, url and full text search if available, using flexsearch
- page search: keyword highlighting, load all pages, showing in increments of 100
- page and resource search: delay search to 1/4 sec of inactivity to avoid too many queries
- electron app: ensure noCache is set to true for local files
- embedding: remove separate embed.js, just use ui.js for embed as well
- embedding: support embedding iframe in a local origin with just sw.js and ui.js: sw.js serves index.html,
<replay-web-page> embed injects ui.js into iframe
- sw.js, new service worker entry point
- sw and ww inited only from <replay-app-main>, ui.js loaded from <replay-web-page> embed component

src/embed.js

@@ -1,12 +1,18 @@
 import { LitElement, html, css } from 'lit-element';
 
+import { registerSW } from './pageutils';
+
+
+var scriptSrc = document.currentScript && document.currentScript.src;
+
 
 // ===========================================================================
-class EmbedRWP extends LitElement
+class Embed extends LitElement
 {
   constructor() {
     super();
-    this.replayBase = "http://localhost:9990/";
+    this.replayBase = window.location.origin + "/replay/";
+    this.swName = __SW_NAME__;
     this.view = "replay";
     this.ts = "";
     this.url = "";
@@ -14,6 +20,9 @@ class EmbedRWP extends LitElement
     this.coll = "";
     this.paramString = null;
     this.deepLink = false;
+    this.swInited = false;
+
+    this.doRegister();
   }
 
   static get properties() {
@@ -21,13 +30,17 @@ class EmbedRWP extends LitElement
       url: { type: String },
       ts: { type: String },
       source: { type: String },
+
       replayBase: { type: String },
+      swName: { type: String },
 
       title: { type: String },
 
       coll: { type: String },
       config: { type: String },
 
+      swInited: { type: Boolean },
+
       paramString: { type: String },
       hashString: { type: String },
 
@@ -35,6 +48,12 @@ class EmbedRWP extends LitElement
     }
   }
 
+  async doRegister() {
+    await registerSW(this.swName, this.replayBase);
+
+    this.swInited = true;
+  }
+
   firstUpdated() {
     window.addEventListener("message", (event) => {
       const iframe = this.renderRoot.querySelector("iframe");
@@ -115,16 +134,30 @@ class EmbedRWP extends LitElement
 
   render() {
     return html`
-    ${this.paramString && this.hashString ? html`
-      <iframe src="${this.replayBase}?${this.paramString}#${this.hashString}" allow="autoplay *; fullscreen"></iframe>
+    ${this.paramString && this.hashString && this.swInited ? html`
+      <iframe @load="${this.onLoad}" src="${this.replayBase}?${this.paramString}#${this.hashString}" allow="autoplay *; fullscreen"></iframe>
       ` : html``}
     `;
   }
+
+  onLoad(event) {
+    if (this.injected) {
+      return;
+    }
+    if (event.target.contentWindow.customElements.get("replay-app-main")) {
+      return;
+    }
+    const script = event.target.contentDocument.createElement("script");
+    //const script = event.target.contentDocument.querySelector("script");
+    script.src = scriptSrc;
+    event.target.contentDocument.head.appendChild(script);
+    this.injected = true;
+  }
 }
 
 // ===========================================================================
 async function main() {
-  customElements.define("replay-web-page", EmbedRWP);
+  customElements.define("replay-web-page", Embed);
 }