Context Navigation

source: extensions/GrumPluginClasses/js/ui.inputConsole.js @ 31506

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

Line
1	/**
2	* -----------------------------------------------------------------------------
3	* file: ui.inputConsole.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/10/10 \| 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	disabled:false,
55	prompt:'>',
56	historySize:8,
57	historyHeight:60,
58	change:null,
59	submit:null,
60	submited:null,
61	focusChanged:null
62	};
63
64	// if options given, merge it
65	// if(opt) $.extend(options, opt); ==> options are set by setters
66
67	$this.data('options', options);
68
69
70	if(!properties)
71	{
72	$this.data('properties',
73	{
74	initialized:false,
75	value:'',
76	isValid:true,
77	mouseIsOver:false,
78	historyIsVisible:false,
79	inputMargins:0,
80	focus:false
81	}
82	);
83	properties=$this.data('properties');
84	}
85
86	if(!objects)
87	{
88	objects =
89	{
90	container:$('<div/>',
91	{
92	'class':'ui-inputConsole',
93	css:{
94	width:'100%'
95	}
96	}
97	).bind('click.inputConsole',
98	function ()
99	{
100	objects.input.focus();
101	}
102	)
103	.bind('mouseenter',
104	function ()
105	{
106	properties.mouseIsOver=true;
107	}
108	)
109	.bind('mouseleave',
110	function ()
111	{
112	properties.mouseIsOver=false;
113	}
114	),
115	inputContainer:$('<div/>',
116	{
117	'class':'ui-inputConsole-input'
118	}
119	),
120	input:$('<input>',
121	{
122	type:"text",
123	value:''
124	}
125	).bind('focusout.inputConsole',
126	function ()
127	{
128	privateMethods.lostFocus($this);
129	}
130	)
131	.bind('focus.inputConsole',
132	function ()
133	{
134	privateMethods.getFocus($this);
135	}
136	)
137	.bind('keyup.inputConsole',
138	function (event)
139	{
140	privateMethods.keyUp($this, event);
141	}
142	),
143	prompt:$('<div/>',
144	{
145	html:options.prompt,
146	'class':'ui-inputConsole-prompt'
147	}
148	),
149	historyContainer:$('<div/>',
150	{
151	'class':'ui-inputConsole-history',
152	css:{
153	display:'none'
154	}
155	}
156	),
157	historyBackground:$('<div/>',
158	{
159	'class':'ui-inputConsole-historyBg'
160	}
161	),
162	historyListContainer:$('<div/>',
163	{
164	'class':'ui-inputConsole-historyListContainer'
165	}
166	),
167	historyList:$('<ul/>')
168
169	};
170
171	$this
172	.html('')
173	.append(
174	objects.container
175	.append(
176	objects.historyContainer
177	.append(objects.historyBackground)
178	.append(objects.historyListContainer.append(objects.historyList))
179	)
180	.append(
181	objects.inputContainer.append(objects.prompt).append(objects.input)
182	)
183	).bind('resize.inputConsole',
184	function ()
185	{
186	privateMethods.setObjectsWidth($this);
187	}
188	);
189
190	properties.inputMargins=objects.input.outerWidth(true)-objects.input.width();
191
192	$this.data('objects', objects);
193	}
194
195	privateMethods.setOptions($this, opt);
196	}
197	);
198	}, // init
199	destroy : function ()
200	{
201	return this.each(
202	function()
203	{
204	// default values for the plugin
205	var $this=$(this),
206	objects = $this.data('objects');
207	objects.input.unbind().remove();
208	objects.prompt.unbind().remove();
209	objects.inputContainer.unbind().remove();
210	objects.historyList.unbind().remove();
211	objects.historyListContainer.unbind().remove();
212	objects.historyBackground.unbind().remove();
213	objects.historyContainer.unbind().remove();
214	objects.container.unbind().remove();
215	$this
216	.unbind('.inputConsole')
217	.removeData()
218	.css(
219	{
220	width:'',
221	height:''
222	}
223	);
224	delete $this;
225	}
226	);
227	}, // destroy
228
229	options: function (value)
230	{
231	return this.each(function()
232	{
233	privateMethods.setOptions($(this), value);
234	}
235	);
236	}, // options
237
238	disabled: function (value)
239	{
240	if(value!=null)
241	{
242	return this.each(function()
243	{
244	privateMethods.setDisabled($(this), value);
245	}
246	);
247	}
248	else
249	{
250	var options = this.data('options');
251
252	if(options)
253	{
254	return(options.disabled);
255	}
256	else
257	{
258	return('');
259	}
260	}
261	}, // disabled
262
263
264	prompt: function (value)
265	{
266	if(value!=null)
267	{
268	return this.each(function()
269	{
270	privateMethods.setPrompt($(this), value);
271	}
272	);
273	}
274	else
275	{
276	var options = this.data('options');
277
278	if(options)
279	{
280	return(options.prompt);
281	}
282	else
283	{
284	return('');
285	}
286	}
287	}, // prompt
288
289	historySize: function (value)
290	{
291	if(value!=null)
292	{
293	return this.each(function()
294	{
295	privateMethods.setHistorySize($(this), value);
296	}
297	);
298	}
299	else
300	{
301	var options = this.data('options');
302
303	if(options)
304	{
305	return(options.historySize);
306	}
307	else
308	{
309	return('');
310	}
311	}
312	}, // historySize
313
314	historyHeight: function (value)
315	{
316	if(value!=null)
317	{
318	return this.each(function()
319	{
320	privateMethods.setHistoryHeight($(this), value);
321	}
322	);
323	}
324	else
325	{
326	var options = this.data('options');
327
328	if(options)
329	{
330	return(options.historyHeight);
331	}
332	else
333	{
334	return('');
335	}
336	}
337	}, // historyHeight
338
339	value: function (value)
340	{
341	if(value!=null)
342	{
343	// set selected value
344	return this.each(function()
345	{
346	privateMethods.setValue($(this), value, true);
347	}
348	);
349	}
350	else
351	{
352	// return the selected tags
353	var properties=this.data('properties');
354	return(properties.value);
355	}
356	}, // value
357
358	history: function (value, param)
359	{
360	var objects=this.data('objects');
361
362	if(value!=null)
363	{
364	// set selected value
365	return this.each(function()
366	{
367	switch(value)
368	{
369	case 'clear':
370	objects.historyList.html('');
371	break;
372	case 'addResult':
373	privateMethods.updateHistoryResult($(this), param);
374	break;
375	}
376	}
377	);
378	}
379	else
380	{
381	// return the selected tags
382	var returned=[];
383	objects.historyList.children().each(
384	function (index, item)
385	{
386	returned.push($(item).text());
387	}
388	);
389	return(returned);
390	}
391	}, // value
392
393	isValid: function (value)
394	{
395	if(value!=null)
396	{
397	// set selected value
398	return this.each(function()
399	{
400	privateMethods.setIsValid($(this), value);
401	}
402	);
403	}
404	else
405	{
406	// return the selected tags
407	var properties=this.data('properties');
408	return(properties.isValid);
409	}
410	}, // isValid
411
412	focus: function (value)
413	{
414	if(value!=null)
415	{
416	// set selected value
417	return this.each(function()
418	{
419	privateMethods.setFocus($(this), value);
420	}
421	);
422	}
423	else
424	{
425	// return the selected tags
426	var properties=this.data('properties');
427	return(properties.focus);
428	}
429	}, // isValid
430
431	change: function (value)
432	{
433	if(value!=null && $.isFunction(value))
434	{
435	// set selected value
436	return this.each(function()
437	{
438	privateMethods.setEventChange($(this), value);
439	}
440	);
441	}
442	else
443	{
444	// return the selected value
445	var options=this.data('options');
446
447	if(options)
448	{
449	return(options.change);
450	}
451	else
452	{
453	return(null);
454	}
455	}
456	}, // change
457
458
459	submit: function (value)
460	{
461	if(value!=null && $.isFunction(value))
462	{
463	// set selected value
464	return this.each(function()
465	{
466	privateMethods.setEventSubmit($(this), value);
467	}
468	);
469	}
470	else
471	{
472	// return the selected value
473	var options=this.data('options');
474
475	if(options)
476	{
477	return(options.submit);
478	}
479	else
480	{
481	return(null);
482	}
483	}
484	}, // submit
485
486	submited: function (value)
487	{
488	if(value!=null && $.isFunction(value))
489	{
490	// set selected value
491	return this.each(function()
492	{
493	privateMethods.setEventSubmited($(this), value);
494	}
495	);
496	}
497	else
498	{
499	// return the selected value
500	var options=this.data('options');
501
502	if(options)
503	{
504	return(options.submited);
505	}
506	else
507	{
508	return(null);
509	}
510	}
511	}, // submited
512
513	focusChanged: function (value)
514	{
515	if(value!=null && $.isFunction(value))
516	{
517	// set selected value
518	return this.each(function()
519	{
520	privateMethods.setEventFocusChanged($(this), value);
521	}
522	);
523	}
524	else
525	{
526	// return the selected value
527	var options=this.data('options');
528
529	if(options)
530	{
531	return(options.focusChanged);
532	}
533	else
534	{
535	return(null);
536	}
537	}
538	}, // focusChanged
539
540
541
542	}; // methods
543
544
545	/*
546	* plugin 'private' methods
547	*/
548	var privateMethods =
549	{
550	setOptions : function (object, value)
551	{
552	var properties=object.data('properties'),
553	options=object.data('options');
554
555	if(!$.isPlainObject(value)) return(false);
556
557	properties.initialized=false;
558
559	privateMethods.setHistoryHeight(object, (value.historyHeight!=null)?value.historyHeight:options.historyHeight);
560	privateMethods.setHistorySize(object, (value.historySize!=null)?value.historySize:options.historySize);
561	privateMethods.setPrompt(object, (value.prompt!=null)?value.prompt:options.prompt);
562	privateMethods.setValue(object, (value.value!=null)?value.value:options.value, true);
563	privateMethods.setDisabled(object, (value.disabled!=null)?value.disabled:options.disabled);
564
565	privateMethods.setEventChange(object, (value.change!=null)?value.change:options.change);
566	privateMethods.setEventSubmit(object, (value.submit!=null)?value.submit:options.submit);
567	privateMethods.setEventSubmited(object, (value.submited!=null)?value.submited:options.submited);
568	privateMethods.setEventFocusChanged(object, (value.focusChanged!=null)?value.focusChanged:options.focusChanged);
569
570	properties.initialized=true;
571	},
572
573	setPrompt: function (object, value)
574	{
575	var objects=object.data('objects'),
576	options=object.data('options'),
577	properties=object.data('properties');
578
579	if(!properties.initialized \|\| options.prompt!=value)
580	{
581	options.prompt=value;
582	objects.prompt.html(options.prompt);
583	privateMethods.setObjectsWidth(object);
584	}
585	return(options.prompt);
586	},
587
588	setHistorySize: function (object, value)
589	{
590	var options=object.data('options'),
591	properties=object.data('properties');
592
593	if(!properties.initialized \|\| options.historySize!=value)
594	{
595	options.historySize=value;
596	privateMethods.updateHistory(object, null);
597	}
598	return(options.historySize);
599	},
600
601	setHistoryHeight: function (object, value)
602	{
603	var objects=object.data('objects'),
604	options=object.data('options'),
605	properties=object.data('properties');
606
607	if(!properties.initialized \|\| options.historyHeight!=value)
608	{
609	options.historyHeight=value;
610	objects.historyContainer.css(
611	{
612	height:options.historyHeight+'px',
613	'margin-top':(-options.historyHeight)+'px'
614	}
615	);
616	}
617	return(options.historyHeight);
618	},
619
620	setIsValid : function (object, value)
621	{
622	var objects=object.data('objects'),
623	properties=object.data('properties');
624
625	if(properties.isValid!=value)
626	{
627	properties.isValid=value;
628	if(properties.isValid)
629	{
630	objects.container.removeClass('ui-error');
631	objects.input.removeClass('ui-error');
632	}
633	else
634	{
635	objects.container.addClass('ui-error');
636	objects.input.addClass('ui-error');
637	}
638	}
639	return(properties.isValid);
640	},
641
642	setDisabled : function (object, value)
643	{
644	var options=object.data('options'),
645	properties=object.data('properties');
646
647	if((!properties.initialized \|\| options.disabled!=value) && (value==true \|\| value==false))
648	{
649	options.disabled=value;
650
651	}
652	return(options.disabled);
653	},
654
655	setValue : function (object, value, apply)
656	{
657	var options=object.data('options'),
658	properties=object.data('properties'),
659	objects=object.data('objects');
660
661	properties.value=value;
662
663	if(apply) objects.input.val(properties.value);
664
665	if(options.change) object.trigger('inputConsoleChange', properties.value);
666
667	return(true);
668	}, //setValue
669
670
671	setFocus : function (object, value)
672	{
673	var objects=object.data('objects'),
674	options=object.data('options'),
675	properties=object.data('properties');
676
677	if(value===true\|\|value===false)
678	{
679	if(value)
680	{
681	objects.input.focus();
682	}
683	else
684	{
685	objects.input.blur();
686	}
687
688	properties.focus=value;
689	if(options.focusChanged) object.trigger('inputConsoleFocusChanged', properties.focus);
690	}
691
692	return(properties.focus);
693	},
694
695	getFocus : function (object)
696	{
697	var objects=object.data('objects'),
698	options=object.data('options'),
699	properties=object.data('properties');
700
701	properties.focus=true;
702	objects.historyContainer.css('display', 'block');
703	privateMethods.setObjectsWidth(object);
704	if(options.focusChanged) object.trigger('inputConsoleFocusChanged', properties.focus);
705	},
706
707	lostFocus : function (object)
708	{
709	var objects=object.data('objects'),
710	options=object.data('options'),
711	properties=object.data('properties');
712
713	properties.focus=false;
714	objects.historyContainer.css('display', 'none');
715	if(options.focusChanged) object.trigger('inputConsoleFocusChanged', properties.focus);
716	},
717
718	setEventChange : function (object, value)
719	{
720	var options=object.data('options');
721
722	options.change=value;
723	object.unbind('inputConsoleChange');
724	if(value) object.bind('inputConsoleChange', options.change);
725	return(options.change);
726	},
727
728	setEventSubmit : function (object, value)
729	{
730	var options=object.data('options');
731
732	options.submit=value;
733	object.unbind('inputConsoleSubmit');
734	if(value) object.bind('inputConsoleSubmit', options.submit);
735	return(options.submit);
736	},
737
738	setEventSubmited : function (object, value)
739	{
740	var options=object.data('options');
741
742	options.submited=value;
743	object.unbind('inputConsoleSubmited');
744	if(value) object.bind('inputConsoleSubmited', options.submited);
745	return(options.submited);
746	},
747
748	setEventFocusChanged : function (object, value)
749	{
750	var options=object.data('options');
751
752	options.focusChanged=value;
753	object.unbind('inputConsoleFocusChanged');
754	if(value) object.bind('inputConsoleFocusChanged', options.focusChanged);
755	return(options.focusChanged);
756	},
757
758	keyUp : function (object, event)
759	{
760	var properties=object.data('properties'),
761	options=object.data('options'),
762	objects=object.data('objects');
763
764	if(event.keyCode==13 && // DOM_VK_ENTER
765	properties.isValid)
766	{
767	if(options.submit) object.trigger('inputConsoleSubmit', properties.value);
768	privateMethods.updateHistory(object, properties.value);
769	if(options.submited) object.trigger('inputConsoleSubmited', properties.value);
770	privateMethods.setValue(object, '', true);
771	}
772	else
773	{
774	privateMethods.setValue(object, objects.input.val(), false);
775	}
776	},
777
778	updateHistory : function (object, item)
779	{
780	var options=object.data('options'),
781	objects=object.data('objects');
782
783	if(item!='' && item!=null)
784	objects.historyList.append(
785	$('<li/>', { html: '<span class="ui-inputConsole-historyCmd">'+item+'</span>' } )
786	.bind('click', object,
787	function (event)
788	{
789	privateMethods.setValue(event.data, $(this).children('.ui-inputConsole-historyCmd').html(), true);
790	}
791	)
792	);
793
794	while(objects.historyList.children().length>options.historySize)
795	{
796	objects.historyList.children(':first').remove();
797	}
798	objects.historyContainer.scrollTop(objects.historyList.height());
799	},
800
801	updateHistoryResult : function (object, item)
802	{
803	var options=object.data('options'),
804	objects=object.data('objects');
805
806	if(item!='' && item!=null)
807	{
808	objects.historyList.children(':last').html(
809	objects.historyList.children(':last').html() + "<span class='ui-inputConsole-historyResult'>"+item+"</span>"
810	);
811	}
812
813	objects.historyListContainer.scrollTop(objects.historyList.height());
814	},
815
816	setObjectsWidth : function (object)
817	{
818	var objects=object.data('objects')
819	properties=object.data('properties');
820
821	if(objects.inputContainer.width()>0)
822	{
823	objects.input.css('width',
824	(objects.inputContainer.innerWidth()-objects.prompt.outerWidth(true)-properties.inputMargins)+'px'
825	);
826	objects.historyContainer.css(
827	{
828	width:objects.inputContainer.innerWidth()+'px',
829	'margin-left':((objects.historyContainer.width()-objects.historyContainer.outerWidth())/2)+'px'
830	}
831	);
832	}
833	}
834
835	};
836
837
838	$.fn.inputConsole = function(method)
839	{
840	if(publicMethods[method])
841	{
842	return publicMethods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
843	}
844	else if(typeof method === 'object' \|\| ! method)
845	{
846	return publicMethods.init.apply(this, arguments);
847	}
848	else
849	{
850	$.error( 'Method ' + method + ' does not exist on jQuery.inputConsole' );
851	}
852	} // $.fn.inputConsole
853
854	}
855	)(jQuery);

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

Download in other formats: