3392 lines
464 KiB
JavaScript
3392 lines
464 KiB
JavaScript
|
/**
|
|||
|
* Minified by jsDelivr using Terser v5.19.2.
|
|||
|
* Original file: /npm/replaywebpage@1.8.14/ui.js
|
|||
|
*
|
|||
|
* Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
|
|||
|
*/
|
|||
|
/*! 'ui.js is part of ReplayWeb.page (https://replayweb.page) Copyright (C) 2020-2023, Webrecorder Software. Licensed under the Affero General Public License v3.' */(()=>{var __webpack_modules__={274:(e,t,i)=>{"use strict";i.d(t,{Z:()=>o});var a=i(645),r=i.n(a)()((function(e){return e[1]}));r.push([e.id,'.input::placeholder,.textarea::placeholder,.select select::placeholder{opacity:1}a:focus{color:#363636}.file-label:focus-within .file-cta{background-color:#e8e8e8;color:#363636}.button.is-primary:focus,.button.is-primary:hover,.button.is-primary:active{background-color:#459558 !important;color:white !important}.replay-bar .button{margin:0 1px}.replay-bar .button:focus{box-shadow:none !important;outline:1px dotted #4876ff;outline:-webkit-focus-ring-color auto 1px}.skip-link{border:0;clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute !important;width:1px;word-wrap:normal !important}.skip-link:focus{background-color:black;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,0.6);clip:auto !important;clip-path:none;color:white;display:block;font-family:inherit;font-size:1.3em;font-weight:bold;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}.main-scroll{flex:1;scroll-behavior:smooth;overflow-y:auto;max-height:100vh;height:100%;display:flex;flex-direction:column;overflow-x:hidden}/*! bulma.io v0.9.3 | MIT License | github.com/jgthms/bulma */.button,.input,.textarea,.select select,.file-cta,.file-name,.pagination-previous,.pagination-next,.pagination-link,.pagination-ellipsis{-moz-appearance:none;-webkit-appearance:none;align-items:center;border:1px solid transparent;border-radius:4px;box-shadow:none;display:inline-flex;font-size:1rem;height:2.5em;justify-content:flex-start;line-height:1.5;padding-bottom:calc(0.5em - 1px);padding-left:calc(0.75em - 1px);padding-right:calc(0.75em - 1px);padding-top:calc(0.5em - 1px);position:relative;vertical-align:top}.button:focus,.input:focus,.textarea:focus,.select select:focus,.file-cta:focus,.file-name:focus,.pagination-previous:focus,.pagination-next:focus,.pagination-link:focus,.pagination-ellipsis:focus,.is-focused.button,.is-focused.input,.is-focused.textarea,.select select.is-focused,.is-focused.file-cta,.is-focused.file-name,.is-focused.pagination-previous,.is-focused.pagination-next,.is-focused.pagination-link,.is-focused.pagination-ellipsis,.button:active,.input:active,.textarea:active,.select select:active,.file-cta:active,.file-name:active,.pagination-previous:active,.pagination-next:active,.pagination-link:active,.pagination-ellipsis:active,.is-active.button,.is-active.input,.is-active.textarea,.select select.is-active,.is-active.file-cta,.is-active.file-name,.is-active.pagination-previous,.is-active.pagination-next,.is-active.pagination-link,.is-active.pagination-ellipsis{outline:none}.button[disabled],.input[disabled],.textarea[disabled],.select select[disabled],.file-cta[disabled],.file-name[disabled],.pagination-previous[disabled],.pagination-next[disabled],.pagination-link[disabled],.pagination-ellipsis[disabled],fieldset[disabled] .button,fieldset[disabled] .input,fieldset[disabled] .textarea,fieldset[disabled] .select select,.select fieldset[disabled] select,fieldset[disabled] .file-cta,fieldset[disabled] .file-name,fieldset[disabled] .pagination-previous,fieldset[disabled] .pagination-next,fieldset[disabled] .pagination-link,fieldset[disabled] .pagination-ellipsis{cursor:not-allowed}.button,.file,.breadcrumb,.pagination-previous,.pagination-next,.pagination-link,.pagination-ellipsis,.tabs,.is-unselectable{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.select:not(.is-multiple):not(.is-loading)::after,.navbar-link:not(.is-arrowless)::after{border:3px solid rgba(0,0,0,0);border-radius:2px;border-right:0;border-top:0;content:" ";display:block;height:0.625em;margin-top:-0.4375em;pointer-events:none;position:absolute;top:50%;transform:rotate(-45deg);transform-origin:center;widt
|
|||
|
/**!
|
|||
|
* FlexSearch.js v0.7.31 (Bundle)
|
|||
|
* Copyright 2018-2022 Nextapps GmbH
|
|||
|
* Author: Thomas Wilkerling
|
|||
|
* Licence: Apache-2.0
|
|||
|
* https://github.com/nextapps-de/flexsearch
|
|||
|
*/
|
|||
|
function _f(self){"use strict";try{module&&(self=module)}catch(e){}var t;function u(e){return void 0===e||e}function aa(e){const t=Array(e);for(let i=0;i<e;i++)t[i]=v();return t}function v(){return Object.create(null)}function ba(e,t){return t.length-e.length}function x(e){return"string"==typeof e}function C(e){return"object"==typeof e}function D(e){return"function"==typeof e}function ca(e,t){var i=da;if(e&&(t&&(e=E(e,t)),this.H&&(e=E(e,this.H)),this.J&&1<e.length&&(e=E(e,this.J)),i||""===i)){if(e=e.split(i),this.filter){t=this.filter,i=e.length;const a=[];for(let r=0,o=0;r<i;r++){const i=e[r];i&&!t[i]&&(a[o++]=i)}e=a}return e}return e}self._factory=_f;const da=/[\p{Z}\p{S}\p{P}\p{C}]+/u,ea=/[\u0300-\u036f]/g;function fa(e,t){const i=Object.keys(e),a=i.length,r=[];let o="",n=0;for(let s,l,c=0;c<a;c++)s=i[c],(l=e[s])?(r[n++]=F(t?"(?!\\b)"+s+"(\\b|_)":s),r[n++]=l):o+=(o?"|":"")+s;return o&&(r[n++]=F(t?"(?!\\b)("+o+")(\\b|_)":"("+o+")"),r[n]=""),r}function E(e,t){for(let i=0,a=t.length;i<a&&(e=e.replace(t[i],t[i+1]));i+=2);return e}function F(e){return new RegExp(e,"g")}function ha(e){let t="",i="";for(let a,r=0,o=e.length;r<o;r++)(a=e[r])!==i&&(t+=i=a);return t}var ja={encode:ia,F:!1,G:""};function ia(e){return ca.call(this,(""+e).toLowerCase(),!1)}const ka={},G={};function la(e){I(e,"add"),I(e,"append"),I(e,"search"),I(e,"update"),I(e,"remove")}function I(e,t){e[t+"Async"]=function(){const e=this,i=arguments;var a=i[i.length-1];let r;return D(a)&&(r=a,delete i[i.length-1]),a=new Promise((function(a){setTimeout((function(){e.async=!0;const r=e[t].apply(e,i);e.async=!1,a(r)}))})),r?(a.then(r),this):a}}function ma(e,t,i,a){const r=e.length;let o,n,s=[],l=0;a&&(a=[]);for(let c=r-1;0<=c;c--){const d=e[c],h=d.length,f=v();let b=!o;for(let e=0;e<h;e++){const h=d[e],u=h.length;if(u)for(let e,d,p=0;p<u;p++)if(d=h[p],o){if(o[d]){if(!c)if(i)i--;else if(s[l++]=d,l===t)return s;(c||a)&&(f[d]=1),b=!0}if(a&&(e=(n[d]||0)+1,n[d]=e,e<r)){const t=a[e-2]||(a[e-2]=[]);t[t.length]=d}}else f[d]=1}if(a)o||(n=f);else if(!b)return[];o=f}if(a)for(let e,r,n=a.length-1;0<=n;n--){e=a[n],r=e.length;for(let a,n=0;n<r;n++)if(a=e[n],!o[a]){if(i)i--;else if(s[l++]=a,l===t)return s;o[a]=1}}return s}function na(e,t){const i=v(),a=v(),r=[];for(let t=0;t<e.length;t++)i[e[t]]=1;for(let e,o=0;o<t.length;o++){e=t[o];for(let t,o=0;o<e.length;o++)t=e[o],i[t]&&!a[t]&&(a[t]=1,r[r.length]=t)}return r}function J(e){this.l=!0!==e&&e,this.cache=v(),this.h=[]}function oa(e,t,i){C(e)&&(e=e.query);let a=this.cache.get(e);return a||(a=this.search(e,t,i),this.cache.set(e,a)),a}J.prototype.set=function(e,t){if(!this.cache[e]){var i=this.h.length;for(i===this.l?delete this.cache[this.h[i-1]]:i++,--i;0<i;i--)this.h[i]=this.h[i-1];this.h[0]=e}this.cache[e]=t},J.prototype.get=function(e){const t=this.cache[e];if(this.l&&t&&(e=this.h.indexOf(e))){const t=this.h[e-1];this.h[e-1]=this.h[e],this.h[e]=t}return t};const qa={memory:{charset:"latin:extra",D:3,B:4,m:!1},performance:{D:3,B:3,s:!1,context:{depth:2,D:1}},match:{charset:"latin:extra",G:"reverse"},score:{charset:"latin:advanced",D:20,B:3,context:{depth:3,D:9}},default:{}};function ra(e,t,i,a,r,o,n){setTimeout((function(){const s=e(i?i+"."+a:a,JSON.stringify(n));s&&s.then?s.then((function(){t.export(e,t,i,r,o+1)})):t.export(e,t,i,r,o+1)}))}function K(e,t){if(!(this instanceof K))return new K(e);var i;if(e){x(e)?e=qa[e]:(i=e.preset)&&(e=Object.assign({},i[i],e)),i=e.charset;var a=e.lang;x(i)&&(-1===i.indexOf(":")&&(i+=":default"),i=G[i]),x(a)&&(a=ka[a])}else e={};let r,o,n=e.context||{};if(this.encode=e.encode||i&&i.encode||ia,this.register=t||v(),this.D=r=e.resolution||9,this.G=t=i&&i.G||e.tokenize||"strict",this.depth="strict"===t&&n.depth,this.l=u(n.bidirectional),this.s=o=u(e.optimize),this.m=u(e.fastupdate),this.B=e.minlength||1,this.C=e.boost,this.map=o?aa(r):v(),this.A=r=n.resolution||1,this.h=o?aa(r):v(),this.F=i&&i.F||e.rtl,this.H=(t=e.matcher||a&&a.H)&&fa(t,!1),this.J=(t=e.stemmer||a&&a.J)&&fa(t,!0),i=t=e.filter||a&&a.filter){i=t,a=v();for(let e=0,t=i.length;e<t;e++)a[i[e]]=1;i=a}this.filter=i,this.cache=(t=e.cache)&&n
|
|||
|
/**
|
|||
|
* @license
|
|||
|
* Copyright 2019 Google LLC
|
|||
|
* SPDX-License-Identifier: BSD-3-Clause
|
|||
|
*/
|
|||
|
const e=window.ShadowRoot&&(void 0===window.ShadyCSS||window.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,t=Symbol(),i=new Map;class a{constructor(e,i){if(this._$cssResult$=!0,i!==t)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=e}get styleSheet(){let t=i.get(this.cssText);return e&&void 0===t&&(i.set(this.cssText,t=new CSSStyleSheet),t.replaceSync(this.cssText)),t}toString(){return this.cssText}}const r=e=>new a("string"==typeof e?e:e+"",t),o=(e,...i)=>{const r=1===e.length?e[0]:i.reduce(((t,i,a)=>t+(e=>{if(!0===e._$cssResult$)return e.cssText;if("number"==typeof e)return e;throw Error("Value passed to 'css' function must be a 'css' function result: "+e+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(i)+e[a+1]),e[0]);return new a(r,t)},n=e?e=>e:e=>e instanceof CSSStyleSheet?(e=>{let t="";for(const i of e.cssRules)t+=i.cssText;return r(t)})(e):e
|
|||
|
/**
|
|||
|
* @license
|
|||
|
* Copyright 2017 Google LLC
|
|||
|
* SPDX-License-Identifier: BSD-3-Clause
|
|||
|
*/;var s;const l=window.trustedTypes,c=l?l.emptyScript:"",d=window.reactiveElementPolyfillSupport,h={toAttribute(e,t){switch(t){case Boolean:e=e?c:null;break;case Object:case Array:e=null==e?e:JSON.stringify(e)}return e},fromAttribute(e,t){let i=e;switch(t){case Boolean:i=null!==e;break;case Number:i=null===e?null:Number(e);break;case Object:case Array:try{i=JSON.parse(e)}catch(e){i=null}}return i}},f=(e,t)=>t!==e&&(t==t||e==e),b={attribute:!0,type:String,converter:h,reflect:!1,hasChanged:f};class u extends HTMLElement{constructor(){super(),this._$Et=new Map,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Ei=null,this.o()}static addInitializer(e){var t;null!==(t=this.l)&&void 0!==t||(this.l=[]),this.l.push(e)}static get observedAttributes(){this.finalize();const e=[];return this.elementProperties.forEach(((t,i)=>{const a=this._$Eh(i,t);void 0!==a&&(this._$Eu.set(a,i),e.push(a))})),e}static createProperty(e,t=b){if(t.state&&(t.attribute=!1),this.finalize(),this.elementProperties.set(e,t),!t.noAccessor&&!this.prototype.hasOwnProperty(e)){const i="symbol"==typeof e?Symbol():"__"+e,a=this.getPropertyDescriptor(e,i,t);void 0!==a&&Object.defineProperty(this.prototype,e,a)}}static getPropertyDescriptor(e,t,i){return{get(){return this[t]},set(a){const r=this[e];this[t]=a,this.requestUpdate(e,r,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(e){return this.elementProperties.get(e)||b}static finalize(){if(this.hasOwnProperty("finalized"))return!1;this.finalized=!0;const e=Object.getPrototypeOf(this);if(e.finalize(),this.elementProperties=new Map(e.elementProperties),this._$Eu=new Map,this.hasOwnProperty("properties")){const e=this.properties,t=[...Object.getOwnPropertyNames(e),...Object.getOwnPropertySymbols(e)];for(const i of t)this.createProperty(i,e[i])}return this.elementStyles=this.finalizeStyles(this.styles),!0}static finalizeStyles(e){const t=[];if(Array.isArray(e)){const i=new Set(e.flat(1/0).reverse());for(const e of i)t.unshift(n(e))}else void 0!==e&&t.push(n(e));return t}static _$Eh(e,t){const i=t.attribute;return!1===i?void 0:"string"==typeof i?i:"string"==typeof e?e.toLowerCase():void 0}o(){var e;this._$Ep=new Promise((e=>this.enableUpdating=e)),this._$AL=new Map,this._$Em(),this.requestUpdate(),null===(e=this.constructor.l)||void 0===e||e.forEach((e=>e(this)))}addController(e){var t,i;(null!==(t=this._$Eg)&&void 0!==t?t:this._$Eg=[]).push(e),void 0!==this.renderRoot&&this.isConnected&&(null===(i=e.hostConnected)||void 0===i||i.call(e))}removeController(e){var t;null===(t=this._$Eg)||void 0===t||t.splice(this._$Eg.indexOf(e)>>>0,1)}_$Em(){this.constructor.elementProperties.forEach(((e,t)=>{this.hasOwnProperty(t)&&(this._$Et.set(t,this[t]),delete this[t])}))}createRenderRoot(){var t;const i=null!==(t=this.shadowRoot)&&void 0!==t?t:this.attachShadow(this.constructor.shadowRootOptions);return((t,i)=>{e?t.adoptedStyleSheets=i.map((e=>e instanceof CSSStyleSheet?e:e.styleSheet)):i.forEach((e=>{const i=document.createElement("style"),a=window.litNonce;void 0!==a&&i.setAttribute("nonce",a),i.textContent=e.cssText,t.appendChild(i)}))})(i,this.constructor.elementStyles),i}connectedCallback(){var e;void 0===this.renderRoot&&(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),null===(e=this._$Eg)||void 0===e||e.forEach((e=>{var t;return null===(t=e.hostConnected)||void 0===t?void 0:t.call(e)}))}enableUpdating(e){}disconnectedCallback(){var e;null===(e=this._$Eg)||void 0===e||e.forEach((e=>{var t;return null===(t=e.hostDisconnected)||void 0===t?void 0:t.call(e)}))}attributeChangedCallback(e,t,i){this._$AK(e,i)}_$ES(e,t,i=b){var a,r;const o=this.constructor._$Eh(e,i);if(void 0!==o&&!0===i.reflect){const n=(null!==(r=null===(a=i.converter)||void 0===a?void 0:a.toAttribute)&&void 0!==r?r:h.toAttribute)(t,i.type);this._$Ei=e,null==n?this.removeAttribute(o):this.setAttribute(o,n),this._$Ei=null}}_$AK(e,t){var i,a,r;const o=this.constructor,n=o._$Eu.get(e);if(void 0!==n&&this._$Ei!==n){const e=o.getPropertyOptions(n),s=e.converter,l=null!==(r=null!==(a=null===(i=s)||void 0===i?void 0:i.fromAttribute)&&void
|
|||
|
/**
|
|||
|
* @license
|
|||
|
* Copyright 2017 Google LLC
|
|||
|
* SPDX-License-Identifier: BSD-3-Clause
|
|||
|
*/var p;u.finalized=!0,u.elementProperties=new Map,u.elementStyles=[],u.shadowRootOptions={mode:"open"},null==d||d({ReactiveElement:u}),(null!==(s=globalThis.reactiveElementVersions)&&void 0!==s?s:globalThis.reactiveElementVersions=[]).push("1.1.1");const m=globalThis.trustedTypes,g=m?m.createPolicy("lit-html",{createHTML:e=>e}):void 0,v=`lit$${(Math.random()+"").slice(9)}$`,w="?"+v,x=`<${w}>`,k=document,y=(e="")=>k.createComment(e),$=e=>null===e||"object"!=typeof e&&"function"!=typeof e,_=Array.isArray,S=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,z=/-->/g,C=/>/g,A=/>|[ \n\r](?:([^\s"'>=/]+)([ \n\r]*=[ \n\r]*(?:[^ \n\r"'`<>=]|("|')|))|$)/g,D=/'/g,E=/"/g,I=/^(?:script|style|textarea)$/i,P=e=>(t,...i)=>({_$litType$:e,strings:t,values:i}),L=P(1),T=(P(2),Symbol.for("lit-noChange")),U=Symbol.for("lit-nothing"),R=new WeakMap,q=k.createTreeWalker(k,129,null,!1);class M{constructor({strings:e,_$litType$:t},i){let a;this.parts=[];let r=0,o=0;const n=e.length-1,s=this.parts,[l,c]=((e,t)=>{const i=e.length-1,a=[];let r,o=2===t?"<svg>":"",n=S;for(let t=0;t<i;t++){const i=e[t];let s,l,c=-1,d=0;for(;d<i.length&&(n.lastIndex=d,l=n.exec(i),null!==l);)d=n.lastIndex,n===S?"!--"===l[1]?n=z:void 0!==l[1]?n=C:void 0!==l[2]?(I.test(l[2])&&(r=RegExp("</"+l[2],"g")),n=A):void 0!==l[3]&&(n=A):n===A?">"===l[0]?(n=null!=r?r:S,c=-1):void 0===l[1]?c=-2:(c=n.lastIndex-l[2].length,s=l[1],n=void 0===l[3]?A:'"'===l[3]?E:D):n===E||n===D?n=A:n===z||n===C?n=S:(n=A,r=void 0);const h=n===A&&e[t+1].startsWith("/>")?" ":"";o+=n===S?i+x:c>=0?(a.push(s),i.slice(0,c)+"$lit$"+i.slice(c)+v+h):i+v+(-2===c?(a.push(void 0),t):h)}const s=o+(e[i]||"<?>")+(2===t?"</svg>":"");if(!Array.isArray(e)||!e.hasOwnProperty("raw"))throw Error("invalid template strings array");return[void 0!==g?g.createHTML(s):s,a]})(e,t);if(this.el=M.createElement(l,i),q.currentNode=this.el.content,2===t){const e=this.el.content,t=e.firstChild;t.remove(),e.append(...t.childNodes)}for(;null!==(a=q.nextNode())&&s.length<n;){if(1===a.nodeType){if(a.hasAttributes()){const e=[];for(const t of a.getAttributeNames())if(t.endsWith("$lit$")||t.startsWith(v)){const i=c[o++];if(e.push(t),void 0!==i){const e=a.getAttribute(i.toLowerCase()+"$lit$").split(v),t=/([.?@])?(.*)/.exec(i);s.push({type:1,index:r,name:t[2],strings:e,ctor:"."===t[1]?F:"?"===t[1]?W:"@"===t[1]?G:B})}else s.push({type:6,index:r})}for(const t of e)a.removeAttribute(t)}if(I.test(a.tagName)){const e=a.textContent.split(v),t=e.length-1;if(t>0){a.textContent=m?m.emptyScript:"";for(let i=0;i<t;i++)a.append(e[i],y()),q.nextNode(),s.push({type:2,index:++r});a.append(e[t],y())}}}else if(8===a.nodeType)if(a.data===w)s.push({type:2,index:r});else{let e=-1;for(;-1!==(e=a.data.indexOf(v,e+1));)s.push({type:7,index:r}),e+=v.length-1}r++}}static createElement(e,t){const i=k.createElement("template");return i.innerHTML=e,i}}function j(e,t,i=e,a){var r,o,n,s;if(t===T)return t;let l=void 0!==a?null===(r=i._$Cl)||void 0===r?void 0:r[a]:i._$Cu;const c=$(t)?void 0:t._$litDirective$;return(null==l?void 0:l.constructor)!==c&&(null===(o=null==l?void 0:l._$AO)||void 0===o||o.call(l,!1),void 0===c?l=void 0:(l=new c(e),l._$AT(e,i,a)),void 0!==a?(null!==(n=(s=i)._$Cl)&&void 0!==n?n:s._$Cl=[])[a]=l:i._$Cu=l),void 0!==l&&(t=j(e,l._$AS(e,t.values),l,a)),t}class O{constructor(e,t){this.v=[],this._$AN=void 0,this._$AD=e,this._$AM=t}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}p(e){var t;const{el:{content:i},parts:a}=this._$AD,r=(null!==(t=null==e?void 0:e.creationScope)&&void 0!==t?t:k).importNode(i,!0);q.currentNode=r;let o=q.nextNode(),n=0,s=0,l=a[0];for(;void 0!==l;){if(n===l.index){let t;2===l.type?t=new N(o,o.nextSibling,this,e):1===l.type?t=new l.ctor(o,l.name,l.strings,this,e):6===l.type&&(t=new K(o,this,e)),this.v.push(t),l=a[++s]}n!==(null==l?void 0:l.index)&&(o=q.nextNode(),n++)}return r}m(e){let t=0;for(const i of this.v)void 0!==i&&(void 0!==i.strings?(i._$AI(e,i,t),t+=i.strings.length-2):i._$AI(e[t])),t++}}class N{constructor(e,t,i,a){var r;this.type=2,this._$AH=U,this._$AN=void 0,this._$AA=e,this._$AB=t,t
|
|||
|
/**
|
|||
|
* @license
|
|||
|
* Copyright 2017 Google LLC
|
|||
|
* SPDX-License-Identifier: BSD-3-Clause
|
|||
|
*/var Z,Q;null==V||V(M,N),(null!==(p=globalThis.litHtmlVersions)&&void 0!==p?p:globalThis.litHtmlVersions=[]).push("2.1.1");class J extends u{constructor(){super(...arguments),this.renderOptions={host:this},this._$Dt=void 0}createRenderRoot(){var e,t;const i=super.createRenderRoot();return null!==(e=(t=this.renderOptions).renderBefore)&&void 0!==e||(t.renderBefore=i.firstChild),i}update(e){const t=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(e),this._$Dt=((e,t,i)=>{var a,r;const o=null!==(a=null==i?void 0:i.renderBefore)&&void 0!==a?a:t;let n=o._$litPart$;if(void 0===n){const e=null!==(r=null==i?void 0:i.renderBefore)&&void 0!==r?r:null;o._$litPart$=n=new N(t.insertBefore(y(),e),e,void 0,null!=i?i:{})}return n._$AI(e),n})(t,this.renderRoot,this.renderOptions)}connectedCallback(){var e;super.connectedCallback(),null===(e=this._$Dt)||void 0===e||e.setConnected(!0)}disconnectedCallback(){var e;super.disconnectedCallback(),null===(e=this._$Dt)||void 0===e||e.setConnected(!1)}render(){return T}}J.finalized=!0,J._$litElement$=!0,null===(Z=globalThis.litElementHydrateSupport)||void 0===Z||Z.call(globalThis,{LitElement:J});const Y=globalThis.litElementPolyfillSupport;null==Y||Y({LitElement:J}),(null!==(Q=globalThis.litElementVersions)&&void 0!==Q?Q:globalThis.litElementVersions=[]).push("3.1.1");
|
|||
|
/**
|
|||
|
* @license
|
|||
|
* Copyright 2017 Google LLC
|
|||
|
* SPDX-License-Identifier: BSD-3-Clause
|
|||
|
*/
|
|||
|
const X=e=>(...t)=>({_$litDirective$:e,values:t});class ee{constructor(e){}get _$AU(){return this._$AM._$AU}_$AT(e,t,i){this._$Ct=e,this._$AM=t,this._$Ci=i}_$AS(e,t){return this.update(e,t)}update(e,t){return this.render(...t)}}
|
|||
|
/**
|
|||
|
* @license
|
|||
|
* Copyright 2017 Google LLC
|
|||
|
* SPDX-License-Identifier: BSD-3-Clause
|
|||
|
*/class te extends ee{constructor(e){if(super(e),this.it=U,2!==e.type)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(e){if(e===U||null==e)return this.vt=void 0,this.it=e;if(e===T)return e;if("string"!=typeof e)throw Error(this.constructor.directiveName+"() called with a non-string value");if(e===this.it)return this.vt;this.it=e;const t=[e];return t.raw=t,this.vt={_$litType$:this.constructor.resultType,strings:t,values:[]}}}te.directiveName="unsafeHTML",te.resultType=1;const ie=X(te);
|
|||
|
/**
|
|||
|
* @license
|
|||
|
* Copyright 2017 Google LLC
|
|||
|
* SPDX-License-Identifier: BSD-3-Clause
|
|||
|
*/class ae extends te{}ae.directiveName="unsafeSVG",ae.resultType=2;const re=X(ae),oe=X(class extends ee{constructor(e){var t;if(super(e),1!==e.type||"style"!==e.name||(null===(t=e.strings)||void 0===t?void 0:t.length)>2)throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.")}render(e){return Object.keys(e).reduce(((t,i)=>{const a=e[i];return null==a?t:t+`${i=i.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${a};`}),"")}update(e,[t]){const{style:i}=e.element;if(void 0===this.ct){this.ct=new Set;for(const e in t)this.ct.add(e);return this.render(t)}this.ct.forEach((e=>{null==t[e]&&(this.ct.delete(e),e.includes("-")?i.removeProperty(e):i[e]="")}));for(const e in t){const a=t[e];null!=a&&(this.ct.add(e),e.includes("-")?i.setProperty(e,a):i[e]=a)}return T}});var ne=__webpack_require__(274),se=__webpack_require__(29),le=__webpack_require__.n(se);const ce=r(ne.Z);function de(e){return[ce,e]}const he=window.IS_APP||window.electron&&window.electron.IS_APP||window.matchMedia("(display-mode: standalone)").matches,fe="1.8.14";function be(e){" "==e.key&&(e.preventDefault(),e.target.click())}class ue extends J{constructor(){super(),this.size="1.1em",this.width=null,this.height=null}static get properties(){return{svg:{type:String},size:{type:String},width:{type:String},height:{type:String}}}static get styles(){return o`
|
|||
|
:host {
|
|||
|
display: inline-block;
|
|||
|
padding: 0;
|
|||
|
margin: 0;
|
|||
|
line-height: 1em;
|
|||
|
}
|
|||
|
:host svg {
|
|||
|
fill: var(--fa-icon-fill-color, currentcolor);
|
|||
|
width: var(--fa-icon-width, 19px);
|
|||
|
height: var(--fa-icon-height, 19px);
|
|||
|
}
|
|||
|
`}render(){if(!this.svg)return L``;const e={};return this.size?(e.width=this.size,e.height=this.size):(this.width&&(e.width=this.width),this.height&&(e.height=this.height)),L`<svg style="${oe(e)}">
|
|||
|
<g>${re(this.svg)}</g>
|
|||
|
</svg>`}}customElements.define("fa-icon",ue),customElements.define("wr-anim-logo",class extends ue{constructor(){super(),this.svg=le()}static get styles(){return o`
|
|||
|
#wrlogo #stop5687 {
|
|||
|
animation: animLeft 7s linear infinite;
|
|||
|
}
|
|||
|
|
|||
|
#wrlogo #stop5689 {
|
|||
|
animation: animRight 7s linear infinite;
|
|||
|
}
|
|||
|
|
|||
|
@keyframes animLeft {
|
|||
|
0% {
|
|||
|
stop-color: #4876ff;
|
|||
|
}
|
|||
|
25% {
|
|||
|
stop-color: #1b0921;
|
|||
|
}
|
|||
|
50% {
|
|||
|
stop-color: #4876ff;
|
|||
|
}
|
|||
|
75% {
|
|||
|
stop-color: #04cdff;
|
|||
|
}
|
|||
|
100% {
|
|||
|
stop-color: #4876ff;
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
@keyframes animRight {
|
|||
|
0% {
|
|||
|
stop-color: #04cdff;
|
|||
|
}
|
|||
|
25% {
|
|||
|
stop-color: #4876ff;
|
|||
|
}
|
|||
|
50% {
|
|||
|
stop-color: #1b0921;
|
|||
|
}
|
|||
|
75% {
|
|||
|
stop-color: #4876ff;
|
|||
|
}
|
|||
|
100% {
|
|||
|
stop-color: #04cdff;
|
|||
|
}
|
|||
|
}
|
|||
|
`}}),customElements.define("wr-modal",class extends J{constructor(){super(),this.title="",this.bgClass="",this.noBgClose=!1}static get properties(){return{title:{type:String},bgClass:{type:String},noBgClose:{type:Boolean}}}static get styles(){return de(o`
|
|||
|
.modal-background {
|
|||
|
background-color: rgba(10, 10, 10, 0.5);
|
|||
|
}
|
|||
|
|
|||
|
.modal-card-head {
|
|||
|
background-color: var(--background, #97a1ff);
|
|||
|
}
|
|||
|
|
|||
|
.modal-card {
|
|||
|
width: 100%;
|
|||
|
max-width: var(--modal-width, 640px);
|
|||
|
}
|
|||
|
`)}render(){return L` <div class="modal is-active">
|
|||
|
<div
|
|||
|
class="modal-background"
|
|||
|
@click="${()=>!this.noBgClose&&this.onClose()}"
|
|||
|
></div>
|
|||
|
<div class="modal-card">
|
|||
|
<header class="modal-card-head ${this.bgClass}">
|
|||
|
<p class="modal-card-title is-3">${this.title}</p>
|
|||
|
<button
|
|||
|
class="delete"
|
|||
|
aria-label="close"
|
|||
|
@click="${this.onClose}"
|
|||
|
></button>
|
|||
|
</header>
|
|||
|
<section class="modal-card-body">
|
|||
|
<slot></slot>
|
|||
|
</section>
|
|||
|
</div>
|
|||
|
</div>`}onClose(){this.dispatchEvent(new CustomEvent("modal-closed"))}});var pe,me=__webpack_require__(200),ge=__webpack_require__.n(me),ve=__webpack_require__(878),we=__webpack_require__.n(ve),xe=__webpack_require__(124),ke=__webpack_require__.n(xe);function ye(e,t){navigator.onLine||e("offline"),e("error",t)}function $e(e,t,i){navigator.serviceWorker.register(e,i).then((function(e){t("registered",e),e.waiting?t("updated",e):e.onupdatefound=function(){t("updatefound",e);var i=e.installing;i.onstatechange=function(){"installed"===i.state&&(navigator.serviceWorker.controller?t("updated",e):t("cached",e))}}})).catch((function(e){return ye(t,e)}))}function _e(){"serviceWorker"in navigator&&navigator.serviceWorker.ready.then((function(e){e.unregister()})).catch((function(e){return ye(emit,e)}))}"undefined"!=typeof window&&(pe="undefined"!=typeof Promise?new Promise((function(e){return window.addEventListener("load",e)})):{then:function(e){return window.addEventListener("load",e)}});class Se{constructor({name:e="sw.js",scope:t="./",appName:i="ReplayWeb.page",requireSubdomainIframe:a=!1}={}){this.name=e,this.scope=t,this.appName=i,this.requireSubdomainIframe=a,this.errorMsg=null}setAppName(e){this.appName=e}register(){let e,t;const i=new Promise(((i,a)=>{e=i,t=a}));this.errorMsg=this.getSWErrorMsg(),this.errorMsg&&(console.error(this.errorMsg),t(this.errorMsg));const a=e=>{console.error("Error during service worker registration:",e),this.errorMsg=this.getCrossOriginIframeMsg(),this.errorMsg||(this.errorMsg=`${this.appName} could not be loaded due to the following error:\n${e.toString()}`),t(this.errorMsg)};return function(e,t){void 0===t&&(t={});var i=t.registrationOptions;void 0===i&&(i={}),delete t.registrationOptions;var a=function(e){for(var i=[],a=arguments.length-1;a-- >0;)i[a]=arguments[a+1];t&&t[e]&&t[e].apply(t,i)};"serviceWorker"in navigator&&pe.then((function(){Boolean("localhost"===window.location.hostname||"[::1]"===window.location.hostname||window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/))?(function(e,t,i){fetch(e).then((function(a){404===a.status?(t("error",new Error("Service worker not found at "+e)),_e()):-1===a.headers.get("content-type").indexOf("javascript")?(t("error",new Error("Expected "+e+" to have javascript content-type, but received "+a.headers.get("content-type"))),_e()):$e(e,t,i)})).catch((function(e){return ye(t,e)}))}(e,a,i),navigator.serviceWorker.ready.then((function(e){a("ready",e)})).catch((function(e){return ye(a,e)}))):($e(e,a,i),navigator.serviceWorker.ready.then((function(e){a("ready",e)})).catch((function(e){return ye(a,e)})))}))}(this.scope+this.name,{registrationOptions:{scope:this.scope},registered(){console.log("Service worker is registered"),e()},error(e){a(e)}}),i}getCrossOriginIframeMsg(){return this.isCrossOriginIframe()?` Sorry, Service Workers can not be used in cross-origin iframes.\n This web archive embed is loaded from ${window.location.origin} but the top page is on a different origin.\n The embed must be loaded from the same origin or a subdomain.`:null}isCrossOriginIframe(){if(window.parent===window)return!1;try{return""===window.top.location.href}catch(e){return!0}}getSWErrorMsg(){if(navigator.serviceWorker)return this.requireSubdomainIframe&&!this.isCrossOriginIframe()?`Sorry, due to security settings, this ${this.appName} embed only be viewed within a subdomain iframe.`:null;return this.getCrossOriginIframeMsg()||(window.isSecureContext?"MozAppearance"in document.documentElement.style?"Sorry, Service Workers are disabled in Firefox in Private Mode. Please try loading this page in regular mode instead.":`Sorry, ${this.appName} won't work in this browser as Service Workers are not supported in this window.\n Please try a different browser.`:`\n Sorry, the ${this.appName} system must be loaded from an HTTPS URL (or localhost), but was loaded from: ${window.location.host}.\n Please try loading this page from an HTTPS URL`)}renderErrorReport(e,t){const i=this.errorMsg||t;return i?L`
|
|||
|
<section class="is-fullwidth">
|
|||
|
<div class="has-text-centered">
|
|||
|
<fa-icon
|
|||
|
style="margin: 1em;flex-grow: 1;"
|
|||
|
id="wrlogo"
|
|||
|
size="2.5rem"
|
|||
|
.svg=${e}
|
|||
|
aria-hidden="true"
|
|||
|
></fa-icon>
|
|||
|
</div>
|
|||
|
<div style="white-space: pre-wrap; text-align: center">${i}</div>
|
|||
|
</section>
|
|||
|
`:""}}class ze extends J{constructor(e="sw.js"){super(),this.sourceUrl=null,this.collTitle=null,this.showAbout=!1,this.showFileDropOverlay=!1,this.pageParams=new URLSearchParams,this.inited=!1,this.navMenuShown=!1,this.collPageUrl="",this.pageTitle="",this.pageReplay=!1,this.loadInfo=null,this.swName=e,this.swmanager=null,this.skipRuffle=!1,this.useRuffle=!1,this.safariKeyframes(),this.addEventListener("dragenter",(e=>{this.maybeStartFileDrop(e)})),this.addEventListener("dragover",(e=>{this.maybeStartFileDrop(e)})),this.addEventListener("dragleave",(()=>{this.showFileDropOverlay=!1})),this.addEventListener("dragend",(()=>{this.showFileDropOverlay=!1})),this.addEventListener("drop",(e=>{this.droppedFile=e.dataTransfer.files[0],this.showFileDropOverlay=!1,e.preventDefault()})),this.maybeStartFileDrop=e=>{this.sourceUrl||(this.showFileDropOverlay=!0,e.preventDefault())}}get appName(){return"ReplayWeb.page"}get homeUrl(){return window.location.pathname}static get properties(){return{inited:{type:Boolean},pageParams:{type:Object},sourceUrl:{type:String},navMenuShown:{type:Boolean},showAbout:{type:Boolean},showFileDropOverlay:{type:Boolean},collTitle:{type:String},loadInfo:{type:Object},embed:{type:String},collPageUrl:{type:String},pageTitle:{type:String},pageReplay:{type:Boolean},source:{type:String},skipRuffle:{type:Boolean},swErrorMsg:{type:Object}}}static get styles(){return de(ze.appStyles)}static get appStyles(){return o`
|
|||
|
#wrlogo {
|
|||
|
max-height: 1rem;
|
|||
|
}
|
|||
|
.navbar {
|
|||
|
height: 1.5rem;
|
|||
|
}
|
|||
|
.navbar-brand {
|
|||
|
height: 1.5rem;
|
|||
|
display: flex;
|
|||
|
align-items: center;
|
|||
|
}
|
|||
|
.wr-logo-item {
|
|||
|
padding: 0 8px 0 0;
|
|||
|
}
|
|||
|
.no-wrap {
|
|||
|
white-space: nowrap;
|
|||
|
overflow-x: hidden;
|
|||
|
text-overflow: ellipsis;
|
|||
|
}
|
|||
|
.has-allcaps {
|
|||
|
font-variant-caps: small-caps;
|
|||
|
}
|
|||
|
:host {
|
|||
|
position: fixed;
|
|||
|
left: 0px;
|
|||
|
top: 0px;
|
|||
|
bottom: 0px;
|
|||
|
right: 0px;
|
|||
|
display: flex;
|
|||
|
min-width: 0px;
|
|||
|
flex-direction: column;
|
|||
|
}
|
|||
|
wr-coll {
|
|||
|
height: 100%;
|
|||
|
}
|
|||
|
.navbar {
|
|||
|
padding: 0 0.5em;
|
|||
|
}
|
|||
|
|
|||
|
div.navbar-menu fa-icon {
|
|||
|
vertical-align: sub;
|
|||
|
}
|
|||
|
.tagline {
|
|||
|
margin-top: 1rem;
|
|||
|
}
|
|||
|
|
|||
|
.drop-file-overlay {
|
|||
|
position: relative;
|
|||
|
display: flex;
|
|||
|
align-items: center;
|
|||
|
justify-content: center;
|
|||
|
position: fixed;
|
|||
|
inset: 0;
|
|||
|
z-index: 50;
|
|||
|
font-weight: bold;
|
|||
|
font-size: 1.5rem;
|
|||
|
background: rgba(255, 255, 255, 0.5);
|
|||
|
backdrop-filter: blur(2px);
|
|||
|
}
|
|||
|
|
|||
|
.drop-file-overlay:after {
|
|||
|
pointer-events: none;
|
|||
|
content: " ";
|
|||
|
position: absolute;
|
|||
|
inset: 0;
|
|||
|
border: 5px dashed #aaa;
|
|||
|
margin: 15px;
|
|||
|
}
|
|||
|
|
|||
|
@media screen and (min-width: 840px) {
|
|||
|
.menu-only {
|
|||
|
display: none;
|
|||
|
}
|
|||
|
|
|||
|
a.arrow-button {
|
|||
|
padding-left: 4px;
|
|||
|
padding-right: 4px;
|
|||
|
}
|
|||
|
|
|||
|
.info-menu {
|
|||
|
padding: 0 1em;
|
|||
|
}
|
|||
|
|
|||
|
.logo-text {
|
|||
|
padding-left: 0px;
|
|||
|
margin-left: 6px;
|
|||
|
}
|
|||
|
|
|||
|
a.navbar-item.logo-text:hover {
|
|||
|
background-color: initial;
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
@media screen and (max-width: 840px) {
|
|||
|
.wide-only {
|
|||
|
display: none !important;
|
|||
|
}
|
|||
|
}
|
|||
|
`}get mainLogo(){return le()}renderNavBrand(){return L` <span
|
|||
|
id="home"
|
|||
|
class="logo-text has-text-weight-bold is-size-6 has-allcaps wide-only"
|
|||
|
>
|
|||
|
<span class="has-text-primary">replay</span>
|
|||
|
<span class="has-text-link">web.page</span>
|
|||
|
<span class="is-sr-only">Home</span>
|
|||
|
</span>`}renderNavBar(){return L` <a
|
|||
|
href="#skip-main-target"
|
|||
|
@click=${this.skipMenu}
|
|||
|
class="skip-link"
|
|||
|
>Skip main navigation</a
|
|||
|
>
|
|||
|
<nav class="navbar has-background-info" aria-label="main">
|
|||
|
<div class="navbar-brand">
|
|||
|
${this.embed?L`
|
|||
|
<span class="navbar-item wr-logo-item">
|
|||
|
<fa-icon
|
|||
|
id="wrlogo"
|
|||
|
size="1.0rem"
|
|||
|
.svg=${this.mainLogo}
|
|||
|
aria-hidden="true"
|
|||
|
></fa-icon>
|
|||
|
</span>
|
|||
|
`:L`
|
|||
|
<a
|
|||
|
href="${this.homeUrl}"
|
|||
|
class="navbar-item wr-logo-item"
|
|||
|
aria-labelledby="home"
|
|||
|
>
|
|||
|
<fa-icon
|
|||
|
id="wrlogo"
|
|||
|
size="1.0rem"
|
|||
|
.svg=${this.mainLogo}
|
|||
|
aria-hidden="true"
|
|||
|
></fa-icon>
|
|||
|
${this.renderNavBrand()}
|
|||
|
</a>
|
|||
|
${this.collTitle?L`
|
|||
|
<a
|
|||
|
href="${this.collPageUrl}"
|
|||
|
class="no-wrap is-size-6 has-text-black"
|
|||
|
>/ <i>${this.collTitle}</i></a
|
|||
|
>
|
|||
|
<span class="no-wrap is-size-6"
|
|||
|
> /
|
|||
|
${this.pageReplay?L`<i>${this.pageTitle}</i>`:this.pageTitle}
|
|||
|
</span>
|
|||
|
`:""}
|
|||
|
`}
|
|||
|
<a
|
|||
|
href="#"
|
|||
|
role="button"
|
|||
|
id="menu-button"
|
|||
|
@click="${this.onNavMenu}"
|
|||
|
@keyup="${be}"
|
|||
|
class="navbar-burger burger ${this.navMenuShown?"is-active":""}"
|
|||
|
aria-label="main menu"
|
|||
|
aria-haspopup="true"
|
|||
|
aria-expanded="${this.navMenuShown}"
|
|||
|
>
|
|||
|
<span aria-hidden="true"></span>
|
|||
|
<span aria-hidden="true"></span>
|
|||
|
<span aria-hidden="true"></span>
|
|||
|
</a>
|
|||
|
</div>
|
|||
|
${this.sourceUrl?L``:L` <div
|
|||
|
class="navbar-menu ${this.navMenuShown?"is-active":""}"
|
|||
|
>
|
|||
|
<div class="navbar-start">
|
|||
|
${he?L`
|
|||
|
<a
|
|||
|
role="button"
|
|||
|
href="#"
|
|||
|
class="navbar-item arrow-button"
|
|||
|
title="Go Back"
|
|||
|
@click="${()=>window.history.back()}"
|
|||
|
@keyup="${be}"
|
|||
|
>
|
|||
|
<fa-icon
|
|||
|
size="1.0rem"
|
|||
|
.svg="${we()}"
|
|||
|
aria-hidden="true"
|
|||
|
></fa-icon
|
|||
|
><span class="menu-only is-size-7"> Go Back</span>
|
|||
|
</a>
|
|||
|
<a
|
|||
|
role="button"
|
|||
|
href="#"
|
|||
|
class="navbar-item arrow-button"
|
|||
|
title="Go Forward"
|
|||
|
@click="${()=>window.history.forward()}"
|
|||
|
@keyup="${be}"
|
|||
|
>
|
|||
|
<fa-icon
|
|||
|
size="1.0rem"
|
|||
|
.svg="${ke()}"
|
|||
|
aria-hidden="true"
|
|||
|
></fa-icon
|
|||
|
><span class="menu-only is-size-7"
|
|||
|
> Go Forward</span
|
|||
|
>
|
|||
|
</a>
|
|||
|
`:""}
|
|||
|
</div>
|
|||
|
${this.embed?L``:L` <div class="navbar-end">${this.renderNavEnd()}</div>`}
|
|||
|
</div>`}
|
|||
|
</nav>
|
|||
|
<p id="skip-main-target" tabindex="-1" class="is-sr-only">Skipped</p>`}renderNavEnd(){return L` <a href="/docs" target="_blank" class="navbar-item is-size-6">
|
|||
|
<fa-icon .svg="${ge()}" aria-hidden="true"></fa-icon
|
|||
|
><span> User Docs</span>
|
|||
|
</a>
|
|||
|
<!--
|
|||
|
-- NB: the About modal is currently inaccessible to people using keyboards or screen readers.
|
|||
|
-- Should all the JS and infrastructure for accessible modals be added, or should About be a normal page?
|
|||
|
-->
|
|||
|
<a
|
|||
|
href="?terms"
|
|||
|
@click="${e=>{e.preventDefault(),this.showAbout=!0}}"
|
|||
|
class="navbar-item is-size-6"
|
|||
|
>About
|
|||
|
</a>`}renderColl(){return L` <wr-coll
|
|||
|
.loadInfo="${this.loadInfo}"
|
|||
|
sourceUrl="${this.sourceUrl}"
|
|||
|
embed="${this.embed}"
|
|||
|
appName="${this.appName}"
|
|||
|
swName="${this.swName}"
|
|||
|
.appLogo="${this.mainLogo}"
|
|||
|
@replay-favicons=${this.onFavIcons}
|
|||
|
@update-title=${this.onTitle}
|
|||
|
@coll-loaded=${this.onCollLoaded}
|
|||
|
@about-show=${()=>this.showAbout=!0}
|
|||
|
></wr-coll>`}renderHomeIndex(){return L` <wr-coll-index>
|
|||
|
${he?"":L`
|
|||
|
<p slot="header" class="tagline is-size-5 has-text-centered">
|
|||
|
Explore and Replay Interactive Archived Webpages Directly in your
|
|||
|
Browser.
|
|||
|
<i
|
|||
|
><a target="_blank" href="./docs/examples">(See Examples)</a></i
|
|||
|
>
|
|||
|
</p>
|
|||
|
`}
|
|||
|
<wr-chooser
|
|||
|
slot="header"
|
|||
|
.droppedFile=${this.droppedFile}
|
|||
|
@did-drop-file="${()=>this.droppedFile=null}"
|
|||
|
@load-start=${this.onStartLoad}
|
|||
|
></wr-chooser>
|
|||
|
</wr-coll-index>`}render(){return this.inited?this.embed&&this.swErrorMsg?this.swErrorMsg:L`
|
|||
|
${this.embed&&"full"!==this.embed?"":this.renderNavBar()}
|
|||
|
${this.sourceUrl?this.renderColl():this.renderHomeIndex()}
|
|||
|
${this.showAbout?this.renderAbout():""}
|
|||
|
${this.showFileDropOverlay?this.renderDropFileOverlay():""}
|
|||
|
`:L``}firstUpdated(){this.initRoute();let e=this.swName;const t=new URLSearchParams;let i="";this.useRuffle&&t.set("injectScripts","ruffle/ruffle.js"),this.embed&&t.set("serveIndex","1"),i=t.toString(),i.length&&(e+="?"+i),this.swmanager=new Se({name:e,appName:this.appName}),this.swmanager.register().catch((()=>this.swErrorMsg=this.swmanager.renderErrorReport(this.mainLogo))),window.addEventListener("popstate",(()=>{this.initRoute()}))}updated(e){e.has("sourceUrl")&&(this.collTitle=null)}onFavIcons(e){const t=document.querySelector("head"),i=document.querySelectorAll("link[rel*='icon']");for(const e of i)t.removeChild(e);for(const i of e.detail.icons){const e=document.createElement("link");e.rel=i.rel,e.href=i.href,t.appendChild(e)}}skipMenu(e){e.preventDefault(),this.renderRoot.querySelector("#skip-main-target").focus()}onNavMenu(e){e.preventDefault(),e.stopPropagation(),this.navMenuShown=!this.navMenuShown,this.navMenuShown&&(document.addEventListener("click",(e=>{e.preventDefault(),this.navMenuShown=!1,this.renderRoot.querySelector("#menu-button").focus()}),{once:!0}),document.addEventListener("keypress",(e=>{"Escape"==e.key&&(e.preventDefault(),this.navMenuShown=!1,this.renderRoot.querySelector("#menu-button").focus())}),{once:!0}))}initRoute(){this.inited=!0,this.pageParams=new URLSearchParams(window.location.search);let e=this.pageParams.get("state");if(e)try{if(e=JSON.parse(e),e.ids instanceof Array&&e.userId&&"open"===e.action)return this.pageParams.set("source","googledrive://"+e.ids[0]),this.pageParams.delete("state"),void(window.location.search=this.pageParams.toString())}catch(e){console.log(e)}if(this.source){this.pageParams.set("source",this.source);const e=new URL(window.location.href);e.search=this.pageParams.toString(),window.history.replaceState({},document.title,e.href)}if(this.sourceUrl=this.pageParams.get("source")||"",this.embed=this.pageParams.get("embed")||"",this.embed?this.useRuffle="1"===this.pageParams.get("ruffle"):this.useRuffle=!this.skipRuffle,this.pageParams.has("terms")&&(this.showAbout=!0),this.pageParams.has("embed")&&(this.loadInfo||(this.loadInfo={})),this.pageParams.get("config"))try{this.loadInfo.extraConfig=JSON.parse(this.pageParams.get("config"))}catch(e){console.log("invalid config: "+e)}this.pageParams.get("baseUrlSourcePrefix")&&(this.loadInfo.extraConfig=this.loadInfo.extraConfig||{},this.loadInfo.extraConfig.baseUrlSourcePrefix=this.pageParams.get("baseUrlSourcePrefix")),this.pageParams.get("basePageUrl")&&(this.loadInfo.extraConfig=this.loadInfo.extraConfig||{},this.loadInfo.extraConfig.baseUrl=this.pageParams.get("basePageUrl")),this.pageParams.get("customColl")&&(this.loadInfo.customColl=this.pageParams.get("customColl")),"1"===this.pageParams.get("noWebWorker")&&(this.loadInfo.noWebWorker=!0),"1"===this.pageParams.get("noCache")&&(this.loadInfo.noCache=!0),"1"===this.pageParams.get("hideOffscreen")&&(this.loadInfo.hideOffscreen=!0),"eager"===this.pageParams.get("loading")&&(this.loadInfo.loadEager=!0),this.pageParams.get("swName")&&(this.swName=this.pageParams.get("swName")),he&&this.sourceUrl.startsWith("file://")&&(this.loadInfo={sourceUrl:this.sourceUrl,loadUrl:this.sourceUrl.replace("file://","file2://")})}onStartLoad(e){this.pageParams.set("source",e.detail.sourceUrl);const t=new URL(window.location.href);t.search=this.pageParams.toString(),this.collPageUrl=t.toString(),e.detail.isFile?(window.history.pushState({},"",this.collPageUrl),this.sourceUrl=e.detail.sourceUrl,this.loadInfo=e.detail):window.location.search=this.pageParams.toString()}onCollLoaded(e){this.loadInfo=null,e.detail.collInfo&&(this.collTitle=e.detail.collInfo.name||e.detail.collInfo.title),e.detail.alreadyLoaded||e.detail.sourceUrl!==this.sourceUrl&&(this.pageParams.set("source",e.detail.sourceUrl),window.location.search=this.pageParams.toString())}onTitle(e){e.detail.title&&(this.pageTitle=e.detail.title,this.pageReplay=e.detail.replayTitle,document.title=(e.detail.replayTitle?"Archive of ":"")+this.pageTitle+" | "+this.appName)}safariKeyframes(){const e=document.createElement("style");docum
|
|||
|
<div class="modal is-active">
|
|||
|
<div class="modal-background" @click="${this.onAboutClose}"></div>
|
|||
|
<div class="modal-card">
|
|||
|
<header class="modal-card-head">
|
|||
|
<p class="modal-card-title">About ReplayWeb.page ${he?"App":""}</p>
|
|||
|
<button class="delete" aria-label="close" @click="${this.onAboutClose}"></button>
|
|||
|
</header>
|
|||
|
<section class="modal-card-body">
|
|||
|
<div class="container">
|
|||
|
<div class="content">
|
|||
|
<div style="display: flex">
|
|||
|
<div class="has-text-centered" style="width: 220px">
|
|||
|
<wr-anim-logo class="logo" size="48px"></wr-anim-logo>
|
|||
|
<div style="font-size: smaller; margin-bottom: 1em">${he?"App":""} v${fe}</div>
|
|||
|
</div>
|
|||
|
|
|||
|
${he?L`
|
|||
|
<p>
|
|||
|
ReplayWeb.page App is a standalone app for Mac,
|
|||
|
Windows and Linux that loads web archive files
|
|||
|
provided by the user and renders them for replay.
|
|||
|
</p>
|
|||
|
`:L` <p>
|
|||
|
<a href="https://replayweb.page" target="_blank"
|
|||
|
>ReplayWeb.page</a
|
|||
|
>
|
|||
|
is a browser-based viewer that loads web archive
|
|||
|
files provided by the user and renders them for
|
|||
|
replay in the browser.
|
|||
|
</p>`}
|
|||
|
</div>
|
|||
|
|
|||
|
<p>Full source code is available at:
|
|||
|
<a href="https://github.com/webrecorder/replayweb.page" target="_blank">https://github.com/webrecorder/replayweb.page</a>
|
|||
|
</p>
|
|||
|
|
|||
|
<p>See the <a target="_blank" href="./docs">User Docs</a> or the GitHub README for more info on how it works.</p>
|
|||
|
|
|||
|
<p>ReplayWeb.page is part of the <a href="https://webrecorder.net/" target="_blank">Webrecorder Project</a>.</p>
|
|||
|
|
|||
|
<h3>Privacy</h3>
|
|||
|
<p><b>No data is uploaded anywhere and no information is collected.</b></p>
|
|||
|
<p>All content rendered stays directly in your browser.<br/>When loading an archive from Google Drive,
|
|||
|
the site may ask for account authorization to download the specified file only.</p>
|
|||
|
|
|||
|
<h4>Disclaimer of Warranties</h4>
|
|||
|
<p>The application is provided "as is" without any guarantees.</p>
|
|||
|
<details>
|
|||
|
<summary>Legalese:</summary>
|
|||
|
<p style="font-size: 0.8rem">DISCLAIMER OF SOFTWARE WARRANTY. WEBRECORDER SOFTWARE PROVIDES THIS SOFTWARE TO YOU "AS AVAILABLE"
|
|||
|
AND WITHOUT WARRANTY OF ANY KIND, EXPRESS, IMPLIED OR OTHERWISE,
|
|||
|
INCLUDING WITHOUT LIMITATION ANY WARRANTY OF MERCHANTABILITY OR FITNESS FOR A PARTICULAR PURPOSE.
|
|||
|
</details>
|
|||
|
<div class="has-text-centered">
|
|||
|
<a class="button is-warning" href="#" @click="${this.onAboutClose}">Close</a>
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
</section>
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
</div>`}onAboutClose(){this.showAbout=!1}renderDropFileOverlay(){return L`
|
|||
|
<div class="drop-file-overlay">Drop to load web archive</div>
|
|||
|
`}}customElements.define("replay-app-main",ze);var Ce=__webpack_require__(135),Ae=__webpack_require__.n(Ce);class De extends J{constructor(){super(),this.fileDisplayName="",this.file=null,this.droppedFile=null,this.hasNativeFS=!!window.showOpenFilePicker&&!he,this.newFullImport=!1,this.noHead=!1,this.showOpenFilePickerOptions={types:[{description:"WARC, WACZ, HAR and WBN Files",accept:{"application/warc":[".warc",".gz"],"application/har":[".har"],"application/wacz":[".wacz"],"application/wbn":[".wbn"],"application/json":[".json"]}}]}}static get properties(){return{fileDisplayName:{type:String},droppedFile:{type:File},newFullImport:{type:Boolean},noHead:{type:Boolean}}}updated(e){e.has("droppedFile")&&this.droppedFile&&this.onDropFile()}onDropFile(){this.showOpenFilePickerOptions.types.map((e=>e.accept)).map(Object.values).flat(2).some((e=>this.droppedFile.name.endsWith(e)))&&(this.setFile(this.droppedFile),this.dispatchEvent(new CustomEvent("did-drop-file",{bubbles:!0,composed:!0})),this.onStartLoad())}onChooseFile(e){0!==e.currentTarget.files.length&&this.setFile(e.currentTarget.files[0])}setFile(e){this.file=e,this.fileDisplayName="file://"+(this.file.path||this.file.name)}async onChooseNativeFile(){if(!this.hasNativeFS)return;const[e]=await window.showOpenFilePicker(this.showOpenFilePickerOptions);this.fileHandle=e,this.file=await e.getFile(),this.fileDisplayName="file://"+e.name}randomId(){return Math.random().toString(36).substring(2,15)+Math.random().toString(36).substring(2,15)}onStartLoad(e){e&&e.preventDefault();const t={sourceUrl:this.fileDisplayName};return this.file&&(t.isFile=!0,this.file.path?(t.loadUrl="file2://"+this.file.path,t.noCache=!0):this.fileHandle?(t.loadUrl=this.fileDisplayName,t.extra={fileHandle:this.fileHandle},t.noCache=!1):(t.loadUrl=URL.createObjectURL(this.file),t.blob=this.file,t.noCache=!1),t.size=this.file.size,t.name=this.fileDisplayName),t.newFullImport=this.newFullImport,this.dispatchEvent(new CustomEvent("load-start",{bubbles:!0,composed:!0,detail:t})),!1}onInput(e){this.fileDisplayName=e.currentTarget.value,this.file&&this.fileDisplayName&&this.fileDisplayName.startsWith("file://")&&(this.file=null,this.fileDisplayName="")}static get styles(){return de(o`
|
|||
|
:host {
|
|||
|
min-width: 0;
|
|||
|
}
|
|||
|
.extra-padding {
|
|||
|
padding: 1.5em;
|
|||
|
}
|
|||
|
.less-padding {
|
|||
|
padding-top: 1em;
|
|||
|
padding-bottom: 1em;
|
|||
|
}
|
|||
|
div.field.has-addons {
|
|||
|
flex: auto;
|
|||
|
}
|
|||
|
.panel-heading {
|
|||
|
background-color: #cff3ff;
|
|||
|
}
|
|||
|
.message-header {
|
|||
|
background-color: #cff3ff;
|
|||
|
color: black;
|
|||
|
}
|
|||
|
.heading-size {
|
|||
|
font-size: 0.85rem;
|
|||
|
}
|
|||
|
form {
|
|||
|
flex-grow: 1;
|
|||
|
flex-shrink: 0;
|
|||
|
margin-bottom: 0;
|
|||
|
}
|
|||
|
p.control.is-expanded {
|
|||
|
width: min-content;
|
|||
|
}
|
|||
|
input.input.file-name:invalid {
|
|||
|
border: 1px dashed red;
|
|||
|
}
|
|||
|
input.input.file-name {
|
|||
|
border-width: 1px;
|
|||
|
margin-left: -1px;
|
|||
|
max-width: 100%;
|
|||
|
}
|
|||
|
@media screen and (max-width: 1023px) {
|
|||
|
.file-icon {
|
|||
|
margin-right: 0px;
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
@media screen and (max-width: 768px) {
|
|||
|
#filename {
|
|||
|
border-bottom-right-radius: 4px;
|
|||
|
border-top-right-radius: 4px;
|
|||
|
}
|
|||
|
}
|
|||
|
`)}render(){return L` <section
|
|||
|
class="section ${this.noHead?"is-paddingless":"less-padding"}"
|
|||
|
>
|
|||
|
<div class="${this.noHead?"":"panel"}">
|
|||
|
<div
|
|||
|
class="${this.noHead?"is-hidden":"panel-heading"} heading-size"
|
|||
|
>
|
|||
|
${this.newFullImport?"Import Existing":"Load"} Web Archive
|
|||
|
</div>
|
|||
|
<div
|
|||
|
class="${this.noHead?"":"panel-body extra-padding"} file has-name"
|
|||
|
>
|
|||
|
<form class="is-flex" @submit="${this.onStartLoad}">
|
|||
|
<label class="file-label">
|
|||
|
${this.hasNativeFS?"":L` <input
|
|||
|
class="file-input"
|
|||
|
@click="${e=>e.currentTarget.value=null}"
|
|||
|
@change=${this.onChooseFile}
|
|||
|
type="file"
|
|||
|
id="fileupload"
|
|||
|
name="fileupload"
|
|||
|
/>`}
|
|||
|
<span class="file-cta" @click="${this.onChooseNativeFile}">
|
|||
|
<span class="file-icon">
|
|||
|
<fa-icon
|
|||
|
size="0.9em"
|
|||
|
.svg=${Ae()}
|
|||
|
aria-hidden="true"
|
|||
|
></fa-icon>
|
|||
|
</span>
|
|||
|
<span class="file-label is-hidden-touch"> Choose File... </span>
|
|||
|
</span>
|
|||
|
</label>
|
|||
|
|
|||
|
<div class="field has-addons">
|
|||
|
<p class="control is-expanded">
|
|||
|
<input
|
|||
|
class="file-name input"
|
|||
|
type="text"
|
|||
|
name="filename"
|
|||
|
id="filename"
|
|||
|
pattern="((file|http|https|ipfs|s3)://.*.(warc|warc.gz|zip|wacz|har|wbn|json)([?#].*)?)|(googledrive://.+)|(ssb://.+)"
|
|||
|
.value="${this.fileDisplayName}"
|
|||
|
@input="${this.onInput}"
|
|||
|
autocomplete="off"
|
|||
|
placeholder="${this.newFullImport?"Click 'Choose File' to select a local archive to import":"Enter a URL or click 'Choose File' to select a WARC, WACZ, HAR or WBN archive source"}"
|
|||
|
/>
|
|||
|
</p>
|
|||
|
<div class="control">
|
|||
|
<button
|
|||
|
type="submit"
|
|||
|
class="button is-hidden-mobile is-primary"
|
|||
|
>
|
|||
|
${this.newFullImport?"Import":"Load"}
|
|||
|
</button>
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
</form>
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
</section>`}}customElements.define("wr-chooser",De);var Ee=__webpack_require__(600),Ie=__webpack_require__.n(Ee),Pe=__webpack_require__(734),Le=__webpack_require__.n(Pe),Te=__webpack_require__(921),Ue=__webpack_require__.n(Te),Re=__webpack_require__(536),qe=__webpack_require__.n(Re),Me=__webpack_require__(804),je=__webpack_require__.n(Me);class Oe extends J{constructor(){super(),this.colls=[],this.filteredColls=[],this.sortedColls=null,this.query="",this.hideHeader="1"===localStorage.getItem("index:hideHeader"),this._deleting={},this.dateName="Date Loaded",this.headerName="Loaded Archives",this.typeFilter="",this.indexParams=""}get sortKeys(){return[{key:"title",name:"Title"},{key:"sourceUrl",name:"Source"},{key:"ctime",name:this.dateName},{key:"size",name:"Total Size"}]}static get properties(){return{colls:{type:Array},query:{type:String},filteredColls:{type:Array},sortedColls:{type:Array},hideHeader:{type:Boolean},_deleting:{type:Object},dateName:{type:String},headerName:{type:String}}}firstUpdated(){this.loadColls()}updated(e){e.has("hideHeader")&&localStorage.setItem("index:hideHeader",this.hideHeader?"1":"0"),(e.has("colls")||e.has("query"))&&this.filter()}filter(){if(this.query){this.filteredColls=[];for(const e of this.colls)(e.sourceUrl.indexOf(this.query)>=0||e.filename.indexOf(this.query)>=0||e.loadUrl&&e.loadUrl.indexOf(this.query)>=0||e.title&&e.title.indexOf(this.query)>=0)&&this.filteredColls.push(e)}else this.filteredColls=this.colls}async loadColls(){const e=await fetch(`./w/api/coll-index?${this.indexParams}`);try{if(200!==e.status)throw new Error("Invalid API Response, Retry");const t=await e.json();this.colls=t.colls.map((e=>(e.title=e.title||e.filename,e))),this._deleting={},this.sortedColls=[]}catch(e){setTimeout((()=>this.loadColls()),500)}}async onDeleteColl(e){if(e.preventDefault(),e.stopPropagation(),!this.sortedColls)return;const t=Number(e.currentTarget.getAttribute("data-coll-index")),i=this.sortedColls[t];if(!i||this._deleting[i.sourceUrl])return;this._deleting[i.sourceUrl]=!0,this.requestUpdate();const a=await fetch(`./w/api/c/${i.id}`,{method:"DELETE"});if(200===a.status){const e=await a.json();this.colls=e.colls}return!1}static get styles(){return de(Oe.compStyles)}static get compStyles(){return o`
|
|||
|
:host {
|
|||
|
overflow-y: auto;
|
|||
|
min-width: 0;
|
|||
|
}
|
|||
|
.size {
|
|||
|
margin-right: 20px;
|
|||
|
}
|
|||
|
.extra-padding {
|
|||
|
padding: 2em;
|
|||
|
}
|
|||
|
.no-top-padding {
|
|||
|
padding-top: 1em;
|
|||
|
}
|
|||
|
.panel-heading {
|
|||
|
font-size: 0.85rem;
|
|||
|
}
|
|||
|
.is-loading {
|
|||
|
line-height: 1.5em;
|
|||
|
height: 1.5em;
|
|||
|
border: 0px;
|
|||
|
background-color: transparent !important;
|
|||
|
width: auto;
|
|||
|
}
|
|||
|
div.panel.is-light {
|
|||
|
margin-bottom: 2em;
|
|||
|
}
|
|||
|
|
|||
|
fa-icon {
|
|||
|
vertical-align: middle;
|
|||
|
}
|
|||
|
|
|||
|
.panel-color {
|
|||
|
background-color: rgb(210, 249, 214);
|
|||
|
}
|
|||
|
|
|||
|
.copy {
|
|||
|
color: black;
|
|||
|
margin: 0px;
|
|||
|
margin: 0;
|
|||
|
line-height: 0.4em;
|
|||
|
padding: 6px;
|
|||
|
border-radius: 10px;
|
|||
|
display: none;
|
|||
|
position: absolute;
|
|||
|
}
|
|||
|
.copy:active {
|
|||
|
background-color: lightgray;
|
|||
|
}
|
|||
|
.sort-header {
|
|||
|
padding: 0.3rem 0.3rem 0.3rem 0;
|
|||
|
display: flex;
|
|||
|
flex-direction: row;
|
|||
|
flex-flow: row wrap;
|
|||
|
}
|
|||
|
.sort-header .control {
|
|||
|
flex: auto;
|
|||
|
|
|||
|
padding-left: 0.3rem;
|
|||
|
width: initial;
|
|||
|
}
|
|||
|
wr-sorter {
|
|||
|
padding: 0.3rem;
|
|||
|
}
|
|||
|
a.button.is-small.collapse {
|
|||
|
border-radius: 6px;
|
|||
|
}
|
|||
|
.icon.is-left {
|
|||
|
margin-left: 0.5rem;
|
|||
|
}
|
|||
|
.coll-block {
|
|||
|
position: relative;
|
|||
|
}
|
|||
|
.delete-button {
|
|||
|
width: 32px;
|
|||
|
position: absolute;
|
|||
|
top: 10px;
|
|||
|
right: 10px;
|
|||
|
}
|
|||
|
#sort-select::after {
|
|||
|
display: none;
|
|||
|
}
|
|||
|
header {
|
|||
|
transform: translate(0px, 0px);
|
|||
|
transition: all 0.5s ease 0s;
|
|||
|
visibility: visible;
|
|||
|
display: flex;
|
|||
|
flex-direction: column;
|
|||
|
}
|
|||
|
header.closed {
|
|||
|
transform: translate(0, -100%);
|
|||
|
transition: all 0.5s ease 0s;
|
|||
|
visibility: visible;
|
|||
|
height: 269px;
|
|||
|
margin-top: -269px;
|
|||
|
}
|
|||
|
`}renderHeader(){return L`<h2 class="panel-heading panel-color">
|
|||
|
<span>${this.headerName}</span>
|
|||
|
</h2>`}renderSearchHeader(){return""}render(){const e=this.childElementCount>0;return L`
|
|||
|
<header class="${this.hideHeader?"closed":""}">
|
|||
|
<slot name="header"></slot>
|
|||
|
</header>
|
|||
|
<section class="section no-top-padding">
|
|||
|
<div class="sort-header is-small">
|
|||
|
${e?L`
|
|||
|
<button @click=${()=>this.hideHeader=!this.hideHeader} class="collapse button is-small">
|
|||
|
<span class="icon"><fa-icon .svg=${this.hideHeader?qe():Ue()}></span>
|
|||
|
<span>${this.hideHeader?"Show ":"Hide"} <span class="is-sr-only">Header</span></span>
|
|||
|
</button>`:""}
|
|||
|
</div>
|
|||
|
<div class="panel">
|
|||
|
${this.renderHeader()}
|
|||
|
${this.colls.length?L`
|
|||
|
<div class="panel-block sort-header is-small">
|
|||
|
${this.renderSearchHeader()}
|
|||
|
<div class="control has-icons-left has-addons">
|
|||
|
<input
|
|||
|
type="text"
|
|||
|
class="input is-small"
|
|||
|
@input="${e=>this.query=e.currentTarget.value}"
|
|||
|
.value="${this.query}"
|
|||
|
placeholder="Search by Archive Title or Source"
|
|||
|
/>
|
|||
|
<span class="icon is-left is-small">
|
|||
|
<fa-icon .svg="${je()}"></fa-icon>
|
|||
|
</span>
|
|||
|
</div>
|
|||
|
<wr-sorter
|
|||
|
id="index"
|
|||
|
sortKey="ctime"
|
|||
|
?sortDesc="${!0}"
|
|||
|
.sortKeys="${this.sortKeys}"
|
|||
|
.data="${this.filteredColls}"
|
|||
|
@sort-changed="${e=>this.sortedColls=e.detail.sortedData}"
|
|||
|
>
|
|||
|
</wr-sorter>
|
|||
|
</div>
|
|||
|
|
|||
|
<div class="coll-list">
|
|||
|
${this.sortedColls&&this.sortedColls.map(((e,t)=>L`
|
|||
|
<div class="coll-block panel-block">
|
|||
|
${this.renderCollInfo(e)}
|
|||
|
${this._deleting[e.sourceUrl]?L` <span
|
|||
|
class="button delete-button is-loading is-static"
|
|||
|
>
|
|||
|
Deleting
|
|||
|
</span>`:L`
|
|||
|
<button
|
|||
|
class="delete delete-button"
|
|||
|
aria-label="Unload Collection"
|
|||
|
title="Unload Collection"
|
|||
|
data-coll-index="${t}"
|
|||
|
@click="${this.onDeleteColl}"
|
|||
|
></button>
|
|||
|
`}
|
|||
|
</div>
|
|||
|
`))}
|
|||
|
</div>
|
|||
|
`:L`
|
|||
|
<div class="panel-block extra-padding">
|
|||
|
${null===this.sortedColls?L`<i>Loading Archives...</i>`:this.renderEmpty()}
|
|||
|
</div>
|
|||
|
`}
|
|||
|
</div>
|
|||
|
</section>
|
|||
|
`}renderCollInfo(e){return L`<wr-coll-info .coll=${e}></wr-coll-info>`}renderEmpty(){return L`<i
|
|||
|
>No Archives so far! Archives loaded in the section above will appear
|
|||
|
here.</i
|
|||
|
>`}}class Ne extends J{constructor(){super(),this.detailed=!1,this.canDelete=!1}static get properties(){return{coll:{type:Object},detailed:{type:Boolean},canDelete:{type:Boolean}}}static get styles(){return de(Ne.compStyles)}static get compStyles(){return o`
|
|||
|
.columns {
|
|||
|
width: 100%;
|
|||
|
}
|
|||
|
.column {
|
|||
|
word-break: break-word;
|
|||
|
position: relative;
|
|||
|
}
|
|||
|
|
|||
|
:host {
|
|||
|
width: 100%;
|
|||
|
height: 100%;
|
|||
|
min-width: 0px;
|
|||
|
}
|
|||
|
|
|||
|
:host(.is-list) .columns {
|
|||
|
display: flex !important;
|
|||
|
flex-direction: column;
|
|||
|
}
|
|||
|
|
|||
|
:host(.is-list) .column {
|
|||
|
width: 100% !important;
|
|||
|
}
|
|||
|
|
|||
|
.col-title:hover {
|
|||
|
}
|
|||
|
.col-title a {
|
|||
|
display: block;
|
|||
|
height: 100%;
|
|||
|
}
|
|||
|
.column:hover > .copy,
|
|||
|
.source-text:hover + .copy,
|
|||
|
.copy:hover {
|
|||
|
display: inline;
|
|||
|
}
|
|||
|
.copy {
|
|||
|
color: black;
|
|||
|
margin: 0px;
|
|||
|
margin: 0;
|
|||
|
line-height: 0.4em;
|
|||
|
padding: 6px;
|
|||
|
border-radius: 10px;
|
|||
|
display: none;
|
|||
|
position: absolute;
|
|||
|
}
|
|||
|
.copy:active {
|
|||
|
background-color: lightgray;
|
|||
|
}
|
|||
|
.minihead {
|
|||
|
font-size: 10px;
|
|||
|
font-weight: bold;
|
|||
|
}
|
|||
|
`}renderSource(e){return L`
|
|||
|
<div class="column is-4">
|
|||
|
<span class="source-text"
|
|||
|
><p class="minihead">Source</p>
|
|||
|
${e.sourceUrl&&(e.sourceUrl.startsWith("http://")||e.sourceUrl.startsWith("https://"))?L` <a href="${e.sourceUrl}">${e.sourceUrl} </a>`:L` ${e.sourceUrl} `}
|
|||
|
</span>
|
|||
|
|
|||
|
<a @click="${t=>this.onCopy(t,e.sourceUrl)}" class="copy">
|
|||
|
<fa-icon .svg="${Le()}"></fa-icon>
|
|||
|
</a>
|
|||
|
${e.sourceUrl&&e.sourceUrl.startsWith("googledrive://")?L` <p><i>(${e.filename})</i></p>`:""}
|
|||
|
</div>
|
|||
|
<div class="column is-2">
|
|||
|
<p class="minihead">Date Loaded</p>
|
|||
|
${e.ctime?new Date(e.ctime).toLocaleString():""}
|
|||
|
</div>
|
|||
|
<div class="column is-2">
|
|||
|
<p class="minihead">Total Size</p>
|
|||
|
${Ie()(Number(e.totalSize||e.size||0))}
|
|||
|
</div>
|
|||
|
`}renderSummaryView(){const e=this.coll;return L` <div class="columns">
|
|||
|
<div class="column col-title is-4">
|
|||
|
<span class="subtitle has-text-weight-bold">
|
|||
|
<a href="?source=${encodeURIComponent(e.sourceUrl)}"
|
|||
|
>${e.name||e.title||e.filename}</a
|
|||
|
>
|
|||
|
</span>
|
|||
|
</div>
|
|||
|
${this.renderSource(e)}
|
|||
|
</div>`}renderDetailed(){const e=this.coll;let{numValid:t,numInvalid:i,domain:a,certFingerprint:r,datapackageHash:o,publicKey:n,software:s}=this.coll.verify||{};t=t||0,i=i||0;const l=r?`https://crt.sh/?q=${r}`:"";return L` <div class="columns">
|
|||
|
<div class="column col-title is-4">
|
|||
|
<span class="subtitle has-text-weight-bold">
|
|||
|
${e.name||e.title||e.filename}
|
|||
|
</span>
|
|||
|
</div>
|
|||
|
${e.desc?L` <div class="column">
|
|||
|
<p class="minihead">Description</p>
|
|||
|
${e.desc}
|
|||
|
</div>`:L``}
|
|||
|
${e.description?L`<div class="column">
|
|||
|
<p class="minihead">Description</p>
|
|||
|
${e.description}
|
|||
|
</div>`:L``}
|
|||
|
<!-- Only show filename if coll.resources doesn't exist -->
|
|||
|
${e.resources?L`<div class="column">
|
|||
|
<p class="minihead">Files</p>
|
|||
|
<ol style="padding: revert">
|
|||
|
${
|
|||
|
/**
|
|||
|
* @license
|
|||
|
* Copyright 2021 Google LLC
|
|||
|
* SPDX-License-Identifier: BSD-3-Clause
|
|||
|
*/
|
|||
|
function*(e,t){if(void 0!==e){let i=0;for(const a of e)yield t(a,i++)}}(e.resources,(e=>L`<li>
|
|||
|
<a href="${e.path}">${e.name+"\n"}</a>
|
|||
|
</li>`))}
|
|||
|
</ol>
|
|||
|
</div>`:L`<div class="column">
|
|||
|
<p class="minihead">Filename</p>
|
|||
|
${e.filename}
|
|||
|
</div>`}
|
|||
|
${this.renderSource(e)}
|
|||
|
${a?L`
|
|||
|
<div class="column">
|
|||
|
<p class="minihead">Observed By</p>
|
|||
|
<p>${a}</p>
|
|||
|
${l?L`<span
|
|||
|
><a target="_blank" href="${l}"
|
|||
|
>View Certificate</a
|
|||
|
></span
|
|||
|
>`:""}
|
|||
|
</div>
|
|||
|
`:s?L`
|
|||
|
<div class="column">
|
|||
|
<p class="minihead">Created With</p>
|
|||
|
${s||"Unknown"}
|
|||
|
</div>
|
|||
|
`:""}
|
|||
|
|
|||
|
<div class="column">
|
|||
|
<p class="minihead">Validation</p>
|
|||
|
${t>0||i>0?L` <p>
|
|||
|
${t} hashes
|
|||
|
verified${i?L`, ${i} invalid`:""}
|
|||
|
</p>`:L` Not Available`}
|
|||
|
</div>
|
|||
|
|
|||
|
<div class="column">
|
|||
|
<p class="minihead">Package Hash</p>
|
|||
|
${o||"Not Available"}
|
|||
|
</div>
|
|||
|
|
|||
|
<div class="column">
|
|||
|
<p class="minihead">Observer Public Key</p>
|
|||
|
${n||"Not Available"}
|
|||
|
</div>
|
|||
|
|
|||
|
<div class="column">
|
|||
|
<p class="minihead">Loading Mode</p>
|
|||
|
${e.onDemand?"Download On-Demand":"Fully Local"}
|
|||
|
</div>
|
|||
|
<div class="column">
|
|||
|
<p class="minihead">Collection id</p>
|
|||
|
${e.coll}
|
|||
|
</div>
|
|||
|
</div>`}render(){return this.detailed?this.renderDetailed():this.renderSummaryView()}onCopy(e,t){return e.preventDefault(),e.stopPropagation(),navigator.clipboard.writeText(t),!1}onPurge(e){const t={reload:e};this.dispatchEvent(new CustomEvent("coll-purge",{detail:t}))}}function Be(e){if(!e)return"";e.length<14&&(e+="00000101000000".substr(e.length));const t=e.substring(0,4)+"-"+e.substring(4,6)+"-"+e.substring(6,8)+"T"+e.substring(8,10)+":"+e.substring(10,12)+":"+e.substring(12,14)+"-00:00";return new Date(t)}function Fe(e){let t=null;try{t=new Date(e.ts||e.date)}catch(e){}const i=t&&!isNaN(t)?He(t.toISOString()):"";return{date:t,timestamp:i}}function He(e){return e.replace(/[-:T]/g,"").slice(0,14)}function We(e,t,i){const a=new URLSearchParams;return a.set("view",e),a.set("url",t),a.set("ts",i),"#"+a.toString()}customElements.define("wr-coll-info",Ne),customElements.define("wr-coll-index",Oe);var Ge=__webpack_require__(56),Ke=__webpack_require__.n(Ge),Ve=__webpack_require__(732),Ze=__webpack_require__.n(Ve),Qe=__webpack_require__(561),Je=__webpack_require__.n(Qe),Ye=__webpack_require__(885),Xe=__webpack_require__.n(Ye),et=__webpack_require__(636),tt=__webpack_require__.n(et),it=__webpack_require__(615),at=__webpack_require__.n(it),rt=__webpack_require__(302),ot=__webpack_require__.n(rt),nt=__webpack_require__(368),st=__webpack_require__.n(nt),lt=__webpack_require__(125),ct=__webpack_require__.n(lt),dt=__webpack_require__(998),ht=__webpack_require__.n(dt),ft=__webpack_require__(164),bt=__webpack_require__.n(ft),ut=__webpack_require__(426),pt=__webpack_require__.n(ut),mt=__webpack_require__(430),gt=__webpack_require__.n(mt),vt=__webpack_require__(795),wt=__webpack_require__.n(vt),xt=__webpack_require__(529),kt=__webpack_require__.n(xt),yt=__webpack_require__(873),$t=__webpack_require__.n(yt),_t=__webpack_require__(575),St=__webpack_require__.n(_t);class zt extends J{constructor(){super(),this.collInfo=null,this.appLogo=null,this.ts=null,this.url=null,this.active=!1}get renderRoot(){return this}static get properties(){return{collInfo:{type:Object},appLogo:{type:Object},url:{type:String},ts:{type:String},active:{type:Boolean}}}static get embedStyles(){return o`
|
|||
|
rwp-embed-receipt {
|
|||
|
display: flex;
|
|||
|
flex-direction: column;
|
|||
|
}
|
|||
|
|
|||
|
.icon {
|
|||
|
vertical-align: text-top;
|
|||
|
}
|
|||
|
|
|||
|
#embed-dropdown {
|
|||
|
max-height: calc(100vh - 50px);
|
|||
|
padding-top: 0;
|
|||
|
margin-top: -0.5rem;
|
|||
|
display: block;
|
|||
|
z-index: 1;
|
|||
|
pointer-events: none;
|
|||
|
transition: all 0.3s linear;
|
|||
|
transform-origin: left top;
|
|||
|
transform: scaleY(0);
|
|||
|
transition: all 300ms cubic-bezier(0.15, 0, 0.1, 1);
|
|||
|
filter: drop-shadow(0px 8px 4px rgba(0, 0, 0, 0.15));
|
|||
|
}
|
|||
|
|
|||
|
.dropdown.is-active #embed-dropdown {
|
|||
|
transform: scaleY(1);
|
|||
|
}
|
|||
|
|
|||
|
.embed-info-container {
|
|||
|
width: 100%;
|
|||
|
display: flex !important;
|
|||
|
justify-content: center;
|
|||
|
}
|
|||
|
|
|||
|
button.embed-info {
|
|||
|
padding: 0;
|
|||
|
background-color: white;
|
|||
|
justify-content: space-between;
|
|||
|
max-width: 40rem;
|
|||
|
width: calc(100% - 1rem);
|
|||
|
height: 42px;
|
|||
|
border-color: #d1d5da;
|
|||
|
border-width: 1px;
|
|||
|
border-style: solid;
|
|||
|
border-radius: 999px;
|
|||
|
display: flex;
|
|||
|
align-items: center;
|
|||
|
text-overflow: ellipsis;
|
|||
|
filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.15));
|
|||
|
transition-duration: 50ms;
|
|||
|
transition-timing-function: ease-out;
|
|||
|
cursor: pointer;
|
|||
|
z-index: 2;
|
|||
|
}
|
|||
|
|
|||
|
button.embed-info:active {
|
|||
|
color: initial;
|
|||
|
}
|
|||
|
|
|||
|
button.embed-info:hover {
|
|||
|
filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.2));
|
|||
|
transform: scale(1.01);
|
|||
|
}
|
|||
|
|
|||
|
button.embed-info:hover:active {
|
|||
|
transform: translateY(0.25rem);
|
|||
|
}
|
|||
|
|
|||
|
.embed-info-buttontext {
|
|||
|
white-space: nowrap;
|
|||
|
overflow: hidden;
|
|||
|
text-overflow: ellipsis;
|
|||
|
flex-grow: 1;
|
|||
|
text-align: start;
|
|||
|
font-size: 13px;
|
|||
|
}
|
|||
|
|
|||
|
.embed-info-drop {
|
|||
|
font-size: 14px;
|
|||
|
padding: 1rem;
|
|||
|
padding-top: 2rem;
|
|||
|
max-width: 38rem;
|
|||
|
max-height: 42rem;
|
|||
|
width: calc(100% - 2rem);
|
|||
|
border-top-right-radius: 0px;
|
|||
|
border-top-left-radius: 0px;
|
|||
|
pointer-events: auto;
|
|||
|
overflow-y: auto;
|
|||
|
}
|
|||
|
|
|||
|
.embed-info-drop > p {
|
|||
|
font-size: 14px;
|
|||
|
color: black;
|
|||
|
}
|
|||
|
|
|||
|
.embed-info-drop > h2 {
|
|||
|
margin-bottom: 0.25rem;
|
|||
|
font-size: 16px;
|
|||
|
font-weight: bold;
|
|||
|
text-transform: none;
|
|||
|
letter-spacing: 0;
|
|||
|
color: #24292e;
|
|||
|
}
|
|||
|
|
|||
|
.embed-info-drop-statscontainer > h3 {
|
|||
|
font-size: 12px;
|
|||
|
color: #394146;
|
|||
|
}
|
|||
|
|
|||
|
.embed-info-drop-statscontainer > p {
|
|||
|
font-size: 14px;
|
|||
|
color: black;
|
|||
|
}
|
|||
|
|
|||
|
.embed-info-drop a {
|
|||
|
word-break: break-all;
|
|||
|
}
|
|||
|
|
|||
|
.embed-info-drop .show-hash {
|
|||
|
word-break: break-all;
|
|||
|
font-family: monospace;
|
|||
|
}
|
|||
|
|
|||
|
.embed-info-drop .show-key {
|
|||
|
text-overflow: ellipsis;
|
|||
|
overflow: hidden;
|
|||
|
whitespace: nowrap;
|
|||
|
font-family: monospace;
|
|||
|
}
|
|||
|
|
|||
|
.embed-globe {
|
|||
|
margin: 0.25rem;
|
|||
|
padding: 7px;
|
|||
|
background-color: #0366d6;
|
|||
|
border-radius: 9999px;
|
|||
|
color: white;
|
|||
|
border-width: 1px;
|
|||
|
border-color: #d1d5da;
|
|||
|
border-style: solid;
|
|||
|
line-height: 0.5em;
|
|||
|
}
|
|||
|
`}render(){let{numValid:e,numInvalid:t,domain:i,certFingerprint:a,datapackageHash:r,publicKey:o,software:n}=this.collInfo.verify||{};e=e||0,t=t||0;const s=this.collInfo.sourceUrl,l=a?`https://crt.sh/?q=${a}`:"",c=Be(this.ts).toLocaleString();return L`
|
|||
|
<div class="dropdown mb-4 ${this.active?"is-active":""}">
|
|||
|
<div class="dropdown-trigger embed-info-container">
|
|||
|
<button
|
|||
|
class="embed-info is-small is-rounded mt-4"
|
|||
|
aria-haspopup="true"
|
|||
|
aria-controls="embed-dropdown"
|
|||
|
@click="${this.onEmbedDrop}"
|
|||
|
>
|
|||
|
<fa-icon
|
|||
|
class="menu-logo mr-2 embed-globe"
|
|||
|
size="1rem"
|
|||
|
aria-hidden="true"
|
|||
|
.svg=${wt()}
|
|||
|
></fa-icon>
|
|||
|
<span class="embed-info-buttontext">
|
|||
|
This embed is part of a web archive. Click here to learn more.
|
|||
|
</span>
|
|||
|
<span class="icon is-small mr-4 ml-2">
|
|||
|
<fa-icon
|
|||
|
title="Toggle"
|
|||
|
.svg="${this.active?$t():kt()}"
|
|||
|
aria-hidden="true"
|
|||
|
></fa-icon>
|
|||
|
</span>
|
|||
|
</button>
|
|||
|
</div>
|
|||
|
<div
|
|||
|
class="dropdown-menu embed-info-container"
|
|||
|
id="embed-dropdown"
|
|||
|
role="menu"
|
|||
|
>
|
|||
|
<div class="dropdown-content embed-info-drop">
|
|||
|
<p class="mb-4">
|
|||
|
Even if the original page goes offline or is changed, the content
|
|||
|
below will remain unchanged as it is loaded from a web archive.
|
|||
|
</p>
|
|||
|
<hr class="dropdown-divider" />
|
|||
|
<h2 class="mt-4">Get A Copy!</h2>
|
|||
|
<p class="mt-2">
|
|||
|
After downloading, this web archive can be loaded and viewed
|
|||
|
directly in your browser via
|
|||
|
<a
|
|||
|
style="white-space: nowrap;"
|
|||
|
target="_blank"
|
|||
|
href="https://replayweb.page"
|
|||
|
>replayweb.page</a
|
|||
|
>.
|
|||
|
</p>
|
|||
|
<a
|
|||
|
href="${s}"
|
|||
|
class="button is-primary mt-4"
|
|||
|
@keyup="${be}"
|
|||
|
>
|
|||
|
<span class="icon is-small">
|
|||
|
<fa-icon
|
|||
|
size="1.0em"
|
|||
|
aria-hidden="true"
|
|||
|
.svg="${Ze()}"
|
|||
|
></fa-icon>
|
|||
|
</span>
|
|||
|
<span>Download Archive</span>
|
|||
|
</a>
|
|||
|
<hr class="dropdown-divider mt-4" />
|
|||
|
<h2 class="mt-4">Technical Information</h2>
|
|||
|
<div class="embed-info-drop-statscontainer mb-4">
|
|||
|
<h3>Original URL:</h3>
|
|||
|
<p><a target="_blank" href="${this.url}">${this.url}</a></p>
|
|||
|
<h3 class="mt-2">Archived On:</h3>
|
|||
|
<p>${c}</p>
|
|||
|
${i?L`
|
|||
|
<h3 class="mt-2">Observed By:</h3>
|
|||
|
<p>${i}</p>
|
|||
|
${l?L` <p>
|
|||
|
<a target="_blank" href="${l}"
|
|||
|
>View Certificate</a
|
|||
|
>
|
|||
|
</p>`:""}
|
|||
|
`:n?L` <h3 class="mt-2">Created With:</h3>
|
|||
|
<p>${n}</p>`:""}
|
|||
|
${!i&&o?L` <h3 class="mt-2">Observer Public Key:</h3>
|
|||
|
<p class="show-key">${o}</p>`:""}
|
|||
|
<h3 class="mt-2">Validation:</h3>
|
|||
|
${e>0||t>0?L` <p>
|
|||
|
${e} hashes
|
|||
|
verified${t?L`, ${t} invalid`:""}
|
|||
|
</p>`:L` <p>Not Available</p> `}
|
|||
|
<h3 class="mt-2">Package Hash:</h3>
|
|||
|
<p class="show-hash">${r}</p>
|
|||
|
<h3 class="mt-2">Size</h3>
|
|||
|
<p>${Ie()(Number(this.collInfo.size||0))}</p>
|
|||
|
</div>
|
|||
|
${s?L``:""}
|
|||
|
<p
|
|||
|
class="is-size-7 is-flex is-justify-content-space-between"
|
|||
|
style="margin-top: 40px"
|
|||
|
>
|
|||
|
<span>
|
|||
|
<a
|
|||
|
class="has-text-black"
|
|||
|
target="_blank"
|
|||
|
href="https://github.com/webrecorder/replayweb.page"
|
|||
|
>
|
|||
|
<fa-icon
|
|||
|
class="menu-logo mr-1"
|
|||
|
size="1.0rem"
|
|||
|
aria-hidden="true"
|
|||
|
.svg=${this.appLogo}
|
|||
|
></fa-icon>
|
|||
|
Powered by ReplayWeb.page
|
|||
|
</a>
|
|||
|
</span>
|
|||
|
<span>
|
|||
|
<a
|
|||
|
class="has-text-black"
|
|||
|
target="_blank"
|
|||
|
href="https://github.com/webrecorder/replayweb.page"
|
|||
|
>Source Code
|
|||
|
<fa-icon
|
|||
|
class="menu-logo ml-1"
|
|||
|
size="1.0rem"
|
|||
|
aria-hidden="true"
|
|||
|
.svg=${St()}
|
|||
|
></fa-icon>
|
|||
|
</a>
|
|||
|
</span>
|
|||
|
</p>
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
`}onEmbedDrop(e){e.stopPropagation(),this.active=!this.active}}customElements.define("rwp-embed-receipt",zt);var Ct="undefined"!=typeof window?window:null,At=null===Ct,Dt=At?void 0:Ct.document,Et="horizontal",It=function(){return!1},Pt=At?"calc":["","-webkit-","-moz-","-o-"].filter((function(e){var t=Dt.createElement("div");return t.style.cssText="width:"+e+"calc(9px)",!!t.style.length})).shift()+"calc",Lt=function(e){return"string"==typeof e||e instanceof String},Tt=function(e){if(Lt(e)){var t=Dt.querySelector(e);if(!t)throw new Error("Selector "+e+" did not match a DOM element");return t}return e},Ut=function(e,t,i){var a=e[t];return void 0!==a?a:i},Rt=function(e,t,i,a){if(t){if("end"===a)return 0;if("center"===a)return e/2}else if(i){if("start"===a)return 0;if("center"===a)return e/2}return e},qt=function(e,t){var i=Dt.createElement("div");return i.className="gutter gutter-"+t,i},Mt=function(e,t,i){var a={};return Lt(t)?a[e]=t:a[e]=Pt+"("+t+"% - "+i+"px)",a},jt=function(e,t){var i;return(i={})[e]=t+"px",i};const Ot=function(e,t){if(void 0===t&&(t={}),At)return{};var i,a,r,o,n,s,l=e;Array.from&&(l=Array.from(l));var c=Tt(l[0]).parentNode,d=getComputedStyle?getComputedStyle(c):null,h=d?d.flexDirection:null,f=Ut(t,"sizes")||l.map((function(){return 100/l.length})),b=Ut(t,"minSize",100),u=Array.isArray(b)?b:l.map((function(){return b})),p=Ut(t,"maxSize",1/0),m=Array.isArray(p)?p:l.map((function(){return p})),g=Ut(t,"expandToMin",!1),v=Ut(t,"gutterSize",10),w=Ut(t,"gutterAlign","center"),x=Ut(t,"snapOffset",30),k=Ut(t,"dragInterval",1),y=Ut(t,"direction",Et),$=Ut(t,"cursor",y===Et?"col-resize":"row-resize"),_=Ut(t,"gutter",qt),S=Ut(t,"elementStyle",Mt),z=Ut(t,"gutterStyle",jt);function C(e,t,a,r){var o=S(i,t,a,r);Object.keys(o).forEach((function(t){e.style[t]=o[t]}))}function A(){return s.map((function(e){return e.size}))}function D(e){return"touches"in e?e.touches[0][a]:e[a]}function E(e){var t=s[this.a],i=s[this.b],a=t.size+i.size;t.size=e/this.size*a,i.size=a-e/this.size*a,C(t.element,t.size,this._b,t.i),C(i.element,i.size,this._c,i.i)}function I(e){var i,a=s[this.a],r=s[this.b];this.dragging&&(i=D(e)-this.start+(this._b-this.dragOffset),k>1&&(i=Math.round(i/k)*k),i<=a.minSize+x+this._b?i=a.minSize+this._b:i>=this.size-(r.minSize+x+this._c)&&(i=this.size-(r.minSize+this._c)),i>=a.maxSize-x+this._b?i=a.maxSize+this._b:i<=this.size-(r.maxSize-x+this._c)&&(i=this.size-(r.maxSize+this._c)),E.call(this,i),Ut(t,"onDrag",It)(A()))}function P(){var e=s[this.a].element,t=s[this.b].element,a=e.getBoundingClientRect(),n=t.getBoundingClientRect();this.size=a[i]+n[i]+this._b+this._c,this.start=a[r],this.end=a[o]}function L(e){var t=function(e){if(!getComputedStyle)return null;var t=getComputedStyle(e);if(!t)return null;var i=e[n];return 0===i?null:i-=y===Et?parseFloat(t.paddingLeft)+parseFloat(t.paddingRight):parseFloat(t.paddingTop)+parseFloat(t.paddingBottom)}(c);if(null===t)return e;if(u.reduce((function(e,t){return e+t}),0)>t)return e;var i=0,a=[],r=e.map((function(r,o){var n=t*r/100,s=Rt(v,0===o,o===e.length-1,w),l=u[o]+s;return n<l?(i+=l-n,a.push(0),l):(a.push(n-l),n)}));return 0===i?e:r.map((function(e,r){var o=e;if(i>0&&a[r]-i>0){var n=Math.min(i,a[r]-i);i-=n,o=e-n}return o/t*100}))}function T(){var e=this,i=s[e.a].element,a=s[e.b].element;e.dragging&&Ut(t,"onDragEnd",It)(A()),e.dragging=!1,Ct.removeEventListener("mouseup",e.stop),Ct.removeEventListener("touchend",e.stop),Ct.removeEventListener("touchcancel",e.stop),Ct.removeEventListener("mousemove",e.move),Ct.removeEventListener("touchmove",e.move),e.stop=null,e.move=null,i.removeEventListener("selectstart",It),i.removeEventListener("dragstart",It),a.removeEventListener("selectstart",It),a.removeEventListener("dragstart",It),i.style.userSelect="",i.style.webkitUserSelect="",i.style.MozUserSelect="",i.style.pointerEvents="",a.style.userSelect="",a.style.webkitUserSelect="",a.style.MozUserSelect="",a.style.pointerEvents="",e.gutter.style.cursor="",e.parent.style.cursor="",Dt.body.style.cursor=""}function U(e){if(!("button"in e)||0===e.button){var i=this,a=s[i.a].element
|
|||
|
:host {
|
|||
|
display: flex;
|
|||
|
flex-direction: column;
|
|||
|
height: 100%;
|
|||
|
min-width: 0px;
|
|||
|
}
|
|||
|
|
|||
|
.icon {
|
|||
|
vertical-align: text-top;
|
|||
|
}
|
|||
|
|
|||
|
.back fa-icon {
|
|||
|
width: 1.5em;
|
|||
|
vertical-align: bottom;
|
|||
|
line-height: 0.5em;
|
|||
|
}
|
|||
|
|
|||
|
li.is-active {
|
|||
|
font-weight: bold;
|
|||
|
}
|
|||
|
|
|||
|
.tab-label {
|
|||
|
display: inline;
|
|||
|
}
|
|||
|
|
|||
|
@media screen and (max-width: ${he?o`1163px`:o`1053px`}) {
|
|||
|
.tab-label {
|
|||
|
display: none;
|
|||
|
}
|
|||
|
|
|||
|
.main.tabs span.icon {
|
|||
|
margin: 0px;
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
.main.tabs {
|
|||
|
display: flex;
|
|||
|
flex-direction: row;
|
|||
|
margin-bottom: 0px;
|
|||
|
}
|
|||
|
|
|||
|
.main.tabs ul {
|
|||
|
position: relative;
|
|||
|
}
|
|||
|
|
|||
|
.main.tabs li {
|
|||
|
line-height: 1.5;
|
|||
|
padding: 8px 0 6px 0;
|
|||
|
}
|
|||
|
|
|||
|
@media screen and (max-width: 319px) {
|
|||
|
.main.tabs li a {
|
|||
|
padding-right: 4px;
|
|||
|
padding-left: 4px;
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
.sidebar.main.tabs li a {
|
|||
|
padding-right: 6px;
|
|||
|
padding-left: 6px;
|
|||
|
}
|
|||
|
|
|||
|
#contents {
|
|||
|
height: 100%;
|
|||
|
width: 100%;
|
|||
|
display: flex;
|
|||
|
flex-direction: column;
|
|||
|
min-height: 0px;
|
|||
|
flex: auto;
|
|||
|
background-color: white;
|
|||
|
}
|
|||
|
|
|||
|
#tabContents {
|
|||
|
height: 100%;
|
|||
|
width: 100%;
|
|||
|
display: flex;
|
|||
|
flex-direction: row;
|
|||
|
min-height: 0px;
|
|||
|
flex: auto;
|
|||
|
}
|
|||
|
|
|||
|
rwp-embed-receipt {
|
|||
|
flex-direction: column;
|
|||
|
display: flex;
|
|||
|
}
|
|||
|
|
|||
|
${zt.embedStyles}
|
|||
|
|
|||
|
${Bt.replayBarStyles}
|
|||
|
`}static get replayBarStyles(){return o`
|
|||
|
.breadbar {
|
|||
|
display: flex;
|
|||
|
align-items: center;
|
|||
|
height: 35px;
|
|||
|
width: 100%;
|
|||
|
background-color: aliceblue;
|
|||
|
padding: 0.5em;
|
|||
|
}
|
|||
|
|
|||
|
.replay-bar {
|
|||
|
padding: 0.5em 0em 0.5em 0.5em;
|
|||
|
max-width: none;
|
|||
|
border-bottom: solid 0.1rem #97989a;
|
|||
|
width: 100%;
|
|||
|
background-color: white;
|
|||
|
}
|
|||
|
|
|||
|
input#url {
|
|||
|
border-radius: 4px;
|
|||
|
}
|
|||
|
|
|||
|
.favicon img {
|
|||
|
width: 20px;
|
|||
|
height: 20px;
|
|||
|
margin: 8px;
|
|||
|
/*filter: drop-shadow(1px 1px 2px grey);*/
|
|||
|
}
|
|||
|
|
|||
|
#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;
|
|||
|
}
|
|||
|
|
|||
|
.grey-disabled {
|
|||
|
--fa-icon-fill-color: lightgrey;
|
|||
|
color: lightgrey;
|
|||
|
}
|
|||
|
|
|||
|
.replay-bar .button:focus {
|
|||
|
box-shadow: none;
|
|||
|
}
|
|||
|
|
|||
|
.is-borderless {
|
|||
|
border: 0px;
|
|||
|
}
|
|||
|
|
|||
|
.narrow {
|
|||
|
padding: calc(0.5em - 1px) 0.8em;
|
|||
|
}
|
|||
|
|
|||
|
form {
|
|||
|
width: 100%;
|
|||
|
margin: 0 0 0 0.5em;
|
|||
|
}
|
|||
|
|
|||
|
.gutter.gutter-horizontal {
|
|||
|
cursor: col-resize;
|
|||
|
float: left;
|
|||
|
background-color: rgb(151, 152, 154);
|
|||
|
}
|
|||
|
|
|||
|
.gutter.gutter-horizontal:hover {
|
|||
|
cursor: col-resize;
|
|||
|
}
|
|||
|
|
|||
|
main,
|
|||
|
wr-coll-replay {
|
|||
|
width: 100%;
|
|||
|
}
|
|||
|
|
|||
|
.info-bg {
|
|||
|
background-color: whitesmoke;
|
|||
|
width: 100%;
|
|||
|
height: 100%;
|
|||
|
display: flex;
|
|||
|
overflow: auto;
|
|||
|
}
|
|||
|
|
|||
|
.is-list {
|
|||
|
margin: 1em;
|
|||
|
background-color: whitesmoke;
|
|||
|
height: fit-content;
|
|||
|
}
|
|||
|
|
|||
|
#contents.full-pages {
|
|||
|
width: 100% !important;
|
|||
|
}
|
|||
|
|
|||
|
.sidebar-nav {
|
|||
|
position: absolute;
|
|||
|
vertical-align: middle;
|
|||
|
}
|
|||
|
|
|||
|
.sidebar-nav a {
|
|||
|
display: inline-block;
|
|||
|
border-bottom: 0px;
|
|||
|
}
|
|||
|
|
|||
|
.sidebar-nav span.nav-hover {
|
|||
|
font-size: smaller;
|
|||
|
display: none;
|
|||
|
}
|
|||
|
|
|||
|
.sidebar-nav:hover span.nav-hover,
|
|||
|
.sidebar-nav:focus-within span.nav-hover {
|
|||
|
display: initial;
|
|||
|
color: rgb(72, 118, 255);
|
|||
|
}
|
|||
|
|
|||
|
.sidebar-nav fa-icon {
|
|||
|
vertical-align: bottom;
|
|||
|
}
|
|||
|
|
|||
|
.sidebar-nav:hover fa-icon {
|
|||
|
color: rgb(72, 118, 255);
|
|||
|
}
|
|||
|
|
|||
|
.sidebar-nav.left {
|
|||
|
left: 8px;
|
|||
|
}
|
|||
|
|
|||
|
.sidebar-nav.right {
|
|||
|
right: 8px;
|
|||
|
}
|
|||
|
|
|||
|
/* Since the replay sometimes programmatically receives keyboard focus,
|
|||
|
and that is visually unexpected for mouse-users, and since this won't
|
|||
|
particularly trip up keyboard users, just remove the focus style. */
|
|||
|
wr-coll-replay:focus {
|
|||
|
outline: none;
|
|||
|
}
|
|||
|
/* Some keyboard-users may see this replacement style */
|
|||
|
wr-coll-replay:focus-visible {
|
|||
|
outline: 1px solid rgb(72, 118, 255);
|
|||
|
}
|
|||
|
`}render(){if(!this.inited)return L``;const e=!!this.tabData.url,t=e&&this.showSidebar;if(!e&&this.tabData&&this.tabData.view){const e={title:this.tabLabels[this.tabData.view],replayTitle:!1};this.dispatchEvent(new CustomEvent("update-title",{bubbles:!0,composed:!0,detail:e}))}return this.collInfo&&!this.collInfo.coll?L` <wr-loader
|
|||
|
.loadInfo="${this.loadInfo}"
|
|||
|
embed="${this.embed}"
|
|||
|
swName="${this.swName}"
|
|||
|
.coll="${this.coll}"
|
|||
|
.sourceUrl="${this.sourceUrl}"
|
|||
|
@coll-loaded=${this.onCollLoaded}
|
|||
|
></wr-loader>`:this.collInfo?L`
|
|||
|
${this.renderLocationBar()} ${this.renderVerifyInfo()}
|
|||
|
<div id="tabContents">
|
|||
|
<div
|
|||
|
id="contents"
|
|||
|
class="is-light ${t?"sidebar":e?"is-hidden":"full-pages"}"
|
|||
|
role="${t?"complementary":""}"
|
|||
|
aria-label="${t?"Browse Contents":""}"
|
|||
|
>
|
|||
|
${this.renderTabHeader(t)}
|
|||
|
${t||!e?this.renderCollTabs(t):L``}
|
|||
|
</div>
|
|||
|
|
|||
|
${e&&this.isVisible?L`
|
|||
|
<wr-coll-replay
|
|||
|
role="main"
|
|||
|
tabindex="-1"
|
|||
|
.collInfo="${this.collInfo}"
|
|||
|
sourceUrl="${this.sourceUrl}"
|
|||
|
url="${this.tabData.url||""}"
|
|||
|
ts="${this.tabData.ts||""}"
|
|||
|
@coll-tab-nav="${this.onCollTabNav}"
|
|||
|
id="replay"
|
|||
|
@replay-loading="${e=>this.isLoading=e.detail.loading}"
|
|||
|
@replay-favicons="${this.onFavIcons}"
|
|||
|
>
|
|||
|
</wr-coll-replay>
|
|||
|
`:""}
|
|||
|
</div>
|
|||
|
`:L``}renderTabHeader(e){return L` <nav
|
|||
|
class="main tabs is-centered ${e?"sidebar":""}"
|
|||
|
aria-label="tabs"
|
|||
|
>
|
|||
|
<ul>
|
|||
|
${e?L` <li class="sidebar-nav left">
|
|||
|
<a
|
|||
|
role="button"
|
|||
|
href="#"
|
|||
|
@click="${this.onHideSidebar}"
|
|||
|
@keyup="${be}"
|
|||
|
class="is-marginless is-size-6 is-paddingless"
|
|||
|
>
|
|||
|
<fa-icon
|
|||
|
title="Hide"
|
|||
|
.svg="${pt()}"
|
|||
|
aria-hidden="true"
|
|||
|
></fa-icon>
|
|||
|
<span class="nav-hover" aria-hidden="true">Hide</span>
|
|||
|
<span class="is-sr-only">Hide Sidebar</span>
|
|||
|
</a>
|
|||
|
</li>`:""}
|
|||
|
${this.hasStory?L` <li
|
|||
|
class="${"story"===this.tabData.view?"is-active":""}"
|
|||
|
>
|
|||
|
<a
|
|||
|
@click="${this.onTabClick}"
|
|||
|
href="#story"
|
|||
|
class="is-size-6"
|
|||
|
aria-label="Story"
|
|||
|
aria-current="${"story"===this.tabData.view?"location":""}"
|
|||
|
>
|
|||
|
<span class="icon"
|
|||
|
><fa-icon
|
|||
|
.svg="${Ke()}"
|
|||
|
aria-hidden="true"
|
|||
|
title="Story"
|
|||
|
></fa-icon
|
|||
|
></span>
|
|||
|
<span
|
|||
|
class="tab-label ${e?"is-hidden":""}"
|
|||
|
title="Story"
|
|||
|
>Story</span
|
|||
|
>
|
|||
|
</a>
|
|||
|
</li>`:""}
|
|||
|
|
|||
|
<li class="${"pages"===this.tabData.view?"is-active":""}">
|
|||
|
<a
|
|||
|
@click="${this.onTabClick}"
|
|||
|
href="#pages"
|
|||
|
class="is-size-6"
|
|||
|
aria-label="Pages"
|
|||
|
aria-current="${"pages"===this.tabData.view?"location":""}"
|
|||
|
>
|
|||
|
<span class="icon"
|
|||
|
><fa-icon
|
|||
|
.svg="${tt()}"
|
|||
|
aria-hidden="true"
|
|||
|
title="Pages"
|
|||
|
></fa-icon
|
|||
|
></span>
|
|||
|
<span
|
|||
|
class="tab-label ${e?"is-hidden":""}"
|
|||
|
title="Pages"
|
|||
|
>Pages</span
|
|||
|
>
|
|||
|
</a>
|
|||
|
</li>
|
|||
|
|
|||
|
<li class="${"resources"===this.tabData.view?"is-active":""}">
|
|||
|
<a
|
|||
|
@click="${this.onTabClick}"
|
|||
|
href="#resources"
|
|||
|
class="is-size-6"
|
|||
|
aria-label="URLs"
|
|||
|
aria-current="${"resources"===this.tabData.view?"location":""}"
|
|||
|
>
|
|||
|
<span class="icon"
|
|||
|
><fa-icon
|
|||
|
.svg="${Xe()}"
|
|||
|
aria-hidden="true"
|
|||
|
title="URLs"
|
|||
|
></fa-icon
|
|||
|
></span>
|
|||
|
<span class="tab-label ${e?"is-hidden":""}" title="URLs"
|
|||
|
>URLs</span
|
|||
|
>
|
|||
|
</a>
|
|||
|
</li>
|
|||
|
|
|||
|
<li class="${"info"===this.tabData.view?"is-active":""}">
|
|||
|
<a
|
|||
|
@click="${this.onTabClick}"
|
|||
|
href="#info"
|
|||
|
class="is-size-6"
|
|||
|
aria-label="Archive Info"
|
|||
|
aria-current="${"info"===this.tabData.view?"location":""}"
|
|||
|
>
|
|||
|
<span class="icon"
|
|||
|
><fa-icon
|
|||
|
.svg="${at()}"
|
|||
|
aria-hidden="true"
|
|||
|
title="Archive Info"
|
|||
|
></fa-icon
|
|||
|
></span>
|
|||
|
<span
|
|||
|
class="tab-label ${e?"is-hidden":""}"
|
|||
|
title="Archive Info"
|
|||
|
>Info</span
|
|||
|
>
|
|||
|
</a>
|
|||
|
</li>
|
|||
|
|
|||
|
${e?L` <li class="sidebar-nav right">
|
|||
|
<a
|
|||
|
role="button"
|
|||
|
href="#"
|
|||
|
@click="${this.onFullPageView}"
|
|||
|
@keyup="${be}"
|
|||
|
class="is-marginless is-size-6 is-paddingless"
|
|||
|
>
|
|||
|
<span class="nav-hover" aria-hidden="true">Expand</span>
|
|||
|
<span class="is-sr-only">Expand Sidebar to Full View</span>
|
|||
|
<fa-icon
|
|||
|
title="Expand"
|
|||
|
.svg="${gt()}"
|
|||
|
aria-hidden="true"
|
|||
|
></fa-icon>
|
|||
|
</a>
|
|||
|
</li>`:""}
|
|||
|
</ul>
|
|||
|
</nav>`}renderLocationBar(){if("replayonly"===this.embed||"replay-with-info"==this.embed)return"";const e=Be(this.ts).toLocaleString(),t=!!this.tabData.url,i=t&&this.favIconUrl;return L` <a
|
|||
|
class="skip-link"
|
|||
|
href="#skip-replay-target"
|
|||
|
@click="${this.skipMenu}"
|
|||
|
>Skip replay navigation</a
|
|||
|
>
|
|||
|
<nav class="replay-bar" aria-label="replay">
|
|||
|
<div class="field has-addons">
|
|||
|
<a
|
|||
|
href="#"
|
|||
|
role="button"
|
|||
|
class="button narrow is-borderless is-hidden-touch"
|
|||
|
id="fullscreen"
|
|||
|
@click="${this.onFullscreenToggle}"
|
|||
|
@keyup="${be}"
|
|||
|
title="${this.isFullscreen?"Exit Full Screen":"Full Screen"}"
|
|||
|
aria-label="${this.isFullscreen?"Exit Fullscreen":"Fullscreen"}"
|
|||
|
>
|
|||
|
<span class="icon is-small">
|
|||
|
<fa-icon
|
|||
|
size="1.0em"
|
|||
|
class="has-text-grey"
|
|||
|
aria-hidden="true"
|
|||
|
.svg="${this.isFullscreen?ht():ct()}"
|
|||
|
></fa-icon>
|
|||
|
</span>
|
|||
|
</a>
|
|||
|
<a
|
|||
|
href="#"
|
|||
|
role="button"
|
|||
|
class="button narrow is-borderless is-hidden-mobile"
|
|||
|
@click="${this.onGoBack}"
|
|||
|
@keyup="${be}"
|
|||
|
title="Back"
|
|||
|
aria-label="Back"
|
|||
|
>
|
|||
|
<span class="icon is-small">
|
|||
|
<fa-icon
|
|||
|
size="1.0em"
|
|||
|
class="has-text-grey"
|
|||
|
aria-hidden="true"
|
|||
|
.svg="${we()}"
|
|||
|
></fa-icon>
|
|||
|
</span>
|
|||
|
</a>
|
|||
|
<a
|
|||
|
href="#"
|
|||
|
role="button"
|
|||
|
class="button narrow is-borderless is-hidden-mobile"
|
|||
|
@click="${this.onGoForward}"
|
|||
|
@keyup="${be}"
|
|||
|
title="Forward"
|
|||
|
aria-label="Forward"
|
|||
|
>
|
|||
|
<span class="icon is-small">
|
|||
|
<fa-icon
|
|||
|
size="1.0em"
|
|||
|
class="has-text-grey"
|
|||
|
aria-hidden="true"
|
|||
|
.svg="${ke()}"
|
|||
|
></fa-icon>
|
|||
|
</span>
|
|||
|
</a>
|
|||
|
<a
|
|||
|
href="#"
|
|||
|
role="button"
|
|||
|
class="button narrow is-borderless ${this.isLoading?"is-loading":"is-hidden-mobile"}"
|
|||
|
id="refresh"
|
|||
|
@click="${this.onRefresh}"
|
|||
|
@keyup="${be}"
|
|||
|
title="Reload"
|
|||
|
aria-label="Reload"
|
|||
|
>
|
|||
|
<span class="icon is-small">
|
|||
|
${this.isLoading?"":L`
|
|||
|
<fa-icon
|
|||
|
size="1.0em"
|
|||
|
class="has-text-grey"
|
|||
|
aria-hidden="true"
|
|||
|
.svg="${st()}"
|
|||
|
></fa-icon>
|
|||
|
`}
|
|||
|
</span>
|
|||
|
</a>
|
|||
|
${this.browsable?L` <a
|
|||
|
href="#"
|
|||
|
role="button"
|
|||
|
class="button narrow is-borderless is-hidden-mobile ${t?"":"grey-disabled"}"
|
|||
|
@click="${this.onShowPages}"
|
|||
|
@keyup="${be}"
|
|||
|
?disabled="${!t}"
|
|||
|
title="Browse Contents"
|
|||
|
aria-label="Browse Contents"
|
|||
|
aria-controls="contents"
|
|||
|
>
|
|||
|
<span class="icon is-small">
|
|||
|
<fa-icon
|
|||
|
size="1.0em"
|
|||
|
class="has-text-grey"
|
|||
|
aria-hidden="true"
|
|||
|
.svg="${Je()}"
|
|||
|
></fa-icon>
|
|||
|
</span>
|
|||
|
</a>`:""}
|
|||
|
${this.renderExtraToolbar(!1)}
|
|||
|
<form @submit="${this.onSubmit}">
|
|||
|
<div
|
|||
|
class="control is-expanded ${i?"has-icons-left":""}"
|
|||
|
>
|
|||
|
<input
|
|||
|
id="url"
|
|||
|
class="input"
|
|||
|
type="text"
|
|||
|
@keydown="${this.onKeyDown}"
|
|||
|
@blur="${this.onLostFocus}"
|
|||
|
.value="${this.url}"
|
|||
|
placeholder="Enter text to search or a URL to replay"
|
|||
|
/>
|
|||
|
${t?L`<p id="datetime" class="control is-hidden-mobile">
|
|||
|
${e}
|
|||
|
</p>`:L``}
|
|||
|
${i?L` <span class="favicon icon is-small is-left">
|
|||
|
<img src="${this.favIconUrl}" />
|
|||
|
</span>`:L``}
|
|||
|
</div>
|
|||
|
</form>
|
|||
|
|
|||
|
<div
|
|||
|
class="dropdown is-right ${this.menuActive?"is-active":""}"
|
|||
|
@click="${()=>this.menuActive=!1}"
|
|||
|
>
|
|||
|
<div class="dropdown-trigger">
|
|||
|
<button
|
|||
|
class="button is-borderless"
|
|||
|
aria-haspopup="true"
|
|||
|
aria-controls="menu-dropdown"
|
|||
|
aria-expanded="${this.menuActive}"
|
|||
|
@click="${this.onMenu}"
|
|||
|
aria-label="more replay controls"
|
|||
|
>
|
|||
|
<span class="icon is-small">
|
|||
|
<fa-icon
|
|||
|
size="1.0em"
|
|||
|
class="has-text-grey"
|
|||
|
aria-hidden="true"
|
|||
|
.svg="${bt()}"
|
|||
|
></fa-icon>
|
|||
|
</span>
|
|||
|
</button>
|
|||
|
</div>
|
|||
|
<div class="dropdown-menu" id="menu-dropdown">
|
|||
|
<div class="dropdown-content">
|
|||
|
<a
|
|||
|
href="#"
|
|||
|
role="button"
|
|||
|
class="dropdown-item is-hidden-desktop"
|
|||
|
@click="${this.onFullscreenToggle}"
|
|||
|
@keyup="${be}"
|
|||
|
>
|
|||
|
<span class="icon is-small">
|
|||
|
<fa-icon
|
|||
|
size="1.0em"
|
|||
|
class="has-text-grey"
|
|||
|
aria-hidden="true"
|
|||
|
.svg="${this.isFullscreen?ht():ct()}"
|
|||
|
></fa-icon>
|
|||
|
</span>
|
|||
|
<span>Full Screen</span>
|
|||
|
</a>
|
|||
|
<a
|
|||
|
href="#"
|
|||
|
role="button"
|
|||
|
class="dropdown-item is-hidden-tablet"
|
|||
|
@click="${this.onGoBack}"
|
|||
|
@keyup="${be}"
|
|||
|
>
|
|||
|
<span class="icon is-small">
|
|||
|
<fa-icon
|
|||
|
size="1.0em"
|
|||
|
class="has-text-grey"
|
|||
|
aria-hidden="true"
|
|||
|
.svg="${we()}"
|
|||
|
></fa-icon>
|
|||
|
</span>
|
|||
|
<span>Back</span>
|
|||
|
</a>
|
|||
|
<a
|
|||
|
href="#"
|
|||
|
role="button"
|
|||
|
class="dropdown-item is-hidden-tablet"
|
|||
|
@click="${this.onGoForward}"
|
|||
|
@keyup="${be}"
|
|||
|
>
|
|||
|
<span class="icon is-small">
|
|||
|
<fa-icon
|
|||
|
size="1.0em"
|
|||
|
class="has-text-grey"
|
|||
|
aria-hidden="true"
|
|||
|
.svg="${ke()}"
|
|||
|
></fa-icon>
|
|||
|
</span>
|
|||
|
<span>Forward</span>
|
|||
|
</a>
|
|||
|
<a
|
|||
|
href="#"
|
|||
|
role="button"
|
|||
|
class="dropdown-item is-hidden-tablet"
|
|||
|
@click="${this.onRefresh}"
|
|||
|
@keyup="${be}"
|
|||
|
>
|
|||
|
<span class="icon is-small">
|
|||
|
<fa-icon
|
|||
|
size="1.0em"
|
|||
|
class="has-text-grey"
|
|||
|
aria-hidden="true"
|
|||
|
.svg="${st()}"
|
|||
|
></fa-icon>
|
|||
|
</span>
|
|||
|
<span>Reload</span>
|
|||
|
</a>
|
|||
|
${this.browsable?L` <a
|
|||
|
href="#"
|
|||
|
role="button"
|
|||
|
class="dropdown-item is-hidden-tablet ${t?"":"grey-disabled"}"
|
|||
|
@click="${this.onShowPages}"
|
|||
|
@keyup="${be}"
|
|||
|
>
|
|||
|
<span class="icon is-small">
|
|||
|
<fa-icon
|
|||
|
size="1.0em"
|
|||
|
class="has-text-grey"
|
|||
|
aria-hidden="true"
|
|||
|
.svg="${Je()}"
|
|||
|
></fa-icon>
|
|||
|
</span>
|
|||
|
<span>Browse Contents</span>
|
|||
|
</a>`:""}
|
|||
|
${this.renderExtraToolbar(!0)}
|
|||
|
${this.clearable?L` <hr class="dropdown-divider is-hidden-desktop" />
|
|||
|
<a
|
|||
|
href="#"
|
|||
|
role="button"
|
|||
|
class="dropdown-item"
|
|||
|
@click="${this.onPurgeCache}"
|
|||
|
@keyup="${be}"
|
|||
|
>
|
|||
|
<span class="icon is-small">
|
|||
|
<fa-icon
|
|||
|
size="1.0em"
|
|||
|
class="has-text-grey"
|
|||
|
aria-hidden="true"
|
|||
|
.svg="${ot()}"
|
|||
|
></fa-icon>
|
|||
|
</span>
|
|||
|
<span>Purge Cache + Full Reload</span>
|
|||
|
</a>`:L``}
|
|||
|
${!this.editable&&this.sourceUrl.startsWith("http://")||this.sourceUrl.startsWith("https://")?L` <hr class="dropdown-divider" />
|
|||
|
<a
|
|||
|
href="${this.sourceUrl}"
|
|||
|
role="button"
|
|||
|
class="dropdown-item"
|
|||
|
@keyup="${be}"
|
|||
|
>
|
|||
|
<span class="icon is-small">
|
|||
|
<fa-icon
|
|||
|
size="1.0em"
|
|||
|
class="has-text-grey"
|
|||
|
aria-hidden="true"
|
|||
|
.svg="${Ze()}"
|
|||
|
></fa-icon>
|
|||
|
</span>
|
|||
|
<span>Download Archive</span>
|
|||
|
</a>`:L``}
|
|||
|
${e?L` <hr class="dropdown-divider is-hidden-desktop" />
|
|||
|
<div class="dropdown-item info is-hidden-desktop">
|
|||
|
<span class="menu-head">Capture Date</span>${e}
|
|||
|
</div>`:""}
|
|||
|
<hr class="dropdown-divider" />
|
|||
|
<a
|
|||
|
href="#"
|
|||
|
role="button"
|
|||
|
class="dropdown-item"
|
|||
|
@click="${this.onAbout}"
|
|||
|
>
|
|||
|
<fa-icon
|
|||
|
class="menu-logo"
|
|||
|
size="1.0rem"
|
|||
|
aria-hidden="true"
|
|||
|
.svg=${this.appLogo}
|
|||
|
></fa-icon>
|
|||
|
<span> About ${this.appName}</span>
|
|||
|
<span class="menu-version">(${this.appVersion})</span>
|
|||
|
</a>
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
</nav>
|
|||
|
<p id="skip-replay-target" tabindex="-1" class="is-sr-only">Skipped</p>`}renderVerifyInfo(){return"replay-with-info"!==this.embed?"":L`<rwp-embed-receipt
|
|||
|
.collInfo=${this.collInfo}
|
|||
|
url=${this.url}
|
|||
|
ts=${this.ts}
|
|||
|
.appLogo=${this.appLogo}
|
|||
|
>
|
|||
|
</rwp-embed-receipt>`}dragStart(){const e=this.renderRoot.querySelector("wr-coll-replay");e&&e.setDisablePointer(!0)}dragEnd(){const e=this.renderRoot.querySelector("wr-coll-replay");e&&e.setDisablePointer(!1)}renderCollInfo(){return L` <div class="info-bg">
|
|||
|
<wr-coll-info
|
|||
|
class="is-list"
|
|||
|
.coll="${this.collInfo}"
|
|||
|
?detailed="${!0}"
|
|||
|
?canDelete="${!this.embed}"
|
|||
|
@coll-purge="${this.onPurgeCache}"
|
|||
|
></wr-coll-info>
|
|||
|
</div>`}renderExtraToolbar(){return""}renderCollTabs(e){const t=this.hasStory&&"story"===this.tabData.view,i="pages"===this.tabData.view,a="resources"===this.tabData.view,r="info"===this.tabData.view;return L`
|
|||
|
${r?this.renderCollInfo():L``}
|
|||
|
${t?L` <wr-coll-story
|
|||
|
.collInfo="${this.collInfo}"
|
|||
|
.active="${t}"
|
|||
|
currList="${this.tabData.currList||0}"
|
|||
|
@coll-tab-nav="${this.onCollTabNav}"
|
|||
|
id="story"
|
|||
|
.isSidebar="${e}"
|
|||
|
class="${t?"":"is-hidden"} ${e?"sidebar":""}"
|
|||
|
role="${e?"":"main"}"
|
|||
|
>
|
|||
|
</wr-coll-story>`:""}
|
|||
|
${a?L` <wr-coll-resources
|
|||
|
.collInfo="${this.collInfo}"
|
|||
|
.active="${a}"
|
|||
|
query="${this.tabData.query||""}"
|
|||
|
urlSearchType="${this.tabData.urlSearchType||""}"
|
|||
|
.currMime="${this.tabData.currMime||""}"
|
|||
|
@coll-tab-nav="${this.onCollTabNav}"
|
|||
|
id="resources"
|
|||
|
.isSidebar="${e}"
|
|||
|
class="is-paddingless ${a?"":"is-hidden"} ${e?"sidebar":""}"
|
|||
|
role="${e?"":"main"}"
|
|||
|
>
|
|||
|
</wr-coll-resources>`:""}
|
|||
|
${i?L` <wr-page-view
|
|||
|
.collInfo="${this.collInfo}"
|
|||
|
.active="${i}"
|
|||
|
.editable="${this.editable}"
|
|||
|
.isSidebar="${e}"
|
|||
|
currList="${this.tabData.currList||0}"
|
|||
|
query="${this.tabData.query||""}"
|
|||
|
.url="${this.tabData.url||""}"
|
|||
|
.ts="${this.tabData.ts||""}"
|
|||
|
@coll-tab-nav="${this.onCollTabNav}"
|
|||
|
id="pages"
|
|||
|
@coll-update="${this.onCollUpdate}"
|
|||
|
class="${i?"":"is-hidden"} ${e?"sidebar":""}"
|
|||
|
role="${e?"":"main"}"
|
|||
|
>
|
|||
|
</wr-page-view>`:""}
|
|||
|
`}skipMenu(e){e.preventDefault(),this.renderRoot.querySelector("#skip-replay-target").focus()}onKeyDown(e){"Esc"!==e.key&&"Escape"!==e.key||(e.preventDefault(),e.currentTarget.value=this.url)}onMenu(e){e.stopPropagation(),this.menuActive=!this.menuActive,this.menuActive&&document.addEventListener("click",(()=>{this.menuActive=!1}),{once:!0})}onFullscreenToggle(e){e.preventDefault(),this.menuActive=!1,this.isFullscreen?document.exitFullscreen():this.requestFullscreen()}onGoBack(e){e.preventDefault(),this.menuActive=!1,window.history.back()}onGoForward(e){e.preventDefault(),this.menuActive=!1,window.history.forward()}onShowPages(e){e.preventDefault(),this.showSidebar||document.documentElement.clientWidth>=769?this.showSidebar=!this.showSidebar:(this.showSidebar=!1,this.updateTabData({url:"",ts:""}))}onFullPageView(e){e.preventDefault(),this.updateTabData({url:"",ts:""})}onHideSidebar(e){e.preventDefault(),this.showSidebar=!1}async onFavIcons(e){for(const t of e.detail.icons){const e=await fetch(t.href);if(200===e.status){const i=e.headers.get("Content-Type");if(i&&!i.startsWith("text/"))return void(this.favIconUrl=t.href)}}this.favIconUrl=""}onPurgeCache(e){e.preventDefault();const t=!e.detail||void 0===e.detail.reload||e.detail.reload;this.deleteFully(t)}async deleteFully(e=!1){const t=this.collInfo.apiPrefix+(e?"?reload=1":""),i=await fetch(t,{method:"DELETE"});200!==i.status&&console.warn("purge failed: "+i.status),e||this.embed?window.location.reload():window.location.search=""}onSubmit(e){e.preventDefault();const t=this.renderRoot.querySelector("input");return t.value?this.navigateTo(t.value):t.value=this.url,!1}onLostFocus(e){e.currentTarget.value||(e.currentTarget.value=this.url)}navigateTo(e){let t;if(e.startsWith("http://")||e.startsWith("https://")){if(t={url:e},e===this.tabData.url){const e=this.renderRoot.querySelector("wr-coll-replay");return void(e&&e.refresh())}}else t=e.startsWith(Nt)?this._stringToParams(e):{query:e,view:"pages"};this.updateTabData(t)}_stringToParams(e){const t=new URLSearchParams(e.slice(9)),i={url:"",ts:""};for(const e of["query","view","currList","currMime","urlSearchType"])t.has(e)&&(i[e]=t.get(e));return i}_paramsToString(e){const t=new URLSearchParams;for(const i of["query","view","currList","currMime","urlSearchType"])i in e&&t.set(i,e[i]);return t.toString()}onRefresh(e,t=!1){if(e&&e.preventDefault(),this.menuActive=!1,this.tabData.url){const e=this.renderRoot.querySelector("wr-coll-replay");e&&e.refresh()}else t||window.location.reload()}onAbout(){this.dispatchEvent(new CustomEvent("about-show"))}}customElements.define("wr-coll",Bt);let Ft={baseUrl:null,breaks:!1,extensions:null,gfm:!0,headerIds:!0,headerPrefix:"",highlight:null,langPrefix:"language-",mangle:!0,pedantic:!1,renderer:null,sanitize:!1,sanitizer:null,silent:!1,smartLists:!1,smartypants:!1,tokenizer:null,walkTokens:null,xhtml:!1};const Ht=/[&<>"']/,Wt=/[&<>"']/g,Gt=/[<>"']|&(?!#?\w+;)/,Kt=/[<>"']|&(?!#?\w+;)/g,Vt={"&":"&","<":"<",">":">",'"':""","'":"'"},Zt=e=>Vt[e];function Qt(e,t){if(t){if(Ht.test(e))return e.replace(Wt,Zt)}else if(Gt.test(e))return e.replace(Kt,Zt);return e}const Jt=/&(#(?:\d+)|(?:#x[0-9A-Fa-f]+)|(?:\w+));?/gi;function Yt(e){return e.replace(Jt,((e,t)=>"colon"===(t=t.toLowerCase())?":":"#"===t.charAt(0)?"x"===t.charAt(1)?String.fromCharCode(parseInt(t.substring(2),16)):String.fromCharCode(+t.substring(1)):""))}const Xt=/(^|[^\[])\^/g;function ei(e,t){e=e.source||e,t=t||"";const i={replace:(t,a)=>(a=(a=a.source||a).replace(Xt,"$1"),e=e.replace(t,a),i),getRegex:()=>new RegExp(e,t)};return i}const ti=/[^\w:]/g,ii=/^$|^[a-z][a-z0-9+.-]*:|^[?#]/i;function ai(e,t,i){if(e){let t;try{t=decodeURIComponent(Yt(i)).replace(ti,"").toLowerCase()}catch(e){return null}if(0===t.indexOf("javascript:")||0===t.indexOf("vbscript:")||0===t.indexOf("data:"))return null}t&&!ii.test(i)&&(i=function(e,t){ri[" "+e]||(oi.test(e)?ri[" "+e]=e+"/":ri[" "+e]=hi(e,"/",!0));const i=-1===(e=ri[" "+e]).indexOf(":");return"//"===t.substring(0,2)?i?t:e.replace(ni,"$1")+t:"/"===t.charAt(0)?i?t:e.replace(si,"$1")+t
|
|||
|
:host {
|
|||
|
width: 100%;
|
|||
|
height: 100%;
|
|||
|
display: flex;
|
|||
|
flex-direction: column;
|
|||
|
min-width: 0px;
|
|||
|
|
|||
|
justify-content: flex-start;
|
|||
|
align-items: center;
|
|||
|
}
|
|||
|
|
|||
|
:host(.sidebar) .columns {
|
|||
|
display: flex !important;
|
|||
|
flex-direction: column;
|
|||
|
}
|
|||
|
|
|||
|
:host(.sidebar) .column.sidebar.is-one-fifth {
|
|||
|
width: 100% !important;
|
|||
|
}
|
|||
|
|
|||
|
${zi.sidebarStyles(r(":host(.sidebar)"))}
|
|||
|
|
|||
|
.desc p {
|
|||
|
margin-bottom: 1em;
|
|||
|
}
|
|||
|
|
|||
|
.columns {
|
|||
|
width: 100%;
|
|||
|
height: 100%;
|
|||
|
justify-self: stretch;
|
|||
|
margin: 1em 0 0 0 !important;
|
|||
|
min-height: 0;
|
|||
|
}
|
|||
|
|
|||
|
.column.main-content {
|
|||
|
min-height: 0;
|
|||
|
display: flex;
|
|||
|
flex-direction: column;
|
|||
|
padding: 0px;
|
|||
|
margin-left: 0.75em;
|
|||
|
}
|
|||
|
|
|||
|
.column.main-content.main-scroll {
|
|||
|
padding-right: 0.75em;
|
|||
|
word-break: break-all;
|
|||
|
}
|
|||
|
|
|||
|
ul.menu-list a.is-active {
|
|||
|
background-color: #55be6f;
|
|||
|
}
|
|||
|
ol {
|
|||
|
margin-left: 30px;
|
|||
|
}
|
|||
|
|
|||
|
@media screen and (min-width: 769px) {
|
|||
|
.columns {
|
|||
|
margin-top: 0.75em;
|
|||
|
}
|
|||
|
|
|||
|
.column.sidebar {
|
|||
|
max-height: 100%;
|
|||
|
overflow-y: auto;
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
@media screen and (max-width: 768px) {
|
|||
|
${zi.sidebarStyles()}
|
|||
|
}
|
|||
|
|
|||
|
.gutter.gutter-vertical:hover {
|
|||
|
cursor: row-resize;
|
|||
|
}
|
|||
|
|
|||
|
.gutter.gutter-horizontal:hover {
|
|||
|
cursor: col-resize;
|
|||
|
}
|
|||
|
`)}static sidebarStyles(e=o``){return o`
|
|||
|
${e} .columns {
|
|||
|
position: relative;
|
|||
|
}
|
|||
|
|
|||
|
${e} .column.sidebar {
|
|||
|
overflow-y: auto;
|
|||
|
margin-top: 0.75em;
|
|||
|
}
|
|||
|
|
|||
|
${e} .column.main-content {
|
|||
|
position: relative;
|
|||
|
overflow-y: auto;
|
|||
|
|
|||
|
border-top: 1px solid black;
|
|||
|
|
|||
|
height: 100%;
|
|||
|
}
|
|||
|
|
|||
|
${e} .menu {
|
|||
|
font-size: 0.8rem;
|
|||
|
}
|
|||
|
`}render(){const e=this.currList;return L`
|
|||
|
<div
|
|||
|
class="is-sr-only"
|
|||
|
role="heading"
|
|||
|
aria-level="${this.isSidebar?"2":"1"}"
|
|||
|
>
|
|||
|
Story for ${this.collInfo.title}
|
|||
|
</div>
|
|||
|
<div class="columns">
|
|||
|
<div class="column sidebar is-one-fifth">
|
|||
|
<aside class="menu">
|
|||
|
<ul class="menu-list">
|
|||
|
<li>
|
|||
|
<a
|
|||
|
href="#list-0"
|
|||
|
data-list="0"
|
|||
|
class="${0===e?"is-active":""} menu-label is-size-4"
|
|||
|
@click=${this.onClickScroll}
|
|||
|
>${this.collInfo.title}</a
|
|||
|
>
|
|||
|
<ul class="menu-list">
|
|||
|
${this.collInfo.lists.map((t=>L` <li>
|
|||
|
<a
|
|||
|
@click=${this.onClickScroll}
|
|||
|
href="#list-${t.id}"
|
|||
|
data-list="${t.id}"
|
|||
|
class="${e===t.id?"is-active":""}"
|
|||
|
>${t.title}</a
|
|||
|
>
|
|||
|
</li>`))}
|
|||
|
</ul>
|
|||
|
</li>
|
|||
|
</ul>
|
|||
|
</aside>
|
|||
|
</div>
|
|||
|
<div @scroll=${this.onScroll} class="column main-content main-scroll">
|
|||
|
<section id="list-0" class="desc">
|
|||
|
<h2 class="has-text-centered title is-3">${this.collInfo.title}</h2>
|
|||
|
${this.collInfo.desc?ie(Si(this.collInfo.desc)):""}
|
|||
|
</section>
|
|||
|
${this.renderLists()}
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
`}renderLists(){return L` ${this.collInfo.lists.map((e=>L`
|
|||
|
<article id="list-${e.id}">
|
|||
|
<div class="content">
|
|||
|
<hr />
|
|||
|
<h3>${e.title}</h3>
|
|||
|
<p>${e.desc}</p>
|
|||
|
<ol>
|
|||
|
${this.curatedPageMap[e.id]?this.curatedPageMap[e.id].map((e=>this.renderCPage(e))):L``}
|
|||
|
</ol>
|
|||
|
</div>
|
|||
|
</article>
|
|||
|
`))}`}renderCPage(e){const t=new Date(e.ts),i=He(t.toISOString());return L` <li>
|
|||
|
<div class="content">
|
|||
|
<a
|
|||
|
@click="${this.onReplay}"
|
|||
|
data-url="${e.url}"
|
|||
|
data-ts="${i}"
|
|||
|
href="${We("story",e.url,i)}"
|
|||
|
>
|
|||
|
<p class="is-size-6 has-text-weight-bold has-text-link">${e.title}</p>
|
|||
|
<p class="has-text-dark">${e.url}</p>
|
|||
|
</a>
|
|||
|
<p>${t.toLocaleString()}</p>
|
|||
|
<p>${e.desc}</p>
|
|||
|
</div>
|
|||
|
<hr />
|
|||
|
</li>`}onReplay(e){e.preventDefault();const t={url:e.currentTarget.getAttribute("data-url"),ts:e.currentTarget.getAttribute("data-ts")};return this.sendChangeEvent(t),!1}sendChangeEvent(e){this.dispatchEvent(new CustomEvent("coll-tab-nav",{detail:{data:e}}))}onClickScroll(e){return e.preventDefault(),this.currList=Number(e.currentTarget.getAttribute("data-list")),this.scrollToList(),!1}scrollToList(){this.currList>this.collInfo.lists.length&&(this.currList=0);this.clickTime=(new Date).getTime();const e=this.renderRoot.getElementById("list-"+this.currList);e&&e.scrollIntoView({behavior:"smooth",block:"nearest",inline:"nearest"})}onScroll(e){const t=e.currentTarget,i=this.renderRoot.getElementById("list-"+this.currList);if(!i)return;let a=i;const r=t.offsetTop,o=t.scrollTop;if(o>this.lastST)for(;a.nextElementSibling&&a.nextElementSibling.getBoundingClientRect().top<r;)a=a.nextElementSibling;else for(;a.previousElementSibling&&a.previousElementSibling.getBoundingClientRect().bottom>=r;)a=a.previousElementSibling;if(this.lastST=o,a&&a!=i&&a.id.startsWith("list-")&&(this.currList=Number(a.id.slice(5))),(new Date).getTime()-this.clickTime<1e3)return;const n=this.renderRoot.querySelector(`a[data-list="${this.currList}"]`);if(n){const e={behavior:"smooth",block:"nearest",inline:"nearest"};n.scrollIntoView(e)}}}customElements.define("wr-coll-story",zi);var Ci=__webpack_require__(199),Ai=__webpack_require__.n(Ci);class Di extends J{constructor(){super(),this.state="trypublic",this.sourceUrl="",this.scriptLoaded=!1,this.error=!1}static get properties(){return{state:{type:String},sourceUrl:{type:String},error:{type:Boolean},reauth:{type:Boolean}}}updated(e){e.has("sourceUrl")&&(this.error=!1,this.state="trypublic",this.tryPublicAccess().then((e=>{e||(this.state="tryauto",this.requestUpdate())})))}async tryPublicAccess(){try{const e=this.sourceUrl,t=`https://helper-proxy.webrecorder.workers.dev/g/${e.slice(14)}`;let i=null;try{i=await fetch(t)}catch(e){return!1}const a=await i.json();if(!a.url||!a.name||!a.size)return!1;if(a.size>15e6)return!1;const r=a.url;try{const e=new AbortController,t=e.signal;if(i=await fetch(r,{signal:t}),e.abort(),200!=i.status)return!1}catch(e){return!1}const o=a.name,n={publicUrl:r},s=Number(a.size);return this.dispatchEvent(new CustomEvent("load-ready",{detail:{name:o,extra:n,size:s,sourceUrl:e}})),!0}catch(e){return!1}}onLoad(){this.scriptLoaded=!0,this.gauth("none",(e=>{e.error?"implicitonly"!==this.state&&(this.state="trymanual"):this.authed(e)}))}onClickAuth(){this.gauth("select_account",(e=>{e.error||this.authed(e)}))}async authed(e){const t=this.sourceUrl,i=`https://www.googleapis.com/drive/v3/files/${t.slice(14)}`,a={Authorization:`Bearer ${e.access_token}`},r=await fetch(i+"?fields=name,size&supportsAllDrives=true",{headers:a});if(404===r.status||403==r.status)return"implicitonly"!==this.state&&(this.state="trymanual"),void(this.error=!0);this.error=!1;const o=await r.json(),n=o.name,s=Number(o.size);this.dispatchEvent(new CustomEvent("load-ready",{detail:{sourceUrl:t,headers:a,size:s,name:n}}))}static get styles(){return de(o``)}render(){return L` ${this.script()}
|
|||
|
${"trymanual"!==this.state?L` <p>Connecting to Google Drive...</p> `:L`
|
|||
|
${this.error?L`
|
|||
|
<div class="error has-text-danger">
|
|||
|
<p>
|
|||
|
${this.reauth?"Some resources are loaded on demand from Google Drive, which requires reauthorization.":"Could not access this file with the current Google Drive account."}
|
|||
|
</p>
|
|||
|
<p>
|
|||
|
If you have multiple Google Drive accounts, be sure to
|
|||
|
select the correct one.
|
|||
|
</p>
|
|||
|
</div>
|
|||
|
<br />
|
|||
|
`:""}
|
|||
|
<button
|
|||
|
class="button is-warning is-rounded"
|
|||
|
@click="${this.onClickAuth}"
|
|||
|
>
|
|||
|
<span class="icon"
|
|||
|
><fa-icon .svg="${Ai()}"></fa-icon
|
|||
|
></span>
|
|||
|
<span>Authorize Google Drive</span>
|
|||
|
</button>
|
|||
|
`}`}script(){if("trypublic"===this.state||this.scriptLoaded)return L``;const e=document.createElement("script");return e.onload=()=>this.onLoad(),e.src="https://apis.google.com/js/platform.js",e}gauth(e,t){self.gapi.load("auth2",(()=>{self.gapi.auth2.authorize({client_id:"160798412227-tko4c82uopud11q105b2lvbogsj77hlg.apps.googleusercontent.com",scope:"https://www.googleapis.com/auth/drive.file",response_type:"token",prompt:e},t)}))}}customElements.define("wr-gdrive",Di);class Ei extends J{constructor(){super(),this.progress=0,this.total=0,this.percent=0,this.coll="",this.state="waiting",this.loadInfo=null,this.currentSize=0,this.totalSize=0,this.tryFileHandle=!!window.showOpenFilePicker,this.fileHandle=null,this.errorAllowRetry=!1,this.pingInterval=0,this.noWebWorker=!1}static get properties(){return{sourceUrl:{type:String},loadInfo:{type:Object},state:{type:String},progress:{type:Number},percent:{type:Number},currentSize:{type:Number},totalSize:{type:Number},error:{type:String},total:{type:Number},status:{type:String},coll:{type:String},embed:{type:String},tryFileHandle:{type:Boolean},errorAllowRetry:{type:Boolean},extraMsg:{type:String},swName:{type:String}}}firstUpdated(){this.initMessages()}initMessages(){if(this.noWebWorker=this.loadInfo&&this.loadInfo.noWebWorker,this.noWebWorker){if(!navigator.serviceWorker)return;this.worker=navigator.serviceWorker}else this.worker=new Worker(this.swName);this.worker.addEventListener("message",(e=>{switch(e.data.msg_type){case"collProgress":if(e.data.name===this.coll){if(this.percent=e.data.percent,e.data.error)if(this.error=e.data.error,this.state="errored",this.errorAllowRetry=!0,this.fileHandle=e.data.fileHandle,"missing_local_file"===this.error)this.tryFileHandle=!1;else if("permission_needed"===this.error&&e.data.fileHandle){this.state="permission_needed";break}e.data.currentSize&&e.data.totalSize&&(this.currentSize=e.data.currentSize,this.totalSize=e.data.totalSize),this.extraMsg=e.data.extraMsg}break;case"collAdded":e.data.name===this.coll&&(this.total||(this.total=100),this.progress=this.total,this.percent=100,this.dispatchEvent(new CustomEvent("coll-loaded",{detail:e.data})),this.noWebWorker?this.pingInterval&&clearInterval(this.pingInterval):this.worker.terminate(),this.worker=null)}}))}async doLoad(){let e,t,i=this.sourceUrl,a=null;if(this.percent=this.currentSize=this.totalSize=0,this.loadInfo&&this.loadInfo.swError)return this.state="errored",this.error=this.loadInfo.swError,void(this.errorAllowRetry=!1);try{const{scheme:e,host:t,path:r}=function(e){let t=e.indexOf("://"),i=0,a="",r="",o="";return t>=0?(a=e.slice(0,t),t+=3):(t++,e.startsWith("//")&&(t+=2)),i=e.indexOf("/",t),i>0?(r=e.slice(t,i),o=e.slice(i)):(r=e.slice(t),o=""),{scheme:a,host:r,path:o}}(i);switch(e){case"googledrive":this.state="googledrive",a=await this.googledriveInit();break;case"s3":a={sourceUrl:i,loadUrl:`https://${t}.s3.amazonaws.com${r}`,name:this.sourceUrl};break;case"file":if(!this.loadInfo&&!this.tryFileHandle)return this.state="errored",this.error="File URLs can not be entered directly or shared.\nYou can select a file to upload from the main page by clicking the 'Choose File...' button.",void(this.errorAllowRetry=!1);a=this.loadInfo;break;case"proxy":i="proxy:"+i.slice(8)}}catch(e){console.log(e)}a||(a={sourceUrl:i}),this.state="started",this.loadInfo&&(a.newFullImport=this.loadInfo.newFullImport,a.loadEager=this.loadInfo.loadEager,a.noCache=this.loadInfo.noCache,this.loadInfo.extraConfig&&(t=this.loadInfo.extraConfig),i.startsWith("proxy:")&&t&&t.recording&&(e="recordingproxy"));const r={msg_type:"addColl",name:this.coll,extraConfig:t,type:e,skipExisting:!0,file:a};navigator.serviceWorker.controller||await new Promise((e=>{navigator.serviceWorker.addEventListener("controllerchange",(()=>e()))})),this.worker&&(this.noWebWorker?(navigator.serviceWorker.controller.postMessage(r),this.pingInterval=setInterval((()=>{navigator.serviceWorker.controller.postMessage({msg_type:"ping"})}),15e3)):this.worker.postMessage(r))}googledriveInit(){return this._gdWait=new Promise((e=>this._gdResol
|
|||
|
:host {
|
|||
|
height: 100%;
|
|||
|
display: flex;
|
|||
|
}
|
|||
|
|
|||
|
.logo {
|
|||
|
width: 96px;
|
|||
|
height: 96px;
|
|||
|
margin: 1em;
|
|||
|
flex-grow: 1;
|
|||
|
}
|
|||
|
|
|||
|
.progress-div {
|
|||
|
position: relative;
|
|||
|
width: 400px !important;
|
|||
|
}
|
|||
|
|
|||
|
.progress-label {
|
|||
|
position: absolute;
|
|||
|
top: 0;
|
|||
|
left: 50%;
|
|||
|
transform: translateX(-50%);
|
|||
|
font-size: calc(1.5rem / 1.5);
|
|||
|
line-height: 1.5rem;
|
|||
|
}
|
|||
|
|
|||
|
.loaded-prog {
|
|||
|
margin-bottom: 1em;
|
|||
|
}
|
|||
|
|
|||
|
.error {
|
|||
|
white-space: pre-wrap;
|
|||
|
margin-bottom: 2em;
|
|||
|
}
|
|||
|
|
|||
|
section.container {
|
|||
|
margin: auto;
|
|||
|
}
|
|||
|
|
|||
|
.extra-msg {
|
|||
|
font-size: 0.8rem;
|
|||
|
}
|
|||
|
`)}render(){return L`
|
|||
|
<section class="container">
|
|||
|
<div class="has-text-centered is-flex">
|
|||
|
<wr-anim-logo class="logo" size="96px"></wr-anim-logo>
|
|||
|
</div>
|
|||
|
${this.embed?"":L` <div class="level">
|
|||
|
<p class="level-item">Loading <b>${this.sourceUrl}</b>...</p>
|
|||
|
</div>`}
|
|||
|
<div class="level">
|
|||
|
<div class="level-item has-text-centered">
|
|||
|
${this.renderContent()}
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
</section>
|
|||
|
`}renderContent(){switch(this.state){case"googledrive":return L`<wr-gdrive
|
|||
|
.sourceUrl=${this.sourceUrl}
|
|||
|
@load-ready=${this.onLoadReady}
|
|||
|
></wr-gdrive>`;case"started":return L` <div class="progress-div">
|
|||
|
<progress
|
|||
|
id="progress"
|
|||
|
class="progress is-primary is-large"
|
|||
|
value="${this.percent}"
|
|||
|
max="100"
|
|||
|
></progress>
|
|||
|
<label class="progress-label" for="progress">${this.percent}%</label>
|
|||
|
${this.currentSize&&this.totalSize?L` <div class="loaded-prog">
|
|||
|
Loaded <b>${Ie()(this.currentSize)}</b> of
|
|||
|
<b>${Ie()(this.totalSize)}</b>
|
|||
|
${this.extraMsg&&L` <p class="extra-msg">(${this.extraMsg})</p> `}
|
|||
|
</div>`:L``}
|
|||
|
${this.embed?"":L` <button @click="${this.onCancel}" class="button is-danger">
|
|||
|
Cancel
|
|||
|
</button>`}
|
|||
|
</div>`;case"errored":return L` <div class="has-text-left">
|
|||
|
<div class="error has-text-danger">${this.error}</div>
|
|||
|
<div>
|
|||
|
${this.errorAllowRetry?L` <a
|
|||
|
class="button is-warning"
|
|||
|
@click=${()=>window.parent.location.reload()}
|
|||
|
>Try Again</a
|
|||
|
>`:""}
|
|||
|
${this.embed?L``:L` <a href="/" class="button is-warning">Back</a>`}
|
|||
|
</div>
|
|||
|
</div>`;case"permission_needed":return L` <div class="has-text-left">
|
|||
|
<div class="">
|
|||
|
Permission is needed to reload the archive file. (Click
|
|||
|
<i>Cancel</i> to cancel loading this archive.)
|
|||
|
</div>
|
|||
|
<button @click="${this.onAskPermission}" class="button is-primary">
|
|||
|
Show Permission
|
|||
|
</button>
|
|||
|
<a href="/" class="button is-danger">Cancel</a>
|
|||
|
</div>`;default:return L`<progress
|
|||
|
class="progress is-primary is-large"
|
|||
|
style="max-width: 400px"
|
|||
|
></progress>`}}async onAskPermission(){"granted"===await this.fileHandle.requestPermission({mode:"read"})&&this.doLoad()}}customElements.define("wr-loader",Ei);var Ii=__webpack_require__(746),Pi=__webpack_require__.n(Ii),Li=__webpack_require__(304),Ti=__webpack_require__(442),Ui=__webpack_require__.n(Ti),Ri=__webpack_require__(638),qi=__webpack_require__.n(Ri);class Mi extends J{constructor(){super(),this.filteredPages=[],this.sortedPages=[],this.query="",this.flex=null,this.textPages=null,this.newQuery=null,this.loading=!1,this.updatingSearch=!1,this.showAllPages=!1,this.hasExtraPages=!1,this.currList=0,this.active=!1,this.editable=!1,this.changeNeeded=!1,this.selectedPages=new Set,this.menuActive=!1,this.sortKey="date",this.sortDesc=!0,this.isSidebar=!1,this.url="",this.ts="",this.editing=!1,this.toDeletePages=null,this.toDeletePage=null}static get sortKeys(){return[{key:"",name:"Best Match"},{key:"title",name:"Title"},{key:"date",name:"Date"}]}static get properties(){return{active:{type:Boolean},collInfo:{type:Object},currList:{type:Number},filteredPages:{type:Array},sortedPages:{type:Array},showAllPages:{type:Boolean},query:{type:String},defaultKey:{type:String},loading:{type:Boolean},updatingSearch:{type:Boolean},editable:{type:Boolean},selectedPages:{type:Set},allSelected:{type:Boolean},menuActive:{type:Boolean},sortKey:{type:String},sortDesc:{type:Boolean},isSidebar:{type:Boolean},url:{type:String},ts:{type:String},editing:{type:Boolean},toDeletePages:{type:Object},toDeletePage:{type:Object}}}_timedUpdate(){null!==this.newQuery&&(this.query=this.newQuery,this.newQuery=null,this.filter())}async updated(e){if(e.has("collInfo")?this.updateTextSearch():(e.has("query")||e.has("currList")||e.has("showAllPages"))&&this.filter(),e.has("active")&&this.active&&this.changeNeeded&&this.filter(),e.has("query")){this.query?(this.sortKey="",this.sortDesc=!1):(this.sortKey="date",this.sortDesc=!0);const e=this.renderRoot.querySelector("wr-sorter");e&&(e.sortKey=this.sortKey,e.sortDesc=this.sortDesc)}if(e.has("sortedPages")&&this.isSidebar){const e=this.renderRoot.querySelector(".current");if(e){const t={behavior:"smooth",block:"nearest",inline:"nearest"};setTimeout((()=>e.scrollIntoView(t)),100)}}}onChangeQuery(e){this.newQuery=e.currentTarget.value,this._ival&&window.clearTimeout(this._ival),this._ival=window.setTimeout((()=>this._timedUpdate()),250)}async filter(){if(this.loading)return;if(this.active||(this.changeNeeded=!0),this.loading=!0,this.flex&&this.query&&this.textPages){const e=await this.flex.searchAsync(this.query,25);this.filteredPages=e.map((e=>this.textPages[e]))}else this.showAllPages&&this.hasExtraPages?this.filteredPages=[...this.textPages]:this.filteredPages=[...this.collInfo.pages];0!==this.currList&&await this.filterCurated();for(const e of this.filteredPages){const{timestamp:t,date:i}=Fe(e);e.timestamp=t,e.date=i}this.loading=!1,this.changeNeeded=!1;const e={query:this.query,currList:this.currList};this.sendChangeEvent(e)}async filterCurated(){const e=await fetch(`${this.collInfo.apiPrefix}/curated/${this.currList}`),t=(await e.json()).curated;this.filteredPages=t}sendChangeEvent(e){this.dispatchEvent(new CustomEvent("coll-tab-nav",{detail:{data:e}}))}addPages(e){const t=new Li.Index;return this.flex=t,this.textPages=e,this.hasExtraPages=this.textPages&&this.collInfo&&this.collInfo.pages&&this.textPages.length>this.collInfo.pages.length,Promise.all(e.map(((e,i)=>{let a=e.url;return e.title&&(a+=" "+e.title),e.text&&(a+=" "+e.text),t.addAsync(i,a)})))}async updateTextSearch(){if(this.updatingSearch)return;this.updatingSearch=!0;let e=0;try{const t=await caches.open("cache:"+this.collInfo.coll),i=`${this.collInfo.apiPrefix}/textIndex`;let a=await t.match(i);a&&Number(a.headers.get("Content-Length"))||(a=await fetch(i),200===a.status&&Number(a.headers.get("Content-Length"))&&t.put(i,a.clone()));const r=[];for await(const t of Pi()(a.body.getReader()))t.url&&(t.id=++e,r.push(t));await this.addPages(r)}catch(e){console.warn(e)}finally{0===e&&await this.addPages(this.collInfo.pages),this.updatingSearch=!
|
|||
|
:host {
|
|||
|
width: 100%;
|
|||
|
height: 100%;
|
|||
|
display: flex;
|
|||
|
min-width: 0px;
|
|||
|
flex-direction: column;
|
|||
|
box-sizing: border-box !important;
|
|||
|
}
|
|||
|
|
|||
|
div[role="main"],
|
|||
|
#contents div[role="complementary"] {
|
|||
|
height: 100%;
|
|||
|
}
|
|||
|
|
|||
|
.main.columns {
|
|||
|
width: 100%;
|
|||
|
justify-self: stretch;
|
|||
|
min-height: 0px;
|
|||
|
margin: 0px;
|
|||
|
}
|
|||
|
|
|||
|
.header.columns {
|
|||
|
width: 100%;
|
|||
|
margin-bottom: 0px;
|
|||
|
}
|
|||
|
.header a {
|
|||
|
color: black;
|
|||
|
}
|
|||
|
|
|||
|
.header .column.pagetitle {
|
|||
|
margin-left: 2.5em;
|
|||
|
}
|
|||
|
|
|||
|
.column.main-content {
|
|||
|
min-height: 0px;
|
|||
|
display: flex;
|
|||
|
flex-direction: column;
|
|||
|
padding: 0px;
|
|||
|
margin-top: 0.5em;
|
|||
|
margin-left: 0.75em;
|
|||
|
}
|
|||
|
|
|||
|
.index-bar {
|
|||
|
display: flex;
|
|||
|
flex-direction: column;
|
|||
|
border-right: 3px solid rgb(237, 237, 237);
|
|||
|
background-color: whitesmoke;
|
|||
|
padding-right: 0px;
|
|||
|
position: relative;
|
|||
|
}
|
|||
|
|
|||
|
.index-bar-title {
|
|||
|
font-size: 1.25rem;
|
|||
|
text-transform: uppercase;
|
|||
|
margin-bottom: 1rem;
|
|||
|
word-break: break-word;
|
|||
|
}
|
|||
|
|
|||
|
.index-bar-title:hover + .editIcon {
|
|||
|
display: block;
|
|||
|
}
|
|||
|
|
|||
|
.editIcon {
|
|||
|
display: none;
|
|||
|
position: absolute;
|
|||
|
right: 8px;
|
|||
|
top: 8px;
|
|||
|
}
|
|||
|
|
|||
|
.index-bar-status {
|
|||
|
display: flex;
|
|||
|
flex-direction: row;
|
|||
|
margin-bottom: 0.5rem;
|
|||
|
padding-right: 0.75em;
|
|||
|
}
|
|||
|
|
|||
|
.index-bar-menu {
|
|||
|
margin-top: 1rem;
|
|||
|
}
|
|||
|
|
|||
|
#filter-label {
|
|||
|
margin-bottom: 0px;
|
|||
|
}
|
|||
|
|
|||
|
.num-results {
|
|||
|
font-style: italic;
|
|||
|
font-weight: normal;
|
|||
|
line-height: 2.5;
|
|||
|
}
|
|||
|
|
|||
|
.asc:after {
|
|||
|
content: "▼";
|
|||
|
font-size: 0.75em;
|
|||
|
}
|
|||
|
.desc:after {
|
|||
|
content: "▲";
|
|||
|
font-size: 0.75em;
|
|||
|
}
|
|||
|
|
|||
|
@media screen and (min-width: 769px) {
|
|||
|
.main.columns {
|
|||
|
max-height: 100%;
|
|||
|
height: 100%;
|
|||
|
}
|
|||
|
.index-bar-menu {
|
|||
|
max-height: 100%;
|
|||
|
overflow-y: auto;
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
@media screen and (max-width: 768px) {
|
|||
|
${Mi.sidebarStyles()}
|
|||
|
}
|
|||
|
|
|||
|
${Mi.sidebarStyles(r`:host(.sidebar)`)}
|
|||
|
|
|||
|
.mobile-lists {
|
|||
|
display: block !important;
|
|||
|
}
|
|||
|
|
|||
|
:host(.sidebar) .columns.is-hidden-mobile,
|
|||
|
:host(.sidebar) .is-hidden-mobile {
|
|||
|
display: none !important;
|
|||
|
}
|
|||
|
|
|||
|
:host(.sidebar) .mobile-header {
|
|||
|
display: flex !important;
|
|||
|
}
|
|||
|
|
|||
|
:host(.sidebar) .columns {
|
|||
|
display: flex !important;
|
|||
|
}
|
|||
|
|
|||
|
.scroller {
|
|||
|
overflow-y: auto;
|
|||
|
overflow-x: hidden;
|
|||
|
display: flex;
|
|||
|
flex-direction: column;
|
|||
|
flex: auto;
|
|||
|
|
|||
|
padding-bottom: 1em;
|
|||
|
min-height: 0px;
|
|||
|
}
|
|||
|
|
|||
|
.page-entry {
|
|||
|
padding-bottom: 1.5rem;
|
|||
|
}
|
|||
|
|
|||
|
.selected {
|
|||
|
background-color: rgb(207, 243, 255);
|
|||
|
}
|
|||
|
|
|||
|
.is-disabled {
|
|||
|
pointer-events: none;
|
|||
|
opacity: 0.65;
|
|||
|
}
|
|||
|
|
|||
|
.page-header {
|
|||
|
display: flex;
|
|||
|
flex-direction: row;
|
|||
|
align-items: baseline;
|
|||
|
width: 100%;
|
|||
|
min-height: fit-content;
|
|||
|
|
|||
|
margin-bottom: 1em;
|
|||
|
border-bottom: 3px solid rgb(237, 237, 237);
|
|||
|
}
|
|||
|
|
|||
|
.check-select {
|
|||
|
padding: 0 1em 0 0.5em;
|
|||
|
}
|
|||
|
|
|||
|
.search-bar {
|
|||
|
width: auto;
|
|||
|
display: flex;
|
|||
|
flex-direction: column;
|
|||
|
}
|
|||
|
|
|||
|
.flex-auto {
|
|||
|
flex: auto;
|
|||
|
}
|
|||
|
|
|||
|
.index-bar-description {
|
|||
|
margin-bottom: 20px;
|
|||
|
font-style: italic;
|
|||
|
}
|
|||
|
`)}static sidebarStyles(e=o``){return o`
|
|||
|
${e} .main.columns {
|
|||
|
position: relative;
|
|||
|
max-height: 100%;
|
|||
|
height: 100%;
|
|||
|
}
|
|||
|
|
|||
|
${e} .index-bar-menu {
|
|||
|
max-height: 75px;
|
|||
|
overflow-y: auto;
|
|||
|
margin-top: 0.75em;
|
|||
|
}
|
|||
|
|
|||
|
${e} .column.main-content {
|
|||
|
position: relative;
|
|||
|
overflow-y: auto;
|
|||
|
|
|||
|
width: 100%;
|
|||
|
min-height: 0px;
|
|||
|
height: 100%;
|
|||
|
padding: 0px;
|
|||
|
margin: 0px;
|
|||
|
}
|
|||
|
|
|||
|
${e} .mobile-header {
|
|||
|
margin: 0.5rem;
|
|||
|
margin-left: 1rem;
|
|||
|
align-items: center;
|
|||
|
display: flex;
|
|||
|
justify-content: space-between;
|
|||
|
flex-flow: row wrap;
|
|||
|
min-height: 24px;
|
|||
|
width: 100%;
|
|||
|
}
|
|||
|
|
|||
|
${e} .menu {
|
|||
|
font-size: 0.8rem;
|
|||
|
}
|
|||
|
`}onSelectList(e){e.preventDefault(),this.currList=Number(e.currentTarget.getAttribute("data-list"))}onSelectListDrop(e){e.preventDefault(),this.currList=Number(e.currentTarget.value)}render(){const e=this.currList;return L`
|
|||
|
<div
|
|||
|
class="is-sr-only"
|
|||
|
role="heading"
|
|||
|
aria-level="${this.isSidebar?"2":"1"}"
|
|||
|
>
|
|||
|
Pages in ${this.collInfo.title}
|
|||
|
</div>
|
|||
|
<div class="search-bar notification is-marginless">
|
|||
|
${this.isSidebar?L`<h3 class="is-sr-only">Search and Filter Pages</h3>`:""}
|
|||
|
<div class="field flex-auto">
|
|||
|
<div
|
|||
|
class="control has-icons-left ${this.loading?"is-loading":""}"
|
|||
|
>
|
|||
|
<input
|
|||
|
class="input"
|
|||
|
@input="${this.onChangeQuery}"
|
|||
|
.value="${this.query}"
|
|||
|
type="text"
|
|||
|
placeholder="Search by Page URL, Title or Text"
|
|||
|
/>
|
|||
|
<span class="icon is-left"
|
|||
|
><fa-icon .svg="${je()}" aria-hidden="true"></fa-icon
|
|||
|
></span>
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
<div class="main columns">
|
|||
|
<div
|
|||
|
class="column index-bar is-one-fifth ${this.isSidebar?"is-hidden-mobile":""}"
|
|||
|
>
|
|||
|
${this.editable&&this.editing?L`
|
|||
|
<form @submit="${this.onUpdateTitle}">
|
|||
|
<input
|
|||
|
id="titleEdit"
|
|||
|
class="input"
|
|||
|
value="${this.collInfo.title}"
|
|||
|
@blur="${this.onUpdateTitle}"
|
|||
|
/>
|
|||
|
</form>
|
|||
|
`:L` <div
|
|||
|
class="index-bar-title"
|
|||
|
@dblclick="${()=>this.editing=!0}"
|
|||
|
>
|
|||
|
${this.collInfo.name||this.collInfo.title}
|
|||
|
</div>
|
|||
|
${this.collInfo.description?L`<div
|
|||
|
class="index-bar-description"
|
|||
|
@dblclick="${()=>this.editing=!0}"
|
|||
|
>
|
|||
|
${this.collInfo.description}
|
|||
|
</div>`:L``}`}
|
|||
|
${this.editable?L`<fa-icon class="editIcon" .svg="${qi()}"></fa-icon>`:L``}
|
|||
|
${this.hasExtraPages?L` <span class="check-select">
|
|||
|
<label class="checkbox">
|
|||
|
<input
|
|||
|
@change=${e=>this.showAllPages=e.currentTarget.checked}
|
|||
|
type="checkbox"
|
|||
|
.checked="${this.showAllPages}"
|
|||
|
/>
|
|||
|
Show Non-Seed Pages
|
|||
|
</label>
|
|||
|
</span>`:""}
|
|||
|
|
|||
|
<span
|
|||
|
class="num-results is-hidden-mobile"
|
|||
|
aria-live="polite"
|
|||
|
aria-atomic="true"
|
|||
|
>${this.formatResults()}</span
|
|||
|
>
|
|||
|
${this.editable?L` <div class="index-bar-actions">
|
|||
|
${this.renderDownloadMenu()}
|
|||
|
</div>`:""}
|
|||
|
${this.collInfo.lists.length?L`
|
|||
|
<p id="filter-label" class="menu-label">Filter By List:</p>
|
|||
|
<div class="index-bar-menu menu">
|
|||
|
<ul class="menu-list">
|
|||
|
<li>
|
|||
|
<a
|
|||
|
href="#list-0"
|
|||
|
data-list="0"
|
|||
|
class="${0===e?"is-active":""}"
|
|||
|
@click=${this.onSelectList}
|
|||
|
><i>All Pages</i></a
|
|||
|
>
|
|||
|
</li>
|
|||
|
${this.collInfo.lists.map((t=>L` <li>
|
|||
|
<a
|
|||
|
@click=${this.onSelectList}
|
|||
|
href="#list-${t.id}"
|
|||
|
data-list="${t.id}"
|
|||
|
class="${e===t.id?"is-active":""}"
|
|||
|
>${t.title}</a
|
|||
|
>
|
|||
|
</li>`))}
|
|||
|
</ul>
|
|||
|
</div>
|
|||
|
`:""}
|
|||
|
</div>
|
|||
|
<div class="column main-content">
|
|||
|
<div
|
|||
|
class="is-sr-only"
|
|||
|
role="heading"
|
|||
|
aria-level="${this.isSidebar?"3":"2"}"
|
|||
|
>
|
|||
|
Page List
|
|||
|
</div>
|
|||
|
${this.renderPages()}
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
${this.renderDeleteModal()}
|
|||
|
`}renderDownloadMenu(){return L` <div class="dropdown ${this.menuActive?"is-active":""}">
|
|||
|
<div class="dropdown-trigger">
|
|||
|
<button
|
|||
|
@click="${this.onMenu}"
|
|||
|
class="button is-small"
|
|||
|
aria-haspopup="true"
|
|||
|
aria-expanded="${this.menuActive}"
|
|||
|
aria-controls="dropdown-menu"
|
|||
|
>
|
|||
|
<span>Download</span>
|
|||
|
<span class="icon is-small">
|
|||
|
<fa-icon .svg="${Ui()}" aria-hidden="true"></fa-icon>
|
|||
|
</span>
|
|||
|
</button>
|
|||
|
</div>
|
|||
|
<div class="dropdown-menu" id="dropdown-menu">
|
|||
|
<div class="dropdown-content">
|
|||
|
<a
|
|||
|
role="button"
|
|||
|
href="#"
|
|||
|
@click="${e=>this.onDownload(e,"wacz")}"
|
|||
|
@keyup="${be}"
|
|||
|
class="dropdown-item"
|
|||
|
>
|
|||
|
Download ${0===this.selectedPages.size?"All":"Selected"} as
|
|||
|
WACZ (Web Archive Collection Zip)
|
|||
|
</a>
|
|||
|
<a
|
|||
|
role="button"
|
|||
|
href="#"
|
|||
|
@click="${e=>this.onDownload(e,"warc")}"
|
|||
|
@keyup="${be}"
|
|||
|
class="dropdown-item"
|
|||
|
>
|
|||
|
Download ${0===this.selectedPages.size?"All":"Selected"} as
|
|||
|
WARC 1.1 Only
|
|||
|
</a>
|
|||
|
<a
|
|||
|
role="button"
|
|||
|
href="#"
|
|||
|
@click="${e=>this.onDownload(e,"warc1.0")}"
|
|||
|
@keyup="${be}"
|
|||
|
class="dropdown-item"
|
|||
|
>
|
|||
|
Download ${0===this.selectedPages.size?"All":"Selected"} as
|
|||
|
WARC 1.0 Only
|
|||
|
</a>
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
</div>`}renderPageHeader(){return L`
|
|||
|
${!this.isSidebar&&this.editable&&this.filteredPages.length?L` <div class="check-select">
|
|||
|
<label class="checkbox">
|
|||
|
<input
|
|||
|
@change=${this.onSelectAll}
|
|||
|
type="checkbox"
|
|||
|
.checked="${this.allSelected}"
|
|||
|
/>
|
|||
|
</label>
|
|||
|
</div>`:L``}
|
|||
|
|
|||
|
<div class="header columns is-hidden-mobile">
|
|||
|
${this.query?L` <a
|
|||
|
role="button"
|
|||
|
href="#"
|
|||
|
@click="${this.onSort}"
|
|||
|
@keyup="${be}"
|
|||
|
data-key=""
|
|||
|
class="column is-1 ${""===this.sortKey?this.sortDesc?"desc":"asc":""}"
|
|||
|
>Match</a
|
|||
|
>`:""}
|
|||
|
|
|||
|
<a
|
|||
|
role="button"
|
|||
|
href="#"
|
|||
|
@click="${this.onSort}"
|
|||
|
@keyup="${be}"
|
|||
|
data-key="date"
|
|||
|
class="column is-2 ${"date"===this.sortKey?this.sortDesc?"desc":"asc":""}"
|
|||
|
>Date</a
|
|||
|
>
|
|||
|
<a
|
|||
|
role="button"
|
|||
|
href="#"
|
|||
|
@click="${this.onSort}"
|
|||
|
@keyup="${be}"
|
|||
|
data-key="title"
|
|||
|
class="column is-6 pagetitle ${"title"===this.sortKey?this.sortDesc?"desc":"asc":""}"
|
|||
|
>Page Title</a
|
|||
|
>
|
|||
|
</div>
|
|||
|
|
|||
|
<div class="is-hidden-tablet mobile-header">
|
|||
|
<div class="num-results" aria-live="polite" aria-atomic="true">
|
|||
|
${this.formatResults()}
|
|||
|
</div>
|
|||
|
<wr-sorter
|
|||
|
id="pages"
|
|||
|
.sortKey="${this.sortKey}"
|
|||
|
.sortDesc="${this.sortDesc}"
|
|||
|
.sortKeys="${Mi.sortKeys}"
|
|||
|
.data="${this.filteredPages}"
|
|||
|
pageResults="100"
|
|||
|
@sort-changed="${this.onSortChanged}"
|
|||
|
class="${this.filteredPages.length?"":"is-hidden"}"
|
|||
|
>
|
|||
|
</wr-sorter>
|
|||
|
</div>
|
|||
|
`}renderDeleteModal(){return this.toDeletePages?L` <wr-modal
|
|||
|
bgClass="has-background-grey-lighter"
|
|||
|
@modal-closed="${()=>this.toDeletePages=this.toDeletePage=null}"
|
|||
|
title="Confirm Delete"
|
|||
|
>
|
|||
|
${this.toDeletePage?L` <p>
|
|||
|
Are you sure you want to delete the page
|
|||
|
<b>${this.toDeletePage.title}</b>? (Size:
|
|||
|
<b>${Ie()(this.toDeletePage.size)}</b>)
|
|||
|
</p>`:L`
|
|||
|
<p>
|
|||
|
Are you sure you want to delete the
|
|||
|
<b>${this.toDeletePages.size}</b> selected pages?
|
|||
|
</p>
|
|||
|
`}
|
|||
|
<p>This operation can not be undone.</p>
|
|||
|
|
|||
|
<button @click="${this.onDeletePages}" class="button is-danger">
|
|||
|
Delete
|
|||
|
</button>
|
|||
|
<button
|
|||
|
@click="${()=>this.toDeletePages=this.toDeletePage=null}"
|
|||
|
class="button"
|
|||
|
>
|
|||
|
Cancel
|
|||
|
</button>
|
|||
|
</wr-modal>`:L``}isCurrPage(e){if(this.isSidebar&&e.url===this.url){let t=e.timestamp;return!t&&e.date?t=He(e.date):"string"==typeof e.ts&&(t=He(e.ts)),t===this.ts}return!1}renderPages(){return L`
|
|||
|
<div class="page-header has-text-weight-bold">
|
|||
|
${this.renderPageHeader()}
|
|||
|
</div>
|
|||
|
<ul class="scroller" @scroll="${this.onScroll}">
|
|||
|
${this.sortedPages.length?L` ${this.sortedPages.map(((e,t)=>{const i=this.selectedPages.has(e.id);return L` <li class="page-entry ${i?"selected":""}">
|
|||
|
<wr-page-entry
|
|||
|
.index="${this.query||this.isSidebar?t+1:0}"
|
|||
|
.editable="${this.editable}"
|
|||
|
.selected="${i}"
|
|||
|
.isCurrent="${this.isCurrPage(e)}"
|
|||
|
.isSidebar="${this.isSidebar}"
|
|||
|
.page="${e}"
|
|||
|
pid="${e.id}"
|
|||
|
@sel-page="${this.onSelectToggle}"
|
|||
|
@delete-page="${this.onDeleteConfirm}"
|
|||
|
replayPrefix="${this.collInfo.replayPrefix}"
|
|||
|
query="${this.query}"
|
|||
|
class="${this.isSidebar?"sidebar":""}"
|
|||
|
>
|
|||
|
</wr-page-entry>
|
|||
|
</li>`}))}`:L`<p class="mobile-header">${this.getNoResultsMessage()}</p>`}
|
|||
|
</ul>
|
|||
|
`}onUpdateTitle(e){if(e.preventDefault(),this.editing=!1,!this.editable)return;const t=this.renderRoot.querySelector("#titleEdit");if(!t||!t.value.trim())return;const i=t.value,a=JSON.stringify({title:i});fetch(`${this.collInfo.apiPrefix}/metadata`,{method:"POST",body:a}).then((e=>{200===e.status&&this.dispatchEvent(new CustomEvent("coll-update",{detail:{title:i}}))}))}onMenu(e){e.stopPropagation(),this.menuActive=!this.menuActive,this.menuActive&&document.addEventListener("click",(()=>{this.menuActive=!1}),{once:!0})}onSort(e){e.preventDefault();const t=e.currentTarget.getAttribute("data-key")||"";t===this.sortKey?this.sortDesc=!this.sortDesc:(this.sortDesc=!1,this.sortKey=t)}onSortChanged(e){this.sortedPages=e.detail.sortedData,this.sortKey=e.detail.sortKey,this.sortDesc=e.detail.sortDesc}onSelectToggle(e){const{page:t,selected:i}=e.detail;i?this.selectedPages.add(t):this.selectedPages.delete(t),this.allSelected=this.selectedPages.size===this.sortedPages.length,this.requestUpdate()}onSelectAll(e){this.allSelected=e.currentTarget.checked,this.allSelected?this.sortedPages.forEach((e=>{this.selectedPages.add(e.id)})):this.selectedPages.clear(),this.requestUpdate()}async onDownload(e,t){e.preventDefault();const i=this.selectedPages.size>0,a=new URLSearchParams;a.set("pages",i?Array.from(this.selectedPages.keys()).join(","):"all"),a.set("format",t),this.collInfo.filename&&a.set("filename",this.collInfo.filename),window.location.href=`${this.collInfo.apiPrefix}/dl?`+a.toString()}onDeleteConfirm(e){const t=e.currentTarget.page;this.selectedPages.has(t.id)?(this.toDeletePages=this.selectedPages,this.toDeletePage=null):(this.toDeletePages=[t.id],this.toDeletePage=t)}async onDeletePages(){const e={};for(const t of this.toDeletePages){const i=this.renderRoot.querySelector(`wr-page-entry[pid="${t}"]`);i&&(i.deleting=!0,e[t]=i)}for(const t of this.toDeletePages){const i=await fetch(`${this.collInfo.apiPrefix}/page/${t}`,{method:"DELETE"}),a=await i.json();if(a.error){console.warn(a.error);continue}const r=e[t];if(!r)continue;const o=this.collInfo.pages.indexOf(r);o<0||this.collInfo.pages.splice(o,1)}this.toDeletePages=null,this.toDeletePage=null,this.updateTextSearch(),this.requestUpdate()}formatResults(){if(!this.query){const e=this.filteredPages.length;return e===this.sortedPages.length?`${e} Page${1!==e?"s":""}`:`${this.sortedPages.length} of ${e} Pages Shown`}return 1===this.sortedPages.length?"1 Page":`${this.sortedPages.length} Pages`}getNoResultsMessage(){return this.collInfo&&this.collInfo.pages.length?this.updatingSearch?"Initializing Search...":this.loading?"Searching...":this.query?L`<span class="fix-text-wrapping"
|
|||
|
>No matching pages found. Try changing the search query, or
|
|||
|
<a href="#view=resources">browse by URL</a>.</span
|
|||
|
>`:"No Pages Found":L`<span class="fix-text-wrapping"
|
|||
|
>No Pages are defined in this archive. The archive may be empty.
|
|||
|
<a href="#view=resources">Try browsing by URL</a>.</span
|
|||
|
>`}onScroll(e){const t=e.currentTarget;if(t.scrollHeight-t.scrollTop-t.clientHeight<40){const e=this.renderRoot.querySelector("wr-sorter");e&&e.getMore()}}}customElements.define("wr-page-view",Mi);const ji=new RegExp(`[${["-","[","]","/","{","}","(",")","*","+","?",".","\\","^","$","|"].join("\\")}]`,"g"),Oi=e=>e.replace(ji,"\\$&");class Ni extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}static get observedAttributes(){return["keywords","delimiter"]}get keywords(){var e;return null!==(e=this.getAttribute("keywords"))&&void 0!==e?e:""}set keywords(e){this.setAttribute("keywords",e)}get delimiter(){var e;return null!==(e=this.getAttribute("delimiter"))&&void 0!==e?e:""}set delimiter(e){this.setAttribute("delimiter",e)}attributeChangedCallback(e,t,i){"keywords"!==e&&"delimiter"!==e||i!==t&&this._render()}connectedCallback(){this._render(),this.__observer=new MutationObserver((()=>{this._render()})),this.__observer.observe(this,{childList:!0,characterData:!0,subtree:!0})}disconnectedCallback(){this.__observer&&(this.__observer.disconnect(),this.__observer=void 0)}_render(){if(!this.shadowRoot)return;const e=this.textContent||"",t=this.getAttribute("keywords"),i=this.getAttribute("delimiter")||/\s+/;if(!t)return void(this.shadowRoot.textContent=e);const a=e.toLowerCase(),r=t.toLowerCase().split(i).sort(((e,t)=>t.length-e.length)),o=new RegExp(`${r.map(Oi).join("|")}`,"gi"),n=e.split(o),s=document.createElement("div");let l=0;for(const t of n)if(s.appendChild(document.createTextNode(t)),l+=t.length,l<a.length){const t=a.substring(l),i=r.find((e=>t.startsWith(e)));if(i){const t=document.createElement("mark");t.textContent=e.substr(l,i.length),s.appendChild(t),l+=i.length}}this.shadowRoot.innerHTML=`\n <style>\n mark {\n color: var(--keyword-mark-color);\n background: var(--keyword-mark-background, yellow);\n }\n </style>\n ${s.innerHTML}\n `}}customElements.define("keyword-mark",Ni);class Bi extends J{constructor(){super(),this.query="",this.textSnippet="",this.page=null,this.replayPrefix="",this.deleting=!1,this.editable=!1,this.iconValid=!1,this.index=0,this.isCurrent=!1,this.isSidebar=!1}static get properties(){return{query:{type:String},textSnippet:{type:String},page:{type:Object},replayPrefix:{type:String},deleting:{type:Boolean},selected:{type:Boolean},editable:{type:Boolean},iconValid:{type:Boolean},index:{type:Number},isCurrent:{type:Boolean},isSidebar:{type:Boolean}}}static get styles(){return de(o`
|
|||
|
:host {
|
|||
|
min-height: min-content;
|
|||
|
width: 100%;
|
|||
|
word-break: break-all;
|
|||
|
position: relative;
|
|||
|
display: flex;
|
|||
|
flex-direction: row;
|
|||
|
background: transparent;
|
|||
|
}
|
|||
|
|
|||
|
:host(.sidebar) .column {
|
|||
|
width: unset !important;
|
|||
|
}
|
|||
|
|
|||
|
:host(.sidebar) {
|
|||
|
width: 100%;
|
|||
|
}
|
|||
|
|
|||
|
.check-select {
|
|||
|
padding: 0 1em 0 0.5em;
|
|||
|
height: 100%;
|
|||
|
margin: auto 0 auto 0;
|
|||
|
}
|
|||
|
|
|||
|
.columns {
|
|||
|
width: 100%;
|
|||
|
}
|
|||
|
|
|||
|
/* Overrde Bulma to add the tiniest margin, so the focus indicator isn't obscured */
|
|||
|
.columns {
|
|||
|
margin-top: calc(-0.75rem + 2px);
|
|||
|
}
|
|||
|
.columns:last-child {
|
|||
|
margin-bottom: calc(-0.75rem + 2px);
|
|||
|
}
|
|||
|
|
|||
|
.favicon {
|
|||
|
width: 24px !important;
|
|||
|
height: 24px !important;
|
|||
|
display: inline-block;
|
|||
|
vertical-align: text-bottom;
|
|||
|
}
|
|||
|
img.favicon {
|
|||
|
filter: drop-shadow(1px 1px 2px grey);
|
|||
|
}
|
|||
|
|
|||
|
.media-left {
|
|||
|
align-self: center;
|
|||
|
}
|
|||
|
|
|||
|
.delete-button {
|
|||
|
position: absolute;
|
|||
|
top: 8px;
|
|||
|
right: 8px;
|
|||
|
}
|
|||
|
|
|||
|
.delete:hover {
|
|||
|
background-color: rgb(241, 70, 104);
|
|||
|
}
|
|||
|
|
|||
|
.is-loading {
|
|||
|
line-height: 1.5em;
|
|||
|
height: 1.5em;
|
|||
|
border: 0px;
|
|||
|
background-color: transparent !important;
|
|||
|
width: auto;
|
|||
|
}
|
|||
|
|
|||
|
@media screen and (max-width: 768px) {
|
|||
|
${Bi.sidebarStyles()}
|
|||
|
}
|
|||
|
|
|||
|
${Bi.sidebarStyles(r`:host(.sidebar)`)}
|
|||
|
|
|||
|
.current a {
|
|||
|
background-color: rgb(207, 243, 255);
|
|||
|
font-style: italic;
|
|||
|
display: block;
|
|||
|
}
|
|||
|
|
|||
|
.current .curr-page {
|
|||
|
font-style: italic;
|
|||
|
font-size: 9px;
|
|||
|
color: black;
|
|||
|
}
|
|||
|
|
|||
|
.is-inline-date {
|
|||
|
display: none;
|
|||
|
}
|
|||
|
|
|||
|
.media-content a {
|
|||
|
display: block;
|
|||
|
}
|
|||
|
`)}static sidebarStyles(e=o``){return o`
|
|||
|
${e} .col-date {
|
|||
|
margin-left: calc(24px + 1rem);
|
|||
|
display: none;
|
|||
|
}
|
|||
|
${e} .col-date div {
|
|||
|
display: inline;
|
|||
|
}
|
|||
|
${e} .col-index {
|
|||
|
position: absolute;
|
|||
|
top: 0px;
|
|||
|
left: 0px;
|
|||
|
margin-top: -0.75em;
|
|||
|
}
|
|||
|
${e} .columns {
|
|||
|
display: flex;
|
|||
|
flex-direction: column-reverse;
|
|||
|
}
|
|||
|
${e} .is-inline-date {
|
|||
|
display: initial !important;
|
|||
|
font-style: italic;
|
|||
|
}
|
|||
|
`}updated(e){(e.has("page")||e.has("query"))&&(this.updateSnippet(),this.iconValid=!!this.page.favIconUrl,this.deleting=!1)}render(){const e=this.page,t=this.page.date,i="number"==typeof e.size,a=this.editable&&!this.isSidebar;return L`
|
|||
|
${a?L` <div class="check-select">
|
|||
|
<label class="checkbox">
|
|||
|
<input
|
|||
|
@change=${this.onSendSelToggle}
|
|||
|
type="checkbox"
|
|||
|
.checked="${this.selected}"
|
|||
|
/>
|
|||
|
</label>
|
|||
|
</div>`:""}
|
|||
|
|
|||
|
<div class="columns">
|
|||
|
${this.index?L`
|
|||
|
<div class="column col-index is-1 is-size-7">${this.index}.</div>
|
|||
|
`:""}
|
|||
|
<div class="column col-date is-2">
|
|||
|
<div>${t?t.toLocaleDateString():""}</div>
|
|||
|
<div>${t?t.toLocaleTimeString():""}</div>
|
|||
|
</div>
|
|||
|
<div class="column">
|
|||
|
<div class="media">
|
|||
|
<figure class="media-left">
|
|||
|
<p class="">
|
|||
|
${this.iconValid?L` <img
|
|||
|
class="favicon"
|
|||
|
@error="${()=>this.iconValid=!1}"
|
|||
|
src="${this.replayPrefix}/${this.page.timestamp}id_/${e.favIconUrl}"
|
|||
|
/>`:L` <span class="favicon"></span>`}
|
|||
|
</p>
|
|||
|
</figure>
|
|||
|
<div class="media-content ${this.isCurrent?"current":""}">
|
|||
|
<div role="heading" aria-level="${this.isSidebar?"4":"3"}">
|
|||
|
<a
|
|||
|
@dblclick="${this.onReload}"
|
|||
|
@click="${this.onReplay}"
|
|||
|
href="${We("pages",this.page.url,this.page.timestamp)}"
|
|||
|
>
|
|||
|
<p class="is-size-6 has-text-weight-bold has-text-link text">
|
|||
|
<keyword-mark keywords="${this.query}"
|
|||
|
>${e.title||e.url}</keyword-mark
|
|||
|
>
|
|||
|
</p>
|
|||
|
<p class="has-text-dark text">
|
|||
|
<keyword-mark keywords="${this.query}"
|
|||
|
>${e.url}</keyword-mark
|
|||
|
>
|
|||
|
</p>
|
|||
|
<p class="has-text-grey-dark text is-inline-date">
|
|||
|
${t?t.toLocaleString():""}
|
|||
|
</p>
|
|||
|
</a>
|
|||
|
${this.textSnippet?L` <div class="text">
|
|||
|
<keyword-mark keywords="${this.query}"
|
|||
|
>${this.textSnippet}</keyword-mark
|
|||
|
>
|
|||
|
</div>`:L``}
|
|||
|
</div>
|
|||
|
${i?L` <div class="media-right" style="margin-right: 2em">
|
|||
|
${Ie()(e.size)}
|
|||
|
</div>`:""}
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
|
|||
|
${a?L` ${this.deleting?L`
|
|||
|
<button
|
|||
|
class="button is-loading delete-button is-static"
|
|||
|
></button>
|
|||
|
`:L` <button
|
|||
|
@click="${this.onSendDeletePage}"
|
|||
|
class="delete delete-button"
|
|||
|
></button>`}`:""}
|
|||
|
</div>
|
|||
|
`}async updateFavIcon(){if(!this.page.favIconUrl)return void(this.favIconData=null);const e=await fetch(`${this.replayPrefix}/${this.page.timestamp}id_/${this.page.favIconUrl}`);if(200!=e.status)return void(this.favIconData=null);const t=await e.arrayBuffer(),i=e.headers.get("content-type");try{this.favIconData=`data:${i};base64,${btoa(String.fromCharCode.apply(null,t))}`}catch(e){console.log(e),this.favIconData=null}}updateSnippet(){const e=this.textSnippet;if(!this.query||!this.page.text)return this.textSnippet=null,void this.requestUpdate("textSnippet",e);let t=this.page.text,i=this.query,a=t.indexOf(this.query);if(a<0){let r=t.toLowerCase(),o=i.toLowerCase();if(a=r.indexOf(o),a<0)return this.textSnippet=null,void this.requestUpdate("textSnippet",e);t=r,i=o}let r=a;a=Math.max(a-100,0),r=Math.min(r+200,t.length),0===a&&r===t.length?this.textSnippet=t:this.textSnippet="..."+t.slice(a,r)+"...",this.requestUpdate("textSnippet",e)}onReplay(e,t=!1){e.preventDefault();const i={url:this.page.url,ts:this.page.timestamp};return this.sendChangeEvent(i,t),!1}onReload(e){return this.onReplay(e,!0)}sendChangeEvent(e,t){this.dispatchEvent(new CustomEvent("coll-tab-nav",{bubbles:!0,composed:!0,detail:{data:e,reload:t}}))}onSendDeletePage(){const e=this.page;this.dispatchEvent(new CustomEvent("delete-page",{detail:{page:e}}))}onSendSelToggle(e){const t=this.page.id,i=e.currentTarget.checked;this.dispatchEvent(new CustomEvent("sel-page",{detail:{page:t,selected:i}}))}}customElements.define("wr-page-entry",Bi);class Fi extends J{constructor(){super(),this.replayUrl="",this.replayTS="",this.actualTS="",this.url="",this.ts="",this.title="",this.collInfo=null,this.showAuth=!1,this.reauthWait=null,this.authFileHandle=null}static get properties(){return{collInfo:{type:Object},sourceUrl:{type:String},url:{type:String},ts:{type:String},replayUrl:{type:String},replayTS:{type:String},actualTS:{type:String},title:{type:String},iframeUrl:{type:String},showAuth:{type:Boolean},authFileHandle:{type:Object}}}firstUpdated(){window.addEventListener("message",(e=>this.onReplayMessage(e))),navigator.serviceWorker.addEventListener("message",(e=>this.handleAuthMessage(e)))}async handleAuthMessage(e){if("authneeded"===e.data.type&&this.collInfo&&e.data.coll===this.collInfo.coll){if(e.data.fileHandle){this.authFileHandle=e.data.fileHandle;try{if("granted"===await this.authFileHandle.requestPermission({mode:"read"}))return this.showAuth=!1,this.reauthWait=null,void this.refresh()}catch(e){console.warn(e)}}else this.authFileHandle=null;this.reauthWait?await this.reauthWait:this.showAuth=!0}}doSetIframeUrl(){this.iframeUrl=this.url?`${this.collInfo.replayPrefix}/${this.ts||""}mp_/${this.url}`:""}updated(e){if((e.has("sourceUrl")||e.has("collInfo"))&&(this.reauthWait=null),!this.url||this.replayUrl==this.url&&this.replayTS==this.ts||!e.has("url")&&!e.has("ts")||(this.replayUrl=this.url,this.replayTS=this.ts,this.showAuth=!1,this.reauthWait=null,this.doSetIframeUrl()),this.iframeUrl&&e.has("iframeUrl")){this.waitForLoad();const e={title:"Archived Page",replayTitle:!1};this.dispatchEvent(new CustomEvent("update-title",{bubbles:!0,composed:!0,detail:e}))}if(this.replayUrl&&e.has("replayUrl")||this.replayTS&&e.has("replayTS")){const e={url:this.replayUrl,ts:this.replayTS};this.dispatchEvent(new CustomEvent("coll-tab-nav",{detail:{replaceLoc:!0,data:e}}))}if(this.title&&(e.has("title")||e.has("actualTS"))){const e={title:this.title,url:this.replayUrl,ts:this.actualTS,replayTitle:!0};this.dispatchEvent(new CustomEvent("update-title",{bubbles:!0,composed:!0,detail:e}))}}setDisablePointer(e){const t=this.renderRoot.querySelector("iframe");t&&(t.style.pointerEvents=e?"none":"all")}onReplayMessage(e){const t=this.renderRoot.querySelector("iframe");if(t&&e.source===t.contentWindow)if("load"===e.data.wb_type||"replace-url"===e.data.wb_type){if(this.replayTS=e.data.is_live?"":e.data.ts,this.actualTS=e.data.ts,this.replayUrl=e.data.url,this.title=e.data.title||this.title,this.clearLoading(t.contentWindow),e.data.icons){const t=e.data.icons;this.dispatchEvent(new CustomEve
|
|||
|
:host {
|
|||
|
display: flex;
|
|||
|
flex-direction: column;
|
|||
|
height: 100%;
|
|||
|
}
|
|||
|
|
|||
|
.iframe-container {
|
|||
|
position: relative;
|
|||
|
width: 100%;
|
|||
|
height: 100%;
|
|||
|
border: 0px;
|
|||
|
}
|
|||
|
|
|||
|
.iframe-main {
|
|||
|
position: absolute;
|
|||
|
top: 0px;
|
|||
|
left: 0px;
|
|||
|
right: 0px;
|
|||
|
bottom: 0px;
|
|||
|
width: 100%;
|
|||
|
height: 100%;
|
|||
|
}
|
|||
|
|
|||
|
.intro-panel .panel-heading {
|
|||
|
font-size: 1em;
|
|||
|
display: inline-block;
|
|||
|
}
|
|||
|
|
|||
|
.iframe-main.modal-bg {
|
|||
|
z-index: 200;
|
|||
|
background-color: rgba(10, 10, 10, 0.7);
|
|||
|
}
|
|||
|
|
|||
|
#wrlogo {
|
|||
|
vertical-align: middle;
|
|||
|
}
|
|||
|
|
|||
|
.intro-panel .panel-block {
|
|||
|
padding: 1em;
|
|||
|
flex-direction: column;
|
|||
|
line-height: 2.5em;
|
|||
|
}
|
|||
|
|
|||
|
div.intro-panel.panel {
|
|||
|
min-width: 40%;
|
|||
|
display: flex;
|
|||
|
flex-direction: column;
|
|||
|
margin: 3em;
|
|||
|
background-color: white;
|
|||
|
}
|
|||
|
`)}render(){const e=`Replay of ${this.title?`${this.title}:`:""} ${this.url}`;return L` <h1 id="replay-heading" class="is-sr-only">${e}</h1>
|
|||
|
|
|||
|
${this.iframeUrl?L`
|
|||
|
<div class="iframe-container">
|
|||
|
<iframe
|
|||
|
class="iframe-main"
|
|||
|
name="___wb_replay_top_frame"
|
|||
|
@message="${this.onReplayMessage}"
|
|||
|
allow="autoplay 'self'; fullscreen"
|
|||
|
allowfullscreen
|
|||
|
src="${this.iframeUrl}"
|
|||
|
title="${e}"
|
|||
|
></iframe>
|
|||
|
|
|||
|
${this.showAuth?L`
|
|||
|
<div class="iframe-main modal-bg">
|
|||
|
<div class="panel intro-panel">
|
|||
|
<p class="panel-heading">
|
|||
|
<fa-icon
|
|||
|
id="wrlogo"
|
|||
|
size="1.5rem"
|
|||
|
.svg=${le()}
|
|||
|
aria-hidden="true"
|
|||
|
></fa-icon>
|
|||
|
Authorization Needed
|
|||
|
</p>
|
|||
|
<div class="panel-block">
|
|||
|
${this.authFileHandle?L`
|
|||
|
<p>
|
|||
|
This archive is loaded from a local file:
|
|||
|
<b>${this.authFileHandle.name}</b>
|
|||
|
</p>
|
|||
|
<p>
|
|||
|
The browser needs to confirm your permission
|
|||
|
to continue loading from this file.
|
|||
|
</p>
|
|||
|
<button
|
|||
|
class="button is-warning is-rounded"
|
|||
|
@click="${this.onReAuthed}"
|
|||
|
>
|
|||
|
Show Confirmation
|
|||
|
</button>
|
|||
|
`:L` <wr-gdrive
|
|||
|
.sourceUrl="${this.sourceUrl}"
|
|||
|
.state="trymanual"
|
|||
|
.reauth="${!0}"
|
|||
|
@load-ready="${this.onReAuthed}"
|
|||
|
></wr-gdrive>`}
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
`:""}
|
|||
|
</div>
|
|||
|
`:L` <div class="panel intro-panel">
|
|||
|
<p class="panel-heading">Replay Web Page</p>
|
|||
|
<div class="panel-block">
|
|||
|
<p>Enter a URL above to replay it from the web archive!</p>
|
|||
|
<p>
|
|||
|
(Or, check out <a href="#view=pages">Pages</a> or
|
|||
|
<a href="#view=resources">URLs</a> to explore the contents of
|
|||
|
this archive.)
|
|||
|
</p>
|
|||
|
</div>
|
|||
|
</div>`}`}}customElements.define("wr-coll-replay",Fi);var Hi=__webpack_require__(690),Wi=__webpack_require__.n(Hi),Gi=__webpack_require__(761),Ki=__webpack_require__.n(Gi);class Vi extends J{constructor(){super(),this.sortedData=[],this.data=[],this.pageResults=0,this.numResults=0,this.sortKey=null,this.sortDesc=null}static get properties(){return{id:{type:String},pageResults:{type:Number},data:{type:Array},sortedData:{type:Array},sortKey:{type:String},sortDesc:{type:Boolean}}}firstUpdated(){if(this.id){const e=localStorage.getItem(`${this.id}:sortKey`);null!==e&&(this.sortKey=e);const t=localStorage.getItem(`${this.id}:sortDesc`);null!==t&&(this.sortDesc="1"===t)}}updated(e){const t=e.has("sortKey"),i=e.has("sortDesc"),a=e.has("data");t&&null!==this.sortKey&&localStorage.setItem(`${this.id}:sortKey`,this.sortKey),i&&null!==this.sortDesc&&localStorage.setItem(`${this.id}:sortDesc`,this.sortDesc?"1":"0"),(t||i||a)&&this.sortData()}sortData(){this.sortedData=[...this.data],this.numResults=this.pageResults,""===this.sortKey?this.sortDesc&&this.sortedData.reverse():this.sortedData.sort(((e,t)=>e[this.sortKey]===t[this.sortKey]?0:this.sortDesc==e[this.sortKey]<t[this.sortKey]?1:-1)),this.sendSortChanged()}sendSortChanged(){const e={sortKey:this.sortKey,sortDesc:this.sortDesc,sortedData:this.numResults?this.sortedData.slice(0,this.numResults):this.sortedData};this.dispatchEvent(new CustomEvent("sort-changed",{detail:e}))}getMore(e=100){this.pageResults&&this.numResults>=this.sortedData.length||(this.numResults+=e,this.sendSortChanged())}static get styles(){return de(o`
|
|||
|
:host {
|
|||
|
min-width: 100px;
|
|||
|
box-sizing: border-box !important;
|
|||
|
}
|
|||
|
button.button.is-small {
|
|||
|
border-radius: 4px;
|
|||
|
}
|
|||
|
`)}render(){return L`
|
|||
|
<div class="select is-small">
|
|||
|
<select id="sort-select" @change=${e=>this.sortKey=e.currentTarget.value}>
|
|||
|
${this.sortKeys.map((e=>L`
|
|||
|
<option value="${e.key}" ?selected="${e.key===this.sortKey}">
|
|||
|
Sort By: ${e.name}
|
|||
|
</option>
|
|||
|
`))}
|
|||
|
</select>
|
|||
|
</div>
|
|||
|
<button @click=${()=>this.sortDesc=!this.sortDesc} class="button is-small">
|
|||
|
<span>Order:</span>
|
|||
|
<span class="is-sr-only">${this.sortDesc?"Ascending":"Descending"}</span>
|
|||
|
<span class="icon"><fa-icon aria-hidden="true" .svg=${this.sortDesc?Ki():Wi()}></span>
|
|||
|
</button>`}}customElements.define("wr-sorter",Vi);class Zi extends J{static get filters(){return[{name:"HTML",filter:"text/html,text/xhtml"},{name:"Images",filter:"image/"},{name:"Audio/Video",filter:"audio/,video/"},{name:"PDF",filter:"application/pdf"},{name:"Javascript",filter:"application/javascript,application/x-javascript"},{name:"CSS",filter:"text/css"},{name:"Fonts",filter:"font/,application/font-woff"},{name:"Plain Text",filter:"text/plain"},{name:"JSON",filter:"application/json"},{name:"DASH/HLS",filter:"application/dash+xml,application/x-mpegURL,application/vnd.apple.mpegurl"},{name:"All URLs",filter:""}]}static get sortKeys(){return[{key:"url",name:"URL"},{key:"ts",name:"Date"},{key:"mime",name:"Mime Type"},{key:"status",name:"Status"}]}constructor(){super(),this.collInfo=null,this.isSidebar=!1,this.currMime="",this.query="",this.urlSearchType="",this.filteredResults=[],this.sortedResults=[],this.results=[],this.newQuery=null,this.tryMore=!1,this.loading=!1,this.sortKey="url",this.sortDesc=!1}static get properties(){return{collInfo:{type:Object},isSidebar:{type:Boolean},currMime:{type:String},query:{type:String},urlSearchType:{type:String},filteredResults:{type:Array},sortedResults:{type:Array},loading:{type:Boolean},sortKey:{type:String},sortDesc:{type:Boolean}}}firstUpdated(){""===this.urlSearchType&&(this.urlSearchType="prefix")}_timedUpdate(){null!==this.newQuery&&(this.query=this.newQuery,this.newQuery=null)}updated(e){if(e.has("query")||e.has("urlSearchType")||e.has("currMime")){this.doLoadResources();const t={query:this.query,urlSearchType:this.urlSearchType,currMime:this.currMime},i=!e.has("currMime")&&!e.has("urlSearchType");this.dispatchEvent(new CustomEvent("coll-tab-nav",{detail:{replaceLoc:i,data:t}}))}(e.has("sortKey")||e.has("sortDesc"))&&this.filter()}async doLoadResources(e=!1){if(e&&(!this.tryMore||!this.results.length))return;if(this.loading)return;this.loading=!0;let t="contains"!==this.urlSearchType?this.query:"";const i=t&&"prefix"===this.urlSearchType?1:0;t&&!t.startsWith("http")&&(t="https://"+t);const a=this.currMime,r=new URLSearchParams({mime:a,url:t,prefix:i,count:100});if(e){const e=this.results[this.results.length-1];r.set("fromMime",e.mime),r.set("fromUrl",e.url),r.set("fromStatus",e.status),r.set("fromTs",new Date(e.date).getTime())}let o=await fetch(`${this.collInfo.apiPrefix}/urls?${r.toString()}`);o=await o.json(),this.results=e?this.results.concat(o.urls):o.urls,this.tryMore=o.urls.length>=100,this.filter(),this.loading=!1}onChangeTypeSearch(e){this.currMime=e.currentTarget.value}onChangeQuery(e){this.newQuery=e.currentTarget.value,this._ival&&window.clearTimeout(this._ival),this._ival=window.setTimeout((()=>this._timedUpdate()),250)}onClickUrlType(e){this.urlSearchType=e.currentTarget.value}filter(){const e=[],t="contains"===this.urlSearchType?this.query:"";for(const i of this.results)(!t||i.url.indexOf(t)>=0)&&e.push(i);this.filteredResults=e}onScroll(e){const t=e.currentTarget,i=t.scrollHeight-t.scrollTop-t.clientHeight;this.tryMore&&i<40&&this.doLoadResources(!0)}static get styles(){return de(o`
|
|||
|
:host {
|
|||
|
width: 100%;
|
|||
|
height: 100%;
|
|||
|
display: flex;
|
|||
|
min-width: 0px;
|
|||
|
flex-direction: column;
|
|||
|
}
|
|||
|
:host(.sidebar) .is-hidden-tablet {
|
|||
|
display: flex !important;
|
|||
|
}
|
|||
|
|
|||
|
:host(.sidebar) .is-hidden-mobile {
|
|||
|
display: none !important;
|
|||
|
}
|
|||
|
|
|||
|
:host(.sidebar) .level,
|
|||
|
:host(.sidebar) .level-left,
|
|||
|
:host(.sidebar) .level-right {
|
|||
|
display: block !important;
|
|||
|
}
|
|||
|
|
|||
|
:host(.sidebar) .columns {
|
|||
|
display: flex !important;
|
|||
|
flex-direction: column;
|
|||
|
}
|
|||
|
|
|||
|
:host(.sidebar) .column {
|
|||
|
width: 100% !important;
|
|||
|
}
|
|||
|
|
|||
|
.notification {
|
|||
|
width: 100%;
|
|||
|
}
|
|||
|
.all-results {
|
|||
|
margin: 0 0 0 0.5em;
|
|||
|
display: flex;
|
|||
|
flex-direction: column;
|
|||
|
min-height: 0;
|
|||
|
}
|
|||
|
.main-scroll {
|
|||
|
flex-grow: 1;
|
|||
|
}
|
|||
|
.minihead {
|
|||
|
font-size: 10px;
|
|||
|
font-weight: bold;
|
|||
|
}
|
|||
|
.columns {
|
|||
|
margin: 0px;
|
|||
|
}
|
|||
|
thead {
|
|||
|
margin-bottom: 24px;
|
|||
|
}
|
|||
|
table th:not([align]) {
|
|||
|
text-align: left;
|
|||
|
}
|
|||
|
.result {
|
|||
|
border-bottom: 1px #dbdbdb solid;
|
|||
|
min-height: fit-content;
|
|||
|
}
|
|||
|
.results-head {
|
|||
|
border-bottom: 2px #dbdbdb solid;
|
|||
|
margin-right: 16px;
|
|||
|
min-height: fit-content;
|
|||
|
display: block;
|
|||
|
width: 100%;
|
|||
|
}
|
|||
|
.results-head a {
|
|||
|
color: black;
|
|||
|
}
|
|||
|
.all-results .column {
|
|||
|
word-break: break-word;
|
|||
|
}
|
|||
|
div.sort-header {
|
|||
|
padding: 10px;
|
|||
|
margin-bottom: 0px !important;
|
|||
|
min-height: fit-content;
|
|||
|
}
|
|||
|
.flex-auto {
|
|||
|
flex: auto;
|
|||
|
}
|
|||
|
.asc:after {
|
|||
|
content: "▼";
|
|||
|
font-size: 0.75em;
|
|||
|
}
|
|||
|
.desc:after {
|
|||
|
content: "▲";
|
|||
|
font-size: 0.75em;
|
|||
|
}
|
|||
|
.num-results {
|
|||
|
margin-left: 1em;
|
|||
|
font-style: italic;
|
|||
|
}
|
|||
|
`)}render(){return L`
|
|||
|
<div
|
|||
|
role="heading"
|
|||
|
aria-level="${this.isSidebar?"2":"1"}"
|
|||
|
class="is-sr-only"
|
|||
|
>
|
|||
|
URLs in ${this.collInfo.title}
|
|||
|
</div>
|
|||
|
|
|||
|
<div
|
|||
|
role="heading"
|
|||
|
aria-level="${this.isSidebar?"3":"2"}"
|
|||
|
class="is-sr-only"
|
|||
|
>
|
|||
|
Search and Filter
|
|||
|
</div>
|
|||
|
<div class="notification level is-marginless">
|
|||
|
<div class="level-left flex-auto">
|
|||
|
<div class="level-item flex-auto">
|
|||
|
<span class="is-hidden-mobile">Search: </span>
|
|||
|
<div class="select">
|
|||
|
<select @change="${this.onChangeTypeSearch}">
|
|||
|
${Zi.filters.map((e=>L`
|
|||
|
<option
|
|||
|
value="${e.filter}"
|
|||
|
?selected="${e.filter===this.currMime}"
|
|||
|
>
|
|||
|
${e.name}
|
|||
|
</option>
|
|||
|
`))}
|
|||
|
</select>
|
|||
|
</div>
|
|||
|
<div class="field flex-auto">
|
|||
|
<div
|
|||
|
class="control has-icons-left ${this.loading?"is-loading":""}"
|
|||
|
>
|
|||
|
<input
|
|||
|
type="text"
|
|||
|
class="input"
|
|||
|
@input="${this.onChangeQuery}"
|
|||
|
.value="${this.query}"
|
|||
|
placeholder="Enter URL to Search"
|
|||
|
/>
|
|||
|
<span class="icon is-left"
|
|||
|
><fa-icon .svg="${je()}"></fa-icon
|
|||
|
></span>
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
<div class="control level-right">
|
|||
|
<div style="margin-left: 1em" class="control">
|
|||
|
<label class="radio has-text-left"
|
|||
|
><input
|
|||
|
type="radio"
|
|||
|
name="urltype"
|
|||
|
value="contains"
|
|||
|
?checked="${"contains"===this.urlSearchType}"
|
|||
|
@click="${this.onClickUrlType}"
|
|||
|
/> Contains</label
|
|||
|
>
|
|||
|
<label class="radio has-text-left"
|
|||
|
><input
|
|||
|
type="radio"
|
|||
|
name="urltype"
|
|||
|
value="prefix"
|
|||
|
?checked="${"prefix"===this.urlSearchType}"
|
|||
|
@click="${this.onClickUrlType}"
|
|||
|
/> Prefix</label
|
|||
|
>
|
|||
|
<label class="radio has-text-left"
|
|||
|
><input
|
|||
|
type="radio"
|
|||
|
name="urltype"
|
|||
|
value="exact"
|
|||
|
?checked="${"exact"===this.urlSearchType}"
|
|||
|
@click="${this.onClickUrlType}"
|
|||
|
/> Exact</label
|
|||
|
>
|
|||
|
<span
|
|||
|
id="num-results"
|
|||
|
class="num-results"
|
|||
|
is-pulled-right
|
|||
|
aria-live="polite"
|
|||
|
aria-atomic="true"
|
|||
|
>${this.filteredResults.length} Result(s)</span
|
|||
|
>
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
|
|||
|
<div class="sort-header is-hidden-tablet">
|
|||
|
<wr-sorter
|
|||
|
id="urls"
|
|||
|
.sortKey="${this.sortKey}"
|
|||
|
.sortDesc="${this.sortDesc}"
|
|||
|
.sortKeys="${Zi.sortKeys}"
|
|||
|
.data="${this.filteredResults}"
|
|||
|
@sort-changed="${this.onSortChanged}"
|
|||
|
>
|
|||
|
</wr-sorter>
|
|||
|
</div>
|
|||
|
|
|||
|
<div
|
|||
|
role="heading"
|
|||
|
aria-level="${this.isSidebar?"3":"2"}"
|
|||
|
id="results-heading"
|
|||
|
class="is-sr-only"
|
|||
|
>
|
|||
|
Results
|
|||
|
</div>
|
|||
|
|
|||
|
<table class="all-results" aria-labelledby="results-heading num-results">
|
|||
|
<thead>
|
|||
|
<tr class="columns results-head has-text-weight-bold">
|
|||
|
<th scope="col" class="column col-url is-6 is-hidden-mobile">
|
|||
|
<a
|
|||
|
role="button"
|
|||
|
href="#"
|
|||
|
@click="${this.onSort}"
|
|||
|
@keyup="${be}"
|
|||
|
data-key="url"
|
|||
|
class="${"url"===this.sortKey?this.sortDesc?"desc":"asc":""}"
|
|||
|
>URL</a
|
|||
|
>
|
|||
|
</th>
|
|||
|
<th scope="col" class="column col-ts is-2 is-hidden-mobile">
|
|||
|
<a
|
|||
|
role="button"
|
|||
|
href="#"
|
|||
|
@click="${this.onSort}"
|
|||
|
@keyup="${be}"
|
|||
|
data-key="ts"
|
|||
|
class="${"ts"===this.sortKey?this.sortDesc?"desc":"asc":""}"
|
|||
|
>Date</a
|
|||
|
>
|
|||
|
</th>
|
|||
|
<th scope="col" class="column col-mime is-3 is-hidden-mobile">
|
|||
|
<a
|
|||
|
role="button"
|
|||
|
href="#"
|
|||
|
@click="${this.onSort}"
|
|||
|
@keyup="${be}"
|
|||
|
data-key="mime"
|
|||
|
class="${"mime"===this.sortKey?this.sortDesc?"desc":"asc":""}"
|
|||
|
>Mime Type</a
|
|||
|
>
|
|||
|
</th>
|
|||
|
<th scope="col" class="column col-status is-1 is-hidden-mobile">
|
|||
|
<a
|
|||
|
role="button"
|
|||
|
href="#"
|
|||
|
@click="${this.onSort}"
|
|||
|
@keyup="${be}"
|
|||
|
data-key="status"
|
|||
|
class="${"status"===this.sortKey?this.sortDesc?"desc":"asc":""}"
|
|||
|
>Status</a
|
|||
|
>
|
|||
|
</th>
|
|||
|
</tr>
|
|||
|
</thead>
|
|||
|
|
|||
|
<tbody class="main-scroll" @scroll="${this.onScroll}">
|
|||
|
${this.sortedResults.length?this.sortedResults.map((e=>L`
|
|||
|
<tr class="columns result">
|
|||
|
<td class="column col-url is-6">
|
|||
|
<p class="minihead is-hidden-tablet">URL</p>
|
|||
|
<a
|
|||
|
@click="${this.onReplay}"
|
|||
|
data-url="${e.url}"
|
|||
|
data-ts="${e.ts}"
|
|||
|
href="${We("resources",e.url,e.ts)}"
|
|||
|
>
|
|||
|
<keyword-mark keywords="${this.query}"
|
|||
|
>${e.url}</keyword-mark
|
|||
|
>
|
|||
|
</a>
|
|||
|
</td>
|
|||
|
<td class="column col-ts is-2">
|
|||
|
<p class="minihead is-hidden-tablet">Date</p>
|
|||
|
${new Date(e.date).toLocaleString()}
|
|||
|
</td>
|
|||
|
<td class="column col-mime is-3">
|
|||
|
<p class="minihead is-hidden-tablet">Mime Type</p>
|
|||
|
${e.mime}
|
|||
|
</td>
|
|||
|
<td class="column col-status is-1">
|
|||
|
<p class="minihead is-hidden-tablet">Status</p>
|
|||
|
${e.status}
|
|||
|
</td>
|
|||
|
</tr>
|
|||
|
`)):L`<tr class="section">
|
|||
|
<td colspan="4"><i>No Results Found.</i></td>
|
|||
|
</tr>`}
|
|||
|
</tbody>
|
|||
|
</table>
|
|||
|
`}onSort(e){e.preventDefault();const t=e.currentTarget.getAttribute("data-key");t===this.sortKey?this.sortDesc=!this.sortDesc:(this.sortDesc=!1,this.sortKey=t)}onSortChanged(e){this.sortedResults=e.detail.sortedData,this.sortKey=e.detail.sortKey,this.sortDesc=e.detail.sortDesc}onReplay(e){e.preventDefault();const t={url:e.currentTarget.getAttribute("data-url"),ts:e.currentTarget.getAttribute("data-ts")};return this.dispatchEvent(new CustomEvent("coll-tab-nav",{detail:{data:t}})),!1}}customElements.define("wr-coll-resources",Zi);var Qi=document.currentScript&&document.currentScript.src,Ji="";class Yi extends J{constructor(){super(),this.replaybase="./replay/",this.replayfile=Ji,this.swName="sw.js",this.mainElementName="replay-app-main",this.appName="ReplayWeb.page",this.view="replay",this.ts="",this.url="",this.query="",this.config="",this.customConfig=null,this.coll="",this.paramString=null,this.deepLink=!1,this.newWindowBase="",this.inited=!1,this.embed=null,this.reloadCount=0,this.sandbox=!1,this.noWebWorker=!1,this.noCache=!1,this.noSandbox=null,this.logo=le(),this.loading="",this.useRuffle=!1}static setDefaultReplayFile(e){Ji=e}static get properties(){return{url:{type:String},ts:{type:String},query:{type:String},source:{type:String},src:{type:String},view:{type:String},embed:{type:String},replaybase:{type:String},swName:{type:String},title:{type:String},coll:{type:String},config:{type:String},inited:{type:Boolean},paramString:{type:String},hashString:{type:String},deepLink:{type:Boolean},sandbox:{type:Boolean},noSandbox:{type:Boolean},noWebWorker:{type:Boolean},noCache:{type:Boolean},hideOffscreen:{type:Boolean},newWindowBase:{type:String},errorMessage:{type:String},requireSubdomainIframe:{type:Boolean},loading:{type:String},useRuffle:{type:Boolean}}}async doRegister(){const e=new URL(this.replaybase,window.location.href);if(this.isCrossOrigin=e.origin!==window.location.origin,this.isCrossOrigin)return void(this.inited=!0);const t=this.swName+"?serveIndex=1",i=this.appName,a=this.replaybase,r=this.requireSubdomainIframe;this.swmanager=new Se({name:t,scope:a,requireSubdomainIframe:r,appName:i});try{await this.swmanager.register(),this.inited=!0}catch(e){this.errorMessage=this.swmanager.renderErrorReport(this.logo)}}handleMessage(e){const t=this.renderRoot.querySelector("iframe");if(t&&e.source===t.contentWindow){if(!e.data.view)return;if(e.data.title&&(this.title=e.data.title),!this.deepLink)return;const t=new URLSearchParams(e.data),i=new URL(window.location.href);i.hash="#"+t.toString(),window.history.replaceState({},"",i)}}firstUpdated(){this.noSandbox&&console.warn("The noSandbox flag is deprecated. ReplayWeb.page does not add a sandbox by default. To enable sandboxing, use 'sandbox' flag instead. This may result in PDFs not loading and pages opening in new windows, but may be more secure in some situations"),this.doRegister(),window.addEventListener("message",(e=>this.handleMessage(e))),this.deepLink&&(this.updateFromHash(),window.addEventListener("hashchange",(()=>this.updateFromHash()))),this.loadBrowserDefaults()}loadBrowserDefaults(){void 0!==window.GestureEvent&&void 0===window.SharedWorker&&(this.noWebWorker=!0),navigator.storage&&navigator.storage.estimate||(this.noCache=!0)}updateFromHash(){const e=new URLSearchParams(window.location.hash.slice(1));e.has("url")&&(this.url=e.get("url")),e.has("ts")&&(this.ts=e.get("ts")),e.has("query")&&(this.query=e.get("query")),e.has("view")&&(this.view=e.get("view"))}mergeConfigs(){if(!this.customConfig)return this.config;if(this.config){const e={...this.customConfig,...JSON.parse(this.config)};return JSON.stringify(e)}return JSON.stringify(this.customConfig)}updated(e){if(e.has("url")||e.has("ts")||e.has("query")||e.has("view")||e.has("source")||e.has("src")){this.embed=this.embed||"default",this.src&&(this.source=this.src);const e=new URL(this.source,document.baseURI),t=this.mergeConfigs(),i={source:e,customColl:this.coll,config:t,basePageUrl:window.location.href.split("#")[0],baseUrlSourcePrefix:this.newWindowBase,embed:this.embed};this.deepLink||i.baseUrlSourc
|
|||
|
.logo {
|
|||
|
margin: 1em;
|
|||
|
flex-grow: 1;
|
|||
|
}
|
|||
|
.error {
|
|||
|
white-space: pre-wrap;
|
|||
|
text-align: center;
|
|||
|
}
|
|||
|
.full-width {
|
|||
|
width: 100%;
|
|||
|
}
|
|||
|
iframe {
|
|||
|
width: 100%;
|
|||
|
height: 100%;
|
|||
|
border: 0px;
|
|||
|
padding: 0px;
|
|||
|
margin: 0px;
|
|||
|
}
|
|||
|
:host {
|
|||
|
width: 100%;
|
|||
|
height: 100%;
|
|||
|
display: block;
|
|||
|
}
|
|||
|
`)}render(){return L`
|
|||
|
${this.paramString&&this.hashString&&this.inited?L`
|
|||
|
<iframe
|
|||
|
sandbox="${(e=>null!=e?e:U)(this.sandbox?"allow-downloads allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-presentation allow-scripts allow-same-origin allow-forms":void 0)}"
|
|||
|
@load="${this.onLoad}"
|
|||
|
src="${this.replaybase}${this.replayfile}?${this.paramString}#${this.hashString}"
|
|||
|
allow="autoplay *; fullscreen"
|
|||
|
title="Replay of ${this.title?`${this.title}:`:""} ${this.url}"
|
|||
|
></iframe>
|
|||
|
`:L``}
|
|||
|
${this.errorMessage}
|
|||
|
`}onLoad(e){if(this.isCrossOrigin)return;const t=e.target.contentWindow,i=e.target.contentDocument;if(t.navigator.serviceWorker&&!t.navigator.serviceWorker.controller&&this.reloadCount<=2)return this.reloadCount++,void setTimeout((()=>t.location.reload()),100);if(this.reloadCount=0,t.customElements.get(this.mainElementName))return;const a=i.createElement("script");a.src=Qi,i.head.appendChild(a)}}!async function(){customElements.define("replay-web-page",Yi)}()})();var __webpack_export_target__=self;for(var i in __webpack_exports__)__webpack_export_target__[i]=__webpack_exports__[i];__webpack_exports__.__esModule&&Object.defineProperty(__webpack_export_target__,"__esModule",{value:!0})})();
|
|||
|
//# sourceMappingURL=/sm/869c1ae74c49f7d1f71528dafc367cd102e33c519262d1aeabe576c177dd0870.map
|