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

Fix mobile display

master
Boris Kubiak 2020-04-26 00:53:10 +02:00
parent eb7f87d6aa
commit 05b601792e
3 changed files with 18 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -70,7 +70,7 @@ npm/codemirror@5.52.0/theme/dracula.min.css
</div> </div>
<div id="progress"></div> <div id="progress"></div>
<div id="editor"></div> <div id="editor"></div>
<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" id="stats"></div>
<div class="col-auto"> <div class="col-auto">
@ -83,7 +83,7 @@ npm/codemirror@5.52.0/theme/dracula.min.css
As a result, there is no risk of data being lost, censored or deleted. The whole data is stored As a result, there is no risk of data being lost, censored or deleted. The whole data is stored
<b>in the link</b> and nowhere else! <b>in the link</b> and nowhere else!
</div> </div>
<div class="overlay hidden"></div> <div class="hidden" id="overlay"></div>
</div> </div>
<div class="col-auto"> <div class="col-auto">
<a href="https://github.com/bokub/nopaste" rel="noopener" target="_blank">Github</a> <a href="https://github.com/bokub/nopaste" rel="noopener" target="_blank">Github</a>

20
index.js
View File

@ -16,7 +16,7 @@ const init = () => {
const initCodeEditor = () => { const initCodeEditor = () => {
const readOnly = new URLSearchParams(window.location.search).has('readonly'); 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(document.getElementById('editor'), { editor = new CodeMirror(byId('editor'), {
lineNumbers: true, lineNumbers: true,
theme: 'dracula', theme: 'dracula',
readOnly: readOnly, readOnly: readOnly,
@ -26,7 +26,7 @@ const initCodeEditor = () => {
document.body.classList.add('readonly'); document.body.classList.add('readonly');
} }
statsEl = document.getElementById('stats'); statsEl = byId('stats');
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}`;
}); });
@ -90,16 +90,16 @@ const generateLink = (mode) => {
// Open the "Copy" bar and select the content // Open the "Copy" bar and select the content
const showCopyBar = (dataToCopy) => { const showCopyBar = (dataToCopy) => {
const linkInput = document.getElementById('copy-link'); const linkInput = byId('copy-link');
linkInput.value = dataToCopy; linkInput.value = dataToCopy;
linkInput.setSelectionRange(0, dataToCopy.length); linkInput.setSelectionRange(0, dataToCopy.length);
document.getElementById('copy').classList.remove('hidden'); byId('copy').classList.remove('hidden');
}; };
// Close the "Copy" bar // Close the "Copy" bar
const hideCopyBar = (success) => { const hideCopyBar = (success) => {
const copyButton = document.getElementById('copy-btn'); const copyButton = byId('copy-btn');
const copyBar = document.getElementById('copy'); const copyBar = byId('copy');
if (!success) { if (!success) {
copyBar.classList.add('hidden'); copyBar.classList.add('hidden');
return; return;
@ -118,7 +118,7 @@ const buildUrl = (rawData, mode) => {
return `[NoPaste snippet](${url})`; return `[NoPaste snippet](${url})`;
} }
if (mode === 'iframe') { if (mode === 'iframe') {
const height = document.getElementsByClassName('CodeMirror-sizer')[0].clientHeight + 8; const height = editor['doc'].size + 30;
return `<iframe width="100%" height="${height}" frameborder="0" src="${url}&readonly"></iframe>`; return `<iframe width="100%" height="${height}" frameborder="0" src="${url}&readonly"></iframe>`;
} }
return url; return url;
@ -126,7 +126,7 @@ const buildUrl = (rawData, mode) => {
// Transform a compressed base64 string into a plain text string // Transform a compressed base64 string into a plain text string
const decompress = (base64, cb) => { const decompress = (base64, cb) => {
const progressBar = document.getElementById('progress'); const progressBar = byId('progress');
const req = new XMLHttpRequest(); const req = new XMLHttpRequest();
req.open('GET', 'data:application/octet;base64,' + base64); req.open('GET', 'data:application/octet;base64,' + base64);
@ -148,7 +148,7 @@ const decompress = (base64, cb) => {
// Transform a plain text string into a compressed base64 string // Transform a plain text string into a compressed base64 string
const compress = (str, cb) => { const compress = (str, cb) => {
const progressBar = document.getElementById('progress'); const progressBar = byId('progress');
lzma.compress( lzma.compress(
str, str,
@ -181,6 +181,8 @@ const slugify = (str) =>
.replace(/#/g, '-sharp') .replace(/#/g, '-sharp')
.replace(/[^\w\-]+/g, ''); .replace(/[^\w\-]+/g, '');
const byId = (id) => document.getElementById(id);
/* Only for tests purposes */ /* Only for tests purposes */
const testAllModes = () => { const testAllModes = () => {
for (const [index, language] of Object.entries(CodeMirror.modeInfo)) { for (const [index, language] of Object.entries(CodeMirror.modeInfo)) {

7
style.css
View File

@ -1,9 +1,12 @@
/* App layout */ /* App layout */
html,
body {
height: 100%;
}
body { body {
display: flex; display: flex;
flex-flow: column; flex-flow: column;
height: 100vh;
color: #fff; color: #fff;
font: normal 14px Roboto, sans-serif; font: normal 14px Roboto, sans-serif;
background-color: #282a36; background-color: #282a36;
@ -73,7 +76,7 @@ a:active {
right: 0; right: 0;
max-width: 350px; max-width: 350px;
} }
.description-trigger:hover + #description + .overlay { .description-trigger:hover + #description + #overlay {
/* Used to un-hover on mobile */ /* Used to un-hover on mobile */
display: block; display: block;
position: fixed; position: fixed;