From d538d7b62a07885e0690dee98672e2c257a674fc Mon Sep 17 00:00:00 2001
From: Jeff Avallone <jeff.avallone@gmail.com>
Date: Mon, 29 Dec 2014 17:53:54 -0500
Subject: [PATCH] Adding progress bars to the inline diagrams in the
 documentation

---
 spec/regexper_spec.js  |  2 +-
 src/documentation.html | 14 +++++++-------
 src/index.html         |  2 +-
 src/js/main.js         |  8 +++++++-
 src/js/regexper.js     |  2 +-
 src/sass/main.scss     | 11 +++++------
 6 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/spec/regexper_spec.js b/spec/regexper_spec.js
index f1b540e..cafcfc1 100644
--- a/spec/regexper_spec.js
+++ b/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('');
diff --git a/src/documentation.html b/src/documentation.html
index 91d4568..3768217 100644
--- a/src/documentation.html
+++ b/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}">
diff --git a/src/index.html b/src/index.html
index be48e1e..2022254 100644
--- a/src/index.html
+++ b/src/index.html
@@ -17,7 +17,7 @@
       <div></div>
     </div>
 
-    <div id="progress">
+    <div class="progress">
       <div style="width: 0%;"></div>
     </div>
   </div>
diff --git a/src/js/main.js b/src/js/main.js
index a31e97f..5120c50 100644
--- a/src/js/main.js
+++ b/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);
diff --git a/src/js/regexper.js b/src/js/regexper.js
index 737283d..b1ab3ea 100644
--- a/src/js/regexper.js
+++ b/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;
   }
diff --git a/src/sass/main.scss b/src/sass/main.scss
index 7c83888..74d41f3 100644
--- a/src/sass/main.scss
+++ b/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 {
-  width: rhythm(20);
+.progress {
+  width: 50%;
   height: rhythm(1/2);
   border: 1px solid $dark-green;
   overflow: hidden;
-  margin: 0 auto;
-  margin-top: rhythm(1);
+  margin: rhythm(1) auto;
 
   div {
     background: $green;