improve offline mode for HTML reports

open-indy · Jan 1, 2017 · 720ac58 · 720ac58
1 parent 6ab8fee
commit 720ac58
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 33 deletions.
diff --git a/_markup/template.html b/_markup/template.html
@@ -24,7 +24,7 @@
         box-sizing: border-box;
       }
       html {
-        -webkit-tap-highlight-color: rgba(0,0,0,0);
+        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
       }
       body {
         background: #FFF;
@@ -82,35 +82,12 @@
         margin-bottom: 21px;
         box-shadow: 0px 1px 1px rgba(0,0,0,0.05);
       }
-      .panel-danger {
-        border-color: #E74C3C;
-      }
-      .panel-warning {
-        border-color: #F39C12;
-      }
-      .panel-primary {
-        border-color: #2C3E50;
-      }
       .panel-heading {
         padding: 10px 15px;
         border-bottom: 1px solid transparent;
         border-top-right-radius: 3px;
         border-top-left-radius: 3px;
-      }
-      .panel-danger>.panel-heading {
         color: #FFF;
-        background-color: #E74C3C;
-        border-color: #E74C3C;
-      }
-      .panel-warning>.panel-heading {
-        color: #FFF;
-        background-color: #F39C12;
-        border-color: #F39C12;
-      }
-      .panel-primary>.panel-heading {
-        color: #FFF;
-        background-color: #2C3E50;
-        border-color: #2C3E50;
       }
       .panel-body {
         padding: 15px;
@@ -122,6 +99,17 @@
         border-bottom-left-radius: 3px;
         padding: 10px 15px;
       }
