MediaWiki:Gadget-Diaporama.js
Apparence
Note : après avoir enregistré la page, vous devrez forcer le rechargement complet du cache de votre navigateur pour voir les changements.
Mozilla / Firefox / Konqueror / Safari : maintenez la touche Majuscule (Shift) en cliquant sur le bouton Actualiser (Reload) ou pressez Maj-Ctrl-R (Cmd-R sur Apple Mac) ;
Firefox (sur GNU/Linux) / Chrome / Internet Explorer / Opera : maintenez la touche Ctrl en cliquant sur le bouton Actualiser ou pressez Ctrl-F5./**
* Modèle associé : [[Modèle:Animation]]
*/
/* jshint scripturl: true */
/* globals mw */
/* exported Diaporama_Init */
(function () {
'use strict';
var Fonctions = {};
var State = {};
Fonctions.Init = function($content){
// en cas de réexécution du script, interruption des anciennes animations
if (State.Timeout) {
State.Timeout.forEach(clearTimeout);
}
// initialisation de l'état, ou réinitialisation
State.Content = $content[0];
State.DiaporamaIndex = 0;
State.ImageDelay = 1;
State.Paused = [];
State.Visible = [];
State.Length = [];
State.Delay = [];
State.Timeout = [];
$content.find( '.diaporama' ).each( function ( _, DiaporamaDiv ) {
Fonctions.InitDiaporama( DiaporamaDiv );
} );
};
Fonctions.InitDiaporama = function(DiaporamaDiv){
var index = State.DiaporamaIndex;
State.DiaporamaIndex++;
DiaporamaDiv.id = "Diaporama_"+index;
var DiaporamaFileContainer = DiaporamaDiv.querySelector('div.diaporamaFiles');
var DiaporamaControl = DiaporamaDiv.querySelector('div.diaporamaControl');
if (!DiaporamaFileContainer || !DiaporamaControl) {
return;
}
var DiaporamaFiles = DiaporamaFileContainer.querySelectorAll('div.ImageFile');
if (DiaporamaFiles.length<2) {
return;
}
State.Length[index] = DiaporamaFiles.length;
DiaporamaFileContainer.id = "DiaporamaFileContainer_"+index;
DiaporamaControl.id = "DiaporamaControl_"+index;
State.Delay[index] = State.ImageDelay;
var DiaporamaDivClass = mw.html.escape(DiaporamaDiv.className);
var ParamDelay = DiaporamaDivClass.match(/Delay([0-9]+[.,]?[0-9]*)/);
if (ParamDelay !== null) {
ParamDelay = parseFloat(ParamDelay[1].replace(",", "."));
if (ParamDelay && ParamDelay>0) {
State.Delay[index] = ParamDelay;
}
}
Fonctions.ShowThisDiapo(index, 0);
var ControlLinks = DiaporamaControl.getElementsByTagName("a"); // live collection
ControlLinks = Array.from(ControlLinks); // convert to a static array
ControlLinks[0].firstChild.id = "DiaporamaPlay"+index;
ControlLinks[0].href = "javascript:";
ControlLinks[0].onclick = function (e) { e.preventDefault(); Fonctions.Play(index); };
ControlLinks[1].firstChild.id = "DiaporamaPause"+index;
ControlLinks[1].href = "javascript:";
ControlLinks[1].onclick = function (e) { e.preventDefault(); Fonctions.Pause(index); };
ControlLinks[2].firstChild.id = "DiaporamaStop"+index;
ControlLinks[2].href = "javascript:";
ControlLinks[2].onclick = function (e) { e.preventDefault(); Fonctions.Stop(index); };
ControlLinks[3].firstChild.id = "DiaporamaLast"+index;
ControlLinks[3].href = "javascript:";
ControlLinks[3].onclick = function (e) { e.preventDefault(); Fonctions.ToggleDiapo(index, -1); };
ControlLinks[4].firstChild.id = "DiaporamaNext"+index;
ControlLinks[4].href = "javascript:";
ControlLinks[4].onclick = function (e) { e.preventDefault(); Fonctions.ToggleDiapo(index, 1); };
ControlLinks[5].replaceWith(Fonctions.CreateSelect(index, ControlLinks[5].title)); // replace in the DOM
ControlLinks.splice(5, 1); // remove ControlLinks[5]
for (var e=0, t=ControlLinks.length; e<t; e++) {
ControlLinks[e].onmousedown = function(){Fonctions.Onclick(this);};
ControlLinks[e].onmouseup = function(){Fonctions.Offclick(this, index);};
ControlLinks[e].firstChild.style.backgroundColor = "white";
ControlLinks[e].onmouseover = function(){ this.focus(); };
}
DiaporamaControl.style.display = "block";
Fonctions.Pause(index);
};
Fonctions.Play = function(index){
if (State.Paused[index] === false) {
return;
}
State.Paused[index] = false;
clearTimeout(State.Timeout[index]);
State.Timeout[index] = setTimeout(function () { Fonctions.ToggleDiapo(index, 1); }, State.Delay[index]*1000);
var ButtonPlay = State.Content.querySelector("#DiaporamaPlay"+index);
ButtonPlay.style.backgroundColor = "silver";
var ButtonPause = State.Content.querySelector("#DiaporamaPause"+index);
ButtonPause.style.backgroundColor = "white";
var ButtonStop = State.Content.querySelector("#DiaporamaStop"+index);
ButtonStop.style.backgroundColor = "white";
};
Fonctions.Pause = function(index){
State.Paused[index] = true;
clearTimeout(State.Timeout[index]);
var ButtonPlay = State.Content.querySelector("#DiaporamaPlay"+index);
ButtonPlay.style.backgroundColor = "white";
var ButtonPause = State.Content.querySelector("#DiaporamaPause"+index);
ButtonPause.style.backgroundColor = "silver";
var ButtonStop = State.Content.querySelector("#DiaporamaStop"+index);
ButtonStop.style.backgroundColor = "white";
};
Fonctions.Stop = function(index){
State.Paused[index] = true;
clearTimeout(State.Timeout[index]);
Fonctions.ShowThisDiapo(index, 0);
var ButtonPlay = State.Content.querySelector("#DiaporamaPlay"+index);
ButtonPlay.style.backgroundColor = "white";
var ButtonPause = State.Content.querySelector("#DiaporamaPause"+index);
ButtonPause.style.backgroundColor = "white";
var ButtonStop = State.Content.querySelector("#DiaporamaStop"+index);
ButtonStop.style.backgroundColor = "silver";
};
Fonctions.ToggleDiapo = function(index, diff){
clearTimeout(State.Timeout[index]);
var DiaporamaFileContainer = State.Content.querySelector("#DiaporamaFileContainer_"+index);
var DiaporamaFiles = DiaporamaFileContainer.querySelectorAll('div.ImageFile');
var VisibleIndex = State.Visible[index];
var NextDiaporamaIndex = (VisibleIndex+diff);
if (NextDiaporamaIndex === DiaporamaFiles.length || NextDiaporamaIndex < 0) {
var DiaporamaDiv = State.Content.querySelector("#Diaporama_"+index);
if ( diff < 0 || ! DiaporamaDiv.classList.contains('AutoLoop') ) {
return;
}
NextDiaporamaIndex = 0;
}
Fonctions.ShowThisDiapo(index, NextDiaporamaIndex);
};
Fonctions.ShowThisDiapo = function(index, Value){
clearTimeout(State.Timeout[index]);
var DiaporamaFileContainer = State.Content.querySelector("#DiaporamaFileContainer_"+index);
var DiaporamaFiles = DiaporamaFileContainer.querySelectorAll('div.ImageFile');
for (var x=0, z=DiaporamaFiles.length; x<z; x++) {
if (x !== Value) {
DiaporamaFiles[x].style.display = "none";
} else {
DiaporamaFiles[x].style.display = "block";
}
}
State.Visible[index] = Value;
Fonctions.UpdateBar(index);
Fonctions.UpdateSelect(index);
if (!State.Paused[index]) {
var multipl = 1;
if (Value === (State.Length[index]-1)) {
multipl = 3;
}
State.Timeout[index] = setTimeout(function () { Fonctions.ToggleDiapo(index, 1); }, State.Delay[index]*1000*multipl);
}
};
Fonctions.CreateSelect = function(index, Title) {
var s, Opt;
var Total = State.Length[index];
var Select = document.createElement('select');
Select.id = "DiaporamaSelect"+index;
Select.title = Title;
for ( s=0; s<Total; s++ ) {
Opt = document.createElement('option');
if (s === 0) {
Opt.selected = "selected";
}
Opt.text = (s+1)+"/"+Total;
Opt.innerHTML = (s+1)+"/"+Total;
Opt.value = s;
Select.appendChild(Opt);
}
Select.onchange = function(){ Fonctions.SelectDiapo(Fonctions.getIndex(this)); };
Select.onmouseover = function(){ this.focus(); };
return Select;
};
Fonctions.SelectDiapo = function(index){
var Select = State.Content.querySelector("#DiaporamaSelect"+index);
if (!Select) {
return;
}
var Opts = Select.getElementsByTagName('option');
for (var o=0, p=Opts.length; o<p; o++) {
if (Opts[o].selected) {
var Value = parseInt(Opts[o].value);
return Fonctions.ShowThisDiapo(index, Value);
}
}
};
Fonctions.UpdateSelect = function(index){
var Select = State.Content.querySelector("#DiaporamaSelect"+index);
if (!Select) {
return;
}
var Opts = Select.getElementsByTagName('option');
for (var o=0, p=Opts.length; o<p; o++){
if (o === State.Visible[index]) {
Opts[o].selected = "selected";
} else {
Opts[o].selected = false;
}
}
};
Fonctions.UpdateBar = function(index){
var Percent = (100/(State.Length[index]-1)) * State.Visible[index];
if (Percent>100) {
Percent = 100;
}
var DiaporamaControl = State.Content.querySelector("#DiaporamaControl_"+index);
var DiaporamaScrollBar = DiaporamaControl.querySelector('div.ScrollBar');
DiaporamaScrollBar.style.width = Percent + "%";
};
Fonctions.Onclick = function(Link){
var Image = Link.getElementsByTagName('img')[0];
Image.style.backgroundColor = "gray";
};
Fonctions.Offclick = function(Link, index){
var Span = Link.parentNode;
var Image = Link.getElementsByTagName('img')[0];
var DiapoState = State.Paused[index];
if ( ( Span.classList.contains('Play') && DiapoState === false ) || ( ( Span.classList.contains('Pause') || Span.classList.contains('Stop') ) && DiapoState === true ) ){
Image.style.backgroundColor = "silver";
} else {
Image.style.backgroundColor = "white";
}
};
Fonctions.getIndex = function(Element){
return parseInt(Element.id.replace(/[^0-9]/g, ""));
};
// point d'accès à la fonction d'initialisation,
// utilisé par [[MediaWiki:Common.js]] et [[MediaWiki:Gadget-LiveRC.js/Extensions/RunCommonJS.js]]
window.Diaporama_Init = Fonctions.Init;
mw.hook( 'wikipage.content' ).add( function ( $content ) {
Fonctions.Init( $content );
} );
} )();