From 6220c4d9d578241893dbc0102156d579ef32e671 Mon Sep 17 00:00:00 2001 From: Raymond Hill Date: Mon, 13 Mar 2023 10:51:55 -0400 Subject: [PATCH] Improve code viewer convenience - Retain cursor position, selection, undo history, etc. when swapping documents. - Add ability to remove a document from dropdown list --- src/code-viewer.html | 5 +- src/css/code-viewer.css | 10 ++++ src/js/code-viewer.js | 121 +++++++++++++++++++++++++++++----------- 3 files changed, 103 insertions(+), 33 deletions(-) diff --git a/src/code-viewer.html b/src/code-viewer.html index d2e0ce339..56da3d235 100644 --- a/src/code-viewer.html +++ b/src/code-viewer.html @@ -16,7 +16,10 @@
diff --git a/src/css/code-viewer.css b/src/css/code-viewer.css index 0d296c886..774fa69ef 100644 --- a/src/css/code-viewer.css +++ b/src/css/code-viewer.css @@ -23,6 +23,16 @@ body { #header:focus-within #pastURLs { display: flex; } +#currentURL { + display: flex; + gap: 0.5rem; + } +#currentURL > .fa-icon { + padding: 0 0.5rem; + } +#currentURL > .fa-icon:hover { + background-color: var(--surface-3); + } #pastURLs { background-color: var(--surface-0); border: 1px solid var(--border-1); diff --git a/src/js/code-viewer.js b/src/js/code-viewer.js index aff962af8..6eecacd58 100644 --- a/src/js/code-viewer.js +++ b/src/js/code-viewer.js @@ -30,9 +30,9 @@ import { getActualTheme } from './theme.js'; /******************************************************************************/ -const urlToTextMap = new Map(); +const urlToDocMap = new Map(); const params = new URLSearchParams(document.location.search); -let fromURL = ''; +let currentURL = ''; const cmEditor = new CodeMirror(qs$('#content'), { autofocus: true, @@ -88,12 +88,11 @@ cmEditor.addOverlay({ }, }); +urlToDocMap.set('', cmEditor.getDoc()); + /******************************************************************************/ async function fetchResource(url) { - if ( urlToTextMap.has(url) ) { - return urlToTextMap.get(url); - } let response, text; try { response = await fetch(url); @@ -103,34 +102,46 @@ async function fetchResource(url) { } let mime = response.headers.get('Content-Type') || ''; mime = mime.replace(/\s*;.*$/, '').trim(); + const options = { + 'end_with_newline': true, + 'indent_size': 2, + 'html': { + 'js': { + 'indent_size': 4, + }, + }, + 'js': { + 'indent_size': 4, + 'preserve-newlines': true, + }, + }; switch ( mime ) { case 'text/css': - text = beautifier.css(text, { indent_size: 2 }); + text = beautifier.css(text, options); break; case 'text/html': case 'application/xhtml+xml': case 'application/xml': case 'image/svg+xml': - text = beautifier.html(text, { indent_size: 2 }); + text = beautifier.html(text, options); break; case 'text/javascript': case 'application/javascript': case 'application/x-javascript': - text = beautifier.js(text, { indent_size: 4 }); + text = beautifier.js(text, options); break; case 'application/json': - text = beautifier.js(text, { indent_size: 2 }); + text = beautifier.js(text, options); break; default: break; } - urlToTextMap.set(url, { mime, text }); return { mime, text }; } /******************************************************************************/ -function updatePastURLs(url) { +function addPastURLs(url) { const list = qs$('#pastURLs'); let current; for ( let i = 0; i < list.children.length; i++ ) { @@ -139,6 +150,7 @@ function updatePastURLs(url) { if ( span.textContent !== url ) { continue; } current = span; } + if ( url === '' ) { return; } if ( current === undefined ) { current = document.createElement('span'); current.textContent = url; @@ -149,47 +161,92 @@ function updatePastURLs(url) { /******************************************************************************/ +function setInputURL(url) { + const input = qs$('#header input[type="url"]'); + if ( url === input.value ) { return; } + dom.attr(input, 'value', url); + input.value = url; +} + +/******************************************************************************/ + async function setURL(resourceURL) { // For convenience, remove potentially existing quotes around the URL if ( /^(["']).+\1$/.test(resourceURL) ) { resourceURL = resourceURL.slice(1, -1); } - const input = qs$('#header input[type="url"]'); - let to; - try { - to = new URL(resourceURL, fromURL || undefined); - } catch(ex) { + let afterURL; + if ( resourceURL !== '' ) { + try { + const url = new URL(resourceURL, currentURL || undefined); + url.hash = ''; + afterURL = url.href; + } catch(ex) { + } + if ( afterURL === undefined ) { return; } + } else { + afterURL = ''; } - if ( to === undefined ) { return; } - if ( /^https?:\/\/./.test(to.href) === false ) { return; } - if ( to.href === fromURL ) { return; } - let r; - try { - r = await fetchResource(to.href); - } catch(reason) { + if ( afterURL !== '' && /^https?:\/\/./.test(afterURL) === false ) { + return; } - if ( r === undefined ) { return; } - fromURL = to.href; - dom.attr(input, 'value', to.href); - input.value = to; + if ( afterURL === currentURL ) { + if ( afterURL !== resourceURL ) { + setInputURL(afterURL); + } + return; + } + let afterDoc = urlToDocMap.get(afterURL); + if ( afterDoc === undefined ) { + const r = await fetchResource(afterURL) || { mime: '', text: '' }; + afterDoc = new CodeMirror.Doc(r.text, r.mime || ''); + } + urlToDocMap.set(currentURL, cmEditor.swapDoc(afterDoc)); + currentURL = afterURL; + setInputURL(afterURL); const a = qs$('.cm-search-widget .sourceURL'); - dom.attr(a, 'href', to); - dom.attr(a, 'title', to); - cmEditor.setOption('mode', r.mime || ''); - cmEditor.setValue(r.text); - updatePastURLs(to.href); + dom.attr(a, 'href', afterURL); + dom.attr(a, 'title', afterURL); + addPastURLs(afterURL); // For unknown reasons, calling focus() synchronously does not work... vAPI.setTimeout(( ) => { cmEditor.focus(); }, 1); } /******************************************************************************/ +function removeURL(url) { + if ( url === '' ) { return; } + const list = qs$('#pastURLs'); + let foundAt = -1; + for ( let i = 0; i < list.children.length; i++ ) { + const span = list.children[i]; + if ( span.textContent !== url ) { continue; } + foundAt = i; + } + if ( foundAt === -1 ) { return; } + list.children[foundAt].remove(); + if ( foundAt >= list.children.length ) { + foundAt = list.children.length - 1; + } + const afterURL = foundAt !== -1 + ? list.children[foundAt].textContent + : ''; + setURL(afterURL); + urlToDocMap.delete(url); +} + +/******************************************************************************/ + setURL(params.get('url')); dom.on('#header input[type="url"]', 'change', ev => { setURL(ev.target.value); }); +dom.on('#removeURL', 'click', ( ) => { + removeURL(qs$('#header input[type="url"]').value); +}); + dom.on('#pastURLs', 'mousedown', 'span', ev => { setURL(ev.target.textContent); });