Adding progress bars to the inline diagrams in the documentation

spec/regexper_spec.js

@@ -14,7 +14,7 @@ describe('regexper.js', function() {
       '<ul id="warnings"></ul>',
       '<div><a href="#" data-glyph="link-intact"></a></div>',
       '<div><a href="#" data-glyph="data-transfer-download"></a></div>',
-      '<div id="progress"><div></div></div>',
+      '<div class="progress"><div></div></div>',
       '<div id="regexp-render"></div>',
       '<script type="text/html" id="svg-base"><svg></svg></script>'
     ].join('');

src/documentation.html

@@ -13,7 +13,7 @@
 
       <p>The simplest pieces of these diagrams to understand are the parts that match some specific bit of text without an options. They are: Literals, Escape sequences, and "Any charater".</p>
 
-      <div>
+      <div class="section">
         <h3>Literals</h3>
 
         <figure class="shift-left" data-expr="A literal example"></figure>
@@ -21,7 +21,7 @@
         <p>Literals match an exact string of text. They're displayed in a light blue box, and the contents are quoted (to make it easier to see any leading or trailing whitespace).</p>
       </div>
 
-      <div>
+      <div class="section">
         <h3>Escape sequences</h3>
 
         <figure class="shift-left" data-expr="\w\x7f\u00bb\1\0"></figure>
@@ -29,7 +29,7 @@
         <p>Escape sequences are displayed in a green box and contain a description of the type of character(s) they will match.</p>
       </div>
 
-      <div>
+      <div class="section">
         <h3>"Any character"</h3>
 
         <figure class="shift-left" data-expr="."></figure>
@@ -67,7 +67,7 @@
 
       <p>Quantifiers indicate if part of the expression should be repeated or optional. They are displayed similarly to Alternation, by the path through the diagram branching (and possibly looping back on itself). Unless indicated by an arrow on the path, the preferred path is to continue going straight.</p>
 
-      <div>
+      <div class="section">
         <h3>Zero-or-more</h3>
 
         <figure class="shift-left" data-expr="(?:greedy)*">
@@ -81,7 +81,7 @@
         <p>The zero-or-more quantifier matches any number of repetitions of the pattern.</p>
       </div>
 
-      <div>
+      <div class="section">
         <h3>Required</h3>
 
         <figure class="shift-left" data-expr="(?:greedy)+">
@@ -95,7 +95,7 @@
         <p>The required quantifier matches one or more repetitions of the pattern. Note that it does not have the path that allows the pattern to be skipped like the zero-or-more quantifier.</p>
       </div>
 
-      <div>
+      <div class="section">
         <h3>Optional</h3>
 
         <figure class="shift-left" data-expr="(?:greedy)?">
@@ -109,7 +109,7 @@
         <p>The optional quantifier matches the pattern at most once. Note that it does not have the path that allows the pattern to loop back on itself like the zero-or-more or required quantifiers.</p>
       </div>
 
-      <div>
+      <div class="section">
         <h3>Range</h3>
 
         <figure class="shift-left" data-expr="(?:greedy){5,10}">

src/index.html

@@ -17,7 +17,7 @@
       <div></div>
     </div>
 
-    <div id="progress">
+    <div class="progress">
       <div style="width: 0%;"></div>
     </div>
   </div>

src/js/main.js

@@ -29,7 +29,7 @@ window._gaq = (typeof _gaq !== 'undefined') ? _gaq : {
 
   _.each(document.querySelectorAll('figure[data-expr]'), element => {
     var parser = new Parser(),
-        svg;
+        svg, percentage;
 
     element.className = _.compact([element.className, 'loading']).join(' ');
     element.innerHTML = [
@@ -38,17 +38,23 @@ window._gaq = (typeof _gaq !== 'undefined') ? _gaq : {
         '<div></div>',
         '<div></div>',
       '</div>',
+      '<div class="progress"><div style="width: 0;"></div></div>',
       element.innerHTML
     ].join('');
 
     svg = element.querySelector('.svg');
+    percentage = element.querySelector('.progress div');
 
     setTimeout(() => {
       parser.parse(element.getAttribute('data-expr'))
         .invoke('render', svg, document.querySelector('#svg-base').innerHTML)
+        .then(null, null, progress => {
+          percentage.style.width = progress * 100 + '%';
+        })
         .finally(() => {
           element.className = _.without(element.className.split(' '), 'loading').join(' ');
           element.removeChild(element.querySelector('.spinner'));
+          element.removeChild(element.querySelector('.progress'));
         })
         .done();
     }, 1);

src/js/regexper.js

@@ -12,7 +12,7 @@ export default class Regexper {
     this.warnings = root.querySelector('#warnings');
     this.permalink = root.querySelector('a[data-glyph="link-intact"]');
     this.download = root.querySelector('a[data-glyph="data-transfer-download"]');
-    this.percentage = root.querySelector('#progress div');
+    this.percentage = root.querySelector('.progress div');
     this.svgContainer = root.querySelector('#regexp-render');
     this.svgBase = this.root.querySelector('#svg-base').innerHTML;
   }

src/sass/main.scss

@@ -98,7 +98,7 @@ header {
 }
 
 .spinner {
-  margin: 0 auto;
+  margin: 10px auto;
   width: rhythm(2);
   height: rhythm(2);
   position: relative;
@@ -228,7 +228,7 @@ header {
       margin-bottom: rhythm(1);
     }
 
-    section, div, p {
+    section, div.section, p {
       margin: rhythm(1) 0;
     }
 
@@ -339,13 +339,12 @@ header {
   }
 }
 
-#progress {
+.progress {
-  width: rhythm(20);
+  width: 50%;
   height: rhythm(1/2);
   border: 1px solid $dark-green;
   overflow: hidden;
-  margin: 0 auto;
+  margin: rhythm(1) auto;
-  margin-top: rhythm(1);
 
   div {
     background: $green;