Adding progress indicator

This commit is contained in:
Jeff Avallone 2014-12-15 14:20:04 -05:00
parent f4ea4d6da6
commit dea4011530
5 changed files with 67 additions and 2 deletions

View File

@ -16,6 +16,10 @@
<div></div> <div></div>
<div></div> <div></div>
</div> </div>
<div id="progress">
<div style="width: 0%;"></div>
</div>
</div> </div>
<div id="error"></div> <div id="error"></div>

View File

@ -1,6 +1,9 @@
import _ from 'lodash'; import _ from 'lodash';
import Q from 'q'; import Q from 'q';
var renderCounter = 0,
maxCounter = 0;
export default { export default {
setContainer(container) { setContainer(container) {
this.container = container; this.container = container;
@ -85,17 +88,40 @@ export default {
console.log(box, anchorLine.node); 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) { render(container) {
if (container) { if (container) {
this.setContainer(container); this.setContainer(container);
} }
this.startRender();
return this._render() return this._render()
.then((() => { .then((() => {
if (this.anchorDebug) { if (this.anchorDebug) {
this.renderAnchor(); this.renderAnchor();
} }
}).bind(this)) }).bind(this))
.then(this.doneRender.bind(this))
.then(_.constant(this)); .then(_.constant(this));
}, },

View File

@ -10,6 +10,7 @@ export default class Regexper {
this.error = root.querySelector('#error'); this.error = root.querySelector('#error');
this.permalink = root.querySelector('a[data-glyph="link-intact"]'); this.permalink = root.querySelector('a[data-glyph="link-intact"]');
this.download = root.querySelector('a[data-glyph="data-transfer-download"]'); this.download = root.querySelector('a[data-glyph="data-transfer-download"]');
this.percentage = root.querySelector('#progress div');
this.svg = root.querySelector('#regexp-render svg'); this.svg = root.querySelector('#regexp-render svg');
this.padding = 10; this.padding = 10;
@ -46,12 +47,18 @@ export default class Regexper {
} }
} }
updatePercentage(event) {
this.percentage.style.width = event.detail.percentage * 100 + '%';
}
bindListeners() { bindListeners() {
this.field.addEventListener('keypress', this.keypressListener.bind(this)); this.field.addEventListener('keypress', this.keypressListener.bind(this));
this.form.addEventListener('submit', this.submitListener.bind(this)); this.form.addEventListener('submit', this.submitListener.bind(this));
window.addEventListener('hashchange', this.hashchangeListener.bind(this)); window.addEventListener('hashchange', this.hashchangeListener.bind(this));
this.root.addEventListener('updateStatus', this.updatePercentage.bind(this));
} }
setState(state) { setState(state) {

View File

@ -1,5 +1,6 @@
$green: #bada55; $green: #bada55;
$dark-green: #89a20c; $dark-green: shade($green, 25%);
$light-green: tint($green, 25%);
$gray: #6b6659; $gray: #6b6659;
$tan: #cbcbba; $tan: #cbcbba;
$red: #b3151a; $red: #b3151a;

View File

@ -4,6 +4,7 @@
@import 'compass/typography/lists/inline-block-list'; @import 'compass/typography/lists/inline-block-list';
@import 'compass/typography/vertical_rhythm'; @import 'compass/typography/vertical_rhythm';
@import 'compass/css3/box-shadow'; @import 'compass/css3/box-shadow';
@import 'compass/css3/border-radius';
@import 'compass/css3/user-interface'; @import 'compass/css3/user-interface';
@import 'compass/css3/animation'; @import 'compass/css3/animation';
@import 'compass/css3/transform'; @import 'compass/css3/transform';
@ -163,7 +164,7 @@ header {
display: inline-block; display: inline-block;
position: absolute; position: absolute;
border: 3px solid $green; border: 3px solid $green;
border-radius: 50%; @include border-radius(50%);
@include animation(bounce 2.0s infinite ease-in-out); @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 { #error {
background: $red; background: $red;
color: $white; color: $white;