https://www.isolajava.com/skin/isola1/tabberguppy/tabberguppy.js

1
2/* ***************************** TabberGuppY pour GuppY v4.6 ******************************
3   
4   (c) Ludovic AMATHIEU - www.f5swn.fr - TabberGuppY v1.1 octobre 2012
5
6 tabberguppy est une version modifiée de tabber.js permettant l'emploi avec GuppY,
7 une sélection de la position des onglets en haut ou en bas en fonction de l'id du div tabber,
8 un aspect différent des onglets selon qu'ils sont placés en haut ou en bas,
9 la possibilité de personnaliser chaque onglet séparément.
10 
11 Voir le mode d'emploi où figure aussi le détail commenté de la feuille de style.
12 
13 tabberguppy.js est sous licence MIT.
14 
15 SOURCE du script original : tabber.js by Patrick Fitzgerald [email protected]
16
17  Documentation can be found at the following URL:
18  http://www.barelyfitz.com/projects/tabber/
19
20  License (http://www.opensource.org/licenses/mit-license.php)
21
22  Copyright (c) 2006 Patrick Fitzgerald
23
24  Permission is hereby granted, free of charge, to any person
25  obtaining a copy of this software and associated documentation files
26  (the "Software"), to deal in the Software without restriction,
27  including without limitation the rights to use, copy, modify, merge,
28  publish, distribute, sublicense, and/or sell copies of the Software,
29  and to permit persons to whom the Software is furnished to do so,
30  subject to the following conditions:
31
32  The above copyright notice and this permission notice shall be
33  included in all copies or substantial portions of the Software.
34
35  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
36  EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
37  MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
38  NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS
39  BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
40  ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
41  CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
42  SOFTWARE.
43
44 */
45
46var choice;
47
48/* Pour détecter le paramètre prt dans l'url (impression via bouton "imprimer l'article") */
49/* @author Labsmedia - http://www.labsmedia.com - licence GPL */
50
51function getParamValue(param,url){	
52var u = url == undefined ? document.location.href : url;	
53var reg = new RegExp('(\\?|&|^)'+param+'=(.*?)(&|$)');	
54matches = u.match(reg);
55return (matches && matches[2] != undefined) ? decodeURIComponent(matches[2]).replace(/\+/g,' ') : '';
56}
57var prt=getParamValue('prt');
58 
59/* Pour le haut de page */
60
61function remonte () {
62location.href = '#debut';
63}
64
65/* Haut de page auto seulement si onglets bas */
66
67var tabberOptions = {
68
69'onClick': function(argsObj) {
70    if (argsObj.tabber.id != 'inerte'){
71       if (argsObj.tabber.id != 'haut') {
72      	  remonte();
73	  }
74      }
75    }
76  };
77
78
79/*  script tabber v 1.9  modifié  */
80
81function tabberObj(argsObj)
82{
83  var arg;
84  this.div = null;
85  this.choice = 1;
86  this.classMain = "tabber";
87  this.classMainLive = "tabberlive";
88  this.classMainLiveb = "tabberliveb";
89  this.classTab = "tabbertab";
90  this.classTabLive = "tabbertablive";
91  this.classTabLiveb = "tabbertabliveb";
92  this.classTabDefault = "tabbertabdefault";
93  this.classNav = "tabbernav";
94  this.classNavb = "tabbernavb";
95  this.classTabHide = "tabbertabhide";
96  this.classNavActive = "tabberactive";
97  this.classNavActiveb = "tabberactiveb";
98  this.titleElements = ['h2','h3','h4','h5','h6'];
99  this.titleElementsStripHTML = true;
100  this.removeTitle = true;
101  this.addLinkId = false;
102  this.linkIdFormat = '<tabberid>nav<tabnumberone>';
103  for (arg in argsObj) { this[arg] = argsObj[arg]; }
104  this.REclassMain = new RegExp('\\b' + this.classMain + '\\b', 'gi');
105  this.REclassMainLive = new RegExp('\\b' + this.classMainLive + '\\b', 'gi');
106  this.REclassMainLiveb = new RegExp('\\b' + this.classMainLiveb + '\\b', 'gi');
107  this.REclassTab = new RegExp('\\b' + this.classTab + '\\b', 'gi');
108  this.REclassTabLive = new RegExp('\\b' + this.classTabLive + '\\b', 'gi');
109  this.REclassTabLiveb = new RegExp('\\b' + this.classTabLiveb + '\\b', 'gi');
110  this.REclassTabDefault = new RegExp('\\b' + this.classTabDefault + '\\b', 'gi');
111  this.REclassTabHide = new RegExp('\\b' + this.classTabHide + '\\b', 'gi');
112  this.tabs = new Array();
113  if (this.div) {
114    this.init(this.div);
115    this.div = null;
116  }
117}
118
119tabberObj.prototype.init = function(e)
120{
121  var
122  childNodes,
123  i, i2, i3,
124  t,
125  tlive,       
126  defaultTab=0,
127  DOM_h,
128  DOM_ul,
129  DOM_li,
130  DOM_a,
131  aId,
132  headingElement,
133  TitleinText,
134  hState=new Array();
135  
136
137  if (!document.getElementsByTagName) { return false; }
138
139
140
141  if (e.id) {
142    this.id = e.id;
143
144     if (this.id == 'haut') {
145                 this.choice = 0;
146                   }
147        }
148
149  this.tabs.length = 0;
150
151  childNodes = e.childNodes;
152  for(i=0; i < childNodes.length; i++) {
153
154    if(childNodes[i].className &&
155       childNodes[i].className.match(this.REclassTab)) {
156      t = new Object();
157      t.div = childNodes[i];

158	  
159      this.tabs[this.tabs.length] = t;
160      if (childNodes[i].className.match(this.REclassTabDefault)) {
161	defaultTab = this.tabs.length-1;
162      }
163        tlive = t.div
164         if (this.choice == 1) {
165         tlive.className = tlive.className.replace(this.REclassTab, this.classTabLiveb);
166         }
167         else {
168              tlive.className = tlive.className.replace(this.REclassTab, this.classTabLive);
169              }
170     }
171  }
172
173  DOM_ul = document.createElement("ul");
174
175  if (this.choice == 1) {
176  DOM_ul.className = this.classNavb;
177  }
178  else {
179    DOM_ul.className = this.classNav;
180  }
181  
182  for (i=0; i < this.tabs.length; i++) {
183    hState[i]=0;
184	t = this.tabs[i];
185    t.headingText = t.div.title;
186    if (this.removeTitle) { t.div.title = ''; }
187    if (!t.headingText) { 
188		for (i2=0; i2<this.titleElements.length; i2++) {
189			headingElement = t.div.getElementsByTagName(this.titleElements[i2])[0];
190			if ((headingElement) && (t.div == headingElement.parentNode)) { 
191				t.headingText = headingElement.innerHTML;
192				// masque titre h qui a servi pour titrer l'onglet sauf si impression
193				if ((prt != 2) && (DOM_ul.className != this.classNavb)) headingElement.className = 'hidehtitle'; 
194				hState[i] = 1;
195				if (this.titleElementsStripHTML) {
196					t.headingText.replace(/<br \/>/gi," ");
197					t.headingText = t.headingText.replace(/<[^>]+>/g,"");
198				}
199				break;
200			}
201		}
202    }
203
204    if (!t.headingText) {
205      t.headingText = i + 1;
206    }
207	
208	else {   // génération d'un titre h4 au début du texte d'après celui de l'onglet. N'est montré qu'à l'impression.
209	// si le titre de l'onglet n'est pas un chiffre  ET  si les onglets sont en haut
210		if ((isNaN(t.headingText)) && (this.choice != 1) && (hState[i] == 0)) {
211			// si aucun titre h dans le texte, création d'un titre h4 à partir du titre de l'onglet
212			var tit = 0;
213			for (i3=0; i3<this.titleElements.length; i3++) {
214				TitleinText = t.div.getElementsByTagName(this.titleElements[i3])[0];
215				 if (TitleinText) {
216					tit = 1;
217					break;
218				}
219			}
220			if (tit == 0) {
221				DOM_h = document.createElement("h4");
222				DOM_h.appendChild(document.createTextNode(t.headingText));
223				if (prt != 2) DOM_h.className = 'hidehtitle'; // masque le titre h généré d'après l'onglet sauf impression
224				t.div.insertBefore(DOM_h, t.div.firstChild); 
225			}
226		}
227	}
228	
229    DOM_li = document.createElement("li");
230    t.li = DOM_li;
231    	if(t.div.id && t.div.id !='') {
232		t.li.id = t.div.id+'tab'; //ajout de l'id sur la balise li
233		t.div.id = t.div.id+'txt'; // différenciation id conteneur
234	  }
235    DOM_a = document.createElement("a");
236    DOM_a.appendChild(document.createTextNode(t.headingText));
237    DOM_a.href =" javascript:void(null);"
238    DOM_a.title = t.headingText;
239    DOM_a.onclick = this.navClick;
240    DOM_a.tabber = this;
241    DOM_a.tabberIndex = i;
242    if (this.addLinkId && this.linkIdFormat) {
243      aId = this.linkIdFormat;
244      aId = aId.replace(/<tabberid>/gi, this.id);
245      aId = aId.replace(/<tabnumberzero>/gi, i);
246      aId = aId.replace(/<tabnumberone>/gi, i+1);
247      aId = aId.replace(/<tabtitle>/gi, t.headingText.replace(/[^a-zA-Z0-9\-]/gi, ''));
248
249      DOM_a.id = aId;
250    }
251
252    DOM_li.appendChild(DOM_a);
253    DOM_ul.appendChild(DOM_li);
254  }
255if (prt != 2) {  // liste d'onglets non insérée et class="tabber" conservée si impression article
256  if (this.choice == 1) {
257    e.appendChild(DOM_ul, e.firstChild);                                      // onglets en bas
258    
259    }
260  else {
261    e.insertBefore(DOM_ul, e.firstChild);
262
263  }
264
265  if (this.choice == 1) {
266  e.className = e.className.replace(this.REclassMain, this.classMainLiveb);
267  }
268  else {
269       e.className = e.className.replace(this.REclassMain, this.classMainLive);
270  }
271}
272  
273  this.tabShow(defaultTab);
274  if (typeof this.onLoad == 'function') {
275    this.onLoad({tabber:this});
276  }
277  return this;
278};
279
280tabberObj.prototype.navClick = function(event)
281{
282  var
283  rVal,
284  a,
285  self,
286  tabberIndex,
287  onClickArgs;
288
289  a = this;
290  if (!a.tabber) { return false; }
291
292  self = a.tabber;
293  tabberIndex = a.tabberIndex;
294  a.blur();
295  
296   if (typeof self.onClick == 'function') {
297    onClickArgs = {'tabber':self, 'index':tabberIndex, 'event':event};
298    if (!event) { onClickArgs.event = window.event; }
299     rVal = self.onClick(onClickArgs);
300    if (rVal === false) { return false; }
301  }
302  self.tabShow(tabberIndex);
303  return false;
304};
305tabberObj.prototype.tabHideAll = function()
306{
307  var i;
308   for (i = 0; i < this.tabs.length; i++) {
309    this.tabHide(i);
310  }
311};
312
313
314tabberObj.prototype.tabHide = function(tabberIndex)
315{
316  var div;
317  if (!this.tabs[tabberIndex]) { return false; }
318  div = this.tabs[tabberIndex].div;
319  if (!div.className.match(this.REclassTabHide)) {
320    div.className += ' ' + this.classTabHide;
321  }
322  this.navClearActive(tabberIndex);
323
324  return this;
325};

