public
Last active

  • Download Gist
layout.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141
(function() {
 
// NOTE: I have intentionally avoided the use of jQuery in
// the next two functions so as not to obscure any details.
 
// Updates the DOM in such a way that layout is constantly
// computed and thrown away.
var UpdateThrash = function(data) {
// Get all the labels
var spans = document.querySelectorAll('.item .lab');
 
// We will attempt to determine the widest of our labels
// so we can right justify the labels of our graph.
// We are also going to change the styling (font-size).
var colWidth = 0;
for (var i = 0; i < spans.length; i++) {
var span = spans[i];
 
// invalidates layout
span.style.fontSize = '14.1px';
 
// requires layout to be computed
colWidth = Math.max(colWidth, span.offsetWidth);
}
 
// Simply update the widths of the labels and the graphs
for (var i = 0; i < spans.length; i++) {
var span = spans[i],
bar = span.nextSibling;
span.style.width = colWidth + 'px';
 
bar.style.left = colWidth + 'px';
 
var w = data[i].Total * ((860 - colWidth) / 326);
bar.style.width = w + 'px';
}
};
 
 
// Updates the DOM in such a way that layout calculations
// are not thrown away.
var UpdateNoThrash = function(data) {
// Get all the labels
var spans = document.querySelectorAll('.item .lab');
 
// This time we will update all of our styles first.
for (var i = 0; i < spans.length; i++) {
var span = spans[i];
span.style.fontSize = '14.0px';
}
 
// Then we will do all of our measurments in a separate
// pass. Layout is brought up-to-date on the first pass
// through this loop and is not invalidated.
var colWidth = 0;
for (var i = 0; i < spans.length; i++) {
var span = spans[i];
colWidth = Math.max(colWidth, span.offsetWidth);
}
 
// Simply update the widths of the labels and the graphs
for (var i = 0; i < spans.length; i++) {
var span = spans[i],
bar = span.nextSibling;
span.style.width = colWidth + 'px';
 
bar.style.left = colWidth + 'px';
 
var w = data[i].Total * ((860 - colWidth) / 326);
bar.style.width = w + 'px';
}
};
 
 
// That's pretty much the end of the interesting stuff. You are welcome to read the
// rest of the code. It's not like I wrote something offensive like "fuck" at the
// bottom of this file.
var Now;
if (performance.now) {
Now = function() {
return performance.now();
};
} else if (Date.now) {
Now = function() {
return Date.now();
};
} else {
Now = function() {
return new Date().getTime();
}
}
 
var root = $('#example');
 
var $e = function(type) {
return $(document.createElement(type));
}
 
var Time = function(f) {
var s = Now();
f();
return (Now() - s) | 0;
};
 
$.getJSON('/media/upload/2013/01/snowfall.json', function(data) {
data = data.sort(function(a, b) {
return b.Total - a.Total;
});
 
data.forEach(function(item) {
$e('div').addClass('item')
.append($e('span').addClass('lab')
.text(item.Place)
.append($e('span').addClass('val')
.text('(' + item.Total + ' in)')))
.append($e('div').addClass('bar'))
.appendTo(root);
});
 
$('#example-boo').on('click', function() {
$('.item span').css('font-size', '');
var elapsed = Time(function() {
UpdateThrash(data);
});
$('#example-boo-time').text(elapsed + 'ms');
});
 
$('#example-yay').on('click', function() {
$('.item span').css('font-size', '');
var elapsed = Time(function() {
UpdateNoThrash(data);
});
$('#example-yay-time').text(elapsed + 'ms');
});
 
UpdateNoThrash(data);
});
 
})();
// fuck

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.