MediaWiki:Common.js : Différence entre versions

/* Tout JavaScript ici sera chargé avec chaque page accédée par n’importe quel utilisateur. */


/* For a responsive Wiki we need to add the viewport meta tag to the head of the page */
var viewPortTag=document.createElement('meta');
viewPortTag.id="viewport";
viewPortTag.name = "viewport";

/* user-scalable=no forbid to users to zoom in and out to the page, and only scroll it. */
viewPortTag.content = "width=device-width; initial-scale=1.0; user-scalable=yes";
document.getElementsByTagName('head')[0].appendChild(viewPortTag);

var theme=document.createElement('meta');
theme.id="theme";
theme.name="theme-color";
theme.content="#1f0e02";

/* Slideshow pour faire défiler les images, c'est du JS pompé sur le wiki italien */
(function() {

  init(); //on page load - show first slide, hidethe rest

  function init() {

    parents = document.getElementsByClassName('slider');

    for (j = 0; j < parents.length; j++) {
      var slides = parents[j].getElementsByClassName("slider-wrapper");
      var dots = parents[j].getElementsByClassName("dot");
      slides[0].classList.add('active-slide');
      dots[0].classList.add('active');
    }
  }

  dots = document.getElementsByClassName('dot'); //dots functionality

  for (i = 0; i < dots.length; i++) {

    dots[i].onclick = function() {

      slides = this.parentNode.parentNode.getElementsByClassName("slider-wrapper");

      for (j = 0; j < this.parentNode.children.length; j++) {
        this.parentNode.children[j].classList.remove('active');
        slides[j].classList.remove('active-slide');
        if (this.parentNode.children[j] == this) {
          index = j;
        }
      }
      this.classList.add('active');
      slides[index].classList.add('active-slide');

    }
  }
//prev/next functionality
  links = document.querySelectorAll('.slider a');

  for (i = 0; i < links.length; i++) {
    links[i].onclick = function() {
      current = this.parentNode;

      var slides = current.getElementsByClassName("slider-wrapper");
      var dots = current.getElementsByClassName("dot");
      curr_slide = current.getElementsByClassName('active-slide')[0];
      curr_dot = current.getElementsByClassName('active')[0];
      curr_slide.classList.remove('active-slide');
      curr_dot.classList.remove('active');
      if (this.className == 'slider-next') {

        if (curr_slide.nextElementSibling.classList.contains('slider-wrapper')) {
          curr_slide.nextElementSibling.classList.add('active-slide');
          curr_dot.nextElementSibling.classList.add('active');
        } else {
          slides[0].classList.add('active-slide');
          dots[0].classList.add('active');
        }

      }

      if (this.className == 'slider-previous') {

        if (curr_slide.previousElementSibling) {
          curr_slide.previousElementSibling.classList.add('active-slide');
          curr_dot.previousElementSibling.classList.add('active');
        } else {
          slides[slides.length - 1].classList.add('active-slide');
          dots[slides.length - 1].classList.add('active');
        }

      }

    }

  }
})();



/*
* rwdImageMaps jQuery plugin v1.6
*
* Allows image maps to be used in a responsive design by recalculating the area coordinates to match the actual image size on load and window.resize
*
* Copyright (c) 2016 Matt Stow
* https://github.com/stowball/jQuery-rwdImageMaps
* http://mattstow.com
* Licensed under the MIT license
*/
;(function($) {
	$.fn.rwdImageMaps = function() {
		var $img = this;

		var rwdImageMap = function() {
			$img.each(function() {
				if (typeof($(this).attr('usemap')) == 'undefined')
					return;

				var that = this,
					$that = $(that);

				// Since WebKit doesn't know the height until after the image has loaded, perform everything in an onload copy
				$('<img />').on('load', function() {
					var attrW = 'width',
						attrH = 'height',
						w = $that.attr(attrW),
						h = $that.attr(attrH);

					if (!w || !h) {
						var temp = new Image();
						temp.src = $that.attr('src');
						if (!w)
							w = temp.width;
						if (!h)
							h = temp.height;
					}

					var wPercent = $that.width()/100,
						hPercent = $that.height()/100,
						map = $that.attr('usemap').replace('#', ''),
						c = 'coords';

					$('map[name="' + map + '"]').find('area').each(function() {
						var $this = $(this);
						if (!$this.data(c))
							$this.data(c, $this.attr(c));

						var coords = $this.data(c).split(','),
							coordsPercent = new Array(coords.length);

						for (var i = 0; i < coordsPercent.length; ++i) {
							if (i % 2 === 0)
								coordsPercent[i] = parseInt(((coords[i]/w)*100)*wPercent);
							else
								coordsPercent[i] = parseInt(((coords[i]/h)*100)*hPercent);
						}
						$this.attr(c, coordsPercent.toString());
					});
				}).attr('src', $that.attr('src'));
			});
		};
		$(window).resize(rwdImageMap).trigger('resize');

		return this;
	};
})(jQuery);

$(document).ready(function(e) {
    $('img[usemap]').rwdImageMaps();
});

// Modal windows in javascript

$(".trigger").on("click", function() {
    var modal = $(this).data("modal");
    $(modal).toggle();
});

$(".modal").on("click", function(e) {
    var className = e.target.className;
    if(className === "modal" || className === "close-button"){
        $(this).closest(".modal").toggle();
    }
});

/* Pour le bas de page */

$('div#content').append( "<div class='content-footer'></div>" );

/* Pour les cookies */

(function () {
    var req = new XMLHttpRequest();
    req.addEventListener('load', function (ev) {
        if (this.status >= 200 && this.status < 300) {
            var data = JSON.parse(this.responseText);
            if (data.hasOwnProperty('version')) {
                var gdpr = document.createElement("script");
                gdpr.src = "https://s3-static.geo.gfsrv.net/cookiebanner/" + data.version + "/cookie.min.js";
                document.head.appendChild(gdpr);
            }
        }
    });
    req.open('GET', "https://s3-static.geo.gfsrv.net/cookiebanner/version.json");
    req.send();
})();