jessa
/
inkyboo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Edit embeded looks

master
Boris Kubiak 2020-04-27 17:03:02 +02:00
parent 8991febab3
commit e45e81ab97
3 changed files with 45 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
index.html
View File

@ -27,6 +27,14 @@ npm/codemirror@5.52.0/theme/dracula.min.css
/> />
</head> </head>
<body class="m-0"> <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 id="copy" class="container-fluid hidden shadow-bottom hide-readonly">
<div class="row my-1"> <div class="row my-1">
<div class="col my-1"> <div class="col my-1">
@ -74,7 +82,6 @@ npm/codemirror@5.52.0/theme/dracula.min.css
type="button" type="button"
id="enable-line-wrapping" id="enable-line-wrapping"
title="Enable line wrapping" title="Enable line wrapping"
class="hidden"
> >
<svg class="icon"><use xlink:href="#icon-notes"></use></svg> <svg class="icon"><use xlink:href="#icon-notes"></use></svg>
</button> </button>
@ -83,6 +90,7 @@ npm/codemirror@5.52.0/theme/dracula.min.css
type="button" type="button"
id="disable-line-wrapping" id="disable-line-wrapping"
title="Disable line wrapping" title="Disable line wrapping"
class="hidden"
> >
<svg class="icon"><use xlink:href="#icon-wrap-text"></use></svg> <svg class="icon"><use xlink:href="#icon-wrap-text"></use></svg>
</button> </button>
@ -102,7 +110,14 @@ npm/codemirror@5.52.0/theme/dracula.min.css
<div id="editor"></div> <div id="editor"></div>
<footer id="footer" class="shadow-top container-fluid"> <footer id="footer" class="shadow-top container-fluid">
<div class="row my-1"> <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> </div>
</footer> </footer>
<div class="hidden" id="overlay" onclick="this.classList.add('hidden')"> <div class="hidden" id="overlay" onclick="this.classList.add('hidden')">
@ -150,6 +165,12 @@ npm/codemirror@5.52.0/theme/dracula.min.css
7.25-4.156 3.344 0 7.094 2.672 7.094 6.25z" 7.25-4.156 3.344 0 7.094 2.672 7.094 6.25z"
></path> ></path>
</symbol> </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> </defs>
</svg> </svg>
<script src="https://cdn.jsdelivr.net/combine/ <script src="https://cdn.jsdelivr.net/combine/

30
index.js
View File

@ -6,31 +6,26 @@ let select = null;
let clipboard = null; let clipboard = null;
let statsEl = null; let statsEl = null;
const init = () => { const initCodeEditor = (initialValue) => {
initCodeEditor();
initLangSelector();
initCode();
initClipboard();
};
const initCodeEditor = () => {
const readOnly = new URLSearchParams(window.location.search).has('readonly');
CodeMirror.modeURL = 'https://cdn.jsdelivr.net/npm/codemirror@5.52.0/mode/%N/%N.js'; CodeMirror.modeURL = 'https://cdn.jsdelivr.net/npm/codemirror@5.52.0/mode/%N/%N.js';
editor = new CodeMirror(byId('editor'), { editor = new CodeMirror(byId('editor'), {
lineNumbers: true, lineNumbers: true,
theme: 'dracula', theme: 'dracula',
readOnly: readOnly, readOnly: readOnly,
lineWrapping: true, lineWrapping: false,
scrollbarStyle: 'simple', scrollbarStyle: 'simple',
value: initialValue,
}); });
if (readOnly) { if (readOnly) {
document.body.classList.add('readonly'); document.body.classList.add('readonly');
} }
statsEl = byId('stats'); statsEl = byId('stats');
statsEl.innerHTML = `Length: ${initialValue.length} | Lines: ${editor['doc'].size}`;
editor.on('change', () => { editor.on('change', () => {
statsEl.innerHTML = `Length: ${editor.getValue().length} | Lines: ${editor['doc'].size}`; statsEl.innerHTML = `Length: ${editor.getValue().length} | Lines: ${editor['doc'].size}`;
}); });
initLangSelector();
}; };
const initLangSelector = () => { const initLangSelector = () => {
@ -55,14 +50,16 @@ const initLangSelector = () => {
const initCode = () => { const initCode = () => {
const base64 = location.pathname.substr(1) || location.hash.substr(1); const base64 = location.pathname.substr(1) || location.hash.substr(1);
if (base64.length === 0) { if (base64.length === 0) {
initCodeEditor('');
return; return;
} }
decompress(base64, (code, err) => { decompress(base64, (code, err) => {
if (err) { if (err) {
alert('Failed to decompress data: ' + err); alert('Failed to decompress data: ' + err);
initCodeEditor('');
return; return;
} }
editor.setValue(code); initCodeEditor(code);
}); });
}; };
@ -125,6 +122,10 @@ const enableLineWrapping = () => {
editor.setOption('lineWrapping', true); editor.setOption('lineWrapping', true);
}; };
const openInNewTab = () => {
window.open(location.href.replace('&readonly', ''));
};
// Build a shareable URL // Build a shareable URL
const buildUrl = (rawData, mode) => { const buildUrl = (rawData, mode) => {
const url = `${location.protocol}//${location.host}/` + rawData + `?lang=${encodeURIComponent(select.selected())}`; const url = `${location.protocol}//${location.host}/` + rawData + `?lang=${encodeURIComponent(select.selected())}`;
@ -132,8 +133,8 @@ const buildUrl = (rawData, mode) => {
return `[NoPaste snippet](${url})`; return `[NoPaste snippet](${url})`;
} }
if (mode === 'iframe') { if (mode === 'iframe') {
const height = editor['doc'].size + 30; const height = Math.min(editor['doc'].height + 45, 800);
return `<iframe width="100%" height="${height}" frameborder="0" src="${url}&readonly"></iframe>`; return `<iframe width="100%" height="${height}" frameborder="0" src="${url}"></iframe>`;
} }
return url; return url;
}; };
@ -207,4 +208,5 @@ const testAllModes = () => {
} }
}; };
init(); initCode(); // Will decode URL, create code editor, and language selector
initClipboard();

7
style.css
View File

@ -36,7 +36,8 @@ footer {
.hidden, .hidden,
select, select,
#copy:not(.hidden) + #controls, #copy:not(.hidden) + #controls,
.readonly .hide-readonly { body.readonly .hide-readonly,
body:not(.readonly) .show-readonly {
display: none; display: none;
} }
@ -167,3 +168,7 @@ button:hover {
stroke: currentColor; stroke: currentColor;
fill: currentColor; fill: currentColor;
} }
.icon-edit {
font-size: 16px;
margin: -3px 0;
}