Difference between revisions of "MediaWiki:Common.js"

From Wiki
Jump to navigation Jump to search
m
m
Line 1: Line 1:
 
/* Any JavaScript here will be loaded for all users on every page load. */
 
/* Any JavaScript here will be loaded for all users on every page load. */
  
filterSelection("all")
+
/*  Javascript filter for the manual 2020.05.26
function filterSelection(c) {
+
-------------------------------------------------*/
  var x, i;
+
// animate divs on start
  x = document.getElementsByClassName("ManualsfilterLi");
+
var items = document.querySelectorAll('.filter-sections ul');
  if (c == "all") c = "";
+
animate(items);
  // Add the "show" class (display:block) to the filtered elements, and remove the "show" class from the elements that are not selected
 
  for (i = 0; i < x.length; i++) {
 
    w3RemoveClass(x[i], "Manualsshow");
 
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "Manualsshow");
 
  }
 
}
 
  
// Show filtered elements
+
// filter on click
function w3AddClass(element, name) {
+
each('.filter-links li a', function(el) {
   var i, arr1, arr2;
+
   el.addEventListener('click', function(e) {
  arr1 = element.className.split(" ");
+
    e.preventDefault();
  arr2 = name.split(" ");
+
     filterLinks(el);
  for (i = 0; i < arr2.length; i++) {
+
   });
     if (arr1.indexOf(arr2[i]) == -1) {
+
});
      element.className += " " + arr2[i];
 
    }
 
   }
 
}
 
  
// Hide elements that are not selected
+
// filter links functions
function w3RemoveClass(element, name) {
+
function filterLinks(element) {
   var i, arr1, arr2;
+
   // get text
   arr1 = element.className.split(" ");
+
   var el = element.textContent,
   arr2 = name.split(" ");
+
    // convert to lowercase
  for (i = 0; i < arr2.length; i++) {
+
    linksTolowerCase = el.toLowerCase();
     while (arr1.indexOf(arr2[i]) > -1) {
+
   // if all remove all elements
       arr1.splice(arr1.indexOf(arr2[i]), 1);
+
  if (el === 'All') {
     }
+
    // first show all view class
 +
    each('.view', function(e) {
 +
      e.classList.remove('view');
 +
    });
 +
    // no show init animation
 +
    animate(items);
 +
  } else {
 +
     // if not click all remove all elements
 +
    each('.view', function(e) {
 +
       e.classList.remove('view');
 +
     });
 
   }
 
   }
   element.className = arr1.join(" ");
+
   // show animation for current elements
}
+
  animate(document.querySelectorAll('.' + linksTolowerCase));
 
+
};
// Add active class to the current control button (highlight it)
+
// forech arrays
var btnContainer = document.getElementById("myBtnContainer");
+
function each(el, callback) {
var btns = btnContainer.getElementsByClassName("Manualsbtn");
+
  var allDivs = document.querySelectorAll(el),
for (var i = 0; i < btns.length; i++) {
+
    alltoArr = Array.prototype.slice.call(allDivs);
  btns[i].addEventListener("click", function() {
+
  Array.prototype.forEach.call(alltoArr, function(selector, index) {
     var current = document.getElementsByClassName("active");
+
     if (callback) return callback(selector);
    current[0].className = current[0].className.replace(" active", "");
 
    this.className += " active";
 
 
   });
 
   });
}
+
};
 +
// animate function
 +
function animate(item) {
 +
  (function show(counter) {
 +
    setTimeout(function() {
 +
      item[counter].classList.add('view');
 +
      counter++;
 +
      if (counter < item.length) show(counter);
 +
    },1);
 +
  })(0);
 +
};

Revision as of 13:16, 27 May 2020

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

/*  Javascript filter for the manual 2020.05.26
-------------------------------------------------*/
// animate divs on start
var items = document.querySelectorAll('.filter-sections ul');
animate(items);

// filter on click
each('.filter-links li a', function(el) {
  el.addEventListener('click', function(e) {
    e.preventDefault();
    filterLinks(el);
  });
});

// filter links functions
function filterLinks(element) {
  // get text 
  var el = element.textContent,
    // convert to lowercase
    linksTolowerCase = el.toLowerCase();
  // if all remove all elements
  if (el === 'All') {
    // first show all view class
    each('.view', function(e) {
      e.classList.remove('view');
    });
    // no show init animation
    animate(items);
  } else {
    // if not click all remove all elements
    each('.view', function(e) {
      e.classList.remove('view');
    });
  }
  // show animation for current elements
  animate(document.querySelectorAll('.' + linksTolowerCase));
};
// forech arrays
function each(el, callback) {
  var allDivs = document.querySelectorAll(el),
    alltoArr = Array.prototype.slice.call(allDivs);
  Array.prototype.forEach.call(alltoArr, function(selector, index) {
    if (callback) return callback(selector);
  });
};
// animate function
function animate(item) {
  (function show(counter) {
    setTimeout(function() {
      item[counter].classList.add('view');
      counter++;
      if (counter < item.length) show(counter);
    },1);
  })(0);
};