Difference between revisions of "MediaWiki:Common.js"

/* Any JavaScript here will be loaded for all users on every page load. */

/*Tab toggling*/
$('#myTab a').click(function (e) {
  e.preventDefault()
$(this).tab('show')
});

$(document).ready(function(){
var countrybutton = document.getElementById('countrybutton');
      var areabutton = document.getElementById('areabutton');
     var productbutton = document.getElementById('productbutton');

     var tabtogglers = document.getElementsByClassName('tabtoggler');
       if (typeof tabtogglers != 'undefined' && tabtogglers != null){
         var arrayLength3 = tabtogglers.length;
         for (var i = 0; i < arrayLength3; i++) {
            var tabtog = tabtogglers[i];
           tabtog.addEventListener("click", function(){
                 this.appendChild(areabutton);
                this.appendChild(countrybutton);
               this.appendChild(productbutton);
                     document.getElementById('countrybutton').style.display = 'inline';
                     document.getElementById('areabutton').style.display = 'inline';
                    document.getElementById('productbutton').style.display = 'inline';
            });
          }
}

  if(window.location.hash != "") {

      $('a[href="' + window.location.hash + '"]').click();
       var doeswork= document.getElementsByClassName( window.location.hash);
       doeswork[0].click();
  }
});

$(document).ready(function(){

     var countrybutton = document.getElementById('countrybutton');
      var areabutton = document.getElementById('areabutton');
     var productbutton = document.getElementById('productbutton');
      
       if (typeof countrybutton != 'undefined' && countrybutton != null){
    var countryfunction = function() {
          if(!hasClass(countrybutton,'tabbuttonactive')){

         //change button colours according to active or not
           countrybutton.classList.toggle('tabbuttonactive');
          countrybutton.classList.toggle('tabbutton');
 
            if(hasClass(areabutton,'tabbuttonactive')){
           areabutton.classList.toggle('tabbuttonactive');
          areabutton.classList.toggle('tabbutton');
           }

            if(hasClass(productbutton,'tabbuttonactive')){
           productbutton.classList.toggle('tabbuttonactive');
          productbutton.classList.toggle('tabbutton');
          }

        var myStringArray = document.getElementsByClassName('bycountry');
         var arrayLength = myStringArray.length;
         for (var i = 0; i < arrayLength; i++) {
                myStringArray[i].style.display = '';
          }

      var myStringArray2 = document.getElementsByClassName('byarea');
         var arrayLength2 = myStringArray2.length;
         for (var i = 0; i < arrayLength2; i++) {
                myStringArray2[i].style.display = 'none';
          }

         var myStringArray3 = document.getElementsByClassName('byproduct');
         var arrayLength3 = myStringArray3.length;
         for (var i = 0; i < arrayLength3; i++) {
                myStringArray3[i].style.display = 'none';
          }
       } // if(!hasClass(countrybutton,'tabbuttonactive'))
    };//countryfuntion

        countrybutton.addEventListener('click', countryfunction , false);


    var areafunction = function() {
          if(!hasClass(areabutton,'tabbuttonactive')){

         //change button colours according to active or not
           areabutton.classList.toggle('tabbuttonactive');
          areabutton.classList.toggle('tabbutton');
 
            if(hasClass(countrybutton,'tabbuttonactive')){
           countrybutton.classList.toggle('tabbuttonactive');
          countrybutton.classList.toggle('tabbutton');
           }

            if(hasClass(productbutton,'tabbuttonactive')){
           productbutton.classList.toggle('tabbuttonactive');
          productbutton.classList.toggle('tabbutton');
          }

        var myStringArray = document.getElementsByClassName('byarea');
         var arrayLength = myStringArray.length;
         for (var i = 0; i < arrayLength; i++) {
                myStringArray[i].style.display = '';
          }

      var myStringArray2 = document.getElementsByClassName('bycountry');
         var arrayLength2 = myStringArray2.length;
         for (var i = 0; i < arrayLength2; i++) {
                myStringArray2[i].style.display = 'none';
          }

         var myStringArray3 = document.getElementsByClassName('byproduct');
         var arrayLength3 = myStringArray3.length;
         for (var i = 0; i < arrayLength3; i++) {
                myStringArray3[i].style.display = 'none';
          }
       } // if(!hasClass(areabutton,'tabbuttonactive'))
    };//areafuntion

        areabutton.addEventListener('click', areafunction , false);

     var productfunction = function() {
          if(!hasClass(productbutton,'tabbuttonactive')){

         //change button colours according to active or not
           productbutton.classList.toggle('tabbuttonactive');
          productbutton.classList.toggle('tabbutton');
 
            if(hasClass(countrybutton,'tabbuttonactive')){
           countrybutton.classList.toggle('tabbuttonactive');
          countrybutton.classList.toggle('tabbutton');
           }

            if(hasClass(areabutton,'tabbuttonactive')){
           areabutton.classList.toggle('tabbuttonactive');
          areabutton.classList.toggle('tabbutton');
          }

        var myStringArray = document.getElementsByClassName('byproduct');
         var arrayLength = myStringArray.length;
         for (var i = 0; i < arrayLength; i++) {
                myStringArray[i].style.display = '';
          }

      var myStringArray2 = document.getElementsByClassName('bycountry');
         var arrayLength2 = myStringArray2.length;
         for (var i = 0; i < arrayLength2; i++) {
                myStringArray2[i].style.display = 'none';
          }

         var myStringArray3 = document.getElementsByClassName('byarea');
         var arrayLength3 = myStringArray3.length;
         for (var i = 0; i < arrayLength3; i++) {
                myStringArray3[i].style.display = 'none';
          }
       } // if(!hasClass(productbutton,'tabbuttonactive'))
    };//productfuntion


        productbutton.addEventListener('click', productfunction , false);
}
     function hasClass(element, cls) {
    return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
     }

});