Permalink
Browse files

Adding support for HTML5 history when changing datasets.

  • Loading branch information...
1 parent 328f911 commit 63fcf7f8ba19105e729708d6ca75b0d636935ee8 @brycethornton brycethornton committed Jun 24, 2011
Showing with 89 additions and 7 deletions.
  1. +41 −5 js/app.js
  2. +48 −2 js/coffee/app.coffee
View
@@ -1,5 +1,5 @@
(function() {
- var BENFORD_VALUES, MAX_CHART_WIDTH_PERCENTAGE, adjustFooter, drawChart, getDataset, getMultiplierForDataset, getOrdersOfMagnitudeBetween, initChart, observeDatasetOptions, placeBenfordMarkers, populateDatasetOptions, zeroChart;
+ var BENFORD_VALUES, MAX_CHART_WIDTH_PERCENTAGE, adjustFooter, drawChart, getDataset, getDefaultLocation, getLocation, getMultiplierForDataset, getOrdersOfMagnitudeBetween, initChart, initialURL, observeDatasetOptions, placeBenfordMarkers, popped, populateDatasetOptions, watchForPopState, zeroChart;
BENFORD_VALUES = {
1: 30.1,
2: 17.6,
@@ -12,6 +12,8 @@
9: 4.6
};
MAX_CHART_WIDTH_PERCENTAGE = 81;
+ popped = 'state' in window.history;
+ initialURL = location.href;
$(document).ready(function() {
initChart();
adjustFooter();
@@ -43,21 +45,55 @@
};
populateDatasetOptions = function() {
return $.getJSON('/js/datasets/index.json', function(data) {
- var items;
+ var currentDataset, items;
items = [];
$.each(data, function(key, val) {
return items.push('<option value="' + key + '">' + val + '</option>');
});
$('#dataset-options').html(items.join(''));
- getDataset($('#dataset-options option:first').val());
- return observeDatasetOptions();
+ currentDataset = getLocation();
+ observeDatasetOptions();
+ watchForPopState();
+ $('#dataset-options').val(currentDataset);
+ return zeroChart(currentDataset);
});
};
observeDatasetOptions = function() {
return $('#dataset-options').change(function() {
- return zeroChart($(this).val());
+ var nextDataset;
+ nextDataset = $(this).val();
+ zeroChart(nextDataset);
+ if (window.history && window.history.pushState) {
+ return window.history.pushState({}, document.title, nextDataset);
+ }
});
};
+ watchForPopState = function() {
+ if (window.history && window.history.pushState) {
+ return $(window).bind('popstate', function(event) {
+ var dataset, initialPop;
+ initialPop = !popped && location.href === initialURL;
+ popped = true;
+ if (initialPop) {
+ return;
+ }
+ dataset = getLocation();
+ $('#dataset-options').val(dataset);
+ return zeroChart(dataset);
+ });
+ }
+ };
+ getLocation = function(href) {
+ var path;
+ path = location.href.substring(location.href.lastIndexOf("/") + 1);
+ if (path.length === 0) {
+ path = getDefaultLocation();
+ }
+ return path;
+ };
+ getDefaultLocation = function() {
+ return $('#dataset-options option:first').val();
+ };
zeroChart = function(nextDataset) {
$('table#stats td:nth-child(2)').fadeOut('fast');
$('#data-source').fadeOut('fast');
View
@@ -14,6 +14,11 @@ BENFORD_VALUES = {
MAX_CHART_WIDTH_PERCENTAGE = 81
+# Used to detect initial (useless) popstate.
+# If history.state exists, assume browser isn't going to fire initial popstate.
+popped = ('state' of window.history)
+initialURL = location.href
+
$(document).ready ->
initChart()
adjustFooter()
@@ -49,12 +54,53 @@ populateDatasetOptions = ->
$('#dataset-options').html(items.join(''))
- getDataset $('#dataset-options option:first').val()
+ currentDataset = getLocation()
+
observeDatasetOptions()
+ watchForPopState()
+
+ # Set the select menu to the correct value
+ $('#dataset-options').val(currentDataset)
+
+ # Draw the chart when the page first loads
+ zeroChart(currentDataset)
observeDatasetOptions = ->
$('#dataset-options').change ->
- zeroChart $(@).val()
+ nextDataset = $(@).val()
+
+ # Draw the chosen dataset when the select menu changes
+ zeroChart nextDataset
+
+ # Use pushState to allow the back button to work
+ if (window.history && window.history.pushState)
+ window.history.pushState({}, document.title, nextDataset)
+
+watchForPopState = ->
+ # Make sure this browser supports HTML5 history
+ if (window.history && window.history.pushState)
+ $(window).bind 'popstate', (event) ->
+ # Ignore inital popstate that some browsers fire on page load
+ initialPop = !popped && location.href == initialURL
+ popped = true
+ return if initialPop
+
+ dataset = getLocation()
+
+ # Set the select menu to the correct value
+ $('#dataset-options').val(dataset)
+
+ # Draw the chart
+ zeroChart dataset
+
+getLocation = (href) ->
+ path = location.href.substring(location.href.lastIndexOf("/")+1)
+ # Get the default if there is no dataset in the path
+ path = getDefaultLocation() if path.length == 0
+ return path
+
+getDefaultLocation = ->
+ return $('#dataset-options option:first').val()
zeroChart = (nextDataset) ->
$('table#stats td:nth-child(2)').fadeOut('fast')

0 comments on commit 63fcf7f

Please sign in to comment.