61 lines
1.5 KiB
JavaScript
61 lines
1.5 KiB
JavaScript
|
|
|
|
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;
|
|
|
|
};
|
|
|
|
|
|
|