https://biblio.bnu.fr/opac/sebinayou/js/sy/3.07.TabSet.js

1TabSetUtils = verbs.define(function() {
2
3  var cache = {};
4
5  this.create = function(id, container, options) {
6    if (is.string.blank(id)) {
7      id = container.id;
8    }
9    if (!Nodes.hasClass(container, "done")) {
10      cache[id] = new TabSet(container, options);
11    }
12  };
13
14  this.get = function(id) {
15    return cache[id];
16  };
17});
18
19TabSet = function(container, options) {
20
21  var opt = extend({
22    content_prefix: false,
23    contentCorrection: true,
24    onLoadTab: false,
25    onInitTab: false,
26    onSwitchTab: false
27  }, options || {});
28
29  var dom = {};
30
31  function init(container, options) {
32    if (Nodes.hasClass(container, "done")) {
33      return;
34    }
35    Nodes.addClass(container, "done");
36
37    dom.tabset = container;
38    if (!is.element(dom.tabset) ||
39        is.string.blank(dom.tabset.id)) {
40      console.error("container is null or without id");
41      return;
42    }
43
44    var itemPrefix = dom.tabset.id + "_item_";
45    var contentPrefix = dom.tabset.id + "_content_";
46
47    dom.ul = query("> ul", dom.tabset)[0];
48    aria.role(dom.ul, "tablist");
49
50    dom.items = query("> li", dom.ul);
51    dom.contents = query("> div", dom.tabset);
52
53    /*
54     * Controllo di integrità
55     */
56    if (dom.items.length === 0 ||
57        dom.contents.length === 0 ||
58        dom.items.length !== dom.contents.length) {
59      Nodes.setStyle(container, "display", "none");
60      return;
61    }
62
63    /*
64     * Stili
65     */
66    add.className(dom.tabset, "syt-tabset");
67    add.className(dom.items, "syt-tab");
68    add.className(dom.contents, "syt-content");
69
70    every(dom.items, function(e, i) {
71      var cd = get.data(e, "item");
72      var controls = opt.content_prefix ? contentPrefix + cd : cd;
73      set.attr(e, {
74        "id": itemPrefix + cd,
75        "tabindex": -1,
76        "role": "tab"
77      });
78      aria.attr(e, {
79        "selected": false,
80        "controls": controls
81      });
82    });
83
84    every(dom.contents, function(e, i) {
85      var cd = get.data(e, "content");
86      var id = opt.content_prefix ? contentPrefix + cd : cd;
87      set.attr(e, {
88        "id": id,
89        "role": "tabpanel",
90        "aria-labelledby": itemPrefix + cd,
91        "hidden": true
92      });
93      set.style(e, "display", "none");
94    });
95
96    Events.on(dom.items, "click", function(e) {
97      _this.switchTab(this);
98      return false;
99    });
100
101    Events.on(dom.items, "keyup", function(e) {
102      var refresh = false;
103      var index = getSelectedIndex();
104      if (e.keyCode === Chars.LEFT ||
105          e.keyCode === Chars.UP) {
106        if (--index < 0) {
107          index = dom.items.length -1;
108        }
109      } else if (e.keyCode === Chars.RIGHT ||
110          e.keyCode === Chars.DOWN) {
111        if (++index >= dom.items.length) {
112          index = 0;
113        }
114      } else if (e.keyCode === Chars.DELETE) {
115        refresh = true;
116      }
117      _this.switchTab(index, refresh);
118      return false;
119    });
120
121    // carico il tab selezionato
122    var selIndex = getSelectedIndex();
123    if (selIndex < 0) {
124      selIndex = 0;
125    }
126    _this.switchTab(selIndex, false, true);
127  }
128
129  this.refreshTab = function(tab) {
130    _this.switchTab(tab || getTab(getSelectedIndex()), true, false);
131  };
132
133  this.switchToFirstTab = function() {
134    // mostro il primo tab visibile
135    for(var i=0; i<dom.items.length; i++) {
136      if (!isVisible(dom.items[i])) {
137        continue;
138      }
139
140      _this.switchTab(dom.items[i]);
141      break;
142    }
143  };
144
145  this.switchTab = function(tab, refresh, show) {
146    var index = -1;
147    if (is.element(tab)) {
148      index = getIndex(tab);
149    } else if (is.number(tab) &&
150        tab < dom.items.length) {
151      index = tab;
152    } else if (tab.target &&
153        is.element(tab.target)) {
154      // da un evento
155      index = getIndex(tab.target);
156    }
157    if (index < 0) {
158      return;
159    }
160    tab = getTab(index);
161    if (tab === null) {
162      // tab inattivo
163      return;
164    }
165
166    var content = getContent(index);
167    if (!is.bound(content)) {
168      var tabName = getTabName(tab);
169      content = createContent(tabName, null);
170      node.insert(dom.tabset, content, index);
171    }
172

173    if (is.callable(opt.onLoadTab) &&
174        (is.bool_true(refresh) || Strings.isBlank(content.innerHTML))) {
175
176      var tabContent = opt.onLoadTab.call(_this, getTabName(tab), index, storage);
177      if (!tabContent) {
178        _deactivate(tab);
179        _this.switchToFirstTab();
180        return;
181      } else if (!Strings.isBlank(tabContent)) {
182        content.innerHTML = tabContent;
183      }
184    }
185
186    if (opt.contentCorrection) {
187      youTubeCorrect(content);
188    }
189
190    if (is.callable(opt.onInitTab) &&
191        (!has.data(content, "init") || is.bool_true(refresh))) {
192      opt.onInitTab.call(_this, getTabName(tab), index, is.bool_true(refresh));
193      set.data(content, "init", true);
194    }
195
196    if (is.bool_false(show)) {
197      return;
198    }
199
200    var selIndex = getSelectedIndex();
201    if (typeof show === "undefined" &&
202        !is.bool_true(refresh) &&
203        index === selIndex) {
204      return;
205    }
206
207    if (selIndex >= 0) {
208      Nodes.removeClass(dom.items[selIndex], "selected");
209      Nodes.setStyle(dom.contents[selIndex], "display", "none");
210      set.attr(dom.items[selIndex], {
211        "tabindex": -1,
212        "aria-selected": "false"
213      });
214      set.attr(dom.contents[selIndex], {
215        "hidden": true
216      });
217    }
218
219    Nodes.addClass(tab, "selected");
220    Nodes.setStyle(content, "display", "");
221    set.attr(tab, {
222      "tabindex": 0,
223      "aria-selected": "true"
224    });
225    set.attr(content, {
226      "hidden": false
227    });
228    // IE8 fails
229    var dummy = create.element("span");
230    content.appendChild(dummy);
231    dummy.parentNode.removeChild(dummy);
232
233    if (is.callable(opt.onSwitchTab)) {
234      opt.onSwitchTab.call(_this, getTabName(tab), index, storage);
235    }
236  };
237
238  this.addTab = function(tabName, tabLabel, tabContent, index, show) {
239    if (Strings.isBlank(tabName) ||
240        Strings.isBlank(tabLabel)) {
241      return;
242    } else if (getTab(tabName) !== null) {
243      _this.switchTab(tabName);
244      return;
245    }
246
247    var li = create("li");
248    li.className = "syt-tab";
249    set.data(li, "item", tabName);
250    Nodes.setText(li, tabLabel);
251
252    var div = createContent(tabName, tabContent);
253
254    if (!is.number(index) ||
255        index < 0 ||
256        index >= dom.items.length) {
257      index = dom.items.length;
258
259      dom.ul.appendChild(li);
260
261      dom.items.push(li);
262      dom.contents.push(div);
263    } else {
264      Nodes.insertBefore(getTab(index), li);
265
266      dom.items.splice(index, 0, li);
267      dom.contents.splice(index, 0, div);
268    }
269
270    Events.on(li, "click", _this.switchTab);
271
272    dom.tabset.appendChild(div);
273    if (opt.contentCorrection) {
274      youTubeCorrect(div);
275    }
276
277    if (!is.bound(show) ||
278        is.bool_true(show)) {
279      _this.switchTab(index);
280    }
281  };
282
283  this.removeActiveTab = function(tabName, remove) {
284    _this.removeTab(getSelectedIndex(), remove);
285  };
286
287  this.removeTab = function(tabName, remove) {
288    var tab = getTab(tabName);
289    if (!tab) {
290      return;
291    }
292
293    if (is.bool_true(remove)) {
294      _removeTab(tab);
295    } else {
296      _deactivate(tab);
297    }
298
299    _this.switchToFirstTab();
300  };
301
302  this.getTab = function(tabName) {
303    return getContent(tabName);
304  };
305
306  var storage = {};
307
308  // fallback to non persistent storage
309  storage.inner = {};
310
311  storage.getKey = function(tab) {
312    return "tabset-" + dom.tabset.id + "-" + getTabName(tab);
313  };
314
315  storage.put = function(tabName, data, html5Storage) {
316    var tab = getTab(tabName);
317    if (!tab) {
318      return;
319    }
320    if (!Modernizr.sessionstorage ||
321        !is.bound(dom.tabset.id)) {
322      storage.inner[getTabName(tab)] = data;
323      return;
324    }
325    if (!is.bound(html5Storage)) {
326      html5Storage = sessionStorage;
327    }
328    var key = storage.getKey(tab);
329    if (!is.bound(data)) {
330      html5Storage.removeItem(key);
331      return;
332    }
333    if (typeof(data) === "object") {
334      data = JSON.stringify(data);
335    } else if (typeof(data) !== "string") {
336      data = data.toString();
337    }
338    html5Storage.setItem(key, data);
339  };
340
341  storage.get = function(tabName, html5Storage) {
342    var tab = getTab(tabName);
343    if (!tab) {
344      return;
345    }
346    if (!Modernizr.sessionstorage ||
347        !is.bound(dom.tabset.id)) {
348      return storage.inner[getTabName(tab)];
349    }
350    if (!is.bound(html5Storage)) {
351      html5Storage = sessionStorage;
352    }
353    var key = storage.getKey(tab);
354    return html5Storage.getItem(key);
355  };
356
357  storage.getObject = function(tabName, html5Storage) {
358    var object = storage.get(tabName, html5Storage);
359    if (is.bound(object)) {
360      return JSON.parse(object);
361    }
362  };
363
364  function getSelectedIndex() {
365    for(var i=0; i<dom.items.length; i++) {
366      if (!Nodes.hasClass(dom.items[i], "selected")) {
367        continue;
368      }
369
370      return i;
371    }
372
373    return -1;
374  }
375
376  function getIndex(tab) {
377    if (is.number(tab) &&
378        tab < dom.items.length) {
379      return tab;
380    }

380 else if (is.element(tab)) {
381      tab = getTabName(tab);
382    }
383
384    if (Strings.isBlank(tab)) {
385      return -1;
386    }
387
388    for(var i=0; i<dom.items.length; i++) {
389      if (!Strings.equals(tab, getTabName(dom.items[i]), true)) {
390        continue;
391      }
392
393      return i;
394    }
395
396    return -1;
397  }
398
399  function getSelectedTab() {
400    return getTab(getSelectedIndex());
401  }
402
403  function getTab(tab) {
404    if (is.number(tab) &&
405        tab < dom.items.length) {
406      return dom.items[tab];
407    }
408
409    tab = getIndex(tab);
410    if (tab < 0) {
411      return null;
412    }
413
414    return dom.items[tab];
415  }
416
417  function getTabName(tab) {
418    if (!is.element(tab)) {
419      tab = getTab(tab);
420    }
421    return get.data(tab, "item");
422  }
423
424  function getContent(tab) {
425    if (is.number(tab) &&
426        tab < dom.contents.length) {
427      return dom.contents[tab];
428    }
429    tab = getIndex(tab);
430    if (tab < 0) {
431      return null;
432    }
433    return dom.contents[tab];
434  }
435
436  function createContent(tabName, content) {
437    var tab = getContent(tabName);
438    if (is.bound(tab)) {
439      // tab already exist
440      return tab;
441    }
442    tab = create("div");
443    tab.id = tabName;
444    tab.className = "syt-content";
445    if (!is.string.blank(content)) {
446      tab.innerHTML = content;
447    }
448    return tab;
449  }
450
451  function _deactivate(tab) {
452    if (!is.element(tab)) {
453      tab = getTab(tab);
454    }
455
456    Nodes.removeClass(tab, "selected");
457    Nodes.setStyle(tab, "display", "none");
458    Events.off(tab, "click");
459
460    var content = getContent(tab);
461    Nodes.setStyle(content, "display", "none");
462    content.innerHTML = "";
463
464    var index = getIndex(tab);
465    if (index === 0 && dom.items.length === 1) {
466      Nodes.setStyle(dom.tabset, "display", "none");
467      return;
468    }
469  }
470
471  function _removeTab(tab) {
472    if (!is.number(tab)) {
473      tab = getIndex(tab);
474    }
475
476    Nodes.remove(dom.items[tab]);
477    Nodes.remove(dom.contents[tab]);
478
479    if (tab === 0 && dom.items.length == 1) {
480      Nodes.setStyle(dom.tabset, "display", "none");
481      return;
482    }
483  }
484
485  function isVisible(tab) {
486    return Nodes.getStyle(tab, "display") !== "none";
487  }
488
489  function youTubeCorrect(content) {
490    var iFrames = $(content).find("iframe").get();
491    if (iFrames === null ||
492        iFrames.length === 0) {
493      return;
494    }
495
496    for(var i=0; i<iFrames.length; i++) {
497      var iFrame = iFrames[i];
498
499      var youtube = /(?:http||https):\/\/www.youtube(?:-nocookie)?\.com/i;
500      if (!youtube.test(iFrame.src) ||
501          iFrame.src.indexOf("wmode=opaque") > 0) {
502        continue;
503      }
504
505      var pos = Strings.indexOf(iFrame.src, "?");
506      if (pos > 0) {
507        iFrame.src = iFrame.src.replace("?", "?wmode=opaque&");
508        continue;
509      }
510
511      iFrame.src += "?wmode=opaque";
512    }
513  }
514
515  var _this = this;
516
517  var array, i;
518  if (!is.bound(container)) {
519    return null;
520  } else if (is.array(container)) {
521    // è stato passato un array di elementi
522    array = new Array(container.length);
523    for(i = 0; i < container.length; i++)
524      array[i] = new TabSet(container[i], options);
525    return array;
526  } else if (container instanceof jQuery) {
527    // è stato passato un oggetto jquery
528    array = new Array(container.length);
529    for(i=0; i<container.length; i++) {
530      array[i] = new TabSet(container.get(i), options);
531    }
532    return array;
533  } else if (is.string(container)) {
534    if (this instanceof TabSet) {
535      init.call(this, find.id(container), opt);
536    } else {
537      return new TabSet(find.id(container), options);
538    }
539  } else if (is.element(container)) {
540    if (this instanceof TabSet) {
541      init.call(this, container, opt);
542    } else {
543      return new TabSet(container, options);
544    }
545  } else {
546    console.error("Impossible inizializzare TabSet");
547  }
548
549  return this;
550};