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