+      .panel-success { border-color: #18BC9C; }
+      .panel-danger  { border-color: #E74C3C; }
+      .panel-warning { border-color: #F39C12; }
+      .panel-primary { border-color: #2C3E50; }
+      .panel-success>.panel-heading { background-color: #18BC9C; border-color: #18BC9C; }
+      .panel-danger>.panel-heading  { background-color: #E74C3C; border-color: #E74C3C; }
+      .panel-warning>.panel-heading { background-color: #F39C12; border-color: #F39C12; }
+      .panel-primary>.panel-heading { background-color: #2C3E50; border-color: #2C3E50; }
+      .hide {
+        display: none;
+      }
       .text-capitalize {
         text-transform: capitalize;
       }
@@ -203,8 +191,25 @@
       .btn-primary .badge {
         color: #2C3E50;
       }
+      .glyphicon {
+        display: inline-block;
+        width: 20px;
+        height: 20px;
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: contain;
+        vertical-align: top;
+      }
+      .glyphicon-ok {
+        background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMSAtNiAzMiAzMiI+PHBhdGggZmlsbD0iIzE4QkM5QyIgZD0iTS43NzMgMTMuNDkzbDExLjE3MyAxMS4yTDMzLjc1OSAyLjgyNmwtNS42NTMtNS42NTNMMTEuOTE5IDEzLjM2IDYuNDI2IDcuODR6Ii8+PC9zdmc+');
+      }
+      .glyphicon-remove {
+        background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAtNiAzMiAzMiI+PHBhdGggZmlsbD0iI0U3NEMzQyIgZD0iTTIuODI3IDE3LjEybDcuNTItNy41Mi03LjUyLTcuNTJMOC40OC0zLjU3MyAxNiAzLjk0N2w3LjUyLTcuNTIgNS42NTMgNS42NTMtNy41MiA3LjUyIDcuNTIgNy41Mi01LjY1MyA1LjY1My03LjUyLTcuNTItNy41MiA3LjUyeiIvPjwvc3ZnPg==');
+      }
+      .glyphicon-ban-circle {
+        background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAtNiAzMiAzMiI+PHBhdGggZmlsbD0iI0YzOUMxMiIgZD0iTS4xMDcgOS42cTAtNC4zMiAyLjEzMy03Ljk3M1Q4LjAyNy00LjE2IDE2LTYuMjkzdDcuOTczIDIuMTMzIDUuNzg3IDUuNzg3VDMxLjg5MyA5LjZ0LTIuMTMzIDcuOTczLTUuNzg3IDUuNzg3VDE2IDI1LjQ5MyA4LjAyNyAyMy4zNiAyLjI0IDE3LjU3My4xMDcgOS42em00Ljg1MyAwcTAgMy4wNjcgMS42NTMgNS43MzNMMjEuNzYuMjEzUTE5LjA5My0xLjQ0IDE2LTEuNDRxLTQuNTYgMC03LjggMy4yNFQ0Ljk2IDkuNnptNS40NjcgOS40NjdRMTMuMDE0IDIwLjY0IDE2IDIwLjY0cTQuNTYgMCA3LjgtMy4yNHQzLjI0LTcuOHEwLTIuOTg3LTEuNTczLTUuNTczeiIvPjwvc3ZnPg==');
+      }
     </style>
-    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
   </head>
   <body>
     <div class="container" role="main">

diff --git a/_scripts/app.js b/_scripts/app.js
@@ -420,10 +420,49 @@ function runApp () {
                         '      <div class="row">' + results + '</div>\n' +
                         '    </div>\n' +
                         '    <script>\n' +
-                        '        $(".btn.btn-sm").click(function () { $(this).toggleClass("disabled"); });\n' +
-                        '        $(".btn.btn-sm.btn-danger").click(function () { $(".panel-danger").toggle(); });\n' +
-                        '        $(".btn.btn-sm.btn-warning").click(function () { $(".panel-warning").toggle(); });\n' +
-                        '        $(".btn.btn-sm.btn-primary").click(function () { $(".panel-primary").toggle(); });\n' +
+                        '      var errorButton = document.querySelectorAll(\'.btn-danger\')[0];\n' +
+                        '      var warningButton = document.querySelectorAll(\'.btn-warning\')[0];\n' +
+                        '      var noticeButton = document.querySelectorAll(\'.btn-primary\')[0];\n' +
+                        '      var allErrors = document.querySelectorAll(\'.panel-danger\');\n' +
+                        '      var allWarnings = document.querySelectorAll(\'.panel-warning\');\n' +
+                        '      var allNotices = document.querySelectorAll(\'.panel-primary\');\n\n' +
+                        '      function hideAll (arr) {\n' +
+                        '        for (var i = 0; i < arr.length; i++) {\n' +
+                        '          arr[i].classList.add(\'hide\');\n' +
+                        '        }\n' +
+                        '      }\n\n' +
+                        '      function showAll (arr) {\n' +
+                        '        for (var i = 0; i < arr.length; i++) {\n' +
+                        '          arr[i].classList.remove(\'hide\');\n' +
+                        '        }\n' +
+                        '      }\n\n' +
+                        '      errorButton.addEventListener(\'click\', function () {\n' +
+                        '        if (this.classList.contains(\'disabled\')) {\n' +
+                        '          this.classList.remove(\'disabled\');\n' +
+                        '          showAll(allErrors);\n' +
+                        '        } else {\n' +
+                        '          this.classList.add(\'disabled\');\n' +
+                        '          hideAll(allErrors);\n' +
+                        '        }\n' +
+                        '      });\n' +
+                        '      warningButton.addEventListener(\'click\', function () {\n' +
+                        '        if (this.classList.contains(\'disabled\')) {\n' +
+                        '          this.classList.remove(\'disabled\');\n' +
+                        '          showAll(allWarnings);\n' +
+                        '        } else {\n' +
+                        '          this.classList.add(\'disabled\');\n' +
+                        '          hideAll(allWarnings);\n' +
+                        '        }\n' +
+                        '      });\n' +
+                        '      noticeButton.addEventListener(\'click\', function () {\n' +
+                        '        if (this.classList.contains(\'disabled\')) {\n' +
+                        '          this.classList.remove(\'disabled\');\n' +
+                        '          showAll(allNotices);\n' +
+                        '        } else {\n' +
+                        '          this.classList.add(\'disabled\');\n' +
+                        '          hideAll(allNotices);\n' +
+                        '        }\n' +
+                        '      });\n' +
                         '    </script>\n' +
                         '  </body>\n' +
                         '</html>';

diff --git a/_scripts/imgalts.js b/_scripts/imgalts.js
@@ -1,4 +1,4 @@
-// Image Alts Script v4
+// Image Alts Script v4.0.1
 
 console.clear();
 
@@ -119,7 +119,7 @@ if (imgLen < 1) {
     console.clear();
     var output =
         '<div class="row">\r\n' +
-        '  <div class="panel panel-primary">\r\n' +
+        '  <div class="panel panel-success">\r\n' +
         '    <div class="panel-heading">Image Accessibility</div>\r\n' +
         '    <div class="panel-body">\r\n' +
         '      <p><i class="glyphicon ' + altIcon + '"></i> <strong>' + altPercent + '%</strong> of images on the page had descriptive ALT text. <strong>(' + altLen + '/' + imgLen + ')</strong></p>\r\n' +

diff --git a/_scripts/imgalts.min.js b/_scripts/imgalts.min.js