function Gauge(el) { var element, // Containing element for the info component data, // `.gauge__data` element needle, // `.gauge__needle` element value = 0.0, // Current gauge value from 0 to 1 prop, // Style for transform valueLabel; // `.gauge__label--spacer` element var setElement = function(el) { // Keep a reference to the various elements and sub-elements element = el; data = element.querySelector('.gauge__data'); //needle = element.querySelector('.gauge__needle'); valueLabel = element.querySelector('.gauge__label--spacer'); }; var setValue = function(x, max, unit) { percentage = x * 100 / max; value = percentage / 100; var turns = -0.5 + (value * 0.5); data.style[prop] = 'rotate(' + turns + 'turn)'; //needle.style[prop] = 'rotate(' + turns + 'turn)'; valueLabel.textContent = x + unit; }; function exports() { }; exports.element = function(el) { if (!arguments.length) { return element; } setElement(el); return this; }; exports.value = function(x, max=100, unit='%') { if (!arguments.length) { return value; } setValue(x, max, unit); return this; }; var body = document.getElementsByTagName('body')[0]; ['webkitTransform', 'mozTransform', 'msTransform', 'oTransform', 'transform']. forEach(function(p) { if (typeof body.style[p] !== 'undefined') { prop = p; } } ); if (arguments.length) { setElement(el); } return exports; };