ui: update graphiql
undefined
2 years ago
parent
bebeb1b201
commit
c4dced87ff
@ -1 +0,0 @@
|
||||
<script>let keepAlive=()=>{keepAlive=()=>{};var e=location.href.substr(0,location.href.lastIndexOf("/"))+"/ping",a=setInterval((()=>{sw?sw.postMessage("ping"):fetch(e).then((e=>e.text(!e.ok&&clearInterval(a))))}),1e4)},messages=[];window.onmessage=e=>messages.push(e);let sw=null,scope="";function registerWorker(){return navigator.serviceWorker.getRegistration("./").then((e=>e||navigator.serviceWorker.register("sw.js",{scope:"./"}))).then((e=>{const a=e.installing||e.waiting;return scope=e.scope,(sw=e.active)||new Promise((r=>{a.addEventListener("statechange",fn=()=>{"activated"===a.state&&(a.removeEventListener("statechange",fn),sw=e.active,r())})}))}))}function onMessage(e){let{data:a,ports:r,origin:t}=e;if(!r||!r.length)throw new TypeError("[StreamSaver] You didn't send a messageChannel");if("object"!=typeof a)throw new TypeError("[StreamSaver] You didn't send a object");a.origin=t,a.referrer=a.referrer||document.referrer||t,a.streamSaverVersion=new URLSearchParams(location.search).get("version"),"1.2.0"===a.streamSaverVersion&&console.warn("[StreamSaver] please update streamsaver"),a.headers?new Headers(a.headers):console.warn("[StreamSaver] pass `data.headers` that you would like to pass along to the service worker\nit should be a 2D array or a key/val object that fetch's Headers api accepts"),"string"==typeof a.filename&&(console.warn("[StreamSaver] You shouldn't send `data.filename` anymore. It should be included in the Content-Disposition header option"),a.filename=a.filename.replace(/\//g,":")),a.size&&console.warn("[StreamSaver] You shouldn't send `data.size` anymore. It should be included in the content-length header option"),a.readableStream&&console.warn("[StreamSaver] You should send the readableStream in the messageChannel, not throught mitm"),a.pathname||(console.warn("[StreamSaver] Please send `data.pathname` (eg: /pictures/summer.jpg)"),a.pathname=Math.random().toString().slice(-6)+"/"+a.filename),a.pathname=a.pathname.replace(/^\/+/g,"");let n=t.replace(/(^\w+:|^)\/\//,"");if(a.url=new URL(`${scope+n}/${a.pathname}`).toString(),!a.url.startsWith(`${scope+n}/`))throw new TypeError("[StreamSaver] bad `data.pathname`");const s=a.readableStream?[r[0],a.readableStream]:[r[0]];return a.readableStream||a.transferringReadable||keepAlive(),sw.postMessage(a,s)}window.opener&&window.opener.postMessage("StreamSaver::loadedPopup","*"),navigator.serviceWorker?registerWorker().then((()=>{window.onmessage=onMessage,messages.forEach(window.onmessage)})):keepAlive();</script>
|
||||
@ -1,81 +0,0 @@
|
||||
/* eslint-disable */
|
||||
self.addEventListener('install', () => {
|
||||
self.skipWaiting();
|
||||
});
|
||||
self.addEventListener('activate', (event) => {
|
||||
event.waitUntil(self.clients.claim());
|
||||
});
|
||||
const map = new Map();
|
||||
self.onmessage = (event) => {
|
||||
if (event.data === 'ping') {
|
||||
return;
|
||||
}
|
||||
const { data } = event;
|
||||
const downloadUrl = data.url || `${self.registration.scope + Math.random()}/${typeof data === 'string' ? data : data.filename}`;
|
||||
const port = event.ports[0];
|
||||
const metadata = new Array(3);
|
||||
metadata[1] = data;
|
||||
metadata[2] = port;
|
||||
if (event.data.readableStream) {
|
||||
metadata[0] = event.data.readableStream;
|
||||
} else if (event.data.transferringReadable) {
|
||||
port.onmessage = (evt) => {
|
||||
port.onmessage = null;
|
||||
metadata[0] = evt.data.readableStream;
|
||||
};
|
||||
} else metadata[0] = createStream(port);
|
||||
map.set(downloadUrl, metadata);
|
||||
port.postMessage({ download: downloadUrl });
|
||||
};
|
||||
function createStream(port) {
|
||||
return new ReadableStream({
|
||||
start(controller) {
|
||||
port.onmessage = ({ data }) => {
|
||||
if (data === 'end') return controller.close();
|
||||
if (data === 'abort') {
|
||||
controller.error('Aborted the download');
|
||||
return;
|
||||
}
|
||||
controller.enqueue(data);
|
||||
};
|
||||
},
|
||||
cancel() {
|
||||
console.log('user aborted');
|
||||
},
|
||||
});
|
||||
}
|
||||
self.onfetch = (event) => {
|
||||
const { url } = event.request;
|
||||
if (url.endsWith('/ping')) return event.respondWith(new Response('pong'));
|
||||
const hijacke = map.get(url);
|
||||
if (!hijacke) return null;
|
||||
const [stream, data, port] = hijacke;
|
||||
map.delete(url);
|
||||
const responseHeaders = new Headers({
|
||||
'Content-Type': 'application/octet-stream; charset=utf-8',
|
||||
'Content-Security-Policy': "default-src 'none'",
|
||||
'X-Content-Security-Policy': "default-src 'none'",
|
||||
'X-WebKit-CSP': "default-src 'none'",
|
||||
'X-XSS-Protection': '1; mode=block',
|
||||
});
|
||||
const headers = new Headers(data.headers || {});
|
||||
if (headers.has('Content-Length')) {
|
||||
responseHeaders.set('Content-Length', headers.get('Content-Length'));
|
||||
}
|
||||
if (headers.has('Content-Disposition')) {
|
||||
responseHeaders.set('Content-Disposition', headers.get('Content-Disposition'));
|
||||
}
|
||||
if (data.size) {
|
||||
console.warn('Depricated');
|
||||
responseHeaders.set('Content-Length', data.size);
|
||||
}
|
||||
let fileName = typeof data === 'string' ? data : data.filename;
|
||||
if (fileName) {
|
||||
console.warn('Depricated');
|
||||
// Make filename RFC5987 compatible
|
||||
fileName = encodeURIComponent(fileName).replace(/['()]/g, escape).replace(/\*/g, '%2A');
|
||||
responseHeaders.set('Content-Disposition', `attachment; filename*=UTF-8''${fileName}`);
|
||||
}
|
||||
event.respondWith(new Response(stream, { headers: responseHeaders }));
|
||||
port.postMessage({ debug: 'Download started' });
|
||||
};
|
||||
@ -1,43 +1,10 @@
|
||||
{% extends "layout/basic.html" %}
|
||||
{% block content %}
|
||||
<div style="height: 80vh">
|
||||
<div id="toolbar" style="display: inline-flex"></div>
|
||||
<div style="display: flex;align-items: stretch">
|
||||
<div style="width: 30vw">
|
||||
<div id="operation"></div>
|
||||
<div id="variables"></div>
|
||||
</div>
|
||||
<div style="width: 45vw">
|
||||
<div id="results"></div>
|
||||
<div id="schema-sdl"></div>
|
||||
</div>
|
||||
<div>
|
||||
<div id="docs" class="graphiql-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 90vh" id="main"></div>
|
||||
<style>
|
||||
#operation {
|
||||
height: 60vh;
|
||||
min-height: 260px;
|
||||
}
|
||||
#variables {
|
||||
height: 30vh;
|
||||
align-items: stretch;
|
||||
}
|
||||
#results {
|
||||
align-items: stretch;
|
||||
height: 60vh;
|
||||
}
|
||||
#schema-sdl {
|
||||
align-items: stretch;
|
||||
height: 30vh;
|
||||
}
|
||||
.graphiql-container .doc-explorer-contents {
|
||||
position: relative !important;
|
||||
}
|
||||
#docs {
|
||||
#main {
|
||||
font-family: var(--code-font-family)
|
||||
}
|
||||
</style>
|
||||
<link href="/graphiql.min.css" rel="stylesheet" />
|
||||
{% endblock %}
|
||||
|
||||
Loading…
Reference in New Issue