Edit embeded looks
Boris Kubiak
parent
8991febab3
commit
e45e81ab97
25
index.html
25
index.html
|
|
@ -27,6 +27,14 @@ npm/codemirror@5.52.0/theme/dracula.min.css
|
|||
/>
|
||||
</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 @@ npm/codemirror@5.52.0/theme/dracula.min.css
|
|||
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 @@ npm/codemirror@5.52.0/theme/dracula.min.css
|
|||
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 @@ npm/codemirror@5.52.0/theme/dracula.min.css
|
|||
<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')">
|
||||
|
|
@ -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"
|
||||
></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>
|
||||
</svg>
|
||||
<script src="https://cdn.jsdelivr.net/combine/
|
||||
|
|
|
|||
30
index.js
30
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 initLangSelector = () => {
|
|||
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);
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -125,6 +122,10 @@ const enableLineWrapping = () => {
|
|||
editor.setOption('lineWrapping', true);
|
||||
};
|
||||
|
||||
const openInNewTab = () => {
|
||||
window.open(location.href.replace('&readonly', ''));
|
||||
};
|
||||
|
||||
// Build a shareable URL
|
||||
const buildUrl = (rawData, mode) => {
|
||||
const url = `${location.protocol}//${location.host}/` + rawData + `?lang=${encodeURIComponent(select.selected())}`;
|
||||
|
|
@ -132,8 +133,8 @@ const buildUrl = (rawData, mode) => {
|
|||
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 @@ const testAllModes = () => {
|
|||
}
|
||||
};
|
||||
|
||||
init();
|
||||
initCode(); // Will decode URL, create code editor, and language selector
|
||||
initClipboard();
|
||||
|
|
|
|||
|
|
@ -36,7 +36,8 @@ footer {
|
|||
.hidden,
|
||||
select,
|
||||
#copy:not(.hidden) + #controls,
|
||||
.readonly .hide-readonly {
|
||||
body.readonly .hide-readonly,
|
||||
body:not(.readonly) .show-readonly {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
@ -167,3 +168,7 @@ button:hover {
|
|||
stroke: currentColor;
|
||||
fill: currentColor;
|
||||
}
|
||||
.icon-edit {
|
||||
font-size: 16px;
|
||||
margin: -3px 0;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue