add pending class while waiting for a state change
diff --git a/web/ons-demo/css/skin.default.css b/web/ons-demo/css/skin.default.css
index 753fff3..13f3e40 100644
--- a/web/ons-demo/css/skin.default.css
+++ b/web/ons-demo/css/skin.default.css
@@ -268,3 +268,22 @@
fill: #6949D7;
background-color: #6949D7;
}
+
+
+@-webkit-keyframes pending {
+ from {
+ opacity: 1.0;
+ }
+ to {
+ opacity: 0.5;
+ }
+}
+
+.pending {
+ -webkit-animation-name: pending;
+ -webkit-animation-duration: .5s;
+ -webkit-animation-direction: alternate;
+ -webkit-animation-timing-function: ease-in-out;
+ -webkit-animation-iteration-count: 10;
+}
+
diff --git a/web/ons-demo/js/app.js b/web/ons-demo/js/app.js
index 92dd37e..3d21b01 100644
--- a/web/ons-demo/js/app.js
+++ b/web/ons-demo/js/app.js
@@ -394,11 +394,13 @@
if (data.state == 'ACTIVE') {
var prompt = 'Deactivate ' + data.dpid + '?';
if (confirm(prompt)) {
+ d3.select(document.getElementById(data.dpid)).select('circle').classed('pending', true);
switchDown(data);
}
} else {
var prompt = 'Activate ' + data.dpid + '?';
if (confirm(prompt)) {
+ d3.select(document.getElementById(data.dpid)).select('circle').classed('pending', true);
switchUp(data);
}
}
@@ -464,11 +466,20 @@
.data(data, function (data) {
return data.dpid;
});
- nodes.select('circle').attr('class', function (data, i) {
+ nodes.select('circle')
+ .each(function (data) {
+ // if there's a pending state changed and then the state changes, clear the pending class
+ var circle = d3.select(this);
+ if (data.state === 'ACTIVE' && circle.classed('inactive') ||
+ data.state === 'INACTIVE' && circle.classed('active')) {
+ circle.classed('pending', false);
+ }
+ })
+ .attr('class', function (data) {
if (data.state === 'ACTIVE' && data.controller) {
- return data.className + ' ' + controllerColorMap[data.controller];
+ return data.className + ' active ' + controllerColorMap[data.controller];
} else {
- return data.className + ' ' + 'colorInactive';
+ return data.className + ' inactive ' + 'colorInactive';
}
});
}