MediaWiki:Common.js

Note : après avoir enregistré vos modifications, il se peut que vous deviez forcer le rechargement complet du cache de votre navigateur pour voir les changements.

• Firefox / Safari : maintenez la touche Maj (Shift) en cliquant sur le bouton Actualiser ou pressez Ctrl-F5 ou Ctrl-R (⌘-R sur un Mac)
• Google Chrome : appuyez sur Ctrl-Maj-R (⌘-Shift-R sur un Mac)
• Internet Explorer : maintenez la touche Ctrl en cliquant sur le bouton Actualiser ou pressez Ctrl-F5
• Opera : allez dans Menu → Settings (Opera → Préférences sur un Mac) et ensuite à Confidentialité & sécurité → Effacer les données d’exploration → Images et fichiers en cache.

/* 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() {
	
	function Slideshow( element ) {
		this.el = document.querySelector( element );
		this.init();
	}
	
	Slideshow.prototype = {
		init: function() {
			this.wrapper = this.el.querySelector( ".slider-wrapper" );
			this.slides = this.el.querySelectorAll( ".slide" );
			this.previous = this.el.querySelector( ".slider-previous" );
			this.next = this.el.querySelector( ".slider-next" );
			this.index = 0;
			this.total = this.slides.length;
			
			this.actions();	
		},
		_slideTo: function( slide ) {
			var currentSlide = this.slides[slide];
			currentSlide.style.display="block";
			
			for( var i = 0; i < this.slides.length; i++ ) {
				var slide = this.slides[i];
				if( slide !== currentSlide ) {
					slide.style.display="none";
				}
			}
		},
		actions: function() {
			var self = this;
			self.next.addEventListener( "click", function() {
				self.index++;
				self.previous.style.display = "block";
				
				if( self.index == self.total - 1 ) {
					self.index = self.total - 1;
					self.next.style.display = "none";
				}
				if (self.index > self.total) {self.index = self.total}
				if (self.index < 1) {self.index = 1}
				self._slideTo( self.index );
				
			}, false);
			
			self.previous.addEventListener( "click", function() {
				self.index--;
				self.next.style.display = "block";
				
				if( self.index == 0 ) {
					self.index = 0;
					self.previous.style.display = "none";
				}
				
				self._slideTo( self.index );
				
			}, false);
		}
		
	};
	document.addEventListener( "DOMContentLoaded", function() {
		
		var slider = new Slideshow( "#main-slider" );
	});
})();



/*
* 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();
})();