https://www.rural-electrician.ru/plugins/content/ja_tabs/ja_tabs.js

1/*------------------------------------------------------------------------
2# JA Nickel for Joomla 1.5.x - Version 1.0 - Licence Owner jSharing.com
3# ------------------------------------------------------------------------
4# Copyright (C) 2004-2008 J.O.O.M Solutions Co., Ltd. All Rights Reserved.
5# @license - Copyrighted Commercial Software
6# Author: J.O.O.M Solutions Co., Ltd
7# Websites:  http://jsharing.com -  http://www.joomlancers.com
8# This file may not be redistributed in whole or significant part.
9-------------------------------------------------------------------------*/
10var wrap_W = 0;
11var JATabs = new Class({	
12	initialize: function(element, options) {
13		this.options = Object.extend({
14			position:			'top',
15			width:				'100%',
16			height:				'auto',
17			skipAnim:			false,
18			animType:			'animMoveHor',
19			mouseType:			'mouseover',
20			changeTransition:	Fx.Transitions.Pow.easeIn,
21			duration:			1000,
22			mouseOverClass:		'hover',
23			activateOnLoad:		'first',
24			useAjax: 			false,
25			ajaxUrl: 			'',
26			ajaxOptions: 		'get',
27			ajaxLoadingText: 	'Loading...',
28			fixheight :			 1,
29			fixwidth :			 1,
30			colors: ''
31		}, options || {});
32
33		this.el = $(element);
34		this.elid = element;				
35				
36		this._W = this.el.offsetWidth.toInt();
37		wrap_W = this._W;
38		
39		if(this.options.height=='auto'){
40			this.options.fixheight = 0;
41		}
42		//tab colors
43		if($type(this.options.colors)=='string'){
44			regex = /(\d*):([^,]*)/gi;
45			var colors = [];
46			while((result = regex.exec (this.options.colors)))
47				colors[result[1]]=result[2];
48			
49			this.options.colors = colors;
50		}
51		
52		//this._H = this.el.getParent().getStyle('height').toInt();
53		this._H = this.el.getParent().offsetHeight.toInt();		
54		this.panels = $$('#' + this.elid + ' .ja-tab-content');
55		this.panelwrap = $E('.ja-tab-panels-'+this.options.position, this.el);	
56				
57		this.divtitles = $$('#' + this.elid + ' .ja-tabs-title-'+this.options.position);
58		
59		this.titles = $$('#' + this.elid + ' div.ja-tabs-title-'+this.options.position+' ul li');		
60
61		//add 
62		if (this.panels.length <= 1)
63		{
64			this.panels.setStyle ('position', 'relative');
65			return;
66		}	
67		
68		this.titles.each(function(item,i) {
69			var color = item.getElement('h3').className;
70			if (!color) color=this.options.colors[i];
71			item._color = '';
72			if (color) {
73				item.addClass (color);
74				item._color = color;
75			}
76			
77			item.addEvent(this.options.mouseType, function(){
78					if (item.className.indexOf('active') != -1)	return;
79					
80					item.removeClass(this.options.mouseOverClass);
81					this.activate(item,  this.options.skipAnim);						
82				}.bind(this)
83			);
84			
85			item.addEvent('mouseover', function() {
86				if(item != this.activeTitle)
87				{
88					item.addClass(this.options.mouseOverClass);
89				}
90			}.bind(this));
91			
92			item.addEvent('mouseout', function() {
93				if(item != this.activeTitle)
94				{
95					item.removeClass(this.options.mouseOverClass);
96					
97				}
98			}.bind(this));
99		}.bind(this));
100		
101
102		this.titles[0].addClass('first');
103		this.titles[this.titles.length-1].addClass('last');		
104		this.titles[0].addClass ('active');
105		
106		//height of title (for left, right, bottom)
107		//this.tabHeight = $E('.ja-tabs-title-'+this.options.position, this.el);
108		this.tabHeight = this.el.getElement('.ja-tabs-title-'+this.options.position);
109		
110		//Panel contents
111		this.minHeight = 0;
112		if((this.options.position=='left') || (this.options.position=='right')){
113	      	this.minHeight = this.tabHeight.offsetHeight;	
114		    if (!this.options.fixheight ){				
115				this.divtitles.setStyle ('height', this.minHeight);														
116			}							
117	    }		
118     
119		/* Set height for DIV tabswrap and position Top*/						
120		if (!this.options.fixheight )
121		{			
122			this.panelwrap.setStyle ('height', this.minHeight+10);
123		}	
124		else{
125			this.panelwrap.setStyle ('height', this._H - this.titles[0].offsetHeight.toInt());	
126		}												
127
128		/* Set set width for left/right tabs*/	
129		if((this.options.position=='left') || (this.options.position=='right')){									
130			var maxw = eval(this._W - this.divtitles[0].offsetWidth.toInt() -10);
131			this.panelwrap.setStyle ('width', maxw);
132		}		
133				
134		this.titles.each(function(el,i){
135			el.panel = this.panels[i];
136			el.panel._idx = i;
137		},this);		
138				
139		if (this.options.skipAnim) this.options.animType = 'animNone';
140		
141		//Set default type for animation if needed
142		if ((eval('typeof '+this.options.animType) == 'undefined') || (eval('$type ('+this.options.animType+')') != 'class')){
143			this.options.animType = 'animFade';
144		}
145		
146		//Create animation object
147		this.anim = eval ('new '+this.options.animType + '(this)');
148
149		if(this.options.activateOnLoad != 'none')
150		{
151			if(this.options.activateOnLoad == 'first')
152			{
153				this.activate(this.titles[0],  true);				
154			}
155			else
156			{
157				this.activate(this.options.activateOnLoad, true);	
158			}
159		}		
160				
161		if (window.ie) this.firstload = true;
162		window.addEvent('resize', this.resize.bind(this));
163		
164	},
165	
166	resize: function () {
167			
168		/* Set set width for left/right tabs*/	
169		this._W = this.el.offsetWidth;
170		
171		maxW = this._W;
172			
173    	if((this.options.position=='left') || (this.options.position=='right')){			
174	      	this.minHeight = this.tabHeight.offsetHeight + 10;		
175		    if (!this.options.fixheight ){				
176				this.divtitles.setStyle ('height', Math.max(this.minHeight,this.activeTitle.panel.offsetHeight+10));														
177				}	
178				maxW = this._W - this.divtitles[0].offsetWidth.toInt() -10;	
179				this.panelwrap.setStyle('width', maxW);  
180	    }		
181		  
182		if(wrap_W!=this._W){this.anim.reposition();};
183	},
184	
185	activate: function(tab, skipAnim){
186	    if (this.options.useAjax) this.cancelAjax();
187		 
188		  if (this.options.useAjax && !tab.loaded) {
189					this._getContent(tab);
190	        return;	     
191	    }
192
193		if(! $defined(skipAnim))
194		{
195			skipAnim = false;
196		}
197		if($type(tab) == 'string') 
198		{
199			myTab = $$('#' + this.elid + ' ul li').filterByAttribute('title', '=', tab)[0];
200			tab = myTab;
201		}
202		
203		if($type(tab) == 'element')
204		{
205			//add 5
206			var newTab = tab.panel;
207			var curTab = this.activePanel;
208			this.activePanel = newTab;
209			
210			this.anim.move (curTab, newTab, skipAnim);
211			
212			this.titles.removeClass('active');
213			tab.addClass('active');
214			if (this.activeTitle && this.activeTitle._color) this.panelwrap.removeClass (this.activeTitle._color);
215			if (tab._color) this.panelwrap.addClass (tab._color);
216			/*
217			if (this.activeTitle ){
218				this.activeTitle.className = this.activeTitle.className.replace(new RegExp("active"), "");
219			}
220			tab.className = tab.className.replace(new RegExp(this.options.mouseOverClass), "");
221			tab.className += 'active';
222			*/
223			
224			this.activeTitle = tab;
225			
226			if (!this.options.fixheight) {
227				if (skipAnim) {
228					this.panelwrap.setStyle('height', Math.max(this.minHeight,this.activeTitle.panel.offsetHeight+10));
229					if((this.options.position=='left') || (this.options.position=='right')){
230						this.tabHeight.setStyle('height', Math.max(this.minHeight, this.panelwrap.offsetHeight));
231					}
232				} else {
233					new Fx.Style(this.panelwrap, 'height',{duration:this.options.duration}).start(this.panelwrap.offsetHeight, Math.max(this.minHeight,this.activeTitle.panel.offsetHeight+10));
234	
235					if((this.options.position=='left') || (this.options.position=='right')){
236						new Fx.Style(this.tabHeight, 'height',{duration:this.options.duration}).start(this.tabHeight.offsetHeight, Math.max(this.minHeight, this.activeTitle.panel.offsetHeight));					
237					}
238				}
239			}
240		}	
241		
242	},
243	cancelAjax: function() {
244	  if (this.loadingTab) {
245	    	this.tabRequest.cancel();
246	      	this.loadingTab.imgLoading.remove();
247	  		this.tabRequest = null;
248	  		this.loadingTab = null;
249	    }
250  	},
251	
252	_getContent: function(tab){
253	  
254		this.loadingTab = tab;
255		
256		var h3 = $(this.loadingTab.getElementsByTagName('H3')[0]);
257		var imgloading = new Element('img', {'src': 'plugins/content/ja_tabs/loading.gif','width': 13});
258		if (this.options.position=='right') imgloading.inject(h3,'top');
259		else imgloading.inject(h3);
260		this.loadingTab.imgLoading = imgloading;
261		this.tabRequest = new Ajax(this.options.ajaxUrl+ '&tab=' + this.loadingTab.getProperty('title'), {method:this.options.ajaxOptions,onComplete:this.update.bind(this)});
262		this.tabRequest.request();
263		
264	},
265	update: function (text) {
266		this.loadingTab.loaded = true;
267		this.loadingTab.panel.subpanel = $E('.ja-tab-subcontent', this.loadingTab.panel);		
268		this.loadingTab.panel.subpanel.innerHTML = text;
269		this.loadingTab.imgLoading.remove();
270		var tab = this.loadingTab;
271		this.tabRequest = null;
272		this.loadingTab = null;
273		this.anim.reposition();
274		this.activate (tab);
275		
276	}
277});
278var animNone = new Class ({
279	initialize: function(tabwrap) {
280		this.options = tabwrap.options || {};
281		this.tabwrap = tabwrap;
282
283		this.tabwrap.panels.setStyle('position', 'absolute');
284		this.tabwrap.panels.setStyle('left', 0);
285	},
286
287	move: function (curTab, newTab, skipAnim) {
288		this.tabwrap.panels.setStyle('display', 'none');
289		newTab.setStyle('display', 'block');
290	}
291});
292
293var animFade = new Class ({
294	initialize: function(tabwrap) {
295		this.options = tabwrap.options || {};
296		this.tabwrap = tabwrap;
297		this.changeEffect = new Fx.Elements(this.tabwrap.panels, {duration: this.options.duration});
298		this.tabwrap.panels.setStyles({'opacity':0,'width':'100%'});

299	},
300
301	move: function (curTab, newTab, skipAnim) {
302		if(this.options.changeTransition != 'none' && skipAnim==false)
303		{
304			if (curTab)
305			{
306				curOpac = curTab.getStyle('opacity');
307				var changeEffect = new Fx.Style(curTab, 'opacity', {duration: this.options.duration, transition: this.options.changeTransition});
308				changeEffect.stop();
309				changeEffect.start(curOpac,0);
310			}
311			curOpac = newTab.getStyle('opacity');
312			var changeEffect = new Fx.Style(newTab, 'opacity', {duration: this.options.duration, transition: this.options.changeTransition});
313			changeEffect.stop();
314			changeEffect.start(curOpac,1);
315		} else {
316			if (curTab) curTab.setStyle('opacity', 0);
317			newTab.setStyle('opacity', 1);
318		}
319	},
320	reposition: function() {
321	    if (this.tabwrap.activePanel) {
322			this.changeEffect.stop();
323
324			for (var i=this.tabwrap.activePanel._idx-1;i>=0;i--) {
325			    this.tabwrap.panels[i].setStyle('opacity',0);
326			}
327		    for (i=this.tabwrap.activePanel._idx+1;i<this.tabwrap.panels.length;i++) {
328		       this.tabwrap.panels[i].setStyle('opacity',0);
329		     }		     		   
330	    }
331	}
332});
333
334var animMoveHor = new Class ({
335	initialize: function(tabwrap) {
336		this.options = tabwrap.options || {};
337		this.tabwrap = tabwrap;
338		this.changeEffect = new Fx.Elements(this.tabwrap.panels, {duration: this.options.duration});
339	    var left = 0;
340	    this.tabwrap.panels.each (function (panel) {
341	      panel.setStyle('left', left);
342	      left += panel.offsetWidth;
343	    });
344	    this.tabwrap.panels.setStyle('top', 0);
345	},
346
347	move: function (curTab, newTab, skipAnim) {
348		if(this.options.changeTransition != 'none' && !skipAnim)
349		{
350			this.changeEffect.stop();
351			var obj = {};
352			var offset = newTab.offsetLeft.toInt();
353			i=0;			
354			
355			this.tabwrap.panels.each(function(panel) {
356				obj[i++] = {'left':[panel.offsetLeft.toInt(), panel.offsetLeft.toInt() - offset] };			
357			});
358			
359			this.changeEffect.start(obj);
360		}
361	},
362	reposition: function() {
363	    if (this.tabwrap.activePanel) {
364			this.changeEffect.stop();
365	       	var left = this.tabwrap.activePanel.offsetLeft;
366		    for (var i=this.tabwrap.activePanel._idx-1;i>=0;i--) {
367		       left -= this.tabwrap.panels[i].offsetWidth;
368		       this.tabwrap.panels[i].setStyle('left',left);
369		     }
370	       	var left = this.tabwrap.activePanel.offsetLeft;
371		    for (i=this.tabwrap.activePanel._idx+1;i<this.tabwrap.panels.length;i++) {
372		       left += this.tabwrap.panels[i-1].offsetWidth;
373		       this.tabwrap.panels[i].setStyle('left',left);
374		     }
375	    }
376	}
377});
378
379var animMoveVir = new Class ({
380	initialize: function(tabwrap) {
381		this.options = tabwrap.options || {};
382		this.tabwrap = tabwrap;
383		this.changeEffect = new Fx.Elements(this.tabwrap.panels, {duration: this.options.duration});
384	
385	    var top = 0;
386	    this.tabwrap.panels.each (function (panel) {
387	      panel.setStyle('top', top);     
388	      top += Math.max(panel.offsetHeight,  panel.getParent().getParent().offsetHeight);
389	    });
390	    this.tabwrap.panels.setStyle('left', 0);
391	},
392	move: function (curTab, newTab, skipAnim) {
393		if(this.options.changeTransition != 'none' && skipAnim==false)
394		{
395      //reposition newTab
396      
397			this.changeEffect.stop();
398			var obj = {}; 
399			var offset = newTab.offsetTop.toInt();
400			i=0;
401			this.tabwrap.panels.each(function(panel) {
402				obj[i++] = {'top':[panel.offsetTop.toInt(), panel.offsetTop.toInt() - offset]};			
403			});
404			this.changeEffect.start(obj);
405		}
406	},
407	reposition: function() {
408	    if (this.tabwrap.activePanel) {
409				 this.changeEffect.stop();
410	       var top = this.tabwrap.activePanel.offsetTop;
411		     for (var i=this.tabwrap.activePanel._idx-1;i>=0;i--) {
412		       top -= this.tabwrap.panels[i].offsetHeight;
413		       this.tabwrap.panels[i].setStyle('top',top-10);
414		     }
415	       var top = this.tabwrap.activePanel.offsetTop;
416		     for (i=this.tabwrap.activePanel._idx+1;i<this.tabwrap.panels.length;i++) {
417		       top += this.tabwrap.panels[i-1].offsetHeight+10;
418		       this.tabwrap.panels[i].setStyle('top',top);
419		     }
420	    }
421	}
422});