CSS & JavaScript Toolbox / 9.3

CSS & JavaScript Toolbox v9.3

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

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

583 lines 13.2 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	this.popupTimer = null;
221
222	/**
223	*
224	*
225	*
226	*
227	*/
228	this.targetElement = null;
229
230	/**
231	*
232	*
233	*
234	*
235	*/
236	this._onmouseenter = function() {
237	var cbMouseOut = null;
238	// Clear time out in case the mouse is out and entered again.
239	// By mean don't close dialog if the mouse is out and quickly back again!
240	clearTimeout(this.popupTimer);
241	// Process only if target element is not visible yet.
242	// This condition prevent Shaking!
243	if (this.targetElement.css('display') == 'none') {
244	// Don't show the popup immediately when the mouse come over the button.
245	// As our move the mouse and didnt decide yest which popup to open.
246	// Stay for a while to make sure that this popup is desirable.
247	this.popupTimer = setTimeout($.proxy(this.showPopup, this), 100);
248	cbMouseOut = $.proxy(this._onmouseout, this);
249	// Hide Popup if mouse out from button or the popup form!
250	this.jButton.bind('mouseout.CJTButtonTouchMouseOut', cbMouseOut);
251	this.targetElement.bind('mouseout.CJTButtonTouchMouseOut', cbMouseOut);
252	}
253	}
254
255	/**
256	*
257	*
258	*
259	*
260	*/
261	this._onmouseout = function(event) {
262	// In all cases just clear the timeout timer.
263	// It has no effect if the popup is already opened.
264	// But it has effect if the Popup is not opened yet.
265	clearTimeout(this.popupTimer);
266	// Don't close the dialg once get out but give it a break!
267	this.popupTimer = setTimeout($.proxy(function() {
268	// Is the mouse still over button?
269	var isOverButton = (event.relatedTarget === this.jButton.get(0));
270	// Is mouse still over target element of any of its childs/descendants.
271	var isOverElement = this.targetElement.find('*').andSelf().is(event.relatedTarget);
272	// Is mouse is not over button or target element hide element and unbind events.
273	if (!isOverButton && !isOverElement) {
274	this.close();
275	}
276	}, this)
277	, 400);
278	}
279
280	/**
281	*
282	*
283	*
284	*
285	*/
286	this.ButtonPopup = function(toolbox, name, callback, params) {
287	// Set type parameters.
288	params._type = $.extend({setTargetPosition : true}, params._type);
289	// Initialize parent/prototype class.
290	this.ButtonBase(toolbox, name, callback, params);
291	// Show popup element when mouse entered button element.
292	this.jButton
293	.mouseenter($.proxy(this._onmouseenter, this))
294	.click(function() {return false;}); // Behave inactive.
295	// Prepare popup elements.
296	this.targetElement = params._type.targetElementObject ?
297	params._type.targetElement :
298	this.toolbox.jToolbox.find(params._type.targetElement)
299	// Be intelegant and don't close for just if the mouse got out
300	// Please give User a break!!
301	.mouseenter($.proxy(this._onmouseenter, this));
302	}
303
304	/**
305	* put your comment there...
306	*
307	*/
308	this.close = function() {
309	this.jButton.unbind('mouseout.CJTButtonTouchMouseOut');
310	this.targetElement.unbind('mouseout.CJTButtonTouchMouseOut').hide();
311	}
312
313	/**
314	*
315	*/
316	this.showPopup = function() {
317	var cbParams = [this.targetElement, this];
318	// Call onPopup event. If false is returned don't display the list.
319	if (this.params._type.onPopup !== undefined) {
320	var openPopup = this.params._type.onPopup.apply(this.toolbox.params.context, cbParams);
321	if (!openPopup) {
322	return false;
323	}
324	}
325	// Callback before displaying menu.
326	if ($.isFunction(this.callback)) {
327	this.fireCallback(cbParams);
328	}
329	// Display target element below button link if desired.
330	if (this.params._type.setTargetPosition) {
331	this.targetElement.css ({left : (this.jButton.position().left + 'px')})
332	}
333	// Show popup form.
334	this.targetElement.show();
335	}
336
337	} // End class.
338	// Extend ButtonBase Class.
339	this.ButtonPopup.prototype = new this.ButtonBase();
340
341	/**
342	*
343	*
344	*
345	*
346	*/
347	this.ButtonPopupList = function(toolbox, name, callback, params) {
348
349	/**
350	*
351	*
352	*
353	*
354	*/
355	this.currentValue = '';
356
357	/**
358	*
359	*
360	*
361	*
362	*/
363	this.list = null;
364
365	/**
366	*
367	*
368	*
369	*
370	*/
371	this._onlistchange = function() {
372	var list = this.list.get(0);
373	var newValue = list.options[list.selectedIndex].value;
374	var newValueClass = this.params._type.cssMap[newValue];
375	var currentClass = this.params._type.cssMap[this.currentValue];
376	if (currentClass != undefined) {
377	// Remove previous value class.
378	this.jButton.removeClass(currentClass);
379	}
380	// Add new value class.
381	this.jButton.addClass(newValueClass);
382	this.currentValue = newValue;
383	// Call list change handler.
384	this.fireCallback([event, this.params, newValue]);
385	this.targetElement.hide('fast');
386	}
387
388	/**
389	*
390	*
391	*
392	*
393	*/
394	this.ButtonPopupList = function(toolbox, name, callback, params) {
395	// Parent constructor.
396	this.ButtonPopup(toolbox, name, callback, params);
397	// Setting Popup list.
398	this.list = this.targetElement.find(params._type.listElement);
399	// Switch button class when list item is clicked.
400	this.list.change($.proxy(this._onlistchange, this));
401	// Set button initial class based on initial value.
402	this.list.find('option').each(
403	// Get option index from option value.
404	function(index, option) {
405	if (option.value == params._type.initialValue) {
406	// 1. Select value option.
407	// 2. Trigger the event to do the job just like user interaction.
408	option.parentElement.selectedIndex = index;
409	$(option.parentElement).change();
410	return;
411	}
412	}
413	)
414	}
415
416	}; // End class.
417	// Extend ButtonBase Class.
418	this.ButtonPopupList.prototype = new this.ButtonPopup();
419
420	/**
421	* jQuery Plugin interface.
422	* version 6
423	* @author Ahmed Said
424	*/
425	$.fn.CJTToolBox = function(args) {
426
427	/**
428	* Process objects list.
429	*/
430	return this.each(
431
432	function() {
433
434	// If first time to be called for this element
435	// create new CJToolBox object for the this element.
436	if (this.CJTToolBox == undefined) {
437
438	/**
439	* Reference to Toolbox node element to be used inside
440	* the jquery object below.
441	*
442	* @var DOMElement
443	*/
444	var tbDOMElement = this;
445
446	/**
447	* CJToolbox class.
448	*
449	* The purpose of this class is to manage links/buttons effects
450	* and dispatch the call to speicifc handler. This is great for SOC.
451	*
452	* version 6
453	* @author Ahmed Said
454	*/
455	var CJTToolBox = {
456
457	/**
458	*
459	*
460	*
461	*
462	*/
463	buttons : {},
464
465	/**
466	*
467	*
468	*
469	*
470	*/
471	jToolbox : $(tbDOMElement),
472
473	/**
474	* Every toolbox may has a position value added as a css class.
475	*
476	* CSS position class name schema is : cjtb-position-[POSITION].
477	*
478	* @var string
479	*/
480	position : 'default',
481
482	/**
483	* Object options.
484	*
485	* Not all options are known yet.
486	*
487	* @var object
488	*/
489	params : {
490	defaultHandler : null,
491	disabledClass : 'cjttbs-disabled',
492	linkClass : 'cjt-tb-link',
493	loadingClass : 'cjttbs-loading'
494	},
495
496	/**
497	* put your comment there...
498	*
499	*/
500	add : function(name, data) {
501	// Get button class from type var.
502	var buttonType = (data.type != undefined) ? data.type : '';
503	var buttonClassName = 'Button' + buttonType;
504	var buttonClass = CJTToolBoxNS[buttonClassName];
505	// Create button object.
506	var button = CJTToolBox.buttons[name] = new buttonClass();
507	// If no params object passed create empty one.
508	data.params = ((data.params == undefined) ? {} : data.params);
509	// Initialize object must be done through custom constructor.
510	// Object can't initialize itself because it'll produce an error
511	// when created for inheritance.
512	// Custom constuctor is the same name as the class.
513	button[buttonClassName](CJTToolBox, name, data.callback, data.params);
514	return button;
515	},
516
517	/**
518	* Enable or Disable Toolbox user interactions.
519	*
520	* @param enabled
521	*/
522	enable : function(enabled) {
523	$.each(this.buttons, $.proxy(
524	function(index, button) {
525	button.enable(enabled);
526	}, this)
527	);
528	// Chaining.
529	return this;
530	},
531
532	/**
533	* Initialize Toolbox object.
534	*
535	* @return void
536	*/
537	init : function() {
538	// Initialize object properties.
539	if (position = tbDOMElement.className.match(/cjtb-position-(\w+)/)) {
540	// If has a position class take it.
541	this.position = position[1];
542	}
543	// Get buttons data copy.
544	var handlers = $.extend({}, args.handlers);
545	// Store other parameters.
546	CJTToolBox.params = $.extend(CJTToolBox.params, args);
547	// Create Toolbox buttons.
548	$.each(handlers,
549	function(name, data) {
550	CJTToolBox.add(name, data);
551	}
552	)
553	},
554
555	/**
556	*
557	*/
558	remove : function(name) {
559	// Get button.
560	var button = this.buttons[name];
561	// Remove button node.
562	button.jButton.remove();
563	// Delete from buttons list.
564	delete this.buttons[name];
565	// Chaining.
566	return this;
567	}
568
569	}; // End Toolbox class.
570
571	// Construct new ToolBox object.
572	CJTToolBox.init();
573	// Store DOMNode CJTToolBox Reference.
574	this.CJTToolBox = CJTToolBox;
575
576	} // end if(this.CJTToolBox == undefined)
577	else {
578	// Set options or dispatch methods.
579	}
580	}
581	); // End .each
582	} // End .fn
583	})(jQuery);