diff --git a/src/coll.js b/src/coll.js index 56953aa..8a9f3b6 100644 --- a/src/coll.js +++ b/src/coll.js @@ -1,5 +1,5 @@ import { LitElement, html, css } from 'lit-element'; -import { wrapCss, IS_APP } from './misc'; +import { wrapCss, rwpLogo, IS_APP } from './misc'; import { sourceToId } from './pageutils'; @@ -10,6 +10,21 @@ import farResources from '@fortawesome/fontawesome-free/svgs/regular/file-code.s import farPlayCircle from '@fortawesome/fontawesome-free/svgs/regular/play-circle.svg'; +import { tsToDate } from './pageutils'; + +import fasRefresh from '@fortawesome/fontawesome-free/svgs/solid/redo-alt.svg'; +import fasSearch from '@fortawesome/fontawesome-free/svgs/solid/search.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'; + + +const RWP_SCHEME = "rwp://"; + + // =========================================================================== class Coll extends LitElement { @@ -33,9 +48,13 @@ class Coll extends LitElement this._locationHash = ""; this.tabData = {}; + this.url = ""; + this.ts = ""; this.tabNames = ["pages", "story", "resources", "replay"]; + this.menuActive = false; + this.hasStory = false; } @@ -52,8 +71,11 @@ class Coll extends LitElement tabData: { type: Object, attribute: false }, - replayUrl: { type: String }, - replayTS: { type: String }, + url: { type: String }, + ts: { type: String }, + + isFullscreen: { type: Boolean }, + menuActive: { type: Boolean }, embed: { type: String }, editable: { type: Boolean } @@ -64,12 +86,20 @@ class Coll extends LitElement //this.doUpdateInfo(); this.inited = true; window.addEventListener("hashchange", (event) => this.onHashChange(event)); + + this.addEventListener("fullscreenchange", (event) => { + this.isFullscreen = !!document.fullscreenElement; + }); } updated(changedProperties) { - if (changedProperties.has("replayUrl") || changedProperties.has("replayTS")) { - this.tabData = {view: "replay", url: this.replayUrl, ts: this.replayTS}; - } + // if (changedProperties.has("url") || changedProperties.has("ts")) { + // if (this.url.startsWith("rwp?")) { + // this.tabData = Object.fromEntries(new URLSearchParams(this.url.slice(4)).entries()); + // } else { + // this.tabData = {view: "replay", url: this.url, ts: this.ts}; + // } + // } if (changedProperties.has("sourceUrl")) { this.doUpdateInfo(); @@ -84,6 +114,10 @@ class Coll extends LitElement forEach(key => !this.tabData[key] && delete this.tabData[key]); const newHash = "#" + new URLSearchParams(this.tabData).toString(); + + if (this.tabData.view !== "replay") { + this.url = RWP_SCHEME + decodeURIComponent(this._paramsToString(this.tabData)); + } if (newHash !== this._locationHash) { this._locationHash = newHash; if (this._replaceLoc || Object.keys(changedProperties.get("tabData")).length === 0) { @@ -166,17 +200,28 @@ class Coll extends LitElement event.preventDefault(); const hash = event.currentTarget.getAttribute("href"); this.tabData = {...this.tabData, view: hash.slice(1)}; + //this.tabData = {view: hash.slice(1)}; return false; } onCollTabNav(event) { if (event.target.id === this.tabData.view) { - this.tabData = {view: this.tabData.view, ...event.detail.data}; - this._replaceLoc = !this._locUpdateNeeded && event.detail.replaceLoc; - this._locUpdateNeeded = true; + this.updateTabData(event.detail.data, event.detail.replaceLoc); } } + updateTabData(data, replaceLoc = false) { + this.tabData = {view: this.tabData.view, ...data}; + if (this.tabData.url) { + this.url = this.tabData.url || ""; + } + if (this.tabData.ts) { + this.ts = this.tabData.ts || ""; + } + this._replaceLoc = !this._locUpdateNeeded && replaceLoc; + this._locUpdateNeeded = true; + } + static get styles() { return wrapCss(css` .icon { @@ -189,7 +234,7 @@ class Coll extends LitElement line-height: 0.5em; } - .is-active { + li.is-active { font-weight: bold; } @@ -237,9 +282,76 @@ class Coll extends LitElement display: flex; flex-direction: column; } + + ${Coll.replayBarStyles} `); } + static get replayBarStyles() { + return css` + .replay-bar { + padding: 1em; + max-width: none; + border-bottom: solid .1rem #97989A; + width: 100%; + background-color: white; + } + + input#url { + border-radius: 4px; + } + + #datetime { + position: absolute; + right: 1em; + z-index: 10; + background: linear-gradient(90deg, rgba(255, 255, 255, 0), #FFF 15%, #FFF); + margin: -35px 0 0 0px; + padding-left: 3em; + line-height: 2; + } + + .menu-head { + font-size: 10px; + font-weight: bold; + display: block; + } + .menu-logo { + vertical-align: middle; + } + .menu-version { + font-size: 10px; + } + .dropdown-item.info { + font-style: italic; + } + + input:focus + #datetime { + display: none; + } + + .replay-bar .button:focus { + box-shadow: none; + } + + .dropdown .button { + padding-right: 0px; + } + + .is-borderless { + border: 0px; + } + + .modal { + top: 174px; + } + + form { + width: 100%; + } + `; + } + render() { if (!this.inited) return html``; @@ -283,6 +395,7 @@ class Coll extends LitElement ` : ``} + ${this.renderLocationBar()} ${this.renderCollTabs()} `; } else { @@ -290,6 +403,106 @@ class Coll extends LitElement } } + renderLocationBar() { + const dateStr = tsToDate(this.ts).toLocaleString(); + + return html` +
`; + } + renderCollTabs() { const isStory = this.tabData.view === 'story'; const isPages = this.tabData.view === 'pages'; @@ -309,14 +522,14 @@ class Coll extends LitElement .active="${isPages}" .editable="${this.editable}" currList="${this.tabData.currList || 0}" - query="${this.tabData.query || this.tabData.url || ""}" + query="${this.tabData.query || ""}" @coll-tab-nav="${this.onCollTabNav}" id="pages" class="${isPages ? '' : 'is-hidden'}">