buttonclick.js 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206
  1. /* Copyright (c) 2006-2013 by OpenLayers Contributors (see authors.txt for
  2. * full list of contributors). Published under the 2-clause BSD license.
  3. * See license.txt in the OpenLayers distribution or repository for the
  4. * full text of the license. */
  5. /**
  6. * @requires OpenLayers/Events.js
  7. */
  8. /**
  9. * Class: OpenLayers.Events.buttonclick
  10. * Extension event type for handling buttons on top of a dom element. This
  11. * event type fires "buttonclick" on its <target> when a button was
  12. * clicked. Buttons are detected by the "olButton" class.
  13. *
  14. * This event type makes sure that button clicks do not interfere with other
  15. * events that are registered on the same <element>.
  16. *
  17. * Event types provided by this extension:
  18. * - *buttonclick* Triggered when a button is clicked. Listeners receive an
  19. * object with a *buttonElement* property referencing the dom element of
  20. * the clicked button, and an *buttonXY* property with the click position
  21. * relative to the button.
  22. */
  23. OpenLayers.Events.buttonclick = OpenLayers.Class({
  24. /**
  25. * Property: target
  26. * {<OpenLayers.Events>} The events instance that the buttonclick event will
  27. * be triggered on.
  28. */
  29. target: null,
  30. /**
  31. * Property: events
  32. * {Array} Events to observe and conditionally stop from propagating when
  33. * an element with the olButton class (or its olAlphaImg child) is
  34. * clicked.
  35. */
  36. events: [
  37. 'mousedown', 'mouseup', 'click', 'dblclick',
  38. 'touchstart', 'touchmove', 'touchend', 'keydown'
  39. ],
  40. /**
  41. * Property: startRegEx
  42. * {RegExp} Regular expression to test Event.type for events that start
  43. * a buttonclick sequence.
  44. */
  45. startRegEx: /^mousedown|touchstart$/,
  46. /**
  47. * Property: cancelRegEx
  48. * {RegExp} Regular expression to test Event.type for events that cancel
  49. * a buttonclick sequence.
  50. */
  51. cancelRegEx: /^touchmove$/,
  52. /**
  53. * Property: completeRegEx
  54. * {RegExp} Regular expression to test Event.type for events that complete
  55. * a buttonclick sequence.
  56. */
  57. completeRegEx: /^mouseup|touchend$/,
  58. /**
  59. * Property: startEvt
  60. * {Event} The event that started the click sequence
  61. */
  62. /**
  63. * Constructor: OpenLayers.Events.buttonclick
  64. * Construct a buttonclick event type. Applications are not supposed to
  65. * create instances of this class - they are created on demand by
  66. * <OpenLayers.Events> instances.
  67. *
  68. * Parameters:
  69. * target - {<OpenLayers.Events>} The events instance that the buttonclick
  70. * event will be triggered on.
  71. */
  72. initialize: function(target) {
  73. this.target = target;
  74. for (var i=this.events.length-1; i>=0; --i) {
  75. this.target.register(this.events[i], this, this.buttonClick, {
  76. extension: true
  77. });
  78. }
  79. },
  80. /**
  81. * Method: destroy
  82. */
  83. destroy: function() {
  84. for (var i=this.events.length-1; i>=0; --i) {
  85. this.target.unregister(this.events[i], this, this.buttonClick);
  86. }
  87. delete this.target;
  88. },
  89. /**
  90. * Method: getPressedButton
  91. * Get the pressed button, if any. Returns undefined if no button
  92. * was pressed.
  93. *
  94. * Arguments:
  95. * element - {DOMElement} The event target.
  96. *
  97. * Returns:
  98. * {DOMElement} The button element, or undefined.
  99. */
  100. getPressedButton: function(element) {
  101. var depth = 3, // limit the search depth
  102. button;
  103. do {
  104. if(OpenLayers.Element.hasClass(element, "olButton")) {
  105. // hit!
  106. button = element;
  107. break;
  108. }
  109. element = element.parentNode;
  110. } while(--depth > 0 && element);
  111. return button;
  112. },
  113. /**
  114. * Method: ignore
  115. * Check for event target elements that should be ignored by OpenLayers.
  116. *
  117. * Parameters:
  118. * element - {DOMElement} The event target.
  119. */
  120. ignore: function(element) {
  121. var depth = 3,
  122. ignore = false;
  123. do {
  124. if (element.nodeName.toLowerCase() === 'a') {
  125. ignore = true;
  126. break;
  127. }
  128. element = element.parentNode;
  129. } while (--depth > 0 && element);
  130. return ignore;
  131. },
  132. /**
  133. * Method: buttonClick
  134. * Check if a button was clicked, and fire the buttonclick event
  135. *
  136. * Parameters:
  137. * evt - {Event}
  138. */
  139. buttonClick: function(evt) {
  140. var propagate = true,
  141. element = OpenLayers.Event.element(evt);
  142. if (element && (OpenLayers.Event.isLeftClick(evt) || !~evt.type.indexOf("mouse"))) {
  143. // was a button pressed?
  144. var button = this.getPressedButton(element);
  145. if (button) {
  146. if (evt.type === "keydown") {
  147. switch (evt.keyCode) {
  148. case OpenLayers.Event.KEY_RETURN:
  149. case OpenLayers.Event.KEY_SPACE:
  150. this.target.triggerEvent("buttonclick", {
  151. buttonElement: button
  152. });
  153. OpenLayers.Event.stop(evt);
  154. propagate = false;
  155. break;
  156. }
  157. } else if (this.startEvt) {
  158. if (this.completeRegEx.test(evt.type)) {
  159. var pos = OpenLayers.Util.pagePosition(button);
  160. var viewportElement = OpenLayers.Util.getViewportElement();
  161. var scrollTop = window.pageYOffset || viewportElement.scrollTop;
  162. var scrollLeft = window.pageXOffset || viewportElement.scrollLeft;
  163. pos[0] = pos[0] - scrollLeft;
  164. pos[1] = pos[1] - scrollTop;
  165. this.target.triggerEvent("buttonclick", {
  166. buttonElement: button,
  167. buttonXY: {
  168. x: this.startEvt.clientX - pos[0],
  169. y: this.startEvt.clientY - pos[1]
  170. }
  171. });
  172. }
  173. if (this.cancelRegEx.test(evt.type)) {
  174. delete this.startEvt;
  175. }
  176. OpenLayers.Event.stop(evt);
  177. propagate = false;
  178. }
  179. if (this.startRegEx.test(evt.type)) {
  180. this.startEvt = evt;
  181. OpenLayers.Event.stop(evt);
  182. propagate = false;
  183. }
  184. } else {
  185. propagate = !this.ignore(OpenLayers.Event.element(evt));
  186. delete this.startEvt;
  187. }
  188. }
  189. return propagate;
  190. }
  191. });