Table of Contents - Skip Spans

skip-spans.js

jQuery(document).ready( function() {
  
  // If we're in the builder, return and don't execute.
  
  if( window.angular ) { return; }
	
  // Skip spans	
  $("span").parent().attr("toc-skip", "1");
  
  
  // Get the template elements from the page and store them in variables.
  var container = jQuery('.oxel_toc__container');
  var primary = jQuery('.oxel_toc__primary');
  var sub1 = jQuery('.oxel_toc__sub__1');
  var sub2 = jQuery('.oxel_toc__sub__2');
  var sub3 = jQuery('.oxel_toc__sub__3');
  var sub4 = jQuery('.oxel_toc__sub__4');
  
  // Variable used to increment the dynamic IDs added to the heading elements.
  var number = '0';
  
  jQuery('h2,h3,h4,h5,h6').each( function() {
    
    // If the heading itself or any of its parents have the toc-exclude attribute, skip it.
    if( jQuery(this).closest('[toc-skip]').length > 0 ) { return; }
    
    // Add dynamic IDs to every heading element on the page.
    if( !jQuery(this).attr('id') ) {
    jQuery(this).attr('id', 'toc-item-' + number);
    }
    
    number++;
    // --

    // Store element's tagName for later use in a switch.
    var tagName = jQuery(this).prop('tagName');
    // --
    
    // Handle each heading on the page depending on its tag, copying styles from
    // the appropriate template item.
    switch( tagName ) {
     
      case 'H2':
        
        // tocItem = a new clone of the appropriate template element.
        // Once it's created, we set the href to the appropriate dynamic ID.
        // Finally, we remove the class .oxel_toc__template from the new clone.
        var tocItem = jQuery(primary).clone().appendTo(container).text( jQuery(this).text() );
        tocItem.attr('id', tocItem.attr('id') + '-' + number);
        tocItem.attr( 'href', '#' + jQuery(this).attr('id') );
        tocItem.removeClass('oxel_toc__template');
        
        break;
        
      case 'H3':

        var tocItem = jQuery(sub1).clone().appendTo(container).text( jQuery(this).text() );
        tocItem.attr('id', tocItem.attr('id') + '-' + number);
        tocItem.attr( 'href', '#' + jQuery(this).attr('id') );
        tocItem.removeClass('oxel_toc__template');
        
        break;
        
      case 'H4':
        
        var tocItem = jQuery(sub2).clone().appendTo(container).text( jQuery(this).text() );
        tocItem.attr('id', tocItem.attr('id') + '-' + number);
        tocItem.attr( 'href', '#' + jQuery(this).attr('id') );
        tocItem.removeClass('oxel_toc__template');
        
        break;
        
      case 'H5':
        
        var tocItem = jQuery(sub3).clone().appendTo(container).text( jQuery(this).text() );
        tocItem.attr('id', tocItem.attr('id') + '-' + number);
        tocItem.attr( 'href', '#' + jQuery(this).attr('id') );
        tocItem.removeClass('oxel_toc__template');
        
        break;
        
      case 'H6':
        
        var tocItem = jQuery(sub4).clone().appendTo(container).text( jQuery(this).text() );
        tocItem.attr('id', tocItem.attr('id') + '-' + number);
        tocItem.attr( 'href', '#' + jQuery(this).attr('id') );
        tocItem.removeClass('oxel_toc__template');
        
        break;
        
    }
    
  }).promise().done( function() {
    
    // When the .each() is done, delete the template elements.
    jQuery('.oxel_toc__template').remove();
    
  });
  
})