Difference between revisions of "MediaWiki:Common.js"

From Wiki
Jump to navigation Jump to search
(Remove Flattr code)
m
(9 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* Any JavaScript here will be loaded for all users on every page load. */
+
/* Javascript filter
 +
---------------------------------*/
 +
 
 +
// animate divs on start
 +
var items = document.querySelectorAll('.filter-sections li');
 +
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);
 +
    },50);
 +
  })(0);
 +
};

Revision as of 14:08, 27 May 2020

/*  Javascript filter
---------------------------------*/

// animate divs on start
var items = document.querySelectorAll('.filter-sections li');
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);
    },50);
  })(0);
};