Difference between revisions of "MediaWiki:Common.js"

From Wiki
Jump to navigation Jump to search
(flattr js)
 
 
(21 intermediate revisions by 3 users not shown)
Line 1: Line 1:
/* Any JavaScript here will be loaded for all users on every page load. */
+
/* Javascript filter
 +
---------------------------------*/
  
(function() {
+
// animate divs on start
        var s = document.createElement('script'), t = document.getElementsByTagName('script')[0];
+
var items = document.querySelectorAll('.filter-sections li');
         s.type = 'text/javascript';
+
animate(items);
        s.async = true;
+
 
        s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto';
+
// filter on click
        t.parentNode.insertBefore(s, t);
+
each('.filter-links li', 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();
 +
    linksTolowerCase = el;
 +
  // 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);
 +
    },2);
 +
  })(0);
 +
};
 +
 
 +
         function openForm(evt, formName) {
 +
          // Declare all variables
 +
          var i, tabcontent, tablinks;
 +
          evt.preventDefault();
 +
 
 +
          // Get all elements with class="tabcontent" and hide them
 +
          //tabcontent = document.getElementsByClassName("contextxmlform");
 +
          //for (i = 0; i < tabcontent.length; i++) {
 +
          //  tabcontent[i].style.display = "none";
 +
          //}
 +
 
 +
          // Show the current tab, and add an "active" class to the link that opened the tab
 +
          if (evt.currentTarget.className.includes(' active')) {
 +
              evt.currentTarget.className.replace(" active", "");
 +
              // Get all elements with class="tablinks" and remove the class "active"
 +
              tablinks = document.getElementsByClassName("tablinks");
 +
              for (i = 0; i < tablinks.length; i++) {
 +
                tablinks[i].className = tablinks[i].className.replace(" active", "");
 +
              }
 +
              document.getElementById(formName).style.display = "none";
 +
          } else {
 +
              // Get all elements with class="tablinks" and remove the class "active"
 +
              tablinks = document.getElementsByClassName("tablinks");
 +
              for (i = 0; i < tablinks.length; i++) {
 +
                tablinks[i].className = tablinks[i].className.replace(" active", "");
 +
              }
 +
              document.getElementById(formName).style.display = "block";
 +
              evt.currentTarget.className += " active";
 +
          }
 +
        }

Latest revision as of 10:11, 25 August 2020

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

// animate divs on start
var items = document.querySelectorAll('.filter-sections li');
animate(items);

// filter on click
each('.filter-links li', 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();
    linksTolowerCase = el;
  // 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);
    },2);
  })(0);
};

        function openForm(evt, formName) {
          // Declare all variables
          var i, tabcontent, tablinks;
          evt.preventDefault();

          // Get all elements with class="tabcontent" and hide them
          //tabcontent = document.getElementsByClassName("contextxmlform");
          //for (i = 0; i < tabcontent.length; i++) {
          //  tabcontent[i].style.display = "none";
          //}

          // Show the current tab, and add an "active" class to the link that opened the tab
          if (evt.currentTarget.className.includes(' active')) {
              evt.currentTarget.className.replace(" active", "");
              // Get all elements with class="tablinks" and remove the class "active"
              tablinks = document.getElementsByClassName("tablinks");
              for (i = 0; i < tablinks.length; i++) {
                tablinks[i].className = tablinks[i].className.replace(" active", "");
              }
              document.getElementById(formName).style.display = "none";
          } else {
              // Get all elements with class="tablinks" and remove the class "active"
              tablinks = document.getElementsByClassName("tablinks");
              for (i = 0; i < tablinks.length; i++) {
                tablinks[i].className = tablinks[i].className.replace(" active", "");
              }
              document.getElementById(formName).style.display = "block";
              evt.currentTarget.className += " active";
          }
        }