New URL for NEMO forge!   http://forge.nemo-ocean.eu

Since March 2022 along with NEMO 4.2 release, the code development moved to a self-hosted GitLab.
This present forge is now archived and remained online for history.
tab-view.js in trunk/NEMOGCM/TRUST/web/html – NEMO

source: trunk/NEMOGCM/TRUST/web/html/tab-view.js @ 5936

Last change on this file since 5936 was 5936, checked in by nicolasmartin, 8 years ago

Merge dev_r5092_CNRS18_TRUST onto the trunk: add new tool Trusting (ie TRUST directory at root of NEMGOCM) for continuous integration tests on HPC centers & basic validation tests for developers

File size: 11.7 KB
Line 
1   /************************************************************************************************************
2   (C) www.dhtmlgoodies.com, October 2005
3   
4   This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.   
5   
6   Terms of use:
7   You are free to use this script as long as the copyright message is kept intact. However, you may not
8   redistribute, sell or repost it without our permission.
9   
10   Updated:
11     
12      March, 14th, 2006 - Create new tabs dynamically
13      March, 15th, 2006 - Dynamically delete a tab
14     
15   Thank you!
16   
17   www.dhtmlgoodies.com
18   Alf Magne Kalleland
19   
20   ************************************************************************************************************/     
21   var textPadding = 3; // Padding at the left of tab text - bigger value gives you wider tabs
22   var strictDocType = true; 
23   var tabView_maxNumberOfTabs = 6; // Maximum number of tabs
24   
25   /* Don't change anything below here */
26   var dhtmlgoodies_tabObj = new Array();
27   var activeTabIndex = new Array();
28   var MSIE = navigator.userAgent.indexOf('MSIE')>=0?true:false;
29   
30   var regExp = new RegExp(".*MSIE ([0-9]\.[0-9]).*","g");
31   var navigatorVersion = navigator.userAgent.replace(regExp,'$1');
32   
33   var ajaxObjects = new Array();
34   var tabView_countTabs = new Array();
35   var tabViewHeight = new Array();
36   var tabDivCounter = 0;
37   var closeImageHeight = 8;  // Pixel height of close buttons
38   var closeImageWidth = 8;   // Pixel height of close buttons
39   
40   
41   function setPadding(obj,padding){
42      var span = obj.getElementsByTagName('SPAN')[0];
43      span.style.paddingLeft = padding + 'px'; 
44      span.style.paddingRight = padding + 'px'; 
45   }
46   function showTab(parentId,tabIndex)
47   {
48      var parentId_div = parentId + "_";
49      if(!document.getElementById('tabView' + parentId_div + tabIndex)){
50         return;
51      }
52      if(activeTabIndex[parentId]>=0){
53         if(activeTabIndex[parentId]==tabIndex){
54            return;
55         }
56   
57         var obj = document.getElementById('tabTab'+parentId_div + activeTabIndex[parentId]);
58         
59         obj.className='tabInactive';
60         var img = obj.getElementsByTagName('IMG')[0];
61         if(img.src.indexOf('tab_')==-1)img = obj.getElementsByTagName('IMG')[1];
62         img.src = 'images/tab_right_inactive.gif';
63         document.getElementById('tabView' + parentId_div + activeTabIndex[parentId]).style.display='none';
64      }
65     
66      var thisObj = document.getElementById('tabTab'+ parentId_div +tabIndex);   
67         
68      thisObj.className='tabActive';
69      var img = thisObj.getElementsByTagName('IMG')[0];
70      if(img.src.indexOf('tab_')==-1)img = thisObj.getElementsByTagName('IMG')[1];
71      img.src = 'images/tab_right_active.gif';
72     
73      document.getElementById('tabView' + parentId_div + tabIndex).style.display='block';
74      activeTabIndex[parentId] = tabIndex;
75     
76
77      var parentObj = thisObj.parentNode;
78      var aTab = parentObj.getElementsByTagName('DIV')[0];
79      countObjects = 0;
80      var startPos = 2;
81      var previousObjectActive = false;
82      while(aTab){
83         if(aTab.tagName=='DIV'){
84            if(previousObjectActive){
85               previousObjectActive = false;
86               startPos-=2;
87            }
88            if(aTab==thisObj){
89               startPos-=2;
90               previousObjectActive=true;
91               setPadding(aTab,textPadding+1);
92            }else{
93               setPadding(aTab,textPadding);
94            }
95           
96            aTab.style.left = startPos + 'px';
97            countObjects++;
98            startPos+=2;
99         }       
100         aTab = aTab.nextSibling;
101      }
102     
103      return;
104   }
105   
106   function tabClick()
107   {
108      var idArray = this.id.split('_');     
109      showTab(this.parentNode.parentNode.id,idArray[idArray.length-1].replace(/[^0-9]/gi,''));
110     
111   }
112   
113   function rolloverTab()
114   {
115      if(this.className.indexOf('tabInactive')>=0){
116         this.className='inactiveTabOver';
117         var img = this.getElementsByTagName('IMG')[0];
118         if(img.src.indexOf('tab_')<=0)img = this.getElementsByTagName('IMG')[1];
119         img.src = 'images/tab_right_over.gif';
120      }
121     
122   }
123   function rolloutTab()
124   {
125      if(this.className ==  'inactiveTabOver'){
126         this.className='tabInactive';
127         var img = this.getElementsByTagName('IMG')[0];
128         if(img.src.indexOf('tab_')<=0)img = this.getElementsByTagName('IMG')[1];
129         img.src = 'images/tab_right_inactive.gif';
130      }
131     
132   }
133   
134   function hoverTabViewCloseButton()
135   {
136      this.src = this.src.replace('close.gif','close_over.gif');
137   }
138   
139   function stopHoverTabViewCloseButton()
140   {
141      this.src = this.src.replace('close_over.gif','close.gif');
142   }
143   
144   function initTabs(mainContainerID,tabTitles,activeTab,width,height,closeButtonArray,additionalTab)
145   {
146      if(!closeButtonArray)closeButtonArray = new Array();
147     
148      if(!additionalTab || additionalTab=='undefined'){       
149         dhtmlgoodies_tabObj[mainContainerID] = document.getElementById(mainContainerID);
150         width = width + '';
151         if(width.indexOf('%')<0)width= width + 'px';
152         dhtmlgoodies_tabObj[mainContainerID].style.width = width;
153                 
154         height = height + '';
155         if(height.length>0){
156            if(height.indexOf('%')<0)height= height + 'px';
157            dhtmlgoodies_tabObj[mainContainerID].style.height = height;
158         }
159         
160
161         tabViewHeight[mainContainerID] = height;
162         
163         var tabDiv = document.createElement('DIV');     
164         var firstDiv = dhtmlgoodies_tabObj[mainContainerID].getElementsByTagName('DIV')[0]; 
165         
166         dhtmlgoodies_tabObj[mainContainerID].insertBefore(tabDiv,firstDiv); 
167         tabDiv.className = 'dhtmlgoodies_tabPane';         
168         tabView_countTabs[mainContainerID] = 0;
169
170      }else{
171         var tabDiv = dhtmlgoodies_tabObj[mainContainerID].getElementsByTagName('DIV')[0];
172         var firstDiv = dhtmlgoodies_tabObj[mainContainerID].getElementsByTagName('DIV')[1];
173         height = tabViewHeight[mainContainerID];
174         activeTab = tabView_countTabs[mainContainerID];   
175   
176         
177      }
178     
179     
180     
181      for(var no=0;no<tabTitles.length;no++){
182         var aTab = document.createElement('DIV');
183         aTab.id = 'tabTab' + mainContainerID + "_" +  (no + tabView_countTabs[mainContainerID]);
184         aTab.onmouseover = rolloverTab;
185         aTab.onmouseout = rolloutTab;
186         aTab.onclick = tabClick;
187         aTab.className='tabInactive';
188         tabDiv.appendChild(aTab);
189         var span = document.createElement('SPAN');
190         span.innerHTML = tabTitles[no];
191         span.style.position = 'relative';
192         aTab.appendChild(span);
193         
194         if(closeButtonArray[no]){
195            var closeButton = document.createElement('IMG');
196            closeButton.src = 'images/close.gif';
197            closeButton.height = closeImageHeight + 'px';
198            closeButton.width = closeImageHeight + 'px';
199            closeButton.setAttribute('height',closeImageHeight);
200            closeButton.setAttribute('width',closeImageHeight);
201            closeButton.style.position='absolute';
202            closeButton.style.top = '6px';
203            closeButton.style.right = '0px';
204            closeButton.onmouseover = hoverTabViewCloseButton;
205            closeButton.onmouseout = stopHoverTabViewCloseButton;
206           
207            span.innerHTML = span.innerHTML + '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'; 
208           
209            var deleteTxt = span.innerHTML+'';
210
211            closeButton.onclick = function(){ deleteTab(this.parentNode.innerHTML) };
212            span.appendChild(closeButton);
213         }
214         
215         var img = document.createElement('IMG');
216         img.valign = 'bottom';
217         img.src = 'images/tab_right_inactive.gif';
218         // IE5.X FIX
219         if((navigatorVersion && navigatorVersion<6) || (MSIE && !strictDocType)){
220            img.style.styleFloat = 'none';
221            img.style.position = 'relative'; 
222            img.style.top = '4px'
223            span.style.paddingTop = '4px';
224            aTab.style.cursor = 'hand';
225         }  // End IE5.x FIX
226         aTab.appendChild(img);
227      }
228
229      var tabs = dhtmlgoodies_tabObj[mainContainerID].getElementsByTagName('DIV');
230      var divCounter = 0;
231      for(var no=0;no<tabs.length;no++){
232         if(tabs[no].className=='dhtmlgoodies_aTab' && tabs[no].parentNode.id == mainContainerID){
233            if(height.length>0)tabs[no].style.height = height;
234            tabs[no].style.display='none';
235            tabs[no].id = 'tabView' + mainContainerID + "_" + divCounter;
236            divCounter++;
237         }       
238      } 
239      tabView_countTabs[mainContainerID] = tabView_countTabs[mainContainerID] + tabTitles.length; 
240      showTab(mainContainerID,activeTab);
241
242      return activeTab;
243   } 
244   
245   function showAjaxTabContent(ajaxIndex,parentId,tabId)
246   {
247      var obj = document.getElementById('tabView'+parentId + '_' + tabId);
248      obj.innerHTML = ajaxObjects[ajaxIndex].response;     
249   }
250   
251   function resetTabIds(parentId)
252   {
253      var tabTitleCounter = 0;
254      var tabContentCounter = 0;
255     
256     
257      var divs = dhtmlgoodies_tabObj[parentId].getElementsByTagName('DIV');
258
259     
260      for(var no=0;no<divs.length;no++){
261         if(divs[no].className=='dhtmlgoodies_aTab'){
262            divs[no].id = 'tabView' + parentId + '_' + tabTitleCounter;
263            tabTitleCounter++;
264         }
265         if(divs[no].id.indexOf('tabTab')>=0){
266            divs[no].id = 'tabTab' + parentId + '_' + tabContentCounter;   
267            tabContentCounter++;
268         } 
269         
270           
271      }
272   
273      tabView_countTabs[parentId] = tabContentCounter;
274   }
275   
276   
277   function createNewTab(parentId,tabTitle,tabContent,tabContentUrl,closeButton)
278   {
279      if(tabView_countTabs[parentId]>=tabView_maxNumberOfTabs)return;   // Maximum number of tabs reached - return
280      var div = document.createElement('DIV');
281      div.className = 'dhtmlgoodies_aTab';
282      dhtmlgoodies_tabObj[parentId].appendChild(div);   
283
284      var tabId = initTabs(parentId,Array(tabTitle),0,'','',Array(closeButton),true);
285      if(tabContent)div.innerHTML = tabContent;
286      if(tabContentUrl){     
287         var ajaxIndex = ajaxObjects.length;
288         ajaxObjects[ajaxIndex] = new sack();
289         ajaxObjects[ajaxIndex].requestFile = tabContentUrl;   // Specifying which file to get
290
291         ajaxObjects[ajaxIndex].onCompletion = function(){ showAjaxTabContent(ajaxIndex,parentId,tabId); }; // Specify function that will be executed after file has been found
292         ajaxObjects[ajaxIndex].runAJAX();      // Execute AJAX function   
293     
294      }
295           
296   }
297   
298   function getTabIndexByTitle(tabTitle)
299   {
300      var regExp = new RegExp("(.*?)&nbsp.*$","gi");
301      tabTitle = tabTitle.replace(regExp,'$1');
302      for(var prop in dhtmlgoodies_tabObj){
303         var divs = dhtmlgoodies_tabObj[prop].getElementsByTagName('DIV');
304         for(var no=0;no<divs.length;no++){
305            if(divs[no].id.indexOf('tabTab')>=0){
306               var span = divs[no].getElementsByTagName('SPAN')[0];
307               var regExp2 = new RegExp("(.*?)&nbsp.*$","gi");
308               var spanTitle = span.innerHTML.replace(regExp2,'$1');
309               
310               if(spanTitle == tabTitle){
311                 
312                  var tmpId = divs[no].id.split('_');               
313                  return Array(prop,tmpId[tmpId.length-1].replace(/[^0-9]/g,'')/1);
314               }     
315            }
316         }
317      }
318     
319      return -1;
320     
321   }
322   
323   /* Call this function if you want to display some content from external file in one of the tabs
324   Arguments: Title of tab and relative path to external file */
325   
326   function addAjaxContentToTab(tabTitle,tabContentUrl)
327   {
328      var index = getTabIndexByTitle(tabTitle);
329      if(index!=-1){
330         var ajaxIndex = ajaxObjects.length;
331         
332         tabId = index[1];
333         parentId = index[0];
334         
335         
336         ajaxObjects[ajaxIndex] = new sack();
337         ajaxObjects[ajaxIndex].requestFile = tabContentUrl;   // Specifying which file to get
338
339         ajaxObjects[ajaxIndex].onCompletion = function(){ showAjaxTabContent(ajaxIndex,parentId,tabId); }; // Specify function that will be executed after file has been found
340         ajaxObjects[ajaxIndex].runAJAX();      // Execute AJAX function           
341         
342      } 
343   }
344
345   
346   
347   function deleteTab(tabLabel,tabIndex,parentId)
348   {
349
350      if(tabLabel){
351         var index = getTabIndexByTitle(tabLabel);
352         if(index!=-1){
353            deleteTab(false,index[1],index[0]);
354         }
355         
356      }else if(tabIndex>=0){
357         if(document.getElementById('tabTab' + parentId + '_' + tabIndex)){
358            var obj = document.getElementById('tabTab' + parentId + '_' + tabIndex);
359            var id = obj.parentNode.parentNode.id;
360            obj.parentNode.removeChild(obj);
361            var obj2 = document.getElementById('tabView' + parentId + '_' + tabIndex);
362            obj2.parentNode.removeChild(obj2);
363            resetTabIds(parentId);
364            activeTabIndex[parentId]=-1;
365            showTab(parentId,'0');
366         }       
367      }
368     
369
370         
371     
372     
373   }
374   
375   
Note: See TracBrowser for help on using the repository browser.