alex/restaurant-search
1
Fork 0
Code Releases Activity

Adding busy state

Browse Source
This commit is contained in:
Alex Yatskov 2014-11-05 20:14:15 +09:00
parent 7de3deb196
commit 4b17ec2b4c
2 changed files with 36 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/scripts/application.js
View File

@ -41,9 +41,11 @@
maxResults: ctx.maxResults
};
ctx.grapher.setBusy(true);
$.getJSON('/search', query, function(results) {
saveSnapshot(results);
outputSnapshot(results);
ctx.grapher.setBusy(false);
});
}

53
client/scripts/grapher.js
View File

@ -90,33 +90,32 @@
var _tickSize = 5;
var _width = 125;
var _busy = false;
var _canvas = params.canvas;
var _data = params.data;
var _elements = {};
var _index = params.index;
var _name = params.name;
var _onValueChanged = params.onValueChanged;
var _range = params.range;
var _scale = params.scale;
var _steps = params.steps;
var _elements = {};
function createShapes() {
_elements.gradient = _canvas.gradient(decimateHints());
// backdrop
_elements.backdrop = _canvas.rect(
_tickSize, 0, _width - (_densitySize + _tickSize), _height - _panelSize
).attr({'cursor': 'crosshair', 'stroke': _borderColor, 'fill': _backdropColor}).click(clicked);
).attr({cursor: 'crosshair', stroke: _borderColor, fill: _backdropColor}).click(clicked);
// density
_elements.density = _canvas.rect(
_width - _densitySize, 0, _densitySize, _height - _panelSize
).attr({'stroke': _borderColor, 'fill': _elements.gradient});
).attr({stroke: _borderColor});
// panel
_elements.panel = _canvas.rect( _tickSize,
_height - _panelSize, _width - _tickSize, _panelSize
).attr({'fill': _panelColor});
).attr({fill: _panelColor});
// label
_elements.label = _canvas.text(
@ -127,13 +126,13 @@
var range = computeIndicatorRange();
_elements.indicator = _canvas.rect(
_tickSize, range.start, _width - (_densitySize + _tickSize), (range.end - range.start)
).attr({'cursor': 'crosshair', 'fill': computeIndicatorColor()}).click(clicked);
).attr({cursor: 'crosshair', fill: computeIndicatorColor()}).click(clicked);
// tick
if (_range.contains(0.0)) {
var origin = valueToIndicator(0.0);
_elements.tick = _canvas.line(0, origin, _width - _densitySize, origin
).attr({'stroke': _tickColor});
).attr({stroke: _tickColor});
}
_elements.group = _canvas.group(
@ -145,20 +144,24 @@
_elements.label
);
_elements.group.transform(Snap.format('t{x},{y}', {x: _index * (_width + _padding), y: 0}));
_elements.group.transform(
Snap.format('t{x},{y}', {x: _index * (_width + _padding), y: 0})
);
updateShapes();
}
function updateShapes() {
// update gradient
_elements.gradient = _canvas.gradient(decimateHints());
_elements.density.attr('fill', _elements.gradient);
var gradient = _canvas.gradient(decimateHints());
_elements.density.attr({
fill: gradient
});
// update indicator
var range = computeIndicatorRange();
_elements.indicator.attr({
'y': range.start,
'height': range.end - range.start,
'fill': computeIndicatorColor()
y: range.start,
height: range.end - range.start,
fill: computeIndicatorColor()
});
}
@ -209,7 +212,7 @@
return hintGroups;
}
function setClampedValue(value) {
function updateValue(value) {
_data.value = _range.clamp(value);
if (_onValueChanged) {
@ -250,8 +253,10 @@
}
function clicked(event, x, y) {
var rect = _canvas.node.getBoundingClientRect();
setClampedValue(indicatorToValue(y - rect.top));
if (!_busy) {
var rect = _canvas.node.getBoundingClientRect();
updateValue(indicatorToValue(y - rect.top));
}
}
this.update = function(data, scale) {
@ -260,6 +265,10 @@
updateShapes();
};
this.setBusy = function(busy) {
_busy = busy;
};
createShapes();
}
@ -345,5 +354,11 @@
this.setColumns(_data);
}
};
this.setBusy = function(busy) {
for (var name in _columns) {
_columns[name].setBusy(busy);
}
};
};
}(window.grapher = window.grapher || {}));