jquery.ui.selectable.js 6.7KB

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