CSS & JavaScript Toolbox / 11.9

CSS & JavaScript Toolbox v11.9

css-javascript-toolbox / framework / js / ui / jquery.toolbox / jquery.toolbox.js

jquery.toolbox.js in CSS & JavaScript Toolbox 11.9, at framework/js/ui/jquery.toolbox/jquery.toolbox.js

728 lines 16.1 KB

Raw Download Zip

1	/**
2	* @version $ Id; cjttoolbox.jquery.js 21-03-2012 03:22:10 Ahmed Said $
3	*
4	* CJT Toolbox jQuery Plugin.
5	*/
6
7	/*
8	* JQuery wrapper for the CJTToolBox Plugin.
9	*/
10	var CJTToolBoxNS = new (function ($) {
11
12	/**
13	*
14	*
15	*
16	*
17	*/
18	this.ButtonBase = function() {
19
20	/**
21	*
22	*
23	*
24	*
25	*/
26	this.callback = null;
27
28	/**
29	*
30	*
31	*
32	*
33	*/
34	this.cssClass = null;
35
36	/**
37	*
38	*
39	*
40	*/
41	this.enabled = false;
42
43	/**
44	*
45	*
46	*
47	*
48	*/
49	this.jButton = null;
50
51	/**
52	*
53	*
54	*
55	*
56	*/
57	this.name = '';
58
59	/**
60	*
61	*
62	*
63	*
64	*/
65	this.params = {};
66
67	/**
68	*
69	*
70	*
71	*
72	*/
73	this.toolbox = null;
74
75	/**
76	*
77	*
78	*
79	*
80	*/
81	this.ButtonBase = function(toolbox, name, callback, params) {
82	// Initiliaze object properties.
83	this.toolbox = toolbox;
84	this.name = name;
85	this.callback = callback;
86	// Set params with defaults.
87	this.params = $.extend({enable : true}, params);
88	// Get jQuery object of button node.
89	this.cssClass = '.cjttbl-' + name;
90	this.jButton = this.toolbox.jToolbox.find(this.cssClass);
91	}
92
93	/**
94	*
95	*
96	*
97	*/
98	this.enable = function(enable) {
99	if (enable) {
100	// Enable button twice duplicate event handler.
101	if (!this.enabled) {
102	this.jButton.bind('click.CJTButton', null, $.proxy(this._onclick, this));
103	this.jButton.unbind('click.cjtbe-disabled');
104	this.jButton.removeClass(this.toolbox.params.disabledClass);
105	this.enabled = true;
106	}
107	}
108	else {
109	// Don't dispatch handler when disabled.
110	this.jButton.unbind('click.CJTButton');
111	// For link to act inactive.
112	this.jButton.bind('click.cjtbe-disabled', (function() {return false;}));
113	this.jButton.addClass(this.toolbox.params.disabledClass);
114	this.enabled = false;
115	}
116	// Chaining.
117	return this;
118	}
119
120	/**
121	*
122	*/
123	this.fireCallback = function(params) {
124	// Proxy to button callback function.
125	var proxyCallback = $.proxy(
126	function(params) {
127	return this.callback.apply(this.toolbox.params.context, params)
128	}
129	, this);
130	// Fire callback function cna change context to user specified.
131	return proxyCallback(params);
132	}
133
134	/**
135	*
136	*
137	*
138	*
139	*/
140	this.isEnabled = function() {
141	return this.enabled;
142	}
143
144	}; // End class.
145
146	/**
147	*
148	*
149	*
150	*
151	*/
152	this.Button = function(toolbox, name, callback, params) {
153
154	/**
155	* Event handler for this.params.linkClass.click() event.
156	*
157	* The click event is used to dispatch the call to the link handler.
158	*/
159	this._onclick = function(event) {
160	// All event handlers required toolbox reference to be in params var.
161	var params = $.extend({toolbox : this.toolbox}, this.params);
162	// Diaptch button event handler.
163	this.fireCallback([event, params]);
164	// For links to behave inactive (don't put # AND auto scroll to the button).
165	return false;
166	}
167
168	/**
169	*
170	*
171	*
172	*
173	*/
174	this.Button = function(toolbox, name, callback, params) {
175	// Parent constructor.
176	this.ButtonBase(toolbox, name, callback, params);
177	// Enable/Disable Button events.
178	this.enable(this.params.enable);
179	}
180
181	/**
182	*
183	*
184	*
185	*/
186	this.loading = function(load, enable) {
187	// If enable is undefined then if load = true then enable = false and vise versa.
188	enable = ((enable == undefined) ? (!load) : enable);
189	this.enable(enable);
190	// If enabled add link text if disabled remove it and take tmp copy.
191	if (load) {
192	// Get text copy.
193	this.jButton.get(0).cjttb_temp_text = this.jButton.text();
194	// Remove text.
195	this.jButton.text('');
196	}
197	else {
198	this.jButton.text(this.jButton.get(0).cjttb_temp_text);
199	}
200	// Show Loading.
201	var method = load ? 'addClass' : 'removeClass';
202	this.jButton[method](this.toolbox.params.loadingClass);
203	}
204
205	} // End class.
206	// Extend ButtonBase Class.
207	this.Button.prototype = new this.ButtonBase();
208
209	/**
210	*
211	*
212	*
213	*
214	*/
215	this.ButtonPopup = function(toolbox, name, callback, params) {
216
217
218	/**
219	*
220	*/
221	this.enabled = true;
222
223	/**
224	*
225	*/
226	this.popupTimer = null;
227
228	/**
229	*
230	*
231	*
232	*
233	*/
234	this.targetElement = null;
235
236	/**
237	*
238	*
239	*
240	*
241	*/
242	this._onmouseenter = function() {
243	var cbMouseOut = null;
244
245	if (!this.enabled) {
246
247	return;
248	}
249
250	// Clear time out in case the mouse is out and entered again.
251	// By mean don't close dialog if the mouse is out and quickly back again!
252
253	// Process only if target element is not visible yet.
254	// This condition prevent Shaking!
255	if (this.targetElement.css('display') == 'none') {
256	// Don't show the popup immediately when the mouse come over the button.
257	// As our move the mouse and didnt decide yest which popup to open.
258	// Stay for a while to make sure that this popup is desirable.
259	this.showPopup()
260	cbMouseOut = $.proxy(this._onmouseout, this);
261	// Hide Popup if mouse out from button or the popup form!
262	this.jButton.bind('mouseout.CJTButtonTouchMouseOut', cbMouseOut);
263	this.targetElement.bind('mouseout.CJTButtonTouchMouseOut', cbMouseOut);
264	}
265	}
266
267	/**
268	*
269	*
270	*
271	*
272	*/
273	this._onmouseout = function(event) {
274	// In all cases just clear the timeout timer.
275	// It has no effect if the popup is already opened.
276	// But it has effect if the Popup is not opened yet.
277	//clearTimeout(this.popupTimer);
278	// Don't close the dialg once get out but give it a break!
279	// Is the mouse still over button?
280	var isOverButton = (event.relatedTarget === this.jButton.get(0));
281	// Is mouse still over target element of any of its childs/descendants.
282	var isOverElement = this.targetElement.find('*').andSelf().is(event.relatedTarget);
283	// Is mouse is not over button or target element hide element and unbind events.
284	if (!isOverButton && !isOverElement) {
285	this.close();
286	}
287	}
288
289	/**
290	*
291	*
292	*
293	*
294	*/
295	this.ButtonPopup = function(toolbox, name, callback, params) {
296	// Set type parameters.
297	params._type = $.extend({setTargetPosition : true}, params._type);
298	// Initialize parent/prototype class.
299	this.ButtonBase(toolbox, name, callback, params);
300	// Show popup element when mouse entered button element.
301	this.jButton
302	.mouseenter($.proxy(this._onmouseenter, this))
303	.click(function() {return false;}); // Behave inactive.
304	// Prepare popup elements.
305	this.targetElement = params._type.targetElementObject ?
306	params._type.targetElement :
307	this.toolbox.jToolbox.find(params._type.targetElement)
308	// Be intelegant and don't close for just if the mouse got out
309	// Please give User a break!!
310	.mouseenter($.proxy(this._onmouseenter, this));
311	}
312
313	/**
314	* put your comment there...
315	*
316	*/
317	this.close = function() {
318	this.jButton.unbind('mouseout.CJTButtonTouchMouseOut');
319	this.targetElement.unbind('mouseout.CJTButtonTouchMouseOut').hide();
320	}
321
322	/**
323	*
324	*/
325	this.showPopup = function() {
326	var cbParams = [this.targetElement, this];
327	// Call onPopup event. If false is returned don't display the list.
328	if (this.params._type.onPopup !== undefined) {
329	var openPopup = this.params._type.onPopup.apply(this.toolbox.params.context, cbParams);
330	if (!openPopup) {
331	return false;
332	}
333	}
334	// Callback before displaying menu.
335	if ($.isFunction(this.callback)) {
336	this.fireCallback(cbParams);
337	}
338	// Display target element below button link if desired.
339	if (this.params._type.setTargetPosition) {
340	this.targetElement.css ({left : (this.jButton.position().left + 'px')})
341	}
342	// Show popup form.
343	this.targetElement.show();
344	}
345
346	} // End class.
347	// Extend ButtonBase Class.
348	this.ButtonPopup.prototype = new this.ButtonBase();
349
350	/**
351	*
352	*
353	*
354	*
355	*/
356	this.ButtonClickedPopup = function(toolbox, name, callback, params)
357	{
358
359	/**
360	*
361	*/
362	this.popupTimer = null;
363
364	/**
365	*
366	*
367	*
368	*
369	*/
370	this.targetElement = null;
371
372	/**
373	* put your comment there...
374	*
375	*/
376	var _onclickbutton = function()
377	{
378
379	if (this.targetElement.css('display') == 'none')
380	{
381	this.showPopup();
382	}
383	else
384	{
385	this.close();
386	}
387
388	return false;
389	};
390
391	/**
392	* put your comment there...
393	*
394	*/
395	var _onclickpopupbutton = function()
396	{
397
398	this.close();
399
400	return false;
401	};
402
403	/**
404	*
405	*
406	*
407	*
408	*/
409	this.ButtonClickedPopup = function(toolbox, name, callback, params)
410	{
411	// Set type parameters.
412	params._type = $.extend(
413	{
414	setTargetPosition : true,
415	scope : toolbox.jToolbox
416	},
417	params._type);
418
419	// Initialize parent/prototype class.
420	this.ButtonBase(toolbox, name, callback, params);
421
422	// Show popup element when mouse entered button element.
423	this.jButton.click($.proxy(_onclickbutton, this)
424
425	); // Behave inactive.
426
427	// Prepare popup elements.
428	this.targetElement = params._type.targetElementObject ?
429	params._type.targetElement :
430	params._type.scope.find(params._type.targetElement);
431
432	// Close when popup clicked
433	this.targetElement.find('.' + this.toolbox.params.linkClass).click($.proxy(_onclickpopupbutton, this));
434	}
435
436	/**
437	* put your comment there...
438	*
439	*/
440	this.close = function()
441	{
442	this.targetElement.hide();
443	}
444
445	/**
446	*
447	*/
448	this.showPopup = function()
449	{
450
451	var cbParams = [this.targetElement, this];
452
453	// Call onPopup event. If false is returned don't display the list.
454	if (this.params._type.onPopup !== undefined)
455	{
456
457	var openPopup = this.params._type.onPopup.apply(this.toolbox.params.context, cbParams);
458
459	if (!openPopup)
460	{
461	return false;
462	}
463	}
464
465	// Callback before displaying menu.
466	if ($.isFunction(this.callback))
467	{
468	this.fireCallback(cbParams);
469	}
470
471	// Display target element below button link if desired.
472	if (this.params._type.setTargetPosition)
473	{
474	this.targetElement.css ({left : (this.jButton.position().left + 'px')})
475	}
476
477	// Show popup form.
478	this.targetElement.show();
479	}
480
481	} // End class.
482
483	// Extend ButtonBase Class.
484	this.ButtonClickedPopup.prototype = new this.ButtonBase();
485
486	/**
487	*
488	*
489	*
490	*
491	*/
492	this.ButtonPopupList = function(toolbox, name, callback, params) {
493
494	/**
495	*
496	*
497	*
498	*
499	*/
500	this.currentValue = '';
501
502	/**
503	*
504	*
505	*
506	*
507	*/
508	this.list = null;
509
510	/**
511	*
512	*
513	*
514	*
515	*/
516	this._onlistchange = function() {
517	var list = this.list.get(0);
518	var newValue = list.options[list.selectedIndex].value;
519	var newValueClass = this.params._type.cssMap[newValue];
520	var currentClass = this.params._type.cssMap[this.currentValue];
521	if (currentClass != undefined) {
522	// Remove previous value class.
523	this.jButton.removeClass(currentClass);
524	}
525	// Add new value class.
526	this.jButton.addClass(newValueClass);
527	this.currentValue = newValue;
528	// Call list change handler.
529	this.fireCallback([event, this.params, newValue]);
530	this.targetElement.hide('fast');
531	}
532
533	/**
534	*
535	*
536	*
537	*
538	*/
539	this.ButtonPopupList = function(toolbox, name, callback, params) {
540	// Parent constructor.
541	this.ButtonPopup(toolbox, name, callback, params);
542	// Setting Popup list.
543	this.list = this.targetElement.find(params._type.listElement);
544	// Switch button class when list item is clicked.
545	this.list.change($.proxy(this._onlistchange, this));
546	// Set button initial class based on initial value.
547	this.list.find('option').each(
548	// Get option index from option value.
549	function(index, option) {
550	if (option.value == params._type.initialValue) {
551	// 1. Select value option.
552	// 2. Trigger the event to do the job just like user interaction.
553	option.parentElement.selectedIndex = index;
554	$(option.parentElement).change();
555	return;
556	}
557	}
558	)
559	}
560
561	}; // End class.
562	// Extend ButtonBase Class.
563	this.ButtonPopupList.prototype = new this.ButtonPopup();
564
565	/**
566	* jQuery Plugin interface.
567	* version 6
568	* @author Ahmed Said
569	*/
570	$.fn.CJTToolBox = function(args) {
571
572	/**
573	* Process objects list.
574	*/
575	return this.each(
576
577	function() {
578
579	// If first time to be called for this element
580	// create new CJToolBox object for the this element.
581	if (this.CJTToolBox == undefined) {
582
583	/**
584	* Reference to Toolbox node element to be used inside
585	* the jquery object below.
586	*
587	* @var DOMElement
588	*/
589	var tbDOMElement = this;
590
591	/**
592	* CJToolbox class.
593	*
594	* The purpose of this class is to manage links/buttons effects
595	* and dispatch the call to speicifc handler. This is great for SOC.
596	*
597	* version 6
598	* @author Ahmed Said
599	*/
600	var CJTToolBox = {
601
602	/**
603	*
604	*
605	*
606	*
607	*/
608	buttons : {},
609
610	/**
611	*
612	*
613	*
614	*
615	*/
616	jToolbox : $(tbDOMElement),
617
618	/**
619	* Every toolbox may has a position value added as a css class.
620	*
621	* CSS position class name schema is : cjtb-position-[POSITION].
622	*
623	* @var string
624	*/
625	position : 'default',
626
627	/**
628	* Object options.
629	*
630	* Not all options are known yet.
631	*
632	* @var object
633	*/
634	params : {
635	defaultHandler : null,
636	disabledClass : 'cjttbs-disabled',
637	linkClass : 'cjt-tb-link',
638	loadingClass : 'cjttbs-loading'
639	},
640
641	/**
642	* put your comment there...
643	*
644	*/
645	add : function(name, data) {
646	// Get button class from type var.
647	var buttonType = (data.type != undefined) ? data.type : '';
648	var buttonClassName = 'Button' + buttonType;
649	var buttonClass = CJTToolBoxNS[ buttonClassName ];
650	// Create button object.
651	var button = CJTToolBox.buttons[name] = new buttonClass();
652	// If no params object passed create empty one.
653	data.params = ((data.params == undefined) ? {} : data.params);
654	// Initialize object must be done through custom constructor.
655	// Object can't initialize itself because it'll produce an error
656	// when created for inheritance.
657	// Custom constuctor is the same name as the class.
658	button[buttonClassName](CJTToolBox, name, data.callback, data.params);
659	return button;
660	},
661
662	/**
663	* Enable or Disable Toolbox user interactions.
664	*
665	* @param enabled
666	*/
667	enable : function(enabled) {
668	$.each(this.buttons, $.proxy(
669	function(index, button) {
670	button.enable(enabled);
671	}, this)
672	);
673	// Chaining.
674	return this;
675	},
676
677	/**
678	* Initialize Toolbox object.
679	*
680	* @return void
681	*/
682	init : function() {
683	// Initialize object properties.
684	if (position = tbDOMElement.className.match(/cjtb-position-(\w+)/)) {
685	// If has a position class take it.
686	this.position = position[1];
687	}
688	// Get buttons data copy.
689	var handlers = $.extend({}, args.handlers);
690	// Store other parameters.
691	CJTToolBox.params = $.extend(CJTToolBox.params, args);
692	// Create Toolbox buttons.
693	$.each(handlers,
694	function(name, data) {
695	CJTToolBox.add(name, data);
696	}
697	)
698	},
699
700	/**
701	*
702	*/
703	remove : function(name) {
704	// Get button.
705	var button = this.buttons[name];
706	// Remove button node.
707	button.jButton.remove();
708	// Delete from buttons list.
709	delete this.buttons[name];
710	// Chaining.
711	return this;
712	}
713
714	}; // End Toolbox class.
715
716	// Construct new ToolBox object.
717	CJTToolBox.init();
718	// Store DOMNode CJTToolBox Reference.
719	this.CJTToolBox = CJTToolBox;
720
721	} // end if(this.CJTToolBox == undefined)
722	else {
723	// Set options or dispatch methods.
724	}
725	}
726	); // End .each
727	} // End .fn
728	})(jQuery);