/** * Slider elements for Lens LAF (inputs with "range" type). * * @name Lens.LAF.Sliders * @namespace */ define(["lib/jquery", "lib/underscore", "common/util/dom_utils"], function($, _, DOMUtils) { "use strict"; var enabled = true; var Sliders = /** @lends Lens.LAF.Sliders */ { /** * Enables slider styling and interaction */ enable: function() { DOMUtils.addStylesheet("LAF/widgets/sliders.less"); enabled = true; }, /** * Disabled slider styling and interaction */ disable: function() { DOMUtils.removeStylesheet("LAF/widgets/sliders.less"); enabled = false; }, /** * Returns true iff this LAF module is enabled * @return {Boolean} * @memberOf Lens.LAF.Sliders */ enabled: function() { return enabled; } }; $(function(){ // bind to touchstart to add behavior to sliders document.addEventListener("lens:touchstart", function(evt) { if(!enabled) { return; } _.each(evt.changedTouches, function(touch) { if($(touch.target).is("input[type='range']")) { var slider = $(touch.target); var sliderLeft = slider.offset().left - $(window).scrollLeft(); var sliderWidth = slider.width(); var sliderMin = Number(slider.attr("min") || 0); var sliderMax = Number(slider.attr("max") || 100); var sliderRange = sliderMax - sliderMin; touch.moved(function() { // calculate new slider value var ratio = (touch.pageX - sliderLeft) / sliderWidth; var val = (sliderRange * ratio) + sliderMin; // update the slider slider.val(val); DOMUtils.fire("change", touch.target); }); } }); }); }); Sliders.enable(); Lens._addMember(Sliders, "Sliders", Lens.LAF); return Sliders; });