From be0d09c873a40d5d2996d9cbd95e5982949828db Mon Sep 17 00:00:00 2001 From: Vincent Boutour Date: Sat, 5 Nov 2022 21:29:16 +0100 Subject: [PATCH] refactor: Making the intersect observer quicker Signed-off-by: Vincent Boutour --- cmd/fibr/static/scripts/async-image.js | 84 ++++++++++++-------------- cmd/fibr/static/scripts/index.min.js | 2 +- 2 files changed, 41 insertions(+), 45 deletions(-) diff --git a/cmd/fibr/static/scripts/async-image.js b/cmd/fibr/static/scripts/async-image.js index 74a36d25..79520810 100644 --- a/cmd/fibr/static/scripts/async-image.js +++ b/cmd/fibr/static/scripts/async-image.js @@ -102,6 +102,34 @@ async function fetchThumbnail() { throw new Error('unable to load thumbnails'); } + let lazyImageObserver; + + if (typeof lazyLoadThumbnail !== 'undefined' && lazyLoadThumbnail) { + lazyImageObserver = new IntersectionObserver(async (entries, observer) => { + for (const entry of entries) { + if (!entry.isIntersecting) { + continue; + } + + const lazyImage = entry.target; + if (window.webpHero) { + const response = await fetch(lazyImage.dataset.src, { + credentials: 'same-origin', + }); + const content = await response.arrayBuffer(); + + const webpMachine = new webpHero.WebpMachine(); + lazyImage.src = await webpMachine.decode(new Uint8Array(content)); + webpMachine.clearCache(); + } else { + lazyImage.src = lazyImage.dataset.src; + } + + lazyImageObserver.unobserve(lazyImage); + } + }); + } + for await (let chunk of readChunk(response)) { const commaIndex = chunk.findIndex((element) => element === 44); if (commaIndex === -1) { @@ -123,6 +151,10 @@ async function fetchThumbnail() { img.classList.add('thumbnail', 'full', 'block'); replaceContent(picture, img); + + if (lazyImageObserver !== undefined) { + lazyImageObserver.observe(img); + } } } @@ -155,12 +187,6 @@ document.addEventListener( replaceContent(picture, generateThrobber(['throbber-white'])); }); - try { - await fetchThumbnail(); - } catch (e) { - console.error(e); - } - try { await isWebPCompatible(); } catch (e) { @@ -169,49 +195,19 @@ document.addEventListener( 'sha512-DA6h9H5Sqn55/uVn4JI4aSPFnAWoCQYYDXUnvjOAMNVx11///hX4QaFbQt5yWsrIm9hSI5fLJYfRWt3KXneSXQ==', 'anonymous', ); + } + try { + await fetchThumbnail(); + } catch (e) { + console.error(e); + } + + if (window.webpHero) { const webpMachine = new webpHero.WebpMachine(); webpMachine.polyfillDocument(); webpMachine.clearCache(); } - - window.dispatchEvent(new Event('thumbnail-done')); }, false, ); - -window.addEventListener('thumbnail-done', () => { - if (typeof lazyLoadThumbnail === 'undefined' || !lazyLoadThumbnail) { - return; - } - - const lazyImageObserver = new IntersectionObserver( - async (entries, observer) => { - for (const entry of entries) { - if (!entry.isIntersecting) { - continue; - } - - const lazyImage = entry.target; - if (window.webpHero) { - const response = await fetch(lazyImage.dataset.src, { - credentials: 'same-origin', - }); - const content = await response.arrayBuffer(); - - const webpMachine = new webpHero.WebpMachine(); - lazyImage.src = await webpMachine.decode(new Uint8Array(content)); - webpMachine.clearCache(); - } else { - lazyImage.src = lazyImage.dataset.src; - } - - lazyImageObserver.unobserve(lazyImage); - } - }, - ); - - document - .querySelectorAll('img.thumbnail') - .forEach((lazyImage) => lazyImageObserver.observe(lazyImage)); -}); diff --git a/cmd/fibr/static/scripts/index.min.js b/cmd/fibr/static/scripts/index.min.js index 439481fe..b5001015 100644 --- a/cmd/fibr/static/scripts/index.min.js +++ b/cmd/fibr/static/scripts/index.min.js @@ -1 +1 @@ -function isWebPCompatible(){const e="UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA";return new Promise((t,n)=>{const s=new Image;s.onload=()=>{s.width>0&&s.height>0?t():n()},s.onerror=n.bind(null,!0),s.src=`data:image/webp;base64,${e}`})}function appendChunk(e,t){const n=new Uint8Array(e.length+t.length);return n.set(e,0),n.set(t,e.length),n}function findIndexEscapeSequence(e,t){let n=0;for(let s=0;s=400)throw new Error("unable to load thumbnails");for await(let s of readChunk(t)){const o=s.findIndex(e=>e===44);if(o===-1){console.error("invalid line for thumbnail:",line);continue}const n=document.getElementById(`picture-${String.fromCharCode.apply(null,s.slice(0,o))}`);if(!n)continue;const e=new Image;e.src=`data:image/webp;base64,${encode(s.slice(o+1))}`,e.alt=n.dataset.alt,e.dataset.src=n.dataset.src,e.classList.add("thumbnail","full","block"),replaceContent(n,e)}}document.addEventListener("readystatechange",async e=>{if(e.target.readyState!=="complete")return;if(typeof hasThumbnail=="undefined"||!hasThumbnail)return;let n=new Intl.DateTimeFormat(navigator.language,{dateStyle:"full",timeStyle:"long"});document.querySelectorAll(".date").forEach(e=>{e.innerHTML=n.format(new Date(e.innerHTML))});const t=document.querySelectorAll("[data-thumbnail]");if(!t)return;t.forEach(e=>{replaceContent(e,generateThrobber(["throbber-white"]))});try{await fetchThumbnail()}catch(e){console.error(e)}try{await isWebPCompatible()}catch{await resolveScript("https://unpkg.com/webp-hero@0.0.2/dist-cjs/webp-hero.bundle.js","sha512-DA6h9H5Sqn55/uVn4JI4aSPFnAWoCQYYDXUnvjOAMNVx11///hX4QaFbQt5yWsrIm9hSI5fLJYfRWt3KXneSXQ==","anonymous");const e=new webpHero.WebpMachine;e.polyfillDocument(),e.clearCache()}window.dispatchEvent(new Event("thumbnail-done"))},!1),window.addEventListener("thumbnail-done",()=>{if(typeof lazyLoadThumbnail=="undefined"||!lazyLoadThumbnail)return;const e=new IntersectionObserver(async(t)=>{for(const s of t){if(!s.isIntersecting)continue;const n=s.target;if(window.webpHero){const t=await fetch(n.dataset.src,{credentials:"same-origin"}),s=await t.arrayBuffer(),e=new webpHero.WebpMachine;n.src=await e.decode(new Uint8Array(s)),e.clearCache()}else n.src=n.dataset.src;e.unobserve(n)}});document.querySelectorAll("img.thumbnail").forEach(t=>e.observe(t))}),document.addEventListener("readystatechange",e=>{if(e.target.readyState!=="complete")return;document.querySelectorAll("[data-confirm]").forEach(e=>{e.addEventListener("click",t=>{confirm(`Are you sure you want to delete ${e.dataset.confirm}?`)||t.preventDefault()})})}),document.addEventListener("readystatechange",e=>{if(e.target.readyState!=="complete")return;const t=document.getElementById("go-back");t&&(t.setAttribute("href",document.referrer),t.addEventListener("click",e=>(e.preventDefault(),window.addEventListener("popstate",()=>{window.location.reload(!0)}),history.back(),!1)))});async function fetchGeoJSON(e){const t=await fetch(e,{credentials:"same-origin"});if(t.status>=400)throw new Error("unable to load geojson");return t.status===204?null:t.json()}async function addStyle(e,t,n){return new Promise(s=>{const o=document.createElement("link");o.rel="stylesheet",o.href=e,o.onload=s,t&&(o.integrity=t,o.crossOrigin=n),document.querySelector("head").appendChild(o)})}async function loadLeaflet(){const e="1.9.2";await addStyle(`https://unpkg.com/leaflet@${e}/dist/leaflet.css`,"sha512-UkezATkM8unVC0R/Z9Kmq4gorjNoFwLMAWR/1yZpINW08I79jEKx/c8NlLSvvimcu7SL8pgeOnynxfRpe+5QpA==","anonymous"),await addStyle("https://unpkg.com/leaflet.markercluster@1.5.1/dist/MarkerCluster.Default.css","sha512-6ZCLMiYwTeli2rVh3XAPxy3YoR5fVxGdH/pz+KMCzRY2M65Emgkw00Yqmhh8qLGeYQ3LbVZGdmOX9KUjSKr0TA==","anonymous"),await resolveScript(`https://unpkg.com/leaflet@${e}/dist/leaflet.js`,"sha512-KMraOVM0qMVE0U1OULTpYO4gg5MZgazwPAPyMQWfOkEshpwlLQFCHZ/0lBXyviDNVL+pBGwmeXQnuvGK8Fscvg==","anonymous"),await resolveScript("https://unpkg.com/leaflet.markercluster@1.5.1/dist/leaflet.markercluster.js","sha512-+Zr0llcuE/Ho6wXRYtlWypMyWSEMxrWJxrYgeAMDRSf1FF46gQ3PAVOVp5RHdxdzikZXuHZ0soHpqRkkPkI3KA==","anonymous")}let map;async function renderMap(e){if(map){map.invalidateSize();return}const t=document.getElementById("map-container"),n=generateThrobber(["map-throbber","throbber-white"]);t&&t.appendChild(n),await loadLeaflet(),map=L.map("map-container",{center:[46.227638,2.213749],zoom:5}),L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",{maxZoom:19,attribution:'© OpenStreetMap contributors'}).addTo(map);const s=await fetchGeoJSON(e);if(!s||!s.features)return;const o=L.markerClusterGroup({zoomToBoundsOnClick:!1}),i=[];s.features.map(e=>{const t=L.GeoJSON.coordsToLatLng(e.geometry.coordinates);i.push(t),o.addLayer(L.circleMarker(t).bindPopup(`Image thumbnail
${e.properties.date}`,{maxWidth:"auto",closeButton:!1,className:"thumbnail-popup"}))}),o.on("clusterclick",e=>{map.fitBounds(e.layer.getAllChildMarkers().map(e=>e.getLatLng()))}),i.length?(map.once("zoomend",()=>{t.removeChild(n)}),map.fitBounds(i)):t.removeChild(n),map.addLayer(o)}document.addEventListener("readystatechange",async e=>{if(e.target.readyState!=="complete")return;document.location.hash==="#map"?await renderMap(geoURL):window.addEventListener("popstate",async()=>{document.location.hash==="#map"&&await renderMap(geoURL)})});function resolveScript(e,t,n){return new Promise((s,o)=>{const i=document.createElement("script");i.type="text/javascript",i.src=e,i.async=!0,i.onload=s.bind(null,!0),i.onerror=o.bind(null,!0),t&&(i.integrity=t,i.crossOrigin=n),document.querySelector("head").appendChild(i)})}window.onkeyup=e=>{switch(e.key){case"ArrowLeft":goToPrevious();break;case"ArrowRight":goToNext();break;case"Escape":typeof abort=="function"?abort(e):goBack();break}};function replaceContent(e,t){for(;e.firstChild;)e.removeChild(e.firstChild);t&&e.appendChild(t)}function generateThrobber(e=[]){const t=document.createElement("div");t.classList.add("throbber"),e.forEach(e=>t.classList.add(e));for(let e=1;e<4;e++){const n=document.createElement("div");n.classList.add("throbber-dot",`throbber-dot-${e}`),t.appendChild(n)}return t}let fileInput,uploadList,cancelButton;function eventNoop(e){e.preventDefault(),e.stopPropagation()}document.addEventListener("readystatechange",async e=>{if(e.target.readyState!=="complete")return;const t=document.getElementsByTagName("body")[0];t.addEventListener("dragover",eventNoop),t.addEventListener("dragleave",eventNoop),t.addEventListener("drop",e=>{eventNoop(e),window.location.hash="#upload-modal",fileInput&&(fileInput.files=e.dataTransfer.files,fileInput.dispatchEvent(new Event("change")))})});function bufferToHex(e){return Array.prototype.map.call(new Uint8Array(e),e=>`00${e.toString(16)}`.slice(-2)).join("")}async function sha(e){const t=await crypto.subtle.digest("SHA-256",new TextEncoder("utf-8").encode(e));return bufferToHex(t)}async function fileMessageId(e){const t=await sha(JSON.stringify({name:e.name,size:e.size,type:e.type,lastModified:e.lastModified}));return`upload-file-${t}`}function humanFileSize(e){return e<1024?e+"bytes":e<1048576?(e/1024).toFixed(0)+" KB":(e/1048576).toFixed(0)+" MB"}async function addUploadItem(e,t){const c=await fileMessageId(t),n=document.createElement("div");n.id=c,n.classList.add("flex","flex-center","margin");const o=document.createElement("div");o.classList.add("upload-item"),n.appendChild(o);const s=document.createElement("input");s.id=`${c}-filename`,s.classList.add("upload-name","full"),s.type="text",s.value=t.name,o.appendChild(s);const i=document.createElement("div");i.classList.add("full","flex","flex-center");const r=document.createElement("em");r.innerHTML=humanFileSize(t.size),r.style.width="8rem",i.appendChild(r);const a=document.createElement("progress");a.classList.add("flex-grow","margin-left"),a.max=100,a.value=0,i.appendChild(a),o.appendChild(i);const l=document.createElement("span");l.classList.add("upload-status"),n.appendChild(l),e.appendChild(n)}function getFiles(e){return[].filter.call(e.target,e=>e.nodeName.toLowerCase()==="input").reduce((e,t)=>(t.type==="file"?e.files=t.files:e[t.name]=t.value,e),{})}function getFilename(e,t){const n=document.getElementById(`${e}-filename`);return n&&n.value?n.value:t.name}function clearUploadStatus(e){if(!e)return;const t=e.querySelector(".upload-status");if(!t)return;t.classList.remove("danger"),t.classList.remove("success")}async function setUploadStatus(e,t,n,s){if(!e)return;const o=e.querySelector(".upload-status");if(!o)return;o.innerHTML=t,o.classList.add(n),s&&(o.title=s)}let aborter;const chunkSize=1024*1024;let currentUpload={};async function uploadFileByChunks(e,t,n,s){let i;if(e&&(i=e.querySelector("progress"),clearUploadStatus(e)),s.name!==currentUpload.filename){currentUpload.filename=s.name,currentUpload.chunks=[];for(let e=0;e=400)return Promise.reject(await a.text());currentUpload.chunks[e].done=!0,i&&(i.value=chunkSize*(e+1)/s.size*100)}const o=new FormData;o.append("method",t),o.append("filename",n),o.append("size",s.size);const a=await fetch("",{method:"POST",credentials:"same-origin",headers:{"X-Chunk-Upload":!0,Accept:"text/plain"},body:o}),r=await a.text();return a.status>=400?Promise.reject(r):(currentUpload={},Promise.resolve(r))}async function uploadFileByXHR(e,t,n,s){let o;e&&(o=e.querySelector("progress"),clearUploadStatus(e));const i=new FormData;return i.append("method",t),i.append("filename",n),i.append("size",s.size),i.append("file",s),new Promise((e,t)=>{let n=new XMLHttpRequest;aborter=n,o&&n.upload.addEventListener("progress",e=>o.value=parseInt(e.loaded/e.total*100,10),!1),n.addEventListener("readystatechange",s=>{n.readyState===XMLHttpRequest.DONE?n.status>=200&&n.status<400?(o&&(o.value=100),e(n.responseText),n=void 0):(t(s),n=void 0):n.readyState===XMLHttpRequest.UNSENT&&(t(new Error("request aborted")),n=void 0)},!1),n.open("POST","",!0),n.setRequestHeader("Accept","text/plain"),n.send(i)})}function sliceFileList(e,t){const n=document.getElementById(e),s=new DataTransfer;for(;t{if(e.target.readyState!=="complete")return;if(fileInput=document.getElementById("file"),uploadList=document.getElementById("upload-list"),cancelButton=document.getElementById("upload-cancel"),fileInput){fileInput.classList.add("opacity"),fileInput.multiple=!0,fileInput.addEventListener("change",()=>{window.location.hash="#upload-modal",replaceContent(uploadList);for(const e of fileInput.files)addUploadItem(uploadList,e)});const e=document.getElementById("upload-button-link");e&&e.addEventListener("click",e=>{eventNoop(e),fileInput.click()})}const t=document.getElementById("file-label");t&&(t.classList.remove("hidden"),t.innerHTML="Choose files..."),uploadList&&uploadList.classList.remove("hidden"),cancelButton&&cancelButton.addEventListener("click",abort);const n=document.getElementById("upload-form");n&&n.addEventListener("submit",upload)}),document.addEventListener("readystatechange",e=>{if(e.target.readyState!=="complete")return;const t=document.getElementById("webhook-url-label");if(!t)return;const n=document.getElementById("webhook-url"),s=document.getElementById("telegram-chat-id");document.getElementById("webhook-kind-raw").addEventListener("change",e=>{e.target.value==="raw"&&(n.placeholder="https://website.com/fibr",t.innerHTML="URL",s.classList.add("hidden"))}),document.getElementById("webhook-kind-discord").addEventListener("change",e=>{e.target.value==="discord"&&(n.placeholder="https://discord.com/api/webhooks/...",t.innerHTML="URL",s.classList.add("hidden"))}),document.getElementById("webhook-kind-slack").addEventListener("change",e=>{e.target.value==="slack"&&(n.placeholder="https://hooks.slack.com/services/...",t.innerHTML="URL",s.classList.add("hidden"))}),document.getElementById("webhook-kind-telegram").addEventListener("change",e=>{e.target.value==="telegram"&&(t.innerHTML="Token",n.placeholder="Bot token",s.classList.remove("hidden"))})}) \ No newline at end of file +function isWebPCompatible(){const e="UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA";return new Promise((t,n)=>{const s=new Image;s.onload=()=>{s.width>0&&s.height>0?t():n()},s.onerror=n.bind(null,!0),s.src=`data:image/webp;base64,${e}`})}function appendChunk(e,t){const n=new Uint8Array(e.length+t.length);return n.set(e,0),n.set(t,e.length),n}function findIndexEscapeSequence(e,t){let n=0;for(let s=0;s=400)throw new Error("unable to load thumbnails");let t;typeof lazyLoadThumbnail!="undefined"&&lazyLoadThumbnail&&(t=new IntersectionObserver(async(e)=>{for(const s of e){if(!s.isIntersecting)continue;const n=s.target;if(window.webpHero){const t=await fetch(n.dataset.src,{credentials:"same-origin"}),s=await t.arrayBuffer(),e=new webpHero.WebpMachine;n.src=await e.decode(new Uint8Array(s)),e.clearCache()}else n.src=n.dataset.src;t.unobserve(n)}}));for await(let o of readChunk(n)){const i=o.findIndex(e=>e===44);if(i===-1){console.error("invalid line for thumbnail:",line);continue}const s=document.getElementById(`picture-${String.fromCharCode.apply(null,o.slice(0,i))}`);if(!s)continue;const e=new Image;e.src=`data:image/webp;base64,${encode(o.slice(i+1))}`,e.alt=s.dataset.alt,e.dataset.src=s.dataset.src,e.classList.add("thumbnail","full","block"),replaceContent(s,e),t!==void 0&&t.observe(e)}}document.addEventListener("readystatechange",async e=>{if(e.target.readyState!=="complete")return;if(typeof hasThumbnail=="undefined"||!hasThumbnail)return;let n=new Intl.DateTimeFormat(navigator.language,{dateStyle:"full",timeStyle:"long"});document.querySelectorAll(".date").forEach(e=>{e.innerHTML=n.format(new Date(e.innerHTML))});const t=document.querySelectorAll("[data-thumbnail]");if(!t)return;t.forEach(e=>{replaceContent(e,generateThrobber(["throbber-white"]))});try{await isWebPCompatible()}catch{await resolveScript("https://unpkg.com/webp-hero@0.0.2/dist-cjs/webp-hero.bundle.js","sha512-DA6h9H5Sqn55/uVn4JI4aSPFnAWoCQYYDXUnvjOAMNVx11///hX4QaFbQt5yWsrIm9hSI5fLJYfRWt3KXneSXQ==","anonymous")}try{await fetchThumbnail()}catch(e){console.error(e)}if(window.webpHero){const e=new webpHero.WebpMachine;e.polyfillDocument(),e.clearCache()}},!1),document.addEventListener("readystatechange",e=>{if(e.target.readyState!=="complete")return;document.querySelectorAll("[data-confirm]").forEach(e=>{e.addEventListener("click",t=>{confirm(`Are you sure you want to delete ${e.dataset.confirm}?`)||t.preventDefault()})})}),document.addEventListener("readystatechange",e=>{if(e.target.readyState!=="complete")return;const t=document.getElementById("go-back");t&&(t.setAttribute("href",document.referrer),t.addEventListener("click",e=>(e.preventDefault(),window.addEventListener("popstate",()=>{window.location.reload(!0)}),history.back(),!1)))});async function fetchGeoJSON(e){const t=await fetch(e,{credentials:"same-origin"});if(t.status>=400)throw new Error("unable to load geojson");return t.status===204?null:t.json()}async function addStyle(e,t,n){return new Promise(s=>{const o=document.createElement("link");o.rel="stylesheet",o.href=e,o.onload=s,t&&(o.integrity=t,o.crossOrigin=n),document.querySelector("head").appendChild(o)})}async function loadLeaflet(){const e="1.9.2";await addStyle(`https://unpkg.com/leaflet@${e}/dist/leaflet.css`,"sha512-UkezATkM8unVC0R/Z9Kmq4gorjNoFwLMAWR/1yZpINW08I79jEKx/c8NlLSvvimcu7SL8pgeOnynxfRpe+5QpA==","anonymous"),await addStyle("https://unpkg.com/leaflet.markercluster@1.5.1/dist/MarkerCluster.Default.css","sha512-6ZCLMiYwTeli2rVh3XAPxy3YoR5fVxGdH/pz+KMCzRY2M65Emgkw00Yqmhh8qLGeYQ3LbVZGdmOX9KUjSKr0TA==","anonymous"),await resolveScript(`https://unpkg.com/leaflet@${e}/dist/leaflet.js`,"sha512-KMraOVM0qMVE0U1OULTpYO4gg5MZgazwPAPyMQWfOkEshpwlLQFCHZ/0lBXyviDNVL+pBGwmeXQnuvGK8Fscvg==","anonymous"),await resolveScript("https://unpkg.com/leaflet.markercluster@1.5.1/dist/leaflet.markercluster.js","sha512-+Zr0llcuE/Ho6wXRYtlWypMyWSEMxrWJxrYgeAMDRSf1FF46gQ3PAVOVp5RHdxdzikZXuHZ0soHpqRkkPkI3KA==","anonymous")}let map;async function renderMap(e){if(map){map.invalidateSize();return}const t=document.getElementById("map-container"),n=generateThrobber(["map-throbber","throbber-white"]);t&&t.appendChild(n),await loadLeaflet(),map=L.map("map-container",{center:[46.227638,2.213749],zoom:5}),L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",{maxZoom:19,attribution:'© OpenStreetMap contributors'}).addTo(map);const s=await fetchGeoJSON(e);if(!s||!s.features)return;const o=L.markerClusterGroup({zoomToBoundsOnClick:!1}),i=[];s.features.map(e=>{const t=L.GeoJSON.coordsToLatLng(e.geometry.coordinates);i.push(t),o.addLayer(L.circleMarker(t).bindPopup(`Image thumbnail
${e.properties.date}`,{maxWidth:"auto",closeButton:!1,className:"thumbnail-popup"}))}),o.on("clusterclick",e=>{map.fitBounds(e.layer.getAllChildMarkers().map(e=>e.getLatLng()))}),i.length?(map.once("zoomend",()=>{t.removeChild(n)}),map.fitBounds(i)):t.removeChild(n),map.addLayer(o)}document.addEventListener("readystatechange",async e=>{if(e.target.readyState!=="complete")return;document.location.hash==="#map"?await renderMap(geoURL):window.addEventListener("popstate",async()=>{document.location.hash==="#map"&&await renderMap(geoURL)})});function resolveScript(e,t,n){return new Promise((s,o)=>{const i=document.createElement("script");i.type="text/javascript",i.src=e,i.async=!0,i.onload=s.bind(null,!0),i.onerror=o.bind(null,!0),t&&(i.integrity=t,i.crossOrigin=n),document.querySelector("head").appendChild(i)})}window.onkeyup=e=>{switch(e.key){case"ArrowLeft":goToPrevious();break;case"ArrowRight":goToNext();break;case"Escape":typeof abort=="function"?abort(e):goBack();break}};function replaceContent(e,t){for(;e.firstChild;)e.removeChild(e.firstChild);t&&e.appendChild(t)}function generateThrobber(e=[]){const t=document.createElement("div");t.classList.add("throbber"),e.forEach(e=>t.classList.add(e));for(let e=1;e<4;e++){const n=document.createElement("div");n.classList.add("throbber-dot",`throbber-dot-${e}`),t.appendChild(n)}return t}let fileInput,uploadList,cancelButton;function eventNoop(e){e.preventDefault(),e.stopPropagation()}document.addEventListener("readystatechange",async e=>{if(e.target.readyState!=="complete")return;const t=document.getElementsByTagName("body")[0];t.addEventListener("dragover",eventNoop),t.addEventListener("dragleave",eventNoop),t.addEventListener("drop",e=>{eventNoop(e),window.location.hash="#upload-modal",fileInput&&(fileInput.files=e.dataTransfer.files,fileInput.dispatchEvent(new Event("change")))})});function bufferToHex(e){return Array.prototype.map.call(new Uint8Array(e),e=>`00${e.toString(16)}`.slice(-2)).join("")}async function sha(e){const t=await crypto.subtle.digest("SHA-256",new TextEncoder("utf-8").encode(e));return bufferToHex(t)}async function fileMessageId(e){const t=await sha(JSON.stringify({name:e.name,size:e.size,type:e.type,lastModified:e.lastModified}));return`upload-file-${t}`}function humanFileSize(e){return e<1024?e+"bytes":e<1048576?(e/1024).toFixed(0)+" KB":(e/1048576).toFixed(0)+" MB"}async function addUploadItem(e,t){const c=await fileMessageId(t),n=document.createElement("div");n.id=c,n.classList.add("flex","flex-center","margin");const o=document.createElement("div");o.classList.add("upload-item"),n.appendChild(o);const s=document.createElement("input");s.id=`${c}-filename`,s.classList.add("upload-name","full"),s.type="text",s.value=t.name,o.appendChild(s);const i=document.createElement("div");i.classList.add("full","flex","flex-center");const r=document.createElement("em");r.innerHTML=humanFileSize(t.size),r.style.width="8rem",i.appendChild(r);const a=document.createElement("progress");a.classList.add("flex-grow","margin-left"),a.max=100,a.value=0,i.appendChild(a),o.appendChild(i);const l=document.createElement("span");l.classList.add("upload-status"),n.appendChild(l),e.appendChild(n)}function getFiles(e){return[].filter.call(e.target,e=>e.nodeName.toLowerCase()==="input").reduce((e,t)=>(t.type==="file"?e.files=t.files:e[t.name]=t.value,e),{})}function getFilename(e,t){const n=document.getElementById(`${e}-filename`);return n&&n.value?n.value:t.name}function clearUploadStatus(e){if(!e)return;const t=e.querySelector(".upload-status");if(!t)return;t.classList.remove("danger"),t.classList.remove("success")}async function setUploadStatus(e,t,n,s){if(!e)return;const o=e.querySelector(".upload-status");if(!o)return;o.innerHTML=t,o.classList.add(n),s&&(o.title=s)}let aborter;const chunkSize=1024*1024;let currentUpload={};async function uploadFileByChunks(e,t,n,s){let i;if(e&&(i=e.querySelector("progress"),clearUploadStatus(e)),s.name!==currentUpload.filename){currentUpload.filename=s.name,currentUpload.chunks=[];for(let e=0;e=400)return Promise.reject(await a.text());currentUpload.chunks[e].done=!0,i&&(i.value=chunkSize*(e+1)/s.size*100)}const o=new FormData;o.append("method",t),o.append("filename",n),o.append("size",s.size);const a=await fetch("",{method:"POST",credentials:"same-origin",headers:{"X-Chunk-Upload":!0,Accept:"text/plain"},body:o}),r=await a.text();return a.status>=400?Promise.reject(r):(currentUpload={},Promise.resolve(r))}async function uploadFileByXHR(e,t,n,s){let o;e&&(o=e.querySelector("progress"),clearUploadStatus(e));const i=new FormData;return i.append("method",t),i.append("filename",n),i.append("size",s.size),i.append("file",s),new Promise((e,t)=>{let n=new XMLHttpRequest;aborter=n,o&&n.upload.addEventListener("progress",e=>o.value=parseInt(e.loaded/e.total*100,10),!1),n.addEventListener("readystatechange",s=>{n.readyState===XMLHttpRequest.DONE?n.status>=200&&n.status<400?(o&&(o.value=100),e(n.responseText),n=void 0):(t(s),n=void 0):n.readyState===XMLHttpRequest.UNSENT&&(t(new Error("request aborted")),n=void 0)},!1),n.open("POST","",!0),n.setRequestHeader("Accept","text/plain"),n.send(i)})}function sliceFileList(e,t){const n=document.getElementById(e),s=new DataTransfer;for(;t{if(e.target.readyState!=="complete")return;if(fileInput=document.getElementById("file"),uploadList=document.getElementById("upload-list"),cancelButton=document.getElementById("upload-cancel"),fileInput){fileInput.classList.add("opacity"),fileInput.multiple=!0,fileInput.addEventListener("change",()=>{window.location.hash="#upload-modal",replaceContent(uploadList);for(const e of fileInput.files)addUploadItem(uploadList,e)});const e=document.getElementById("upload-button-link");e&&e.addEventListener("click",e=>{eventNoop(e),fileInput.click()})}const t=document.getElementById("file-label");t&&(t.classList.remove("hidden"),t.innerHTML="Choose files..."),uploadList&&uploadList.classList.remove("hidden"),cancelButton&&cancelButton.addEventListener("click",abort);const n=document.getElementById("upload-form");n&&n.addEventListener("submit",upload)}),document.addEventListener("readystatechange",e=>{if(e.target.readyState!=="complete")return;const t=document.getElementById("webhook-url-label");if(!t)return;const n=document.getElementById("webhook-url"),s=document.getElementById("telegram-chat-id");document.getElementById("webhook-kind-raw").addEventListener("change",e=>{e.target.value==="raw"&&(n.placeholder="https://website.com/fibr",t.innerHTML="URL",s.classList.add("hidden"))}),document.getElementById("webhook-kind-discord").addEventListener("change",e=>{e.target.value==="discord"&&(n.placeholder="https://discord.com/api/webhooks/...",t.innerHTML="URL",s.classList.add("hidden"))}),document.getElementById("webhook-kind-slack").addEventListener("change",e=>{e.target.value==="slack"&&(n.placeholder="https://hooks.slack.com/services/...",t.innerHTML="URL",s.classList.add("hidden"))}),document.getElementById("webhook-kind-telegram").addEventListener("change",e=>{e.target.value==="telegram"&&(t.innerHTML="Token",n.placeholder="Bot token",s.classList.remove("hidden"))})}) \ No newline at end of file