You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

262 lines
6.5 KiB

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