Context Navigation

source: extensions/GrumPluginClasses/js/ui.inputDotArea.js @ 20130

Last change on this file since 20130 was 16012, checked in by grum, 13 years ago
feature:2634- compatibility with Piwigo 2.4 +add some objects on js framework
Property svn:executable set to ``*
File size: 15.0 KB

Line
1	/**
2	* -----------------------------------------------------------------------------
3	* file: ui.inputDotArea.js
4	* file version: 1.0.1
5	* date: 2012-06-18
6	*
7	* A jQuery plugin provided by the piwigo's plugin "GrumPluginClasses"
8	*
9	* -----------------------------------------------------------------------------
10	* Author : Grum
11	* email : grum@piwigo.com
12	* website : http://photos.grum.fr
13	*
14	* << May the Little SpaceFrog be with you ! >>
15	* -----------------------------------------------------------------------------
16	*
17	*
18	*
19	*
20	* :: HISTORY ::
21	*
22	* \| release \| date \|
23	* \| 1.0.0 \| 2010/11/04 \| first release
24	* \| \| \|
25	* \| 1.0.1 \| 2012/06/18 \| * improve memory managment
26	* \| \| \|
27	* \| \| \|
28	* \| \| \|
29	* \| \| \|
30	*
31	*/
32
33
34
35	(
36	function($)
37	{
38	/*
39	* plugin 'public' functions
40	*/
41	var publicMethods =
42	{
43	init : function (opt)
44	{
45	return this.each(function()
46	{
47	// default values for the plugin
48	var $this=$(this),
49	data = $this.data('options'),
50	objects = $this.data('objects'),
51	properties = $this.data('properties'),
52	options =
53	{
54	range:
55	{
56	x:[0,100],
57	y:[0,100]
58	},
59	width:0,
60	height:0,
61	disabled:false,
62	change:null
63	};
64
65	// if options given, merge it
66	// if(opt) $.extend(options, opt); ==> options are set by setters
67
68	$this.data('options', options);
69
70
71	if(!properties)
72	{
73	$this.data('properties',
74	{
75	initialized:false,
76	values:
77	{
78	x:50,
79	y:50
80	},
81	isValid:true,
82	mouseIsDown:false
83	}
84	);
85	properties=$this.data('properties');
86	}
87
88	if(!objects)
89	{
90	objects =
91	{
92	container:$('<div/>',
93	{
94	'class':'ui-inputDotArea',
95	css:{
96	width:'100%',
97	height:'100%'
98	}
99	}
100	)
101	.bind('mousedown.inputDotArea',
102	function (event)
103	{
104	privateMethods.mouseDown($this, event);
105	}
106	)
107	.bind('mouseup.inputDotArea',
108	function (event)
109	{
110	privateMethods.mouseUp($this, event);
111	}
112	)
113	.bind('mousemove.inputDotArea',
114	function (event)
115	{
116	privateMethods.mouseMove($this, event);
117	}
118	),
119	dot:$('<div/>',
120	{
121	'class':'ui-inputDotArea-dot'
122	}
123	)
124
125	};
126
127	$this
128	.html('')
129	.append(objects.container.append(objects.dot));
130
131	$this.data('objects', objects);
132	}
133
134	privateMethods.setOptions($this, opt);
135	}
136	);
137	}, // init
138	destroy : function ()
139	{
140	return this.each(
141	function()
142	{
143	// default values for the plugin
144	var $this=$(this),
145	objects = $this.data('objects');
146	objects.dot.remove();
147	objects.container.unbind().remove();
148	$this
149	.unbind('.inputDotArea')
150	.removeData()
151	.css(
152	{
153	width:'',
154	height:''
155	}
156	);
157	delete $this;
158	}
159	);
160	}, // destroy
161
162	options: function (value)
163	{
164	return(
165	this.each(
166	function()
167	{
168	privateMethods.setOptions($(this), value);
169	}
170	)
171	);
172	}, // options
173
174	disabled: function (value)
175	{
176	if(value!=null)
177	{
178	return(
179	this.each(
180	function()
181	{
182	privateMethods.setDisabled($(this), value);
183	}
184	)
185	);
186	}
187	else
188	{
189	var options = this.data('options');
190
191	if(options)
192	{
193	return(options.disabled);
194	}
195	else
196	{
197	return('');
198	}
199	}
200	}, // disabled
201
202	width: function (value)
203	{
204	if(value!=null)
205	{
206	return(
207	this.each(
208	function()
209	{
210	privateMethods.setWidth($(this), value, true);
211	}
212	)
213	);
214	}
215	else
216	{
217	var options=this.data('options');
218	return(options.width);
219	}
220	}, // width
221
222	height: function (value)
223	{
224	if(value!=null)
225	{
226	return(
227	this.each(
228	function()
229	{
230	privateMethods.setHeight($(this), value, true);
231	}
232	)
233	);
234	}
235	else
236	{
237	var options=this.data('options');
238	return(options.height);
239	}
240	}, // height
241
242	range: function (value)
243	{
244	if(value!=null)
245	{
246	return(
247	this.each(
248	function()
249	{
250	privateMethods.setRange($(this), value, true);
251	}
252	)
253	);
254	}
255	else
256	{
257	var options=this.data('options');
258	return(options.range);
259	}
260	}, // value
261
262	values: function (value)
263	{
264	if(value!=null)
265	{
266	// set selected value
267	return(
268	this.each(
269	function()
270	{
271	privateMethods.setValues($(this), value, true);
272	}
273	)
274	);
275	}
276	else
277	{
278	// return the selected tags
279	var properties=this.data('properties');
280	return(properties.values);
281	}
282	}, // value
283
284	isValid: function (value)
285	{
286	if(value!=null)
287	{
288	// set selected value
289	return(
290	this.each(
291	function()
292	{
293	privateMethods.setIsValid($(this), value);
294	}
295	)
296	);
297	}
298	else
299	{
300	// return the selected tags
301	var properties=this.data('properties');
302	return(properties.isValid);
303	}
304	}, // isValid
305
306	change: function (value)
307	{
308	if(value!=null && $.isFunction(value))
309	{
310	// set selected value
311	return(
312	this.each(
313	function()
314	{
315	privateMethods.setEventChange($(this), value);
316	}
317	)
318	);
319	}
320	else
321	{
322	// return the selected value
323	var options=this.data('options');
324
325	if(options)
326	{
327	return(options.change);
328	}
329	else
330	{
331	return(null);
332	}
333	}
334	} // change
335
336	}; // methods
337
338
339	/*
340	* plugin 'private' methods
341	*/
342	var privateMethods =
343	{
344	setOptions : function (object, value)
345	{
346	var properties=object.data('properties'),
347	options=object.data('options');
348
349	if(!$.isPlainObject(value)) return(false);
350
351	properties.initialized=false;
352
353	privateMethods.setWidth(object, (value.width!=null)?value.width:options.width);
354	privateMethods.setHeight(object, (value.height!=null)?value.height:options.height);
355	privateMethods.setRange(object, (value.range!=null)?value.range:options.range);
356	privateMethods.setValues(object, (value.values!=null)?value.values:properties.values, true);
357
358	privateMethods.setEventChange(object, (value.change!=null)?value.change:options.change);
359
360	properties.initialized=true;
361	},
362
363	setIsValid : function (object, value)
364	{
365	var objects=object.data('objects'),
366	properties=object.data('properties');
367	/*
368	if(properties.isValid!=value && properties.initialized)
369	{
370	properties.isValid=value;
371	if(properties.isValid)
372	{
373	objects.container.removeClass('ui-error');
374	objects.input.removeClass('ui-error');
375	}
376	else
377	{
378	objects.container.addClass('ui-error');
379	objects.input.addClass('ui-error');
380	}
381	}
382	*/
383	return(properties.isValid);
384	},
385
386
387	setWidth : function (object, value)
388	{
389	var options=object.data('options'),
390	objects=object.data('objects'),
391	properties=object.data('properties');
392
393	if((!properties.initialized \|\| options.width!=value) && value>0)
394	{
395	options.width=value;
396	objects.container.css('width', options.width+'px');
397	}
398	return(options.width);
399	},
400
401	setHeight : function (object, value)
402	{
403	var options=object.data('options'),
404	objects=object.data('objects'),
405	properties=object.data('properties');
406
407	if((!properties.initialized \|\| options.height!=value) && value>0)
408	{
409	options.height=value;
410	objects.container.css('height', options.height+'px');
411	}
412	return(options.height);
413	},
414
415	setDisabled : function (object, value)
416	{
417	var options=object.data('options'),
418	objects=object.data('objects'),
419	properties=object.data('properties');
420
421	if((!properties.initialized \|\| options.disabled!=value) && (value==true \|\| value==false))
422	{
423	options.disabled=value;
424	objects.input.attr('disabled', options.disabled);
425	}
426	return(options.disabled);
427	},
428
429
430	setRange : function (object, value)
431	{
432	var options=object.data('options'),
433	properties=object.data('properties'),
434	objects=object.data('objects');
435
436	if(value.x==false \|\| ($.isArray(value.x) && value.x[0]<=value.x[1]))
437	{
438	options.range.x=value.x;
439	}
440
441	if(value.y==false \|\| ($.isArray(value.y) && value.y[0]<=value.y[1]))
442	{
443	options.range.y=value.y;
444	}
445
446	return(options.range);
447	}, //setValue
448
449
450	setValues : function (object, value, apply)
451	{
452	var options=object.data('options'),
453	properties=object.data('properties'),
454	objects=object.data('objects'),
455	tmp={x:'', y:''};
456
457	if(!(
458	(value.x==null \|\| (value.x!=null && options.range.x[0]<=value.x && value.x<=options.range.x[1])) &&
459	(value.y==null \|\| (value.y!=null && options.range.y[0]<=value.y && value.y<=options.range.y[1])) &&
460	!(value.x==null && value.y==null)
461	)
462	)
463	{
464	return(false);
465	}
466
467	if(value.x!=null) properties.values.x=value.x;
468	if(value.y!=null) properties.values.y=value.y;
469
470	if(apply)
471	{
472	if(options.range.x==false)
473	{
474	tmp.x=options.width/2;
475	}
476	else
477	{
478	tmp.x=properties.values.x*options.width/(options.range.x[1]-options.range.x[0])+options.range.x[0];
479	}
480	tmp.x-=6;
481
482	if(options.range.y==false)
483	{
484	tmp.y=options.height/2;
485	}
486	else
487	{
488	tmp.y=properties.values.y*options.height/(options.range.y[1]-options.range.y[0])+options.range.y[0];
489	}
490	tmp.y-=6;
491
492	objects.dot.css(
493	{
494	top:tmp.y+'px',
495	left:tmp.x+'px'
496	}
497	);
498	}
499
500	if(options.change) object.trigger('inputDotAreaChange', properties.values);
501
502	return(true);
503	}, //setValue
504
505	setEventChange : function (object, value)
506	{
507	var options=object.data('options');
508
509	options.change=value;
510	object.unbind('inputDotAreaChange');
511	if(value) object.bind('inputDotAreaChange', options.change);
512	return(options.change);
513	},
514
515	mouseDown : function (object, event)
516	{
517	var properties=object.data('properties');
518
519	properties.mouseIsDown=true;
520	privateMethods.mouseMove(object, event);
521	},
522
523	mouseUp : function (object, event)
524	{
525	var properties=object.data('properties');
526
527	properties.mouseIsDown=false;
528	},
529
530	mouseMove : function (object, event)
531	{
532	var properties=object.data('properties'),
533	objects=object.data('objects'),
534	options=object.data('options'),
535	values={};
536
537	if(properties.mouseIsDown)
538	{
539	event.layerX=event.pageX-objects.container.offset().left;
540	event.layerY=event.pageY-objects.container.offset().top;
541
542	if(options.range.x!=false)
543	{
544	values.x=options.range.x[0]+event.layerX*(options.range.x[1]-options.range.x[0])/options.width;
545	}
546	if(options.range.y!=false)
547	{
548	values.y=options.range.y[0]+event.layerY*(options.range.y[1]-options.range.y[0])/options.height;
549	}
550
551	privateMethods.setValues(object, values, true);
552	}
553	}
554
555
556	};
557
558
559	$.fn.inputDotArea = function(method)
560	{
561	if(publicMethods[method])
562	{
563	return publicMethods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
564	}
565	else if(typeof method === 'object' \|\| ! method)
566	{
567	return publicMethods.init.apply(this, arguments);
568	}
569	else
570	{
571	$.error( 'Method ' + method + ' does not exist on jQuery.inputDotArea' );
572	}
573	} // $.fn.inputDotArea
574
575	}
576	)(jQuery);
577
578

Note: See TracBrowser for help on using the repository browser.

Download in other formats: