add viewport, more responsiveness tweaks, add initial page list tab!
This commit is contained in:
Ilya Kreymer
@@ -1,4 +1,4 @@
|
||||
!function(t,e){for(var s in e)t[s]=e[s]}(self,function(t){var e={};function s(n){if(e[n])return e[n].exports;var r=e[n]={i:n,l:!1,exports:{}};return t[n].call(r.exports,r,r.exports,s),r.l=!0,r.exports}return s.m=t,s.c=e,s.d=function(t,e,n){s.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},s.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},s.t=function(t,e){if(1&e&&(t=s(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(s.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)s.d(n,r,function(e){return t[e]}.bind(null,r));return n},s.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return s.d(e,"a",e),e},s.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},s.p="/",s(s.s=111)}({0:function(t,e,s){"use strict";s.d(e,"c",(function(){return d.e})),s.d(e,"d",(function(){return N})),s.d(e,"b",(function(){return C})),s.d(e,"a",(function(){return E}));var n=s(5),r=s(1);function i(t,e){const{element:{content:s},parts:n}=t,r=document.createTreeWalker(s,133,null,!1);let i=a(n),o=n[i],c=-1,l=0;const u=[];let d=null;for(;r.nextNode();){c++;const t=r.currentNode;for(t.previousSibling===d&&(d=null),e.has(t)&&(u.push(t),null===d&&(d=t)),null!==d&&l++;void 0!==o&&o.index===c;)o.index=null!==d?-1:o.index-l,i=a(n,i),o=n[i]}u.forEach(t=>t.parentNode.removeChild(t))}const o=t=>{let e=11===t.nodeType?0:1;const s=document.createTreeWalker(t,133,null,!1);for(;s.nextNode();)e++;return e},a=(t,e=-1)=>{for(let s=e+1;s<t.length;s++){const e=t[s];if(Object(r.d)(e))return s}return-1};var c=s(9),l=s(8),u=s(13),d=s(6);
|
||||
!function(t,e){for(var s in e)t[s]=e[s]}(self,function(t){var e={};function s(n){if(e[n])return e[n].exports;var r=e[n]={i:n,l:!1,exports:{}};return t[n].call(r.exports,r,r.exports,s),r.l=!0,r.exports}return s.m=t,s.c=e,s.d=function(t,e,n){s.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},s.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},s.t=function(t,e){if(1&e&&(t=s(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(s.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)s.d(n,r,function(e){return t[e]}.bind(null,r));return n},s.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return s.d(e,"a",e),e},s.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},s.p="/",s(s.s=112)}({0:function(t,e,s){"use strict";s.d(e,"c",(function(){return d.e})),s.d(e,"d",(function(){return N})),s.d(e,"b",(function(){return C})),s.d(e,"a",(function(){return E}));var n=s(5),r=s(1);function i(t,e){const{element:{content:s},parts:n}=t,r=document.createTreeWalker(s,133,null,!1);let i=a(n),o=n[i],c=-1,l=0;const u=[];let d=null;for(;r.nextNode();){c++;const t=r.currentNode;for(t.previousSibling===d&&(d=null),e.has(t)&&(u.push(t),null===d&&(d=t)),null!==d&&l++;void 0!==o&&o.index===c;)o.index=null!==d?-1:o.index-l,i=a(n,i),o=n[i]}u.forEach(t=>t.parentNode.removeChild(t))}const o=t=>{let e=11===t.nodeType?0:1;const s=document.createTreeWalker(t,133,null,!1);for(;s.nextNode();)e++;return e},a=(t,e=-1)=>{for(let s=e+1;s<t.length;s++){const e=t[s];if(Object(r.d)(e))return s}return-1};var c=s(9),l=s(8),u=s(13),d=s(6);
|
||||
/**
|
||||
* @license
|
||||
* Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
|
||||
@@ -65,7 +65,7 @@ const n=`{{lit-${String(Math.random()).slice(2)}}}`,r=`\x3c!--${n}--\x3e`,i=new
|
||||
* subject to an additional IP rights grant found at
|
||||
* http://polymer.github.io/PATENTS.txt
|
||||
*/
|
||||
const n=new WeakMap,r=t=>(...e)=>{const s=t(...e);return n.set(s,!0),s},i=t=>"function"==typeof t&&n.has(t)},111:function(t,e,s){"use strict";s.r(e);var n=s(0);class r extends n.a{constructor(){super(),this.replayBase="http://localhost:9990/",this.view="replay",this.ts="",this.url="",this.config="",this.coll="",this.paramString=null,this.deepLink=!1}static get properties(){return{url:{type:String},ts:{type:String},source:{type:String},replayBase:{type:String},title:{type:String},coll:{type:String},config:{type:String},paramString:{type:String},hashString:{type:String},deepLink:{type:Boolean}}}firstUpdated(){window.addEventListener("message",t=>{const e=this.renderRoot.querySelector("iframe");if(e&&t.source===e.contentWindow){if(t.data.title&&(this.title=t.data.title),console.log(t.data),!this.deepLink)return;const e=new URLSearchParams({url:t.data.url,ts:t.data.ts}),s=new URL(window.location.href);s.hash="#"+e.toString(),window.history.replaceState({},"",s)}}),this.deepLink&&(this.updateFromHash(),window.addEventListener("hashchange",t=>this.updateFromHash()))}updateFromHash(){const t=new URLSearchParams(window.location.hash.slice(1));t.has("url")&&(this.url=t.get("url")),t.has("ts")&&(this.ts=t.get("ts"))}updated(t){(t.has("url")||t.has("ts")||t.has("source"))&&(this.paramString=new URLSearchParams({source:this.source,customColl:this.coll,config:this.config,embed:"true"}).toString(),this.hashString=new URLSearchParams({url:this.url,ts:this.ts,view:this.view}).toString())}static get styles(){return n.b`
|
||||
const n=new WeakMap,r=t=>(...e)=>{const s=t(...e);return n.set(s,!0),s},i=t=>"function"==typeof t&&n.has(t)},112:function(t,e,s){"use strict";s.r(e);var n=s(0);class r extends n.a{constructor(){super(),this.replayBase="http://localhost:9990/",this.view="replay",this.ts="",this.url="",this.config="",this.coll="",this.paramString=null,this.deepLink=!1}static get properties(){return{url:{type:String},ts:{type:String},source:{type:String},replayBase:{type:String},title:{type:String},coll:{type:String},config:{type:String},paramString:{type:String},hashString:{type:String},deepLink:{type:Boolean}}}firstUpdated(){window.addEventListener("message",t=>{const e=this.renderRoot.querySelector("iframe");if(e&&t.source===e.contentWindow){if(t.data.title&&(this.title=t.data.title),console.log(t.data),!this.deepLink)return;const e=new URLSearchParams({url:t.data.url,ts:t.data.ts}),s=new URL(window.location.href);s.hash="#"+e.toString(),window.history.replaceState({},"",s)}}),this.deepLink&&(this.updateFromHash(),window.addEventListener("hashchange",t=>this.updateFromHash()))}updateFromHash(){const t=new URLSearchParams(window.location.hash.slice(1));t.has("url")&&(this.url=t.get("url")),t.has("ts")&&(this.ts=t.get("ts"))}updated(t){(t.has("url")||t.has("ts")||t.has("source"))&&(this.paramString=new URLSearchParams({source:this.source,customColl:this.coll,config:this.config,embed:"true"}).toString(),this.hashString=new URLSearchParams({url:this.url,ts:this.ts,view:this.view}).toString())}static get styles(){return n.b`
|
||||
iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
+84
-47
File diff suppressed because one or more lines are too long
+1
-1
@@ -2,8 +2,8 @@
|
||||
<html class="no-overflow">
|
||||
<head>
|
||||
<link rel="manifest" href="/webmanifest.json">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./frontend.js"></script>
|
||||
<!--<link href="./dist/frontend.css" rel="stylesheet"/>-->
|
||||
</head>
|
||||
<body>
|
||||
<app-main></app-main>
|
||||
|
||||
+100
-10
@@ -4,6 +4,7 @@ import { unsafeSVG } from 'lit-html/directives/unsafe-svg';
|
||||
import { styleMap } from 'lit-html/directives/style-map';
|
||||
|
||||
import { getTS, tsToDate, sourceToId, parseURLSchemeHostPath } from './pageutils';
|
||||
|
||||
import { register } from 'register-service-worker';
|
||||
|
||||
import prettyBytes from 'pretty-bytes';
|
||||
@@ -24,6 +25,7 @@ import fasFullscreen from '@fortawesome/fontawesome-free/svgs/solid/desktop.svg'
|
||||
import fasUnfullscreen from '@fortawesome/fontawesome-free/svgs/solid/compress-arrows-alt.svg';
|
||||
import fasHelp from '@fortawesome/fontawesome-free/svgs/solid/question-circle.svg';
|
||||
import farListAlt from '@fortawesome/fontawesome-free/svgs/solid/list-alt.svg';
|
||||
import fasPage from '@fortawesome/fontawesome-free/svgs/solid/file-alt.svg';
|
||||
import fasSearch from '@fortawesome/fontawesome-free/svgs/solid/search.svg';
|
||||
import farPlayCircle from '@fortawesome/fontawesome-free/svgs/regular/play-circle.svg';
|
||||
|
||||
@@ -37,7 +39,7 @@ function wrapCss(custom) {
|
||||
return [allCss, custom];
|
||||
}
|
||||
|
||||
const IS_APP = window.electron && window.electron.IS_APP;
|
||||
const IS_APP = window.electron && window.electron.IS_APP || window.matchMedia('(display-mode: standalone)').matches;
|
||||
|
||||
const dbworker = new Worker(__SW_PATH__);
|
||||
|
||||
@@ -97,7 +99,7 @@ class AppMain extends LitElement
|
||||
vertical-align: sub;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 800px) {
|
||||
@media screen and (min-width: 840px) {
|
||||
.menu-only {
|
||||
display: none;
|
||||
}
|
||||
@@ -120,7 +122,7 @@ class AppMain extends LitElement
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
@media screen and (max-width: 840px) {
|
||||
.wide-only {
|
||||
display: none;
|
||||
}
|
||||
@@ -761,12 +763,17 @@ class WrIndex extends LitElement
|
||||
padding: 6px;
|
||||
border-radius: 10px;
|
||||
display: none;
|
||||
position: absolute;
|
||||
}
|
||||
.copy:active {
|
||||
background-color: lightgray;
|
||||
}
|
||||
.col-source {
|
||||
word-break: break-word;
|
||||
position: relative;
|
||||
}
|
||||
.col-source:hover > .copy, .source-text:hover + .copy, .copy:hover {
|
||||
display: initial;
|
||||
display: inline;
|
||||
}
|
||||
`);
|
||||
}
|
||||
@@ -789,7 +796,7 @@ class WrIndex extends LitElement
|
||||
<span class="file-icon">
|
||||
<fa-icon size="0.9em" .svg=${fasUpload}></fa-icon>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
<span class="file-label is-hidden-touch">
|
||||
Choose File...
|
||||
</span>
|
||||
</span>
|
||||
@@ -806,7 +813,7 @@ class WrIndex extends LitElement
|
||||
placeholder="Enter a URL or click 'Choose File' to select a (WARC, HAR, WBN, or WACZ) archive source">
|
||||
</p>
|
||||
<div class="control">
|
||||
<button type="submit" class="button is-primary">Load</button>
|
||||
<button type="submit" class="button is-hidden-mobile is-primary">Load</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1111,7 +1118,7 @@ class WrColl extends LitElement
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
wr-replay-page, wr-coll-resources, wr-coll-curated {
|
||||
wr-replay-page, wr-coll-resources, wr-coll-curated, wr-coll-pages {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -1135,11 +1142,18 @@ class WrColl extends LitElement
|
||||
<li class="${this.tabData.view === 'curated' ? 'is-active' : ''}">
|
||||
<a @click="${this.onTabClick}" href="#curated" class="is-size-6">
|
||||
<span class="icon"><fa-icon .svg="${farListAlt}"></fa-icon></span>
|
||||
<span class="tab-label" title="Curated Pages">Curated Pages</span>
|
||||
<span class="tab-label" title="Curated Lists">Curated Lists</span>
|
||||
</a>
|
||||
</li>
|
||||
` : ``}
|
||||
|
||||
<li class="${this.tabData.view === 'pages' ? 'is-active' : ''}">
|
||||
<a @click="${this.onTabClick}" href="#pages" class="is-size-6">
|
||||
<span class="icon"><fa-icon .svg="${fasPage}"></fa-icon></span>
|
||||
<span class="tab-label" title="Pages">Pages</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="${this.tabData.view === 'resources' ? 'is-active' : ''}">
|
||||
<a @click="${this.onTabClick}" href="#resources" class="is-size-6">
|
||||
<span class="icon"><fa-icon .svg="${fasSearch}"></fa-icon></span>
|
||||
@@ -1170,6 +1184,11 @@ class WrColl extends LitElement
|
||||
class="${this.tabData.view === 'curated' ? '' : 'is-hidden'}">
|
||||
</wr-coll-curated>
|
||||
|
||||
<wr-coll-pages .collInfo="${this.collInfo}"
|
||||
@coll-tab-nav="${this.onCollTabNav}" id="pages"
|
||||
class="${this.tabData.view === 'pages' ? '' : 'is-hidden'}">
|
||||
</wr-coll-pages>
|
||||
|
||||
<wr-coll-resources .collInfo="${this.collInfo}"
|
||||
urlSearch="${this.tabData.urlSearch || ""}"
|
||||
urlSearchType="${this.tabData.urlSearchType || ""}"
|
||||
@@ -1194,7 +1213,77 @@ class WrColl extends LitElement
|
||||
|
||||
|
||||
// ===========================================================================
|
||||
class WrCuratedPages extends LitElement
|
||||
class WrPages extends LitElement
|
||||
{
|
||||
constructor() {
|
||||
super();
|
||||
this.pages = [];
|
||||
}
|
||||
|
||||
static get properties() {
|
||||
return {
|
||||
collInfo: { type: Object },
|
||||
pages: { type: Array }
|
||||
}
|
||||
}
|
||||
|
||||
updated(changedProperties) {
|
||||
if (changedProperties.has("collInfo")) {
|
||||
this.doUpdate();
|
||||
}
|
||||
}
|
||||
|
||||
async doUpdate() {
|
||||
const result = await fetch(`${this.collInfo.apiPrefix}/pages`);
|
||||
const json = await result.json();
|
||||
console.log(json);
|
||||
this.pages = json.pages || [];
|
||||
}
|
||||
|
||||
static get styles() {
|
||||
return wrapCss(css`
|
||||
.main.section {
|
||||
overflow-y: auto;
|
||||
padding: 3em;
|
||||
}
|
||||
`);
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<div class="main section">
|
||||
${this.pages.map((p) => html`
|
||||
<div class="columns">
|
||||
<div class="column is-one-fifth">
|
||||
${new Date(p.date).toLocaleString()}
|
||||
</div>
|
||||
<div class="column">
|
||||
<a @click="${this.onReplay}" data-url="${p.url}" data-ts="${getTS(p.date)}" href="#">
|
||||
<p class="is-size-6 has-text-weight-bold has-text-link">${p.title || p.url}</p>
|
||||
<p class="has-text-dark">${p.url}</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>`
|
||||
)}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
onReplay(event) {
|
||||
event.preventDefault();
|
||||
const data = {
|
||||
url: event.currentTarget.getAttribute("data-url"),
|
||||
ts: event.currentTarget.getAttribute("data-ts"),
|
||||
view: "replay"
|
||||
};
|
||||
this.dispatchEvent(new CustomEvent("coll-tab-nav", {detail: {data}}));
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ===========================================================================
|
||||
class WrCuratedLists extends LitElement
|
||||
{
|
||||
constructor() {
|
||||
super();
|
||||
@@ -2328,7 +2417,8 @@ async function main() {
|
||||
customElements.define("wr-loader", WrLoader);
|
||||
customElements.define("wr-coll", WrColl);
|
||||
customElements.define("wr-coll-resources", WrResources);
|
||||
customElements.define("wr-coll-curated", WrCuratedPages);
|
||||
customElements.define("wr-coll-pages", WrPages);
|
||||
customElements.define("wr-coll-curated", WrCuratedLists);
|
||||
customElements.define("wr-replay-page", WrReplayPage);
|
||||
customElements.define("wr-gdrive", WrGdrive);
|
||||
customElements.define("fa-icon", WrFaIcon);
|
||||
|
||||
Reference in New Issue
Block a user