Now has progress bar (MicrosoftStreamURLExtractor#3)

* Aggiunta progressbar

* aggiunto ringraziamento

* Corretto css

* centrata progrressbar

* aggiustati allineamenti vari

Co-authored-by: lorossi <[email protected]>

Author: valerionew

index.html

@@ -13,8 +13,8 @@
   <meta charset="utf-8">
   <title>Microsoft Stream url extractor</title>
   <script
-    src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
-    integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs="
+    src="https://code.jquery.com/jquery-3.5.1.min.js"
+    integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
     crossorigin="anonymous"></script>
   <script src="script.js"></script>
   <link rel="stylesheet" type="text/css" href="style.css">
@@ -60,6 +60,9 @@ <h3>Ma i tempi duri sono finiti</h3>
      </label>
      </a>
   </div>
+  <div class="progressbar">
+    <div id="inner"></div>
+  </div>
   <div class="output-container">
     <p class="summary">
       Carica un file per iniziare.
@@ -79,7 +82,7 @@ <h3>Ma i tempi duri sono finiti</h3>
      finita la sessione ricordatemi di cercare un convertitore da markdown a html col mio css. <br>
   </p>
 
-
+  <div class="donationcontainer">
   <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
     <input type="hidden" name="cmd" value="_donations" />
     <input type="hidden" name="business" value="NE5B3MM8GEAXA" />
@@ -89,7 +92,12 @@ <h3>Ma i tempi duri sono finiti</h3>
     </label>
     <input type="image" style="display:none" id="nobodydonates" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_SM.gif" border="0" name="submit" title="PayPal - The safer, easier way to pay online!" alt="Donate with PayPal button" />
   </form>
-    
+</div>
+  <hr>
+  <p class="endpage">
+    Un ringraziamento speciale a <a href="https://twitter.com/sunflowaer?s=09">giorgia</a>, nostra
+    patron, investor e benefattrice, che per prima ha creduto nel progetto e fatto una donazione
+  </p>
     <!-- https://github.com/dobarkod/cookie-banner -->
 <!--<script type="text/javascript" id="cookiebanner"
   src="https://cdn.jsdelivr.net/gh/dobarkod/[email protected]/dist/cookiebanner.min.js"></script>-->

script.js

@@ -4,24 +4,31 @@ $(document).on("change", ".file-container #file", function() {
     let output_element = $(".output-container .linklist"); // list of links
     let summary_element = $(".output-container .summary"); // how many links have been found
     let download_file = $(".file-container a#filedownload") // download link
+    let bar = $(".progressbar") // loading bar
     let filename;
 
     reader = new FileReader();
     reader.onload = function() {
+      // clean urls containers in page
+      cleanUrls(output_element, download_file, summary_element);
+
+      $(bar).css({"display": "block"});
+      $(bar).children(":first").css({"width": "0"});
+      $(bar).children(":first").animate({"width": "100%", "display": "inline"}, 700, function() {
+        $(bar).css({"display": "none"});
         // extract the base64 encoded content of the file
         input_encoded = reader.result;
         // decode from base64 and skip the first part, comma separated, containing infos about the file
         input_decoded = atob(input_encoded.split(",")[1]);
         // extract urls
         urls = extractUrls(input_decoded, prefix);
-        // clean urls containers in page
-        cleanUrls(output_element, download_file, summary_element);
         // show urls on container
         showUrls(urls, output_element, summary_element);
         if (urls.length > 0) {
           // if we found any urls, format all the links
             attachDownload(urls, download_file, filename);
         }
+      })
     };
 
     // extract file from file container
@@ -38,7 +45,7 @@ function cleanUrls(element, download, summary) {
     $(element).text("");
 
     // p containing the number of found links
-    $(summary).text("");
+    $(summary).text("Ricerca in corso...");
 
     // download button
     $(download).attr({
@@ -79,7 +86,7 @@ function showUrls(urls, element, summary) {
   // shows url list in output
     if (urls.length > 0) {
         if (urls.length > 1) {
-            $(summary).append(`Sono stati trovati ${urls.length} link nel file:`);
+            $(summary).text(`Sono stati trovati ${urls.length} link nel file:`);
         } else {
             $(summary).text(`È stato trovato 1 link nel file:`);
         }
@@ -88,7 +95,7 @@ function showUrls(urls, element, summary) {
             $(element).append(`<span id="link"><a href="${item}">${item}</a></span><br>`);
         });
     } else {
-        $(summary).append('Non sono stati trovati link nel file!');
+        $(summary).text('Non sono stati trovati link nel file!');
     }
 }
 

style.css

@@ -45,6 +45,7 @@ input[type="file"] {
 	cursor: pointer;
 	color: #fafafa;
 	font-family: sans-serif;
+	width: 96%;
 }
 
 [active|="false"] {
@@ -62,6 +63,12 @@ a {
 
 div.file-container {
 	margin: auto;
+	text-align: center;
+}
+
+div.donationcontainer{
+	margin: auto;
+	text-align: center;
 }
 
 p.endpage {
@@ -85,3 +92,21 @@ pre.linklist{
 	overflow-x: auto;
 	padding: 20px;
 }
+
+.progressbar {
+	margin-block-start: 1em;
+  margin-block-end: 1em;
+  margin-inline-start: 0px;
+  margin-inline-end: 0px;
+	width: 100%;
+	background-color: #bbb;
+	border-radius: 3px;
+	display: none;
+}
+
+.progressbar > #inner {
+	width: 0%;
+	border-radius: 3px;
+	height: 30px;
+	background-color: hotpink;
+}