ui.selectable.js 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257
  1. /*
  2. * jQuery UI Selectable 1.7.2
  3. *
  4. * Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about)
  5. * Dual licensed under the MIT (MIT-LICENSE.txt)
  6. * and GPL (GPL-LICENSE.txt) licenses.
  7. *
  8. * http://docs.jquery.com/UI/Selectables
  9. *
  10. * Depends:
  11. * ui.core.js
  12. */
  13. (function($) {
  14. $.widget("ui.selectable", $.extend({}, $.ui.mouse, {
  15. _init: function() {
  16. var self = this;
  17. this.element.addClass("ui-selectable");
  18. this.dragged = false;
  19. // cache selectee children based on filter
  20. var selectees;
  21. this.refresh = function() {
  22. selectees = $(self.options.filter, self.element[0]);
  23. selectees.each(function() {
  24. var $this = $(this);
  25. var pos = $this.offset();
  26. $.data(this, "selectable-item", {
  27. element: this,
  28. $element: $this,
  29. left: pos.left,
  30. top: pos.top,
  31. right: pos.left + $this.outerWidth(),
  32. bottom: pos.top + $this.outerHeight(),
  33. startselected: false,
  34. selected: $this.hasClass('ui-selected'),
  35. selecting: $this.hasClass('ui-selecting'),
  36. unselecting: $this.hasClass('ui-unselecting')
  37. });
  38. });
  39. };
  40. this.refresh();
  41. this.selectees = selectees.addClass("ui-selectee");
  42. this._mouseInit();
  43. this.helper = $(document.createElement('div'))
  44. .css({border:'1px dotted black'})
  45. .addClass("ui-selectable-helper");
  46. },
  47. destroy: function() {
  48. this.element
  49. .removeClass("ui-selectable ui-selectable-disabled")
  50. .removeData("selectable")
  51. .unbind(".selectable");
  52. this._mouseDestroy();
  53. },
  54. _mouseStart: function(event) {
  55. var self = this;
  56. this.opos = [event.pageX, event.pageY];
  57. if (this.options.disabled)
  58. return;
  59. var options = this.options;
  60. this.selectees = $(options.filter, this.element[0]);
  61. this._trigger("start", event);
  62. $(options.appendTo).append(this.helper);
  63. // position helper (lasso)
  64. this.helper.css({
  65. "z-index": 100,
  66. "position": "absolute",
  67. "left": event.clientX,
  68. "top": event.clientY,
  69. "width": 0,
  70. "height": 0
  71. });
  72. if (options.autoRefresh) {
  73. this.refresh();
  74. }
  75. this.selectees.filter('.ui-selected').each(function() {
  76. var selectee = $.data(this, "selectable-item");
  77. selectee.startselected = true;
  78. if (!event.metaKey) {
  79. selectee.$element.removeClass('ui-selected');
  80. selectee.selected = false;
  81. selectee.$element.addClass('ui-unselecting');
  82. selectee.unselecting = true;
  83. // selectable UNSELECTING callback
  84. self._trigger("unselecting", event, {
  85. unselecting: selectee.element
  86. });
  87. }
  88. });
  89. $(event.target).parents().andSelf().each(function() {
  90. var selectee = $.data(this, "selectable-item");
  91. if (selectee) {
  92. selectee.$element.removeClass("ui-unselecting").addClass('ui-selecting');
  93. selectee.unselecting = false;
  94. selectee.selecting = true;
  95. selectee.selected = true;
  96. // selectable SELECTING callback
  97. self._trigger("selecting", event, {
  98. selecting: selectee.element
  99. });
  100. return false;
  101. }
  102. });
  103. },
  104. _mouseDrag: function(event) {
  105. var self = this;
  106. this.dragged = true;
  107. if (this.options.disabled)
  108. return;
  109. var options = this.options;
  110. var x1 = this.opos[0], y1 = this.opos[1], x2 = event.pageX, y2 = event.pageY;
  111. if (x1 > x2) { var tmp = x2; x2 = x1; x1 = tmp; }
  112. if (y1 > y2) { var tmp = y2; y2 = y1; y1 = tmp; }
  113. this.helper.css({left: x1, top: y1, width: x2-x1, height: y2-y1});
  114. this.selectees.each(function() {
  115. var selectee = $.data(this, "selectable-item");
  116. //prevent helper from being selected if appendTo: selectable
  117. if (!selectee || selectee.element == self.element[0])
  118. return;
  119. var hit = false;
  120. if (options.tolerance == 'touch') {
  121. hit = ( !(selectee.left > x2 || selectee.right < x1 || selectee.top > y2 || selectee.bottom < y1) );
  122. } else if (options.tolerance == 'fit') {
  123. hit = (selectee.left > x1 && selectee.right < x2 && selectee.top > y1 && selectee.bottom < y2);
  124. }
  125. if (hit) {
  126. // SELECT
  127. if (selectee.selected) {
  128. selectee.$element.removeClass('ui-selected');
  129. selectee.selected = false;
  130. }
  131. if (selectee.unselecting) {
  132. selectee.$element.removeClass('ui-unselecting');
  133. selectee.unselecting = false;
  134. }
  135. if (!selectee.selecting) {
  136. selectee.$element.addClass('ui-selecting');
  137. selectee.selecting = true;
  138. // selectable SELECTING callback
  139. self._trigger("selecting", event, {
  140. selecting: selectee.element
  141. });
  142. }
  143. } else {
  144. // UNSELECT
  145. if (selectee.selecting) {
  146. if (event.metaKey && selectee.startselected) {
  147. selectee.$element.removeClass('ui-selecting');
  148. selectee.selecting = false;
  149. selectee.$element.addClass('ui-selected');
  150. selectee.selected = true;
  151. } else {
  152. selectee.$element.removeClass('ui-selecting');
  153. selectee.selecting = false;
  154. if (selectee.startselected) {
  155. selectee.$element.addClass('ui-unselecting');
  156. selectee.unselecting = true;
  157. }
  158. // selectable UNSELECTING callback
  159. self._trigger("unselecting", event, {
  160. unselecting: selectee.element
  161. });
  162. }
  163. }
  164. if (selectee.selected) {
  165. if (!event.metaKey && !selectee.startselected) {
  166. selectee.$element.removeClass('ui-selected');
  167. selectee.selected = false;
  168. selectee.$element.addClass('ui-unselecting');
  169. selectee.unselecting = true;
  170. // selectable UNSELECTING callback
  171. self._trigger("unselecting", event, {
  172. unselecting: selectee.element
  173. });
  174. }
  175. }
  176. }
  177. });
  178. return false;
  179. },
  180. _mouseStop: function(event) {
  181. var self = this;
  182. this.dragged = false;
  183. var options = this.options;
  184. $('.ui-unselecting', this.element[0]).each(function() {
  185. var selectee = $.data(this, "selectable-item");
  186. selectee.$element.removeClass('ui-unselecting');
  187. selectee.unselecting = false;
  188. selectee.startselected = false;
  189. self._trigger("unselected", event, {
  190. unselected: selectee.element
  191. });
  192. });
  193. $('.ui-selecting', this.element[0]).each(function() {
  194. var selectee = $.data(this, "selectable-item");
  195. selectee.$element.removeClass('ui-selecting').addClass('ui-selected');
  196. selectee.selecting = false;
  197. selectee.selected = true;
  198. selectee.startselected = true;
  199. self._trigger("selected", event, {
  200. selected: selectee.element
  201. });
  202. });
  203. this._trigger("stop", event);
  204. this.helper.remove();
  205. return false;
  206. }
  207. }));
  208. $.extend($.ui.selectable, {
  209. version: "1.7.2",
  210. defaults: {
  211. appendTo: 'body',
  212. autoRefresh: true,
  213. cancel: ":input,option",
  214. delay: 0,
  215. distance: 0,
  216. filter: '*',
  217. tolerance: 'touch'
  218. }
  219. });
  220. })(jQuery);