/**
* Construct a new Slider control.
*
* @class
* @param {Home} home the home that this control belongs to.
* @param {String} id the id of this control. Updates will be POSTed to
* <code>home.control_endpoint/id</code>
* @param {Object} options options for this control:
* <ul>
* <li>
* <code>name</code> - String, required - friendly name for this control
* </li>
* <li>
* <code>min</code> - float, required - minimum value.
* </li>
* <li>
* <code>max</code> - float, required - maximum value.
* </li>
* <li>
* <code>value</code> - float, required - initial value.
* </li>
* <li>
* <code>step</code> - float, required - amount of one slider step.
* </li>
* </ul>
*/
function SliderControl(home, id, options) {
"use strict";
this.home = home;
this.id = id;
this.options = options;
var template_source = $("#control-slider-template").html();
this.template = Handlebars.compile(template_source);
}
SliderControl.prototype.render = function() {
"use strict";
this.html = $(this.template(this.options));
this.input = this.html.find("input");
var thiz = this;
var value = parseFloat(this.input.val());
// Instead of listening for the change event, which triggers at each and every
// step on Chrome / WebKit / Blink and would spam the server, set an interval
// that checks every half a second if the value changed.
setInterval(function() {
if (parseFloat(thiz.input.val()) !== value) {
value = parseFloat(thiz.input.val());
$.post(thiz.home.options.control_endpoint + thiz.id, {"value": value});
}
}, 500);
return this.html;
};
Home.register_control("slider", SliderControl);