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

url mime search: switch radio buttons to drop down, add more mime type filters

Browse Source
This commit is contained in:
Ilya Kreymer
2020-05-09 13:06:36 -07:00
parent c00da11d10
commit ca83c80dc7
2 changed files with 78 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/frontend.js
Vendored
+28 -26
View File
@@ -67,7 +67,7 @@ class y{constructor(e,t,i){this.__parts=[],this.template=e,this.processor=t,this
* subject to an additional IP rights grant found at
* http://polymer.github.io/PATENTS.txt
*/
const _=e=>null===e||!("object"==typeof e||"function"==typeof e),$=e=>Array.isArray(e)||!(!e||!e[Symbol.iterator]);class T{constructor(e,t,i){this.dirty=!0,this.element=e,this.name=t,this.strings=i,this.parts=[];for(let e=0;e<i.length-1;e++)this.parts[e]=this._createPart()}_createPart(){return new C(this)}_getValue(){const e=this.strings,t=e.length-1;let i="";for(let a=0;a<t;a++){i+=e[a];const t=this.parts[a];if(void 0!==t){const e=t.value;if(_(e)||!$(e))i+="string"==typeof e?e:String(e);else for(const t of e)i+="string"==typeof t?t:String(t)}}return i+=e[t],i}commit(){this.dirty&&(this.dirty=!1,this.element.setAttribute(this.name,this._getValue()))}}class C{constructor(e){this.value=void 0,this.committer=e}setValue(e){e===w||_(e)&&e===this.value||(this.value=e,x(e)||(this.committer.dirty=!0))}commit(){for(;x(this.value);){const e=this.value;this.value=w,e(this)}this.value!==w&&this.committer.commit()}}class U{constructor(e){this.value=void 0,this.__pendingValue=void 0,this.options=e}appendInto(e){this.startNode=e.appendChild(f()),this.endNode=e.appendChild(f())}insertAfterNode(e){this.startNode=e,this.endNode=e.nextSibling}appendIntoPart(e){e.__insert(this.startNode=f()),e.__insert(this.endNode=f())}insertAfterPart(e){e.__insert(this.startNode=f()),this.endNode=e.endNode,e.endNode=this.startNode}setValue(e){this.__pendingValue=e}commit(){if(null===this.startNode.parentNode)return;for(;x(this.__pendingValue);){const e=this.__pendingValue;this.__pendingValue=w,e(this)}const e=this.__pendingValue;e!==w&&(_(e)?e!==this.value&&this.__commitText(e):e instanceof S?this.__commitTemplateResult(e):e instanceof Node?this.__commitNode(e):$(e)?this.__commitIterable(e):e===k?(this.value=k,this.clear()):this.__commitText(e))}__insert(e){this.endNode.parentNode.insertBefore(e,this.endNode)}__commitNode(e){this.value!==e&&(this.clear(),this.__insert(e),this.value=e)}__commitText(e){const t=this.startNode.nextSibling,i="string"==typeof(e=null==e?"":e)?e:String(e);t===this.endNode.previousSibling&&3===t.nodeType?t.data=i:this.__commitNode(document.createTextNode(i)),this.value=e}__commitTemplateResult(e){const t=this.options.templateFactory(e);if(this.value instanceof y&&this.value.template===t)this.value.update(e.values);else{const i=new y(t,e.processor,this.options),a=i._clone();i.update(e.values),this.__commitNode(a),this.value=i}}__commitIterable(e){Array.isArray(this.value)||(this.value=[],this.clear());const t=this.value;let i,a=0;for(const r of e)i=t[a],void 0===i&&(i=new U(this.options),t.push(i),0===a?i.appendIntoPart(this):i.insertAfterPart(t[a-1])),i.setValue(r),i.commit(),a++;a<t.length&&(t.length=a,this.clear(i&&i.endNode))}clear(e=this.startNode){o(this.startNode.parentNode,e.nextSibling,this.endNode)}}class A{constructor(e,t,i){if(this.value=void 0,this.__pendingValue=void 0,2!==i.length||""!==i[0]||""!==i[1])throw new Error("Boolean attributes can only contain a single expression");this.element=e,this.name=t,this.strings=i}setValue(e){this.__pendingValue=e}commit(){for(;x(this.__pendingValue);){const e=this.__pendingValue;this.__pendingValue=w,e(this)}if(this.__pendingValue===w)return;const e=!!this.__pendingValue;this.value!==e&&(e?this.element.setAttribute(this.name,""):this.element.removeAttribute(this.name),this.value=e),this.__pendingValue=w}}class P extends T{constructor(e,t,i){super(e,t,i),this.single=2===i.length&&""===i[0]&&""===i[1]}_createPart(){return new E(this)}_getValue(){return this.single?this.parts[0].value:super._getValue()}commit(){this.dirty&&(this.dirty=!1,this.element[this.name]=this._getValue())}}class E extends C{}let R=!1;(()=>{try{const e={get capture(){return R=!0,!1}};window.addEventListener("test",e,e),window.removeEventListener("test",e,e)}catch(e){}})();class L{constructor(e,t,i){this.value=void 0,this.__pendingValue=void 0,this.element=e,this.eventName=t,this.eventContext=i,this.__boundHandleEvent=e=>this.handleEvent(e)}setValue(e){this.__pendingValue=e}commit(){for(;x(this.__pendingValue);){const e=this.__pendingValue;this.__pendingValue=w,e(this)}if(this.__pendingValue===w)return;const e=this.__pendingValue,t=this.value,i=null==e||null!=t&&(e.capture!==t.capture||e.once!==t.once||e.passive!==t.passive),a=null!=e&&(null==t||i);i&&this.element.removeEventListener(this.eventName,this.__boundHandleEvent,this.__options),a&&(this.__options=j(e),this.element.addEventListener(this.eventName,this.__boundHandleEvent,this.__options)),this.value=e,this.__pendingValue=w}handleEvent(e){"function"==typeof this.value?this.value.call(this.eventContext||this.element,e):this.value.handleEvent(e)}}const j=e=>e&&(R?{capture:e.capture,passive:e.passive,once:e.once}:e.capture)
const _=e=>null===e||!("object"==typeof e||"function"==typeof e),$=e=>Array.isArray(e)||!(!e||!e[Symbol.iterator]);class C{constructor(e,t,i){this.dirty=!0,this.element=e,this.name=t,this.strings=i,this.parts=[];for(let e=0;e<i.length-1;e++)this.parts[e]=this._createPart()}_createPart(){return new T(this)}_getValue(){const e=this.strings,t=e.length-1;let i="";for(let a=0;a<t;a++){i+=e[a];const t=this.parts[a];if(void 0!==t){const e=t.value;if(_(e)||!$(e))i+="string"==typeof e?e:String(e);else for(const t of e)i+="string"==typeof t?t:String(t)}}return i+=e[t],i}commit(){this.dirty&&(this.dirty=!1,this.element.setAttribute(this.name,this._getValue()))}}class T{constructor(e){this.value=void 0,this.committer=e}setValue(e){e===w||_(e)&&e===this.value||(this.value=e,x(e)||(this.committer.dirty=!0))}commit(){for(;x(this.value);){const e=this.value;this.value=w,e(this)}this.value!==w&&this.committer.commit()}}class U{constructor(e){this.value=void 0,this.__pendingValue=void 0,this.options=e}appendInto(e){this.startNode=e.appendChild(f()),this.endNode=e.appendChild(f())}insertAfterNode(e){this.startNode=e,this.endNode=e.nextSibling}appendIntoPart(e){e.__insert(this.startNode=f()),e.__insert(this.endNode=f())}insertAfterPart(e){e.__insert(this.startNode=f()),this.endNode=e.endNode,e.endNode=this.startNode}setValue(e){this.__pendingValue=e}commit(){if(null===this.startNode.parentNode)return;for(;x(this.__pendingValue);){const e=this.__pendingValue;this.__pendingValue=w,e(this)}const e=this.__pendingValue;e!==w&&(_(e)?e!==this.value&&this.__commitText(e):e instanceof S?this.__commitTemplateResult(e):e instanceof Node?this.__commitNode(e):$(e)?this.__commitIterable(e):e===k?(this.value=k,this.clear()):this.__commitText(e))}__insert(e){this.endNode.parentNode.insertBefore(e,this.endNode)}__commitNode(e){this.value!==e&&(this.clear(),this.__insert(e),this.value=e)}__commitText(e){const t=this.startNode.nextSibling,i="string"==typeof(e=null==e?"":e)?e:String(e);t===this.endNode.previousSibling&&3===t.nodeType?t.data=i:this.__commitNode(document.createTextNode(i)),this.value=e}__commitTemplateResult(e){const t=this.options.templateFactory(e);if(this.value instanceof y&&this.value.template===t)this.value.update(e.values);else{const i=new y(t,e.processor,this.options),a=i._clone();i.update(e.values),this.__commitNode(a),this.value=i}}__commitIterable(e){Array.isArray(this.value)||(this.value=[],this.clear());const t=this.value;let i,a=0;for(const r of e)i=t[a],void 0===i&&(i=new U(this.options),t.push(i),0===a?i.appendIntoPart(this):i.insertAfterPart(t[a-1])),i.setValue(r),i.commit(),a++;a<t.length&&(t.length=a,this.clear(i&&i.endNode))}clear(e=this.startNode){o(this.startNode.parentNode,e.nextSibling,this.endNode)}}class A{constructor(e,t,i){if(this.value=void 0,this.__pendingValue=void 0,2!==i.length||""!==i[0]||""!==i[1])throw new Error("Boolean attributes can only contain a single expression");this.element=e,this.name=t,this.strings=i}setValue(e){this.__pendingValue=e}commit(){for(;x(this.__pendingValue);){const e=this.__pendingValue;this.__pendingValue=w,e(this)}if(this.__pendingValue===w)return;const e=!!this.__pendingValue;this.value!==e&&(e?this.element.setAttribute(this.name,""):this.element.removeAttribute(this.name),this.value=e),this.__pendingValue=w}}class P extends C{constructor(e,t,i){super(e,t,i),this.single=2===i.length&&""===i[0]&&""===i[1]}_createPart(){return new E(this)}_getValue(){return this.single?this.parts[0].value:super._getValue()}commit(){this.dirty&&(this.dirty=!1,this.element[this.name]=this._getValue())}}class E extends T{}let L=!1;(()=>{try{const e={get capture(){return L=!0,!1}};window.addEventListener("test",e,e),window.removeEventListener("test",e,e)}catch(e){}})();class R{constructor(e,t,i){this.value=void 0,this.__pendingValue=void 0,this.element=e,this.eventName=t,this.eventContext=i,this.__boundHandleEvent=e=>this.handleEvent(e)}setValue(e){this.__pendingValue=e}commit(){for(;x(this.__pendingValue);){const e=this.__pendingValue;this.__pendingValue=w,e(this)}if(this.__pendingValue===w)return;const e=this.__pendingValue,t=this.value,i=null==e||null!=t&&(e.capture!==t.capture||e.once!==t.once||e.passive!==t.passive),a=null!=e&&(null==t||i);i&&this.element.removeEventListener(this.eventName,this.__boundHandleEvent,this.__options),a&&(this.__options=j(e),this.element.addEventListener(this.eventName,this.__boundHandleEvent,this.__options)),this.value=e,this.__pendingValue=w}handleEvent(e){"function"==typeof this.value?this.value.call(this.eventContext||this.element,e):this.value.handleEvent(e)}}const j=e=>e&&(L?{capture:e.capture,passive:e.passive,once:e.once}:e.capture)
/**
* @license
* Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
@@ -107,7 +107,7 @@ const _=e=>null===e||!("object"==typeof e||"function"==typeof e),$=e=>Array.isAr
* subject to an additional IP rights grant found at
* http://polymer.github.io/PATENTS.txt
*/
class{handleAttributeExpressions(e,t,i,a){const r=t[0];if("."===r){return new P(e,t.slice(1),i).parts}return"@"===r?[new L(e,t.slice(1),a.eventContext)]:"?"===r?[new A(e,t.slice(1),i)]:new T(e,t,i).parts}handleTextExpression(e){return new U(e)}};
class{handleAttributeExpressions(e,t,i,a){const r=t[0];if("."===r){return new P(e,t.slice(1),i).parts}return"@"===r?[new R(e,t.slice(1),a.eventContext)]:"?"===r?[new A(e,t.slice(1),i)]:new C(e,t,i).parts}handleTextExpression(e){return new U(e)}};
/**
* @license
* Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
@@ -159,7 +159,7 @@ const X="adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.pro
* subject to an additional IP rights grant found at
* http://polymer.github.io/PATENTS.txt
*/
const ae=new WeakMap,re=v(e=>t=>{if(!(t instanceof U))throw new Error("unsafeHTML can only be used in text bindings");const i=ae.get(t);if(void 0!==i&&_(e)&&e===i.value&&t.value===i.fragment)return;const a=document.createElement("template");a.innerHTML=e;const r=document.importNode(a.content,!0);t.setValue(r),ae.set(t,{value:e,fragment:r})}),oe=new WeakMap,ne=v(e=>t=>{if(!(t instanceof U))throw new Error("unsafeSVG can only be used in text bindings");const i=oe.get(t);if(void 0!==i&&_(e)&&e===i.value&&t.value===i.fragment)return;const a=document.createElement("template");a.innerHTML=`<svg>${e}</svg>`;const o=a.content,n=o.firstChild;o.removeChild(n),r(o,n.firstChild);const s=document.importNode(o,!0);t.setValue(s),oe.set(t,{value:e,fragment:s})}),se=new WeakMap,le=v(e=>t=>{if(!(t instanceof C)||t instanceof E||"style"!==t.committer.name||t.committer.parts.length>1)throw new Error("The `styleMap` directive must be used in the style attribute and must be the only part in the attribute.");const{committer:i}=t,{style:a}=i.element;let r=se.get(t);void 0===r&&(a.cssText=i.strings.join(" "),se.set(t,r=new Set)),r.forEach(t=>{t in e||(r.delete(t),-1===t.indexOf("-")?a[t]=null:a.removeProperty(t))});for(const t in e)r.add(t),-1===t.indexOf("-")?a[t]=e[t]:a.setProperty(t,e[t])});async function de(e){try{e=new URL(e,window.location.origin).href}catch(e){}return{url:e,coll:"id-"+(await async function(e,t){const i=(new TextEncoder).encode(e),a=await crypto.subtle.digest(t,i);return Array.from(new Uint8Array(a)).map(e=>e.toString(16).padStart(2,"0")).join("")}(e,"SHA-256")).slice(0,12)}}var ce;function be(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&&ce.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)),ue()):-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"))),ue()):he(e,t,i)})).catch((function(e){return fe(t,e)}))}(e,a,i),navigator.serviceWorker.ready.then((function(e){a("ready",e)}))):(he(e,a,i),navigator.serviceWorker.ready.then((function(e){a("ready",e)})))}))}function fe(e,t){navigator.onLine||e("offline"),e("error",t)}function he(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 fe(t,e)}))}function ue(){"serviceWorker"in navigator&&navigator.serviceWorker.ready.then((function(e){e.unregister()}))}"undefined"!=typeof window&&(ce="undefined"!=typeof Promise?new Promise((function(e){return window.addEventListener("load",e)})):{then:function(e){return window.addEventListener("load",e)}});var me=i(70),pe=i.n(me),ge=i(71),ve=i.n(ge),xe=(i(92),i(72)),we=i.n(xe),ke=i(73),ye=i.n(ke),ze=i(74),Se=i.n(ze),_e=i(75),$e=i.n(_e),Te=i(76),Ce=i.n(Te),Ue=i(77),Ae=i.n(Ue),Pe=i(78),Ee=i.n(Pe),Re=i(79),Le=i.n(Re);const je=(Ie=we.a,new Q(String(Ie),K));var Ie;function Ne(e){return[je,e]}const Ge=new Worker("./sw.js");class Me extends ie{constructor(){super(),this.sourceUrl=null,this.sourceLoaded=!1,this.showTerms=!1,this.pageParams={}}static get properties(){return{pageParams:{type:Object},sourceUrl:{type:String},navMenuShown:{type:Boolean},showTerms:{type:Boolean},sourceLoaded:{type:Boolean}}}static get styles(){return Ne(ee`
const ae=new WeakMap,re=v(e=>t=>{if(!(t instanceof U))throw new Error("unsafeHTML can only be used in text bindings");const i=ae.get(t);if(void 0!==i&&_(e)&&e===i.value&&t.value===i.fragment)return;const a=document.createElement("template");a.innerHTML=e;const r=document.importNode(a.content,!0);t.setValue(r),ae.set(t,{value:e,fragment:r})}),oe=new WeakMap,ne=v(e=>t=>{if(!(t instanceof U))throw new Error("unsafeSVG can only be used in text bindings");const i=oe.get(t);if(void 0!==i&&_(e)&&e===i.value&&t.value===i.fragment)return;const a=document.createElement("template");a.innerHTML=`<svg>${e}</svg>`;const o=a.content,n=o.firstChild;o.removeChild(n),r(o,n.firstChild);const s=document.importNode(o,!0);t.setValue(s),oe.set(t,{value:e,fragment:s})}),se=new WeakMap,le=v(e=>t=>{if(!(t instanceof T)||t instanceof E||"style"!==t.committer.name||t.committer.parts.length>1)throw new Error("The `styleMap` directive must be used in the style attribute and must be the only part in the attribute.");const{committer:i}=t,{style:a}=i.element;let r=se.get(t);void 0===r&&(a.cssText=i.strings.join(" "),se.set(t,r=new Set)),r.forEach(t=>{t in e||(r.delete(t),-1===t.indexOf("-")?a[t]=null:a.removeProperty(t))});for(const t in e)r.add(t),-1===t.indexOf("-")?a[t]=e[t]:a.setProperty(t,e[t])});async function de(e){try{e=new URL(e,window.location.origin).href}catch(e){}return{url:e,coll:"id-"+(await async function(e,t){const i=(new TextEncoder).encode(e),a=await crypto.subtle.digest(t,i);return Array.from(new Uint8Array(a)).map(e=>e.toString(16).padStart(2,"0")).join("")}(e,"SHA-256")).slice(0,12)}}var ce;function be(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&&ce.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)),ue()):-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"))),ue()):he(e,t,i)})).catch((function(e){return fe(t,e)}))}(e,a,i),navigator.serviceWorker.ready.then((function(e){a("ready",e)}))):(he(e,a,i),navigator.serviceWorker.ready.then((function(e){a("ready",e)})))}))}function fe(e,t){navigator.onLine||e("offline"),e("error",t)}function he(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 fe(t,e)}))}function ue(){"serviceWorker"in navigator&&navigator.serviceWorker.ready.then((function(e){e.unregister()}))}"undefined"!=typeof window&&(ce="undefined"!=typeof Promise?new Promise((function(e){return window.addEventListener("load",e)})):{then:function(e){return window.addEventListener("load",e)}});var me=i(70),pe=i.n(me),ge=i(71),ve=i.n(ge),xe=(i(92),i(72)),we=i.n(xe),ke=i(73),ye=i.n(ke),ze=i(74),Se=i.n(ze),_e=i(75),$e=i.n(_e),Ce=i(76),Te=i.n(Ce),Ue=i(77),Ae=i.n(Ue),Pe=i(78),Ee=i.n(Pe),Le=i(79),Re=i.n(Le);const je=(Ie=we.a,new Q(String(Ie),K));var Ie;function Ne(e){return[je,e]}const Ge=new Worker("./sw.js");class Me extends ie{constructor(){super(),this.sourceUrl=null,this.sourceLoaded=!1,this.showTerms=!1,this.pageParams={}}static get properties(){return{pageParams:{type:Object},sourceUrl:{type:String},navMenuShown:{type:Boolean},showTerms:{type:Boolean},sourceLoaded:{type:Boolean}}}static get styles(){return Ne(ee`
#logo {
max-height: 2.5rem;
margin-right: 8px;
@@ -332,7 +332,7 @@ const ae=new WeakMap,re=v(e=>t=>{if(!(t instanceof U))throw new Error("unsafeHTM
@change=${this.onChooseFile} type="file" id="fileupload" name="fileupload">
<span class="file-cta">
<span class="file-icon">
<fa-icon size="0.9em" .svg=${Le.a}></fa-icon>
<fa-icon size="0.9em" .svg=${Re.a}></fa-icon>
</span>
<span class="file-label">
Choose File...
@@ -423,7 +423,7 @@ const ae=new WeakMap,re=v(e=>t=>{if(!(t instanceof U))throw new Error("unsafeHTM
<a @click="${this.onTabClick}" href="#resources"
class="is-size-6 ${"resources"===this.tabData.view?"is-active":""}">
<span class="icon"><fa-icon .svg="${Ce.a}"></fa-icon></span>URL Resources</a>
<span class="icon"><fa-icon .svg="${Te.a}"></fa-icon></span>URL Resources</a>
<a @click="${this.onTabClick}" href="#replay"
class="is-size-6 ${"replay"===this.tabData.view?"is-active":""}">
@@ -440,7 +440,7 @@ const ae=new WeakMap,re=v(e=>t=>{if(!(t instanceof U))throw new Error("unsafeHTM
<wr-coll-resources .collInfo="${this.collInfo}"
urlSearch="${this.tabData.urlSearch||""}"
urlSearchType="${this.tabData.urlSearchType||""}"
currMime="${this.tabData.currMime||"text/html,text/xhtml"}"
.currMime="${this.tabData.currMime}"
@coll-tab-nav="${this.onCollTabNav}" id="resources"
class="panel-block is-paddingless ${"resources"===this.tabData.view?"":"is-hidden"}">
</wr-coll-resources>
@@ -522,7 +522,7 @@ const ae=new WeakMap,re=v(e=>t=>{if(!(t instanceof U))throw new Error("unsafeHTM
</div>
</article>
`)}
`}onReplay(e){e.preventDefault();const t={url:e.currentTarget.getAttribute("data-url"),ts:e.currentTarget.getAttribute("data-ts"),view:"replay"};return this.sendChangeEvent(t),!1}sendChangeEvent(e){this.dispatchEvent(new CustomEvent("coll-tab-nav",{detail:{data:e}}))}onClickScroll(e){return e.preventDefault(),this.scrollToList(e.currentTarget.getAttribute("data-list")),!1}scrollToList(e){this.currList=Number(e),this.currList>this.collInfo.lists.length&&(this.currList=0),this.sendChangeEvent({currList:this.currList||void 0});this.clickTime=(new Date).getTime(),this.renderRoot.getElementById("list-"+this.currList).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)),this.sendChangeEvent({currList:this.currList})),(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)}}}class Ve extends ie{constructor(){super(),this.collInfo=null,this.currMime="text/html,text/xhtml",this.urlSearch="",this.urlSearchType="",this.filteredResults=[],this.results=[],this.tryMore=!1,this.loading=!1,this.filters=[{name:"HTML",filter:"text/html,text/xhtml"},{name:"Images",filter:"image/"},{name:"Audio/Video",filter:"audio/,video/"},{name:"PDF",filter:"application/pdf"},{name:"All",filter:""}]}static get properties(){return{collInfo:{type:Object},currMime:{type:String},urlSearch:{type:String},urlSearchType:{type:String},filteredResults:{type:Array},loading:{type:Boolean}}}firstUpdated(){}updated(e){if(e.has("urlSearch")||e.has("urlSearchType")||e.has("currMime")){this.doLoadResources();const t={urlSearch:this.urlSearch,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}}))}}async doLoadResources(){this.loading=!0;let e=""!==this.urlSearchType?this.urlSearch:"";const t=e&&"prefix"===this.urlSearchType?1:0;e&&!e.startsWith("http")&&(e="https://"+e);const i=new URLSearchParams({mime:this.currMime,url:e,prefix:t,count:100}).toString();let a=await fetch(`${this.collInfo.apiPrefix}/urls?${i}`);a=await a.json(),this.results=a.urls,this.tryMore=100===a.urls.length,this.filter();this.urlSearch,this.currMime,this.urlSearchType;this.loading=!1}async doLoadMore(){if(!this.tryMore||!this.results.length)return;if(this.loading)return;this.loading=!0;const e=""!==this.urlSearchType?this.urlSearch:"",t=e&&"prefix"===this.urlSearchType?1:0,i=this.results[this.results.length-1],a=new URLSearchParams({mime:this.currMime,url:e,prefix:t,fromMime:i.mime,fromUrl:i.url,fromTs:new Date(i.date).getTime(),count:100}).toString();let r=await fetch(`${this.collInfo.apiPrefix}/urls?${a}`);r=await r.json(),this.results=this.results.concat(r.urls),this.tryMore=100===r.urls.length,this.filter(),this.loading=!1}onChangeTypeSearch(e){this.currMime=e.currentTarget.value}onChangeUrlSearch(e){this.urlSearch=e.currentTarget.value}onClickUrlType(e){this.urlSearchType=e.currentTarget.value}filter(){const e=[],t=""===this.urlSearchType?this.urlSearch:"";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.doLoadMore()}static get styles(){return Ne(ee`
`}onReplay(e){e.preventDefault();const t={url:e.currentTarget.getAttribute("data-url"),ts:e.currentTarget.getAttribute("data-ts"),view:"replay"};return this.sendChangeEvent(t),!1}sendChangeEvent(e){this.dispatchEvent(new CustomEvent("coll-tab-nav",{detail:{data:e}}))}onClickScroll(e){return e.preventDefault(),this.scrollToList(e.currentTarget.getAttribute("data-list")),!1}scrollToList(e){this.currList=Number(e),this.currList>this.collInfo.lists.length&&(this.currList=0),this.sendChangeEvent({currList:this.currList||void 0});this.clickTime=(new Date).getTime(),this.renderRoot.getElementById("list-"+this.currList).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)),this.sendChangeEvent({currList:this.currList})),(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)}}}class Ve extends ie{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:"all"}]}constructor(){super(),this.collInfo=null,this.currMime="",this.urlSearch="",this.urlSearchType="",this.filteredResults=[],this.results=[],this.tryMore=!1,this.loading=!1}static get properties(){return{collInfo:{type:Object},currMime:{type:String},urlSearch:{type:String},urlSearchType:{type:String},filteredResults:{type:Array},loading:{type:Boolean}}}firstUpdated(){}updated(e){if(e.has("urlSearch")||e.has("urlSearchType")||e.has("currMime")){this.currMime||(this.currMime="text/html,text/xhtml"),this.doLoadResources();const t={urlSearch:this.urlSearch,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}}))}}async doLoadResources(){this.loading=!0;let e=""!==this.urlSearchType?this.urlSearch:"";const t=e&&"prefix"===this.urlSearchType?1:0;e&&!e.startsWith("http")&&(e="https://"+e);const i="all"===this.currMime?"":this.currMime,a=new URLSearchParams({mime:i,url:e,prefix:t,count:100}).toString();let r=await fetch(`${this.collInfo.apiPrefix}/urls?${a}`);r=await r.json(),this.results=r.urls,this.tryMore=100===r.urls.length,this.filter(),this.loading=!1}async doLoadMore(){if(!this.tryMore||!this.results.length)return;if(this.loading)return;this.loading=!0;const e=""!==this.urlSearchType?this.urlSearch:"",t=e&&"prefix"===this.urlSearchType?1:0,i="all"===this.currMime?"":this.currMime,a=this.results[this.results.length-1],r=new URLSearchParams({mime:i,url:e,prefix:t,fromMime:a.mime,fromUrl:a.url,fromTs:new Date(a.date).getTime(),count:100}).toString();let o=await fetch(`${this.collInfo.apiPrefix}/urls?${r}`);o=await o.json(),this.results=this.results.concat(o.urls),this.tryMore=100===o.urls.length,this.filter(),this.loading=!1}onChangeTypeSearch(e){this.currMime=e.currentTarget.value}onChangeUrlSearch(e){this.urlSearch=e.currentTarget.value}onClickUrlType(e){this.urlSearchType=e.currentTarget.value}filter(){const e=[],t=""===this.urlSearchType?this.urlSearch:"";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.doLoadMore()}static get styles(){return Ne(ee`
:host {
display: flex;
flex-direction: column;
@@ -531,7 +531,7 @@ const ae=new WeakMap,re=v(e=>t=>{if(!(t instanceof U))throw new Error("unsafeHTM
width: 100%;
}
.main-scroll {
max-height: calc(100vh - 247px);
max-height: calc(100vh - 199px);
width: 100vw;
}
table {
@@ -578,30 +578,32 @@ const ae=new WeakMap,re=v(e=>t=>{if(!(t instanceof U))throw new Error("unsafeHTM
`)}render(){return O`
<div class="notification level is-marginless">
<div class="level-left flex-auto">
<div class="field flex-column">
<div class="level-item flex-auto">
<span>Search:&nbsp;&nbsp;</span>
<div class="select">
<select @change="${this.onChangeTypeSearch}">
${Ve.filters.map(e=>O`
<option value="${e.filter}"
?selected="${e.filter===this.currMime}">
${e.name}
</option>
`)}
</select>
</div>
<div class="field flex-auto">
<div class="control ${this.loading?"is-loading":""}">
<input type="text" class="input" @input="${this.onChangeUrlSearch}" value="${this.urlSearch}" type="text" placeholder="Search URL">
<input type="text" class="input" @input="${this.onChangeUrlSearch}" value="${this.urlSearch}" type="text" placeholder="Enter URL search here">
</div>
<div class="control">
<label class="radio has-text-left"><input type="radio" name="urltype" value="" ?checked="${""===this.urlSearchType}" @click="${this.onClickUrlType}">&nbsp;Contains</label>
<label class="radio has-text-left"><input type="radio" name="urltype" value="prefix" ?checked="${"prefix"===this.urlSearchType}" @click="${this.onClickUrlType}">&nbsp;Prefix</label>
<label class="radio has-text-left"><input type="radio" name="urltype" value="exact" ?checked="${"exact"===this.urlSearchType}" @click="${this.onClickUrlType}">&nbsp;Exact</label>
<span class="is-pulled-right" style="margin-left: 1em">Showing ${this.filteredResults.length} Results</span>
</div>
</div>
</div>
<div class="control level-right">
<span>Resource Type:&nbsp;&nbsp;</span>
${this.filters.map(e=>O`
<label class="radio has-text-left">
<input type="radio" name="mime"
value="${e.filter}"
@click="${this.onChangeTypeSearch}"
?checked="${e.filter===this.currMime}"
>
${e.name}
</label>
`)}
<div style="margin-left: 1em" class="control">
<label class="radio has-text-left"><input type="radio" name="urltype" value="" ?checked="${""===this.urlSearchType}" @click="${this.onClickUrlType}">&nbsp;Contains</label>
<label class="radio has-text-left"><input type="radio" name="urltype" value="prefix" ?checked="${"prefix"===this.urlSearchType}" @click="${this.onClickUrlType}">&nbsp;Prefix</label>
<label class="radio has-text-left"><input type="radio" name="urltype" value="exact" ?checked="${"exact"===this.urlSearchType}" @click="${this.onClickUrlType}">&nbsp;Exact</label>
<span class="is-pulled-right" style="margin-left: 1em">(${this.filteredResults.length} Results)</span>
</div>
</div>
</div>
<div class="" style="">
src/frontend.js
+48 -37
View File
@@ -846,7 +846,7 @@ class WrColl extends LitElement
<wr-coll-resources .collInfo="${this.collInfo}"
urlSearch="${this.tabData.urlSearch || ""}"
urlSearchType="${this.tabData.urlSearchType || ""}"
currMime="${this.tabData.currMime || "text/html,text/xhtml"}"
.currMime="${this.tabData.currMime}"
@coll-tab-nav="${this.onCollTabNav}" id="resources"
class="panel-block is-paddingless ${this.tabData.view === 'resources' ? '' : 'is-hidden'}">
</wr-coll-resources>
@@ -1081,11 +1081,27 @@ class WrCuratedPages extends LitElement
// ===========================================================================
class WrResources extends LitElement
{
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: "all"}
];
}
constructor() {
super();
this.collInfo = null;
this.currMime = "text/html,text/xhtml";
this.currMime = "";
this.urlSearch = "";
this.urlSearchType = "";
@@ -1095,14 +1111,6 @@ class WrResources extends LitElement
this.tryMore = false;
this.loading = false;
this.filters = [
{name: "HTML", filter: "text/html,text/xhtml"},
{name: "Images", filter: "image/"},
{name: "Audio/Video", filter: "audio/,video/"},
{name: "PDF", filter: "application/pdf"},
{name: "All", filter: ""}
]
}
static get properties() {
@@ -1125,6 +1133,10 @@ class WrResources extends LitElement
changedProperties.has("urlSearchType") ||
changedProperties.has("currMime")) {
if (!this.currMime) {
this.currMime = "text/html,text/xhtml";
}
this.doLoadResources();
const data = {
urlSearch: this.urlSearch,
@@ -1147,8 +1159,10 @@ class WrResources extends LitElement
url = "https://" + url;
}
const mime = this.currMime === "all" ? "" : this.currMime;
const params = new URLSearchParams({
mime: this.currMime,
mime,
url,
prefix,
count
@@ -1160,12 +1174,6 @@ class WrResources extends LitElement
this.tryMore = (resp.urls.length === count);
this.filter();
const data = {
urlSearch: this.urlSearch,
currMime: this.currMime,
urlSearchType: this.urlSearchType
};
this.loading = false;
}
@@ -1182,10 +1190,11 @@ class WrResources extends LitElement
const url = (this.urlSearchType !== "" ? this.urlSearch : "");
const prefix = url && this.urlSearchType === "prefix" ? 1 : 0;
const mime = this.currMime === "all" ? "" : this.currMime;
const last = this.results[this.results.length - 1];
const params = new URLSearchParams({
mime: this.currMime,
mime,
url,
prefix,
fromMime: last.mime,
@@ -1246,7 +1255,7 @@ class WrResources extends LitElement
width: 100%;
}
.main-scroll {
max-height: calc(100vh - 247px);
max-height: calc(100vh - 199px);
width: 100vw;
}
table {
@@ -1297,30 +1306,32 @@ class WrResources extends LitElement
return html`
<div class="notification level is-marginless">
<div class="level-left flex-auto">
<div class="field flex-column">
<div class="level-item flex-auto">
<span>Search:&nbsp;&nbsp;</span>
<div class="select">
<select @change="${this.onChangeTypeSearch}">
${WrResources.filters.map((filter) => html`
<option value="${filter.filter}"
?selected="${filter.filter === this.currMime}">
${filter.name}
</option>
`)}
</select>
</div>
<div class="field flex-auto">
<div class="control ${this.loading ? 'is-loading' : ''}">
<input type="text" class="input" @input="${this.onChangeUrlSearch}" value="${this.urlSearch}" type="text" placeholder="Search URL">
<input type="text" class="input" @input="${this.onChangeUrlSearch}" value="${this.urlSearch}" type="text" placeholder="Enter URL search here">
</div>
<div class="control">
<label class="radio has-text-left"><input type="radio" name="urltype" value="" ?checked="${this.urlSearchType === ''}" @click="${this.onClickUrlType}">&nbsp;Contains</label>
<label class="radio has-text-left"><input type="radio" name="urltype" value="prefix" ?checked="${this.urlSearchType === 'prefix'}" @click="${this.onClickUrlType}">&nbsp;Prefix</label>
<label class="radio has-text-left"><input type="radio" name="urltype" value="exact" ?checked="${this.urlSearchType === 'exact'}" @click="${this.onClickUrlType}">&nbsp;Exact</label>
<span class="is-pulled-right" style="margin-left: 1em">Showing ${this.filteredResults.length} Results</span>
</div>
</div>
</div>
<div class="control level-right">
<span>Resource Type:&nbsp;&nbsp;</span>
${this.filters.map((filter) => html`
<label class="radio has-text-left">
<input type="radio" name="mime"
value="${filter.filter}"
@click="${this.onChangeTypeSearch}"
?checked="${filter.filter === this.currMime}"
>
${filter.name}
</label>
`)}
<div style="margin-left: 1em" class="control">
<label class="radio has-text-left"><input type="radio" name="urltype" value="" ?checked="${this.urlSearchType === ''}" @click="${this.onClickUrlType}">&nbsp;Contains</label>
<label class="radio has-text-left"><input type="radio" name="urltype" value="prefix" ?checked="${this.urlSearchType === 'prefix'}" @click="${this.onClickUrlType}">&nbsp;Prefix</label>
<label class="radio has-text-left"><input type="radio" name="urltype" value="exact" ?checked="${this.urlSearchType === 'exact'}" @click="${this.onClickUrlType}">&nbsp;Exact</label>
<span class="is-pulled-right" style="margin-left: 1em">(${this.filteredResults.length} Results)</span>
</div>
</div>
</div>
<div class="" style="">