MediaWiki:Common.js : Différence entre versions
(ajout slideshow) |
(pour que les images fassent la bonne taille) |
||
Ligne 87 : | Ligne 87 : | ||
}); | }); | ||
})(); | })(); | ||
+ | |||
+ | |||
+ | |||
+ | /* | ||
+ | * 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(); | ||
+ | } | ||
+ | }); |
Version du 2 octobre 2018 à 20:11
/* Tout JavaScript ici sera chargé avec chaque page accédée par n’importe quel utilisateur. */
$('div#content').append( "<div class='content-footer'></div>" );
(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();
})();
/* 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();
}
});