User:Redirected/wikitabs.js

///* Clear old event if exists, don't copy this */
$(function() {
  function isEmpty( any ){ return ( any==null || any=="" ); }
  function forQuerySelectorIn( parent, query, func ){
    var table = parent.querySelectorAll( query );
    if( isEmpty(table) ) return null; [].forEach.call( table, func ); return 1; }
  forQuerySelectorIn( document, ".tabs-container", function( ctn ){
    forQuerySelectorIn( ctn, ".tabs-btn", function( btn ){
      btn.outerHTML = btn.outerHTML;
    });
  });
  forQuerySelectorIn( document, ".tabs-tab", function( tab ){
    tab.style.display = "";
  });
});
///* Clear old event if exists, don't copy this */



///* Tabs-Script-Start */
$(function() {
  /*  Tabs Script by Y&#x1F375
      Minimal example HTML:
      //  <.tabs-container>
      //    <.tabs-btn.tabs-id-1>ButtonText1</.tabs-btn.tabs-id-1>
      //    <.tabs-btn.tabs-id-2>ButtonText2</.tabs-btn.tabs-id-2>
      //    <.tabs-btn.tabs-tcmp>SpecialTabKeyForRowComparisonSupport</.tabs-btn.tabs-tcmp>
      //    <.tabs-group>
      //      <.tabs-tab.tabs-id-1><.tabs-v>prefix<.tabs-c>Content1</.tabs-c></.tabs-v></.tabs-tab.tabs-id-1>
      //      <.tabs-tab.tabs-id-2><.tabs-v><.tabs-c>Content2</.tabs-c>suffix</.tabs-v></.tabs-tab.tabs-id-2>
      //    </.tabs-group>
      //  </.tabs-container>
      Any DOM element can be used so long as the classes are set correctly. Tab nesting unsupported.
      None of the classes have to be direct children, all descendant are found by the script so
      long as they are within the corrent tags (meaning you can for example put all the `tabs.btn`
      elements inside a parent div to make it look neater, which you absolutely should do).
  */
  // Helper functions
  function isEmpty( any ){ return ( any==null || any=="" ); }
  function arrFilterTokenList( arr, list, filter ){
    if( !(Array.isArray(arr)) ) arr = [];
    list.forEach( function( item ){
      if( item.startsWith( filter ) && arr.indexOf(item) === -1 ) arr.push(item); });
    return arr; }
  function forQuerySelectorIn( parent, query, func ){
    var table = parent.querySelectorAll( query );
    if( isEmpty(table) ) return null; [].forEach.call( table, func ); return 1; }
  function classListAdr( list, classname, state ){
    if( state ) list.add(classname); else list.remove(classname); return state; }
  // Main function
  function ytabs_handler( ctn, btn, btnCls ){
    if( btn.target ) btn = btn.currentTarget; // btn should be element, check event just in case
    if( isEmpty(btn) || isEmpty(ctn) ) return;
    var bCL = btn.classList, cCL = ctn.classList;
    var cmpbtn = bCL.contains("tabs-tcmp"), cmpmode = cCL.contains("tabs-multi");
    if( cmpbtn && classListAdr( bCL, "tabs-active", (cmpmode = cCL.toggle("tabs-multi")) ) ) return;
    var btn_on = bCL.contains("tabs-active");
    if( cmpmode ){ classListAdr( bCL, "tabs-active", !(btn_on) ); }
    else{ var tmpCls = arrFilterTokenList( [], cCL, "tabs-id-" ); // 0 container tabs-id classes
      if( !(isEmpty(tmpCls)) ){ if( btn_on ) return;// btn already active in normal mode
        tmpCls.forEach( function( item ){ cCL.remove(item); });
      }
      forQuerySelectorIn( ctn, ".tabs-active", function( btn_on ){ // 0 all btn highlights
        classListAdr( btn_on.classList, "tabs-active", false );
        if( isEmpty(btnCls) && cmpbtn ){ // if no id (cmp btn), use first btn
          bCL = btn_on.classList; btnCls = arrFilterTokenList( [], bCL, "tabs-id-" ); }
      });
    }
    if( !(cmpmode) ) classListAdr( bCL, "tabs-active", true );
    btnCls.forEach( function( item ){ if( cmpmode ) cCL.toggle(item); else cCL.add(item); });
    var ctnCls = arrFilterTokenList( [], cCL, "tabs-id-" ); // gotta get the updated tabs
    forQuerySelectorIn( ctn, ".tabs-group", function( group ){
      var tabs_filled = 0;
      forQuerySelectorIn( group, ".tabs-tab", function( tab ){
        var tabCls = arrFilterTokenList( [], tab.classList, "tabs-id-" );
        tabCls.forEach( function( item_tab ) { //tabs have to come first
          var tab_show = 0;
          ctnCls.forEach( function( item_ctn ) { // if ctn has tab id, show
            if( item_ctn === item_tab ){ tab_show = 1; return; }
          });
          if( tab_show ){
            if( tab.innerHTML !== "" ) tabs_filled += 1;
            tab.style.display = "";
          }
          else {
            tab.style.display = "none";
          }
        });
      });
      group.style.display = ((tabs_filled == 0)?("none"):(""));
    });
  } // Create buttons, save some values as variables in the function
  forQuerySelectorIn( document, ".tabs-container", function( ctn ){
    var tabs_openFirst = null;
    var anchor_id = window.location.hash.substring(1);
    forQuerySelectorIn( ctn, ".tabs-btn", function( btn ){
      var btnCls = arrFilterTokenList( [], btn.classList, "tabs-id-" );
      btn.addEventListener( "click", function(){
        ytabs_handler( ctn, btn, btnCls );
      });
      if( anchor_id !== "" && anchor_id === btn.id )
        tabs_openFirst = function(){ ytabs_handler( ctn, btn, btnCls ); };
      if( isEmpty( tabs_openFirst ) )
        tabs_openFirst = function(){ ytabs_handler( ctn, btn, btnCls ); };
    });
    tabs_openFirst();
  });
});
///* Tabs-Script-End */