/** * Buttons elements for Lens LAF. * * Adds the lens-touch-down class to any element that is being touched. * * @name Lens.LAF.Buttons * @namespace */ define([ "lib/jquery", "lib/underscore", "common/util/dom_utils"], function( $, _, DOMUtils) { "use strict"; var enabled = true; var Buttons = /** @lends Lens.LAF.Buttons */ { /** * Enables button styling and interaction */ enable: function() { DOMUtils.addStylesheet("LAF/widgets/buttons.less"); enabled = true; }, /** * Disabled button styling and interaction */ disable: function() { DOMUtils.removeStylesheet("LAF/widgets/buttons.less"); enabled = false; }, /** * Returns true if this LAF module is enabled * @return Boolean * @memberOf Lens.LAF.Buttons */ enabled: function() { return enabled; } }; $(function(){ // bind to touchstart to add .lens-touch-down document.body.addEventListener("lens:touchstart", function(evt) { if(!enabled) { return; } _.each(evt.changedTouches, function(touch) { _.each(DOMUtils.elementsAt(touch.pageX, touch.pageY), function(el) { if(el.nodeType === 1) { // add lens-touch-down and increment touch down count $(el).addClass("lens-touch-down"); $(el).data("lens-touch-count", ($(el).data("lens-touch-count") || 0) + 1); // when the touch ends, decrement touch down count touch.ended(function() { var newCount = $(el).data("lens-touch-count") - 1; $(el).data("lens-touch-count", newCount); // if there are no more touches on the element, // remove lens-touch-down if(newCount <= 0) { $(el).removeClass("lens-touch-down"); } }); } }); }); }); // also bind to mouse events var mousedownElements; document.body.addEventListener("mousedown", function(evt) { mousedownElements = DOMUtils.elementsAt(evt.clientX, evt.clientY); _.each(mousedownElements, function(el) { $(el).addClass("lens-touch-down"); }); }); document.body.addEventListener("mouseup", function() { _.each(mousedownElements, function(el) { $(el).removeClass("lens-touch-down"); }); }); }); Buttons.enable(); Lens._addMember(Buttons, "Buttons", Lens.LAF); return Buttons; });