all repos — NoPaste @ 9d425d7bf13e2e7bd4d4872fb867a103e0ea4b88

Resurrected - The PussTheCat.org fork of NoPaste

Add a progress bar
Boris Kubiak kubiakboris@gmail.com
Mon, 17 Feb 2020 16:41:54 +0100
commit

9d425d7bf13e2e7bd4d4872fb867a103e0ea4b88

parent

9f23498cd0109cf87bf1f681ca231975491959e6

4 files changed, 53 insertions(+), 15 deletions(-)

jump to
M README.md → README.md 
@@ -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}
+```
M index.html → index.html 
@@ -28,6 +28,7 @@ />
         <link rel="stylesheet" href="style.css" />
     </head>
     <body>
+        <div id="progress"></div>
         <div id="editor"></div>
         <div id="footer">
             <label for="language"></label
M index.js → index.js 
@@ -99,28 +99,50 @@ };
 
 // 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) => {
-        if (err) {
-            cb(compressed, err);
-            return;
+    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 + '%';
         }
-        const reader = new FileReader();
-        reader.onload = () => {
-            cb(reader.result.substr(reader.result.indexOf(',') + 1));
-        };
-        reader.readAsDataURL(new Blob([new Uint8Array(compressed)]));
-    });
+    );
 };
 
 init();
M style.css → style.css 
@@ -2,11 +2,11 @@ /* App layout */
 
 #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;

@@ -29,6 +30,13 @@ }
 #footer > *,
 #copy > * {
     margin: 0 6px;
+}
+#progress {
+    top: 0;
+    height: 3px;
+    background: #ff79c6;
+    z-index: 5;
+    width: 0;
 }
 .grow {
     flex-grow: 1;