embed improvements:

- show back, forward options in default embed mode
- add extra options menu in embed mode, including 'purge cache + full reload'
- responsive replay bar buttons: show in menu when tablet or mobile, in non-embed mode, only show on mobile
- 'full' embed mode, show only logo and info menu, no user guide/terms

src/appmain.js

@@ -112,12 +112,18 @@ class App extends LitElement
       return html``;
     }
     return html`
-    ${!this.embed ? html`
+    ${!this.embed || this.embed === "full" ? html`
       <nav class="navbar has-background-info" role="navigation" aria-label="main navigation">
       <div class="navbar-brand">
+        ${!this.embed ? html`
         <a class="navbar-item wr-logo-item" title="ReplayWeb.page" href="/">
           <fa-icon id="wrlogo" size="2.5rem" .svg=${rwpLogo}></fa-icon>
+        </a>` : html`
+        <a class="navbar-item wr-logo-item" title="ReplayWeb.page">
+          <fa-icon id="wrlogo" size="2.5rem" .svg=${rwpLogo}></fa-icon>
         </a>
+        `}
+
         <a role="button" @click="${this.onNavMenu}"
         class="navbar-burger burger ${this.navMenuShown ? 'is-active' : ''}" aria-label="menu" aria-expanded="false">
           <span aria-hidden="true"></span>
@@ -127,10 +133,12 @@ class App extends LitElement
       </div>
       <div class="navbar-menu ${this.navMenuShown ? 'is-active' : ''}">
       <div class="navbar-start">
-      <a class="navbar-item logo-text has-text-weight-bold is-size-5 has-allcaps" href="/">
+      ${!this.embed ? html`
-      <span class="has-text-primary">replay</span>
+        <a class="navbar-item logo-text has-text-weight-bold is-size-5 has-allcaps" href="/">
-      <span class="has-text-link">web.page</span>
+          <span class="has-text-primary">replay</span>
-      </a>
+          <span class="has-text-link">web.page</span>
+        </a>` : ``}
+
       ${IS_APP ? html`
         <a class="navbar-item arrow-button" title="Go Back" @click="${(e) => window.history.back()}">
           <fa-icon .svg="${fasArrowLeft}"></fa-icon><span class="menu-only">&nbsp;Go Back</span>
@@ -170,12 +178,13 @@ class App extends LitElement
         </div>
         ` : ``}
       </div>
-      <div class="navbar-end">
+      ${!this.embed ? html`
-        <a href="/docs" target="_blank" class="navbar-item">
+        <div class="navbar-end">
-          <fa-icon .svg="${fasHelp}"></fa-icon><span>&nbsp;User Docs</span>
+          <a href="/docs" target="_blank" class="navbar-item">
-        </a>
+            <fa-icon .svg="${fasHelp}"></fa-icon><span>&nbsp;User Docs</span>
-        <a href="?terms" @click="${(e) => { e.preventDefault(); this.showTerms = true} }"class="navbar-item">Terms</a>
+          </a>
-      </div>
+          <a href="?terms" @click="${(e) => { e.preventDefault(); this.showTerms = true} }"class="navbar-item">Terms</a>
+        </div>` : html``}
     </nav>
   ` : ''}
   
@@ -262,8 +271,15 @@ class App extends LitElement
     }
   }
 
