https://asciidocsy.netlify.app/assets/js/tabber.js

1/**
2 * Convert the div blocks configured with 'tabber-' classes into Bootstrap
3 * tab/pane structures so they can be treated as Bootstrap tab controls.
4 *
5 * See:
6   * https://getbootstrap.com/docs/4.3/components/navs/#javascript-behavior
7   * https://www.w3schools.com/bootstrap/bootstrap_tabs_pills.asp
8 */
9/**
10Liquid generate JSON object of version handlers block
11**/
12
13const tabSets = {
14  
15    
16  
17    
18  
19    
20  
21    
22  
23    
24  
25    
26  
27    
28  
29    
30  
31    
32    "data-format-tabber": {"verb":"tab","swap":{"pick":"data-json","opts":[{"text":"YAML Data","slug":"data-yaml"},{"text":"JSON Data","slug":"data-json"}]}}
33    
34  
35}
36
37/**
38Custom jQuery functions
39**/
40// Get the name of a tabset, tab, or pane based on this current element class
41jQuery.fn.getNameByClass = function() {
42  var classes = this.attr("class").split(" ");
43  for (let i = 0; i < classes.length; ++i) {
44    if (classes[i] !== null) {
45      var nameClass = classes[i]
46       .match(/^((tabs|pane|item|link)\-)([a-z_\-0-9]+$)/)
47      if (nameClass != null) {
48        return classes[i].replace(nameClass[0],nameClass[3]);
49        break;
50      };
51    };
52  };
53};
54
55/**
56Document ready
57**/
58$( document ).ready(function() {
59  // Get all the tabbed blocks of the page
60  $(".tabber-tabset").each(function() {
61    $(this).addClass("container")
62    var tabberName = $(this).getNameByClass()
63    var tabSet = tabSets[tabberName]['swap']['opts'];
64    $(this).prepend('<ul class="nav nav-tabs list-' + tabberName + '" role="tablist"></ul>')
65    // Get each tabbed pane
66    $(this).find('.tabber-pane').each(function() {
67      var tabName = $(this).getNameByClass()
68      var tabLabel = tabName.replace("-"," ")
69      $(this).wrap('<div class="tab-pane pane-' + tabName + ' fade" role="tabpanel"></div>')
70      if (tabSet !== null) {
71        // use a match from the tabSet to affix labevar tabLabel = ;
72        tabEntry = tabSet.find(opt => {
73          return opt.slug == tabName
74        });
75        if (typeof tabEntry !== "undefined" && tabEntry['text'] !== null) {
76          tabLabel = tabEntry['text']
77        }
78      };
79      // use the caption IF there is one
80      $(this).find('.title').each(function() {
81        tabLabel = $(this).html();
82        $(this).remove()
83      });
84      $(this).parent().parent('.content')
85      .addClass("tab-content").siblings('.nav.nav-tabs')
86      .append('<li class="nav-item item-' + tabName + '"><a href=".pane-' + tabName + '" class="nav-link link-' + tabName + '" data-toggle="tab" role="tab" aria-selected="false">' + tabLabel + '</a></li>')
87    });
88    // establish defaults
89    var pick = tabSets[tabberName]['swap']['pick'];
90    var nochoice = false;
91    if ( urlParams.has(tabberName) ) {
92      var val = urlParams.get(tabberName)
93    } else if ( $.cookie(tabberName) ) {
94      var val = $.cookie(tabberName)
95    } else if ( typeof tabSets[tabberName]['swap']['pick'] !== 'undefined' ) {
96      var val = tabSets[tabberName]['swap']['pick']
97    }
98    // fallback selection in case default/chosen is not a tab/pane in this tabber

99    $('.tabber-tabset .nav-item:first-child .nav-link').each( function() {
100      $(this).tab('show')
101      $('.pane-' + $(this).getNameByClass() ).each( function() {
102        $(this).addClass("active show").siblings().removeClass("active show")
103      });
104    });
105    // now load the defaults that do exist
106    $('.item-' + val + ' .link-' + val).each( function() {
107      $(this).tab('show')
108    });
109    $('.pane-' + val ).each( function() {
110      $(this).addClass("active show").siblings().removeClass("active show")
111    });
112    $.cookie(tabberName, val)
113  });
114  // additional actions on any tab click event
115  $('.tabber-tabset a[data-toggle="tab"]').on('click', function () {
116    var href = $(this).attr("href")
117    $('.tabber-tabset a[href="' + href + '"]').not($(this)).tab('show')
118    $(href).addClass("active show").siblings().removeClass("active show")
119    $.cookie(
120      $(this).parent().parent().parent().getNameByClass()
121      ,$(this).getNameByClass()
122    )
123  })
124});