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;