-  onNavMenu() {
+  onNavMenu(event) {
+    event.stopPropagation();
     this.navMenuShown = !this.navMenuShown;
+
+    if (this.navMenuShown) {
+      document.addEventListener("click", () => {
+        this.navMenuShown = false;
+      }, {once: true});
+    }
   }
 
   initRoute() {

src/coll.js

@@ -250,7 +250,7 @@ class Coll extends LitElement
     } else if (this.collInfo) {
       return html`
       <nav id="contents" class="is-light">
-      ${!this.embed ? html`
+      ${!this.embed || this.embed === "full" ? html`
         <div class="main tabs has-background-info is-centered">
           <ul>
             ${this.hasStory ? html`

src/embed.js

@@ -105,7 +105,7 @@ class Embed extends LitElement
         changedProperties.has("source")) {
 
       if (this.embed === null) {
-        this.embed = this.url ? "replayonly" : "";
+        this.embed = this.url ? "replay" : "full";
       }
 
       this.paramString = new URLSearchParams({

src/replay.js

@@ -7,6 +7,11 @@ import fasRefresh from '@fortawesome/fontawesome-free/svgs/solid/redo-alt.svg';
 import fasFullscreen from '@fortawesome/fontawesome-free/svgs/solid/desktop.svg';
 import fasUnfullscreen from '@fortawesome/fontawesome-free/svgs/solid/compress-arrows-alt.svg';
 
+import fasLeft from '@fortawesome/fontawesome-free/svgs/solid/arrow-left.svg';
+import fasRight from '@fortawesome/fontawesome-free/svgs/solid/arrow-right.svg';
+import fasMenuV from '@fortawesome/fontawesome-free/svgs/solid/ellipsis-v.svg';
+
+
 // ===========================================================================
 class Replay extends LitElement
 {
@@ -19,6 +24,8 @@ class Replay extends LitElement
     this.ts = "";
     this.title = "";
 
+    this.menuActive = false;
+
     this.showAuth = false;
     this.reauthWait = null;
   }
@@ -43,7 +50,8 @@ class Replay extends LitElement
       showAuth: { type: Boolean },
 
       embed: { type: String },
-      isFullscreen: { type: Boolean }
+      isFullscreen: { type: Boolean },
+      menuActive: { type: Boolean }
     }
   }
 
@@ -65,6 +73,7 @@ class Replay extends LitElement
   }
 
   onFullscreenToggle() {
+    this.menuActive = false;
     if (!this.isFullscreen) {
       this.requestFullscreen();
     } else {
@@ -152,6 +161,8 @@ class Replay extends LitElement
       return;
     }
 
+    this.menuActive = false;
+
     const iframe = this.renderRoot.querySelector("iframe");
 
     if (iframe) {
@@ -250,7 +261,11 @@ class Replay extends LitElement
       }
 
       .replay-bar .button:focus {
-        border: none;
+        box-shadow: none;
+      }
+
+      .dropdown .button {
+        padding-right: 0px;
       }
 
       .is-borderless {
@@ -273,12 +288,24 @@ class Replay extends LitElement
     ${this.embed !== "replayonly" ? html`
     <div class="replay-bar">
       <div class="field has-addons">
-        <a id="fullscreen" class="button is-borderless" @click="${this.onFullscreenToggle}">
+        <button id="fullscreen" class="button is-borderless is-hidden-mobile" @click="${this.onFullscreenToggle}">
           <span class="icon is-small">
             <fa-icon size="1.0em" class="has-text-grey" .svg="${this.isFullscreen ? fasUnfullscreen : fasFullscreen}"></fa-icon>
           </span>
-        </a>
+        </button>
-        <button id="refresh" class="button is-borderless ${this.isLoading ? 'is-loading' : ''}" @click="${this.onRefresh}">
+        ${this.embed ? html`
+        <button class="button is-borderless is-hidden-touch" @click="${this.onGoBack}">
+          <span class="icon is-small">
+            <fa-icon size="1.0em" class="has-text-grey" .svg="${fasLeft}"></fa-icon>
+          </span>
+        </button>
+        <button class="button is-borderless is-hidden-touch" @click="${this.onGoForward}">
+          <span class="icon is-small">
+            <fa-icon size="1.0em" class="has-text-grey" .svg="${fasRight}"></fa-icon>
+          </span>
+        </button>
+        ` : ``}
+        <button id="refresh" class="button is-hidden-mobile is-borderless ${this.isLoading ? 'is-loading' : ''}" @click="${this.onRefresh}">
           <span class="icon is-small">
             ${!this.isLoading ? html`
             <fa-icon size="1.0em" class="has-text-grey" .svg="${fasRefresh}"></fa-icon>
@@ -291,6 +318,54 @@ class Replay extends LitElement
             <p id="datetime" class="control is-hidden-mobile">${tsToDate(this.replayTS).toLocaleString()}</p>
           </div>
         </form>
+
+        <div class="dropdown is-right ${this.menuActive ? 'is-active' : ''}" @click="${(e) => this.menuActive = false}">
+          <div class="dropdown-trigger">
+            <button class="${this.embed ? '' : 'is-hidden-tablet'} button is-borderless" aria-haspopup="true" aria-controls="menu-dropdown" @click="${this.onMenu}">
+              <span class="icon is-small">
+                <fa-icon size="1.0em" class="has-text-grey" .svg="${fasMenuV}"></fa-icon>
+              </span>
+            </button>
+          </div>
+          <div class="dropdown-menu" id="menu-dropdown" role="menu">
+            <div class="dropdown-content">
+              <a class="dropdown-item is-hidden-tablet" @click="${this.onFullscreenToggle}">
+                <span class="icon is-small">
+                  <fa-icon size="1.0em" class="has-text-grey" .svg="${this.isFullscreen ? fasUnfullscreen : fasFullscreen}"></fa-icon>
+                </span>
+                <span>Full Screen</span>
+              </a>
+              ${this.embed ? html`
+              <a class="dropdown-item is-hidden-desktop" @click="${this.onGoBack}">
+                <span class="icon is-small">
+                  <fa-icon size="1.0em" class="has-text-grey" .svg="${fasLeft}"></fa-icon>
+                </span>
+                <span>Back</span>
+              </a>
+              <a class="dropdown-item is-hidden-desktop" @click="${this.onGoForward}">
+                <span class="icon is-small">
+                  <fa-icon size="1.0em" class="has-text-grey" .svg="${fasRight}"></fa-icon>
+                </span>
+                <span>Forward</span>
+              </a>` : ``}
+              <a class="dropdown-item is-hidden-tablet" @click="${this.onRefresh}">
+                <span class="icon is-small">
+                ${!this.isLoading ? html`
+                  <fa-icon size="1.0em" class="has-text-grey" .svg="${fasRefresh}"></fa-icon>
+                  ` : ``}
+                </span>
+                <span>Reload</span>
+              </a>
+              ${this.embed ? html`
+              <hr class="dropdown-divider is-hidden-desktop">
+              <a class="dropdown-item" @click="${this.onPurgeCache}">
+                Purge Cache + Full Reload
+              </a>` : ``}
+            </div>
+          </div>
+        </div>
+
+
       </div>
     </div>` : html`
     `}
@@ -314,7 +389,7 @@ class Replay extends LitElement
         <div class="modal-card">
           <header class="modal-card-head">
           <p class="modal-card-title">Auth Needed</p>
-            <button class="delete" aria-label="close" @click="${(e) => this.showAuth = false}"></button>
+            <button class="delete" aria-label="close"></button>
           </header>
           <section class="modal-card-body">
             <div class="container has-text-centered">
@@ -327,11 +402,32 @@ class Replay extends LitElement
     `;
   }
 
+  onMenu(event) {
+    event.stopPropagation();
+    this.menuActive = !this.menuActive;
+
+    if (this.menuActive) {
+      document.addEventListener("click", () => {
+        this.menuActive = false;
+      }, {once: true});
+    }
+  }
+
+  onGoBack() {
+    this.menuActive = false;
+    window.history.back();
+  }
+
+  onGoForward() {
+    this.menuActive = false;
+    window.history.forward();
+  }
+
   onReAuthed(event) {
     this.reauthWait = (async () => {
       const headers = event.detail.headers;
 
-      const resp = await fetch(`/wabac/api/${this.collInfo.coll}/updateAuth`, { 
+      const resp = await fetch(`${this.collInfo.apiPrefix}/updateAuth`, { 
         method: 'POST',
         body: JSON.stringify({headers})
       });
@@ -342,6 +438,20 @@ class Replay extends LitElement
       }
     })();
   }
+
+  async onPurgeCache(event) {
+    event.preventDefault();
+
+    const resp = await fetch(`${this.collInfo.apiPrefix}`, {
+      method: 'DELETE',
+    });
+
+    if (resp.status === 200 && window.parent) {
+      window.parent.location.reload();
+    } else {
+      console.warn("purge failed: " + resp.status);
+    }
+  }
 }
 
 customElements.define("wr-coll-replay", Replay);