Edit embeded looks
Boris Kubiak kubiakboris@gmail.com
Mon, 27 Apr 2020 17:03:02 +0200
3 files changed,
45 insertions(+),
17 deletions(-)
M
index.html
→
index.html
@@ -27,6 +27,14 @@ content="NoPaste is a client-side paste service which works with no database, and no back-end code. The whole data is stored in the generated links and nowhere else"
/> </head> <body class="m-0"> + <script> + const readOnly = + window.location !== window.parent.location || + new URLSearchParams(window.location.search).has('readonly'); + if (readOnly) { + document.body.classList.add('readonly'); + } + </script> <div id="copy" class="container-fluid hidden shadow-bottom hide-readonly"> <div class="row my-1"> <div class="col my-1">@@ -74,7 +82,6 @@ onclick="enableLineWrapping()"
type="button" id="enable-line-wrapping" title="Enable line wrapping" - class="hidden" > <svg class="icon"><use xlink:href="#icon-notes"></use></svg> </button>@@ -83,6 +90,7 @@ onclick="disableLineWrapping()"
type="button" id="disable-line-wrapping" title="Disable line wrapping" + class="hidden" > <svg class="icon"><use xlink:href="#icon-wrap-text"></use></svg> </button>@@ -102,7 +110,14 @@ <div id="progress"></div>
<div id="editor"></div> <footer id="footer" class="shadow-top container-fluid"> <div class="row my-1"> - <div class="col mono" id="stats"></div> + <div class="col mono hide-readonly" id="stats"></div> + <div class="col mono show-readonly">Hosted on NoPaste.ml</div> + <div class="col-auto mono show-readonly"> + <a href="javascript:void(0)" onclick="openInNewTab()"> + <svg class="icon icon-edit"><use xlink:href="#icon-edit"></use></svg> + Edit + </a> + </div> </div> </footer> <div class="hidden" id="overlay" onclick="this.classList.add('hidden')">@@ -148,6 +163,12 @@ 1.875-3.516 3.25-4.141 1.203-0.547 1.703-1.062 1.703-2.063 0-0.875-1.141-1.656-2.406-1.656-0.703 0-1.344
0.219-1.687 0.453-0.375 0.266-0.75 0.641-1.672 1.797-0.125 0.156-0.313 0.25-0.484 0.25-0.141 0-0.266-0.047-0.391-0.125l-2.562-1.953c-0.266-0.203-0.328-0.547-0.156-0.828 1.687-2.797 4.062-4.156 7.25-4.156 3.344 0 7.094 2.672 7.094 6.25z" + ></path> + </symbol> + <symbol id="icon-edit" viewBox="0 0 24 24"> + <path + d="M20.719 7.031l-1.828 1.828-3.75-3.75 1.828-1.828q0.281-0.281 0.703-0.281t0.703 0.281l2.344 + 2.344q0.281 0.281 0.281 0.703t-0.281 0.703zM3 17.25l11.063-11.063 3.75 3.75-11.063 11.063h-3.75v-3.75z" ></path> </symbol> </defs>
M
index.js
→
index.js
@@ -6,31 +6,26 @@ let select = null;
let clipboard = null; let statsEl = null; -const init = () => { - initCodeEditor(); - initLangSelector(); - initCode(); - initClipboard(); -}; - -const initCodeEditor = () => { - const readOnly = new URLSearchParams(window.location.search).has('readonly'); +const initCodeEditor = (initialValue) => { CodeMirror.modeURL = 'https://cdn.jsdelivr.net/npm/codemirror@5.52.0/mode/%N/%N.js'; editor = new CodeMirror(byId('editor'), { lineNumbers: true, theme: 'dracula', readOnly: readOnly, - lineWrapping: true, + lineWrapping: false, scrollbarStyle: 'simple', + value: initialValue, }); if (readOnly) { document.body.classList.add('readonly'); } statsEl = byId('stats'); + statsEl.innerHTML = `Length: ${initialValue.length} | Lines: ${editor['doc'].size}`; editor.on('change', () => { statsEl.innerHTML = `Length: ${editor.getValue().length} | Lines: ${editor['doc'].size}`; }); + initLangSelector(); }; const initLangSelector = () => {@@ -55,14 +50,16 @@
const initCode = () => { const base64 = location.pathname.substr(1) || location.hash.substr(1); if (base64.length === 0) { + initCodeEditor(''); return; } decompress(base64, (code, err) => { if (err) { alert('Failed to decompress data: ' + err); + initCodeEditor(''); return; } - editor.setValue(code); + initCodeEditor(code); }); };@@ -123,6 +120,10 @@ const enableLineWrapping = () => {
byId('enable-line-wrapping').classList.add('hidden'); byId('disable-line-wrapping').classList.remove('hidden'); editor.setOption('lineWrapping', true); +}; + +const openInNewTab = () => { + window.open(location.href.replace('&readonly', '')); }; // Build a shareable URL@@ -132,8 +133,8 @@ if (mode === 'markdown') {
return `[NoPaste snippet](${url})`; } if (mode === 'iframe') { - const height = editor['doc'].size + 30; - return `<iframe width="100%" height="${height}" frameborder="0" src="${url}&readonly"></iframe>`; + const height = Math.min(editor['doc'].height + 45, 800); + return `<iframe width="100%" height="${height}" frameborder="0" src="${url}"></iframe>`; } return url; };@@ -207,4 +208,5 @@ }, 1000 * index);
} }; -init(); +initCode(); // Will decode URL, create code editor, and language selector +initClipboard();
M
style.css
→
style.css
@@ -36,7 +36,8 @@
.hidden, select, #copy:not(.hidden) + #controls, -.readonly .hide-readonly { +body.readonly .hide-readonly, +body:not(.readonly) .show-readonly { display: none; }@@ -167,3 +168,7 @@ stroke-width: 0;
stroke: currentColor; fill: currentColor; } +.icon-edit { + font-size: 16px; + margin: -3px 0; +}