Add button to code viewer to reload code from server

This commit is contained in:
Raymond Hill 2023-03-14 08:43:23 -04:00
parent fc84fdee52
commit 6ba758d007
No known key found for this signature in database
GPG key ID: 25E1490B761470C2
2 changed files with 51 additions and 22 deletions

View file

@ -18,6 +18,7 @@
<div id="header"> <div id="header">
<div id="currentURL"> <div id="currentURL">
<input type="url" value="" spellcheck="false" autofocus="false"> <input type="url" value="" spellcheck="false" autofocus="false">
<span id="reloadURL" class="fa-icon">refresh</span>
<span id="removeURL" class="fa-icon">trash-o</span> <span id="removeURL" class="fa-icon">trash-o</span>
</div> </div>
<div id="pastURLs"></div> <div id="pastURLs"></div>

View file

@ -94,15 +94,22 @@ urlToDocMap.set('', cmEditor.getDoc());
async function fetchResource(url) { async function fetchResource(url) {
let response, text; let response, text;
const fetchOptions = {
method: 'GET',
referrer: '',
};
if ( urlToDocMap.has(url) ) {
fetchOptions.cache = 'reload';
}
try { try {
response = await fetch(url); response = await fetch(url, fetchOptions);
text = await response.text(); text = await response.text();
} catch(reason) { } catch(reason) {
return; text = reason;
} }
let mime = response.headers.get('Content-Type') || ''; let mime = response.headers.get('Content-Type') || '';
mime = mime.replace(/\s*;.*$/, '').trim(); mime = mime.replace(/\s*;.*$/, '').trim();
const options = { const beautifierOptions = {
'end_with_newline': true, 'end_with_newline': true,
'indent_size': 2, 'indent_size': 2,
'html': { 'html': {
@ -112,26 +119,25 @@ async function fetchResource(url) {
}, },
'js': { 'js': {
'indent_size': 4, 'indent_size': 4,
'preserve-newlines': true,
}, },
}; };
switch ( mime ) { switch ( mime ) {
case 'text/css': case 'text/css':
text = beautifier.css(text, options); text = beautifier.css(text, beautifierOptions);
break; break;
case 'text/html': case 'text/html':
case 'application/xhtml+xml': case 'application/xhtml+xml':
case 'application/xml': case 'application/xml':
case 'image/svg+xml': case 'image/svg+xml':
text = beautifier.html(text, options); text = beautifier.html(text, beautifierOptions);
break; break;
case 'text/javascript': case 'text/javascript':
case 'application/javascript': case 'application/javascript':
case 'application/x-javascript': case 'application/x-javascript':
text = beautifier.js(text, options); text = beautifier.js(text, beautifierOptions);
break; break;
case 'application/json': case 'application/json':
text = beautifier.js(text, options); text = beautifier.js(text, beautifierOptions);
break; break;
default: default:
break; break;
@ -200,8 +206,9 @@ async function setURL(resourceURL) {
if ( afterDoc === undefined ) { if ( afterDoc === undefined ) {
const r = await fetchResource(afterURL) || { mime: '', text: '' }; const r = await fetchResource(afterURL) || { mime: '', text: '' };
afterDoc = new CodeMirror.Doc(r.text, r.mime || ''); afterDoc = new CodeMirror.Doc(r.text, r.mime || '');
urlToDocMap.set(afterURL, afterDoc);
} }
urlToDocMap.set(currentURL, cmEditor.swapDoc(afterDoc)); cmEditor.swapDoc(afterDoc);
currentURL = afterURL; currentURL = afterURL;
setInputURL(afterURL); setInputURL(afterURL);
const a = qs$('.cm-search-widget .sourceURL'); const a = qs$('.cm-search-widget .sourceURL');
@ -237,20 +244,41 @@ function removeURL(url) {
/******************************************************************************/ /******************************************************************************/
setURL(params.get('url')); async function start() {
await setURL(params.get('url'));
dom.on('#header input[type="url"]', 'change', ev => { dom.on('#header input[type="url"]', 'change', ev => {
setURL(ev.target.value); setURL(ev.target.value);
}); });
dom.on('#removeURL', 'click', ( ) => { dom.on('#reloadURL', 'click', ( ) => {
removeURL(qs$('#header input[type="url"]').value); const input = qs$('#header input[type="url"]');
}); const url = input.value;
const beforeDoc = cmEditor.swapDoc(new CodeMirror.Doc('', ''));
fetchResource(url).then(r => {
if ( urlToDocMap.has(url) === false ) { return; }
const afterDoc = r !== undefined
? new CodeMirror.Doc(r.text, r.mime || '')
: beforeDoc;
urlToDocMap.set(url, afterDoc);
if ( currentURL !== url ) { return; }
cmEditor.swapDoc(afterDoc);
});
});
dom.on('#pastURLs', 'mousedown', 'span', ev => { dom.on('#removeURL', 'click', ( ) => {
setURL(ev.target.textContent); removeURL(qs$('#header input[type="url"]').value);
}); });
dom.on('#content', 'click', '.cm-href', ev => { dom.on('#pastURLs', 'mousedown', 'span', ev => {
setURL(ev.target.textContent); setURL(ev.target.textContent);
}); });
dom.on('#content', 'click', '.cm-href', ev => {
setURL(ev.target.textContent);
});
}
start();
/******************************************************************************/