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
[WIP] Client-side paste service
- https://github.com/dracula/prism
- 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" />
</head>
<body>
<div id="progress"></div>
<div id="editor"></div>
<div id="footer">
<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
const decompress = (base64, cb) => {
const progressBar = document.getElementById('progress');
const req = new XMLHttpRequest();
req.open('GET', 'data:application/octet;base64,' + base64);
req.responseType = 'arraybuffer';
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();
};
// Transform a plain text string into a compressed base64 string
const compress = (str, cb) => {
lzma.compress(str, 1, (compressed, err) => {
const progressBar = document.getElementById('progress');
lzma.compress(
str,
1,
(compressed, err) => {
if (err) {
progressBar.style.width = '0';
cb(compressed, err);
return;
}
const reader = new FileReader();
reader.onload = () => {
progressBar.style.width = '0';
cb(reader.result.substr(reader.result.indexOf(',') + 1));
};
reader.readAsDataURL(new Blob([new Uint8Array(compressed)]));
});
},
progress => {
progressBar.style.width = 100 * progress + '%';
}
);
};
init();

12
style.css
View File

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