archivalo-oss/replayweb.page
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

embed improvements:

Browse Source 
- 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
This commit is contained in:
Ilya Kreymer
2020-06-25 20:30:52 -07:00
parent 7f13910bc0
commit 71b0fd3d19
6 changed files with 341 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/appmain.js
+28 -12
View File
@@ -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="/">
<span class="has-text-primary">replay</span>
<span class="has-text-link">web.page</span>
</a>
${!this.embed ? html`
<a class="navbar-item logo-text has-text-weight-bold is-size-5 has-allcaps" href="/">
<span class="has-text-primary">replay</span>
<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">
<a href="/docs" target="_blank" class="navbar-item">
<fa-icon .svg="${fasHelp}"></fa-icon><span>&nbsp;User Docs</span>
</a>
<a href="?terms" @click="${(e) => { e.preventDefault(); this.showTerms = true} }"class="navbar-item">Terms</a>
</div>
${!this.embed ? html`
<div class="navbar-end">
<a href="/docs" target="_blank" class="navbar-item">
<fa-icon .svg="${fasHelp}"></fa-icon><span>&nbsp;User Docs</span>
</a>
<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
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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
+117 -7
View File
@@ -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 id="refresh" class="button is-borderless ${this.isLoading ? 'is-loading' : ''}" @click="${this.onRefresh}">
</button>
${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);
sw.js
+5 -5
View File
File diff suppressed because one or more lines are too long
ui.js
+189 -116
View File
File diff suppressed because one or more lines are too long