diff --git a/src/index.html b/src/index.html
index 54aa1bd..73e6051 100644
--- a/src/index.html
+++ b/src/index.html
@@ -16,6 +16,10 @@
+
+
diff --git a/src/js/parser/javascript/base.js b/src/js/parser/javascript/base.js
index 04337b6..9b31d0a 100644
--- a/src/js/parser/javascript/base.js
+++ b/src/js/parser/javascript/base.js
@@ -1,6 +1,9 @@
import _ from 'lodash';
import Q from 'q';
+var renderCounter = 0,
+ maxCounter = 0;
+
export default {
setContainer(container) {
this.container = container;
@@ -85,17 +88,40 @@ export default {
console.log(box, anchorLine.node);
},
+ startRender() {
+ renderCounter++;
+ },
+
+ doneRender() {
+ if (maxCounter === 0) {
+ maxCounter = renderCounter;
+ }
+
+ renderCounter--;
+ document.body.dispatchEvent(new CustomEvent('updateStatus', {
+ detail: {
+ percentage: (maxCounter - renderCounter) / maxCounter
+ }
+ }));
+
+ if (renderCounter === 0) {
+ maxCounter = 0;
+ }
+ },
+
render(container) {
if (container) {
this.setContainer(container);
}
+ this.startRender();
return this._render()
.then((() => {
if (this.anchorDebug) {
this.renderAnchor();
}
}).bind(this))
+ .then(this.doneRender.bind(this))
.then(_.constant(this));
},
diff --git a/src/js/regexper.js b/src/js/regexper.js
index bb40e25..03af490 100644
--- a/src/js/regexper.js
+++ b/src/js/regexper.js
@@ -10,6 +10,7 @@ export default class Regexper {
this.error = root.querySelector('#error');
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.svg = root.querySelector('#regexp-render svg');
this.padding = 10;
@@ -46,12 +47,18 @@ export default class Regexper {
}
}
+ updatePercentage(event) {
+ this.percentage.style.width = event.detail.percentage * 100 + '%';
+ }
+
bindListeners() {
this.field.addEventListener('keypress', this.keypressListener.bind(this));
this.form.addEventListener('submit', this.submitListener.bind(this));
window.addEventListener('hashchange', this.hashchangeListener.bind(this));
+
+ this.root.addEventListener('updateStatus', this.updatePercentage.bind(this));
}
setState(state) {
diff --git a/src/sass/_base.scss b/src/sass/_base.scss
index 211e856..21e3c3c 100644
--- a/src/sass/_base.scss
+++ b/src/sass/_base.scss
@@ -1,5 +1,6 @@
$green: #bada55;
-$dark-green: #89a20c;
+$dark-green: shade($green, 25%);
+$light-green: tint($green, 25%);
$gray: #6b6659;
$tan: #cbcbba;
$red: #b3151a;
diff --git a/src/sass/main.scss b/src/sass/main.scss
index 33161c0..7475dea 100644
--- a/src/sass/main.scss
+++ b/src/sass/main.scss
@@ -4,6 +4,7 @@
@import 'compass/typography/lists/inline-block-list';
@import 'compass/typography/vertical_rhythm';
@import 'compass/css3/box-shadow';
+@import 'compass/css3/border-radius';
@import 'compass/css3/user-interface';
@import 'compass/css3/animation';
@import 'compass/css3/transform';
@@ -163,7 +164,7 @@ header {
display: inline-block;
position: absolute;
border: 3px solid $green;
- border-radius: 50%;
+ @include border-radius(50%);
@include animation(bounce 2.0s infinite ease-in-out);
}
@@ -192,6 +193,32 @@ header {
}
}
+#progress {
+ width: rhythm(20);
+ height: rhythm(1/2);
+ border: 1px solid $dark-green;
+ overflow: hidden;
+ margin: 0 auto;
+ margin-top: rhythm(1);
+
+ div {
+ background: $green;
+ @include background-image(linear-gradient(
+ -45deg,
+ $green 25%,
+ $light-green 25%,
+ $light-green 50%,
+ $green 50%,
+ $green 75%,
+ $light-green 75%,
+ $light-green 100%
+ ));
+ background-size: rhythm(2) rhythm(2);
+ background-repeat: repeat-x;
+ height: 100%;
+ }
+}
+
#error {
background: $red;
color: $white;