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

Add a progress bar

master
Boris Kubiak 2020-02-17 16:41:54 +01:00
parent 9f23498cd0
commit 9d425d7bf1
4 changed files with 53 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
README.md
View File

@ -1,2 +1,9 @@
# paste - https://github.com/dracula/prism
[WIP] Client-side paste service - https://github.com/LzmaMin-JS/LzmaMin-JS
- https://github.com/PrismJS/prism
- https://github.com/kazzkiq/CodeFlask
```sh
# Format code
npx prettier --write --single-quote --tab-width=4 --print-width=120 index.js *.{html,css,md}
```

1
index.html
View File

@ -28,6 +28,7 @@ npm/codemirror@5.51.0/theme/dracula.min.css
<link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="style.css" />
</head> </head>
<body> <body>
<div id="progress"></div>
<div id="editor"></div> <div id="editor"></div>
<div id="footer"> <div id="footer">
<label for="language"></label <label for="language"></label

28
index.js
View File

@ -99,28 +99,50 @@ const buildUrl = rawData => {
// 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 req = new XMLHttpRequest(); const req = new XMLHttpRequest();
req.open('GET', 'data:application/octet;base64,' + base64); req.open('GET', 'data:application/octet;base64,' + base64);
req.responseType = 'arraybuffer'; req.responseType = 'arraybuffer';
req.onload = e => { req.onload = e => {
lzma.decompress(new Uint8Array(e.target.response), cb); lzma.decompress(
new Uint8Array(e.target.response),
(result, err) => {
progressBar.style.width = '0';
cb(result, err);
},
progress => {
progressBar.style.width = 100 * progress + '%';
}
);
}; };
req.send(); req.send();
}; };
// 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) => {
lzma.compress(str, 1, (compressed, err) => { const progressBar = document.getElementById('progress');
lzma.compress(
str,
1,
(compressed, err) => {
if (err) { if (err) {
progressBar.style.width = '0';
cb(compressed, err); cb(compressed, err);
return; return;
} }
const reader = new FileReader(); const reader = new FileReader();
reader.onload = () => { reader.onload = () => {
progressBar.style.width = '0';
cb(reader.result.substr(reader.result.indexOf(',') + 1)); cb(reader.result.substr(reader.result.indexOf(',') + 1));
}; };
reader.readAsDataURL(new Blob([new Uint8Array(compressed)])); reader.readAsDataURL(new Blob([new Uint8Array(compressed)]));
}); },
progress => {
progressBar.style.width = 100 * progress + '%';
}
);
}; };
init(); init();

12
style.css
View File

@ -2,11 +2,11 @@
#editor, #editor,
#footer, #footer,
#copy { #copy,
#progress {
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0;
} }
#editor { #editor {
@ -20,6 +20,7 @@
#footer, #footer,
#copy { #copy {
bottom: 0;
height: 38px; height: 38px;
padding: 8px 8px 0; padding: 8px 8px 0;
background-color: #3b3b47; background-color: #3b3b47;
@ -30,6 +31,13 @@
#copy > * { #copy > * {
margin: 0 6px; margin: 0 6px;
} }
#progress {
top: 0;
height: 3px;
background: #ff79c6;
z-index: 5;
width: 0;
}
.grow { .grow {
flex-grow: 1; flex-grow: 1;
} }