MediaWiki:Common.js
Révision datée du 24 janvier 2019 à 23:09 par Togepi (discussion | contributions) (test multislides)
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() {
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();
})();