326tabberObj.prototype.tabShow = function(tabberIndex)
327{
328  var div;
329  if (!this.tabs[tabberIndex]) { return false; }
330  this.tabHideAll();
331  div = this.tabs[tabberIndex].div;
332  div.className = div.className.replace(this.REclassTabHide, '');
333  this.navSetActive(tabberIndex);
334  if (typeof this.onTabDisplay == 'function') {
335    this.onTabDisplay({'tabber':this, 'index':tabberIndex});
336  }
337  return this;
338};
339tabberObj.prototype.navSetActive = function(tabberIndex)
340{
341  if (this.choice == 1) {
342    this.tabs[tabberIndex].li.className = this.classNavActiveb;
343  }
344  else {
345       this.tabs[tabberIndex].li.className = this.classNavActive;
346  }
347  
348  return this;
349};
350
351
352tabberObj.prototype.navClearActive = function(tabberIndex)
353{
354  this.tabs[tabberIndex].li.className = '';
355  return this;
356};
357
358
359function tabberAutomatic(tabberArgs)
360{
361  var
362    tempObj,
363    divs,
364    i;
365  if (!tabberArgs) { tabberArgs = {}; }
366  tempObj = new tabberObj(tabberArgs);
367  divs = document.getElementsByTagName("div");
368  for (i=0; i < divs.length; i++) {
369    if (divs[i].className &&
370	divs[i].className.match(tempObj.REclassMain)) {
371      tabberArgs.div = divs[i];
372      divs[i].tabber = new tabberObj(tabberArgs);
373    }
374  }
375  
376  return this;
377}
378
379
380/* Permet l'appel depuis GuppY */ 
381
382function tabberguppy() {
383if (typeof tabberOptions == 'undefined') {
384
385    tabberAutomatic();
386
387} else {
388
389  if (!tabberOptions['manualStartup']) {
390    tabberAutomatic(tabberOptions);
391  }
392}
393}
394
395
396/* permet de masquer l'article tant que tabberguppy n'est pas lancé, sauf si impression */

397if (prt != 2) document.write('<style type="text/css">.tabber{display:none;}<\/style>');
398