|
1 /** |
|
2 * Interface Elements for jQuery |
|
3 * Slider |
|
4 * |
|
5 * http://interface.eyecon.ro |
|
6 * |
|
7 * Copyright (c) 2006 Stefan Petre |
|
8 * Dual licensed under the MIT (MIT-LICENSE.txt) |
|
9 * and GPL (GPL-LICENSE.txt) licenses. |
|
10 * |
|
11 * |
|
12 */ |
|
13 |
|
14 jQuery.iSlider = { |
|
15 tabindex : 1, |
|
16 set : function (values) |
|
17 { |
|
18 var values = values; |
|
19 return this.each( |
|
20 function() |
|
21 { |
|
22 this.slideCfg.sliders.each( |
|
23 function (key) |
|
24 { |
|
25 jQuery.iSlider.dragmoveBy(this,values[key]); |
|
26 } |
|
27 ); |
|
28 } |
|
29 ); |
|
30 }, |
|
31 |
|
32 get : function() |
|
33 { |
|
34 var values = []; |
|
35 this.each( |
|
36 function(slider) |
|
37 { |
|
38 if (this.isSlider) { |
|
39 values[slider] = []; |
|
40 var elm = this; |
|
41 var sizes = jQuery.iUtil.getSize(this); |
|
42 this.slideCfg.sliders.each( |
|
43 function (key) |
|
44 { |
|
45 var x = this.offsetLeft; |
|
46 var y = this.offsetTop; |
|
47 xproc = parseInt(x * 100 / (sizes.w - this.offsetWidth)); |
|
48 yproc = parseInt(y * 100 / (sizes.h - this.offsetHeight)); |
|
49 values[slider][key] = [xproc||0, yproc||0, x||0, y||0]; |
|
50 } |
|
51 ); |
|
52 } |
|
53 } |
|
54 ); |
|
55 return values; |
|
56 }, |
|
57 |
|
58 modifyContainer : function (elm) |
|
59 { |
|
60 elm.dragCfg.containerMaxx = elm.dragCfg.cont.w - elm.dragCfg.oC.wb; |
|
61 elm.dragCfg.containerMaxy = elm.dragCfg.cont.h - elm.dragCfg.oC.hb; |
|
62 if (elm.SliderContainer.slideCfg.restricted ) { |
|
63 next = elm.SliderContainer.slideCfg.sliders.get(elm.SliderIteration+1); |
|
64 if (next) { |
|
65 elm.dragCfg.cont.w = (parseInt(jQuery(next).css('left'))||0) + elm.dragCfg.oC.wb; |
|
66 elm.dragCfg.cont.h = (parseInt(jQuery(next).css('top'))||0) + elm.dragCfg.oC.hb; |
|
67 } |
|
68 prev = elm.SliderContainer.slideCfg.sliders.get(elm.SliderIteration-1); |
|
69 if (prev) { |
|
70 var prevLeft = parseInt(jQuery(prev).css('left'))||0; |
|
71 var prevTop = parseInt(jQuery(prev).css('left'))||0; |
|
72 elm.dragCfg.cont.x += prevLeft; |
|
73 elm.dragCfg.cont.y += prevTop; |
|
74 elm.dragCfg.cont.w -= prevLeft; |
|
75 elm.dragCfg.cont.h -= prevTop; |
|
76 } |
|
77 } |
|
78 elm.dragCfg.maxx = elm.dragCfg.cont.w - elm.dragCfg.oC.wb; |
|
79 elm.dragCfg.maxy = elm.dragCfg.cont.h - elm.dragCfg.oC.hb; |
|
80 if(elm.dragCfg.fractions) { |
|
81 elm.dragCfg.gx = ((elm.dragCfg.cont.w - elm.dragCfg.oC.wb)/elm.dragCfg.fractions) || 1; |
|
82 elm.dragCfg.gy = ((elm.dragCfg.cont.h - elm.dragCfg.oC.hb)/elm.dragCfg.fractions) || 1; |
|
83 elm.dragCfg.fracW = elm.dragCfg.maxx / elm.dragCfg.fractions; |
|
84 elm.dragCfg.fracH = elm.dragCfg.maxy / elm.dragCfg.fractions; |
|
85 } |
|
86 |
|
87 elm.dragCfg.cont.dx = elm.dragCfg.cont.x - elm.dragCfg.oR.x; |
|
88 elm.dragCfg.cont.dy = elm.dragCfg.cont.y - elm.dragCfg.oR.y; |
|
89 |
|
90 jQuery.iDrag.helper.css('cursor', 'default'); |
|
91 }, |
|
92 |
|
93 onSlide : function(elm, x, y) |
|
94 { |
|
95 if (elm.dragCfg.fractions) { |
|
96 xfrac = parseInt(x/elm.dragCfg.fracW); |
|
97 xproc = xfrac * 100 / elm.dragCfg.fractions; |
|
98 yfrac = parseInt(y/elm.dragCfg.fracH); |
|
99 yproc = yfrac * 100 / elm.dragCfg.fractions; |
|
100 } else { |
|
101 xproc = parseInt(x * 100 / elm.dragCfg.containerMaxx); |
|
102 yproc = parseInt(y * 100 / elm.dragCfg.containerMaxy); |
|
103 } |
|
104 elm.dragCfg.lastSi = [xproc||0, yproc||0, x||0, y||0]; |
|
105 if (elm.dragCfg.onSlide) |
|
106 elm.dragCfg.onSlide.apply(elm, elm.dragCfg.lastSi); |
|
107 }, |
|
108 |
|
109 dragmoveByKey : function (event) |
|
110 { |
|
111 pressedKey = event.charCode || event.keyCode || -1; |
|
112 |
|
113 switch (pressedKey) |
|
114 { |
|
115 //end |
|
116 case 35: |
|
117 jQuery.iSlider.dragmoveBy(this.dragElem, [2000, 2000] ); |
|
118 break; |
|
119 //home |
|
120 case 36: |
|
121 jQuery.iSlider.dragmoveBy(this.dragElem, [-2000, -2000] ); |
|
122 break; |
|
123 //left |
|
124 case 37: |
|
125 jQuery.iSlider.dragmoveBy(this.dragElem, [-this.dragElem.dragCfg.gx||-1, 0] ); |
|
126 break; |
|
127 //up |
|
128 case 38: |
|
129 jQuery.iSlider.dragmoveBy(this.dragElem, [0, -this.dragElem.dragCfg.gy||-1] ); |
|
130 break; |
|
131 //right |
|
132 case 39: |
|
133 jQuery.iSlider.dragmoveBy(this.dragElem, [this.dragElem.dragCfg.gx||1, 0] ); |
|
134 break; |
|
135 //down; |
|
136 case 40: |
|
137 jQuery.iDrag.dragmoveBy(this.dragElem, [0, this.dragElem.dragCfg.gy||1] ); |
|
138 break; |
|
139 } |
|
140 }, |
|
141 |
|
142 dragmoveBy : function (elm, position) |
|
143 { |
|
144 if (!elm.dragCfg) { |
|
145 return; |
|
146 } |
|
147 |
|
148 elm.dragCfg.oC = jQuery.extend( |
|
149 jQuery.iUtil.getPosition(elm), |
|
150 jQuery.iUtil.getSize(elm) |
|
151 ); |
|
152 |
|
153 elm.dragCfg.oR = { |
|
154 x : parseInt(jQuery.css(elm, 'left'))||0, |
|
155 y : parseInt(jQuery.css(elm, 'top'))||0 |
|
156 }; |
|
157 |
|
158 elm.dragCfg.oP = jQuery.css(elm, 'position'); |
|
159 if (elm.dragCfg.oP != 'relative' && elm.dragCfg.oP != 'absolute') { |
|
160 elm.style.position = 'relative'; |
|
161 } |
|
162 |
|
163 jQuery.iDrag.getContainment(elm); |
|
164 jQuery.iSlider.modifyContainer(elm); |
|
165 |
|
166 dx = parseInt(position[0]) || 0; |
|
167 dy = parseInt(position[1]) || 0; |
|
168 |
|
169 nx = elm.dragCfg.oR.x + dx; |
|
170 ny = elm.dragCfg.oR.y + dy; |
|
171 if(elm.dragCfg.fractions) { |
|
172 newCoords = jQuery.iDrag.snapToGrid.apply(elm, [nx, ny, dx, dy]); |
|
173 if (newCoords.constructor == Object) { |
|
174 dx = newCoords.dx; |
|
175 dy = newCoords.dy; |
|
176 } |
|
177 nx = elm.dragCfg.oR.x + dx; |
|
178 ny = elm.dragCfg.oR.y + dy; |
|
179 } |
|
180 |
|
181 newCoords = jQuery.iDrag.fitToContainer.apply(elm, [nx, ny, dx, dy]); |
|
182 if (newCoords && newCoords.constructor == Object) { |
|
183 dx = newCoords.dx; |
|
184 dy = newCoords.dy; |
|
185 } |
|
186 |
|
187 nx = elm.dragCfg.oR.x + dx; |
|
188 ny = elm.dragCfg.oR.y + dy; |
|
189 |
|
190 if (elm.dragCfg.si && (elm.dragCfg.onSlide || elm.dragCfg.onChange)) { |
|
191 jQuery.iSlider.onSlide(elm, nx, ny); |
|
192 } |
|
193 nx = !elm.dragCfg.axis || elm.dragCfg.axis == 'horizontally' ? nx : elm.dragCfg.oR.x||0; |
|
194 ny = !elm.dragCfg.axis || elm.dragCfg.axis == 'vertically' ? ny : elm.dragCfg.oR.y||0; |
|
195 elm.style.left = nx + 'px'; |
|
196 elm.style.top = ny + 'px'; |
|
197 }, |
|
198 |
|
199 build : function(o) { |
|
200 return this.each( |
|
201 function() |
|
202 { |
|
203 if (this.isSlider == true || !o.accept || !jQuery.iUtil || !jQuery.iDrag || !jQuery.iDrop){ |
|
204 return; |
|
205 } |
|
206 toDrag = jQuery(o.accept, this); |
|
207 if (toDrag.size() == 0) { |
|
208 return; |
|
209 } |
|
210 var params = { |
|
211 containment: 'parent', |
|
212 si : true, |
|
213 onSlide : o.onSlide && o.onSlide.constructor == Function ? o.onSlide : null, |
|
214 onChange : o.onChange && o.onChange.constructor == Function ? o.onChange : null, |
|
215 handle: this, |
|
216 opacity: o.opacity||false |
|
217 }; |
|
218 if (o.fractions && parseInt(o.fractions)) { |
|
219 params.fractions = parseInt(o.fractions)||1; |
|
220 params.fractions = params.fractions > 0 ? params.fractions : 1; |
|
221 } |
|
222 if (toDrag.size() == 1) |
|
223 toDrag.Draggable(params); |
|
224 else { |
|
225 jQuery(toDrag.get(0)).Draggable(params); |
|
226 params.handle = null; |
|
227 toDrag.Draggable(params); |
|
228 } |
|
229 toDrag.keydown(jQuery.iSlider.dragmoveByKey); |
|
230 toDrag.attr('tabindex',jQuery.iSlider.tabindex++); |
|
231 |
|
232 this.isSlider = true; |
|
233 this.slideCfg = {}; |
|
234 this.slideCfg.onslide = params.onslide; |
|
235 this.slideCfg.fractions = params.fractions; |
|
236 this.slideCfg.sliders = toDrag; |
|
237 this.slideCfg.restricted = o.restricted ? true : false; |
|
238 sliderEl = this; |
|
239 sliderEl.slideCfg.sliders.each( |
|
240 function(nr) |
|
241 { |
|
242 this.SliderIteration = nr; |
|
243 this.SliderContainer = sliderEl; |
|
244 } |
|
245 ); |
|
246 if (o.values && o.values.constructor == Array) { |
|
247 for (i = o.values.length -1; i>=0;i--) { |
|
248 if (o.values[i].constructor == Array && o.values[i].length == 2) { |
|
249 el = this.slideCfg.sliders.get(i); |
|
250 if (el.tagName) { |
|
251 jQuery.iSlider.dragmoveBy(el, o.values[i]); |
|
252 } |
|
253 } |
|
254 } |
|
255 } |
|
256 } |
|
257 ); |
|
258 } |
|
259 }; |
|
260 jQuery.fn.extend( |
|
261 { |
|
262 /** |
|
263 * Create a slider width options |
|
264 * |
|
265 * @name Slider |
|
266 * @description Create a slider width options |
|
267 * @param Hash hash A hash of parameters. All parameters are optional. |
|
268 * @option Mixed accepts string to select slider indicators or DOMElement slider indicator |
|
269 * @option Integer factions (optional) number of sgments to divide and snap slider |
|
270 * @option Function onSlide (optional) A function to be executed whenever slider indicator it is moved |
|
271 * @option Function onChanged (optional) A function to be executed whenever slider indicator was moved |
|
272 * @option Array values (optional) Initial values for slider indicators |
|
273 * @option Boolean restricted (optional) if true the slider indicator can not be moved beyond adjacent indicators |
|
274 * @type jQuery |
|
275 * @cat Plugins/Interface |
|
276 * @author Stefan Petre |
|
277 */ |
|
278 Slider : jQuery.iSlider.build, |
|
279 /** |
|
280 * Set value/position for slider indicators |
|
281 * |
|
282 * @name SliderSetValues |
|
283 * @description Set value/position for slider indicators |
|
284 * @param Array values array width values for each indicator |
|
285 * @type jQuery |
|
286 * @cat Plugins/Interface |
|
287 * @author Stefan Petre |
|
288 */ |
|
289 SliderSetValues : jQuery.iSlider.set, |
|
290 /** |
|
291 * Get value/position for slider indicators |
|
292 * |
|
293 * @name SliderSetValues |
|
294 * @description Get value/position for slider indicators |
|
295 * @type jQuery |
|
296 * @cat Plugins/Interface |
|
297 * @author Stefan Petre |
|
298 */ |
|
299 SliderGetValues : jQuery.iSlider.get |
|
300 } |
|
301 ); |