Display blocked sites before scanning finishes

MrLuit · Mar 27, 2017 · 467b0df · 467b0df
1 parent db62ab9
commit 467b0df
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 44 deletions.
diff --git a/index.html b/index.html
@@ -11,7 +11,7 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.4.4/sweetalert2.min.css" integrity="sha256-Q8nz2nAPuWywKEbtus2Z4MQKK4FSEq2fSXK0zozdtB8=" crossorigin="anonymous" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.css" integrity="sha256-lCqHBvboFPu7gyEswcz5UdbXKyB6FDOtfbOeMvUEfkY=" crossorigin="anonymous" />
     <link rel="stylesheet" href="style.css">
-    <link rel="shortcut icon" type="image/png" href="favicon.png"/>
+    <link rel="shortcut icon" type="image/png" href="favicon.png" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js" integrity="sha384-o9KO9jVK1Q4ybtHgJCCHfgQrTRNlkT6SL3j/qMuBMlDw3MmFrgrOHCOaIMJWGgK5" crossorigin="anonymous"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.js" integrity="sha256-mq9Ru97qzOm1x5zeYFfPniWgQP9tEmjo3O4jUEJdjNY=" crossorigin="anonymous"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.4.4/sweetalert2.min.js" integrity="sha256-JoItGlvRIkYsnlPQ2+m1IQYYdenZa+yuktGGDE9uDg8=" crossorigin="anonymous"></script>
@@ -29,9 +29,33 @@
     <div class="ui container site">
         <h1 class="title">CensorRadar</h1>
         <p class="infotext">This website will try to reach a list of domains and return which ones fail.</p>
-        <div class="undertext">
+        <div class="scanbutton">
             <button class="ui huge button scan"><i class="refresh icon"></i>Scan</button>
         </div>
+        <div class="loadingbar">
+            <b class='count'></b>
+            <BR>
+            <BR>
+            <div class='ui progress'>
+                <div class='bar'></div>
+            </div>
+        </div>
+        <div class="failedresults">
+            <h4 class='failed'></h4>
+            <BR>
+            <table class='ui celled table'>
+                <thead>
+                    <tr>
+                        <th>Title</th>
+                    </tr>
+                </thead>
+                <tbody>
+                </tbody>
+            </table>
+        </div>
+        <div class="successresults">
+            <h4><i class='checkmark icon'></i> Success! No domains are blocked.</h4>
+        </div>
     </div>
 </body>
 

diff --git a/script.js b/script.js
@@ -1,11 +1,12 @@
 $(document).ready(function() {
-    $(".scan").click(function() {
-        $(".undertext").html("<div class='ui progress'><div class='bar'></div></div>");
-        $.get("domains.json", function(data) {
+    $.get("domains.json", function(data) {
+        $(".scan").click(function() {
+            $(".scanbutton").hide();
+            $(".loadingbar").show();
             var domains = data.domains;
             var faileddomains = [];
             var cnt = 0;
-            $(".undertext").prepend("<b class='count'>0 / " + domains.length + "</b><BR><BR>");
+            $(".count").html("0 / " + domains.length);
             $.each(domains, function(i, data) {
                 var image = new Image();
                 image.setAttribute("domain", data.domain.replace("~", ""));
@@ -18,48 +19,28 @@ $(document).ready(function() {
                         "domain": this.getAttribute("domain"),
                         "img": this.src
                     });
-                    $(".bar").width((((cnt + 1) / domains.length) * 100) + '%');
+                    $(".bar").width(((cnt / domains.length) * 100) + '%');
+                    $(".failedresults").show();
+                    if (faileddomains.length == 1) {
+                        $(".failed").html('1 domain could not be reached');
+                    } else {
+                        $(".failed").html(faileddomains.length + ' domains could not be reached');
+                    }
                     if (cnt == domains.length) {
-                        if (faileddomains.length == 0) {
-                            $(".undertext").html("<h4><i class='checkmark icon'></i> Success! No domains are blocked.</h4>");
-                        } else {
-                            if (faileddomains.length == 1) {
-                                failedtext = '1 domain could not be reached';
-                            } else {
-                                failedtext = faileddomains.length + ' domains could not be reached';
-                            }
-                            var table = ("<h4 class='failed'>" + failedtext + "</h4><BR><table class='ui celled table'><thead><tr><th>Title</th></tr></thead><tbody>");
-                            $.each(faileddomains, function(i, data) {
-                                table += "<tr><td>" + data.title + "<p class='right'><a href='javascript:void(0);' onclick=\"swal('" + data.title + "','<a target=_blank href=" + data.img + ">" + data.domain + "</a> could not be reached','error');\"><i class='info circle icon'></i></a></p></td></tr>";
-                            });
-                            table += "</tbody></table>";
-                            $(".undertext").css("padding-top", "5%");
-                            $(".undertext").html(table);
-                        }
+                        $(".loadingbar").hide();
                     }
+                    $(".table tbody").prepend("<tr><td>" + data.title + "<p class='right'><a href='javascript:void(0);' onclick=\"swal('" + data.title + "','<a target=_blank href=" + data.img + ">" + data.domain + "</a> could not be reached','error');\"><i class='info circle icon'></i></a></p></td></tr>");
                 };
 
                 image.onload = function() {
                     cnt++;
                     $(".count").html(cnt + " / " + domains.length);
-                    $(".bar").width((((cnt + 1) / domains.length) * 100) + '%');
-                    if (cnt == domains.length) {
-                        if (faileddomains.length == 0) {
-                            $(".undertext").html("<h4><i class='checkmark icon'></i> Success! No domains are blocked.</h4>");
-                        } else {
-                            if (faileddomains.length == 1) {
-                                failedtext = '1 domain could not be reached';
-                            } else {
-                                failedtext = faileddomains.length + ' domains could not be reached';
-                            }
-                            var table = ("<h4 class='failed'>" + failedtext + "</h4><BR><table class='ui celled table'><thead><tr><th>Title</th></tr></thead><tbody>");
-                            $.each(faileddomains, function(i, data) {
-                                table += "<tr><td>" + data.title + "<p class='right'><a href='javascript:void(0);' onclick=\"swal('" + data.title + "','<a target=_blank href=" + data.img + ">" + data.domain + "</a> could not be reached','error');\"><i class='info circle icon'></i></a></p></td></tr>";
-                            });
-                            table += "</tbody></table>";
-                            $(".undertext").css("padding-top", "5%");
-                            $(".undertext").html(table);
-                        }
+                    $(".bar").width(((cnt / domains.length) * 100) + '%');
+                    if (cnt == domains.length && faileddomains.length == 0) {
+                        $(".loadingbar").hide();
+                        $(".successresults").show();
+                    } else if (cnt == domains.length) {
+                        $(".loadingbar").hide();
                     }
                 };
                 if (data.domain.match("^~")) {

diff --git a/style.css b/style.css
@@ -2,13 +2,18 @@
     padding-top: 5%;
     text-align: center;
 }
-.undertext {
+.scanbutton {
     text-align: center;
     padding-top: 8%;
-}
-.undertext .scan {
     margin: auto;
 }
+.failedresults,
+.successresults,
+.loadingbar {
+    text-align: center;
+    padding-top: 4%;
+    display: none;
+}
 .bar {
     transition-duration: 300ms;
 }