/**
* Modèle associé : ]
*/
/* 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;
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 = DiaporamaFiles.length;
DiaporamaFileContainer.id = "DiaporamaFileContainer_"+index;
DiaporamaControl.id = "DiaporamaControl_"+index;
State.Delay = State.ImageDelay;
var DiaporamaDivClass = mw.html.escape(DiaporamaDiv.className);
var ParamDelay = DiaporamaDivClass.match(/Delay(+?*)/);
if (ParamDelay !== null) {
ParamDelay = parseFloat(ParamDelay.replace(",", "."));
if (ParamDelay && ParamDelay>0) {
State.Delay = ParamDelay;
}
}
Fonctions.ShowThisDiapo(index, 0);
var ControlLinks = DiaporamaControl.getElementsByTagName("a"); // live collection
ControlLinks = Array.from(ControlLinks); // convert to a static array
ControlLinks.firstChild.id = "DiaporamaPlay"+index;
ControlLinks.href = "javascript:";
ControlLinks.onclick = function (e) { e.preventDefault(); Fonctions.Play(index); };
ControlLinks.firstChild.id = "DiaporamaPause"+index;
ControlLinks.href = "javascript:";
ControlLinks.onclick = function (e) { e.preventDefault(); Fonctions.Pause(index); };
ControlLinks.firstChild.id = "DiaporamaStop"+index;
ControlLinks.href = "javascript:";
ControlLinks.onclick = function (e) { e.preventDefault(); Fonctions.Stop(index); };
ControlLinks.firstChild.id = "DiaporamaLast"+index;
ControlLinks.href = "javascript:";
ControlLinks.onclick = function (e) { e.preventDefault(); Fonctions.ToggleDiapo(index, -1); };
ControlLinks.firstChild.id = "DiaporamaNext"+index;
ControlLinks.href = "javascript:";
ControlLinks.onclick = function (e) { e.preventDefault(); Fonctions.ToggleDiapo(index, 1); };
ControlLinks.replaceWith(Fonctions.CreateSelect(index, ControlLinks.title)); // replace in the DOM
ControlLinks.splice(5, 1); // remove ControlLinks
for (var e=0, t=ControlLinks.length; e<t; e++) {
ControlLinks.onmousedown = function(){Fonctions.Onclick(this);};
ControlLinks.onmouseup = function(){Fonctions.Offclick(this, index);};
ControlLinks.firstChild.style.backgroundColor = "white";
ControlLinks.onmouseover = function(){ this.focus(); };
}
DiaporamaControl.style.display = "block";
Fonctions.Pause(index);
};
Fonctions.Play = function(index){
if (State.Paused === false) {
return;
}
State.Paused = false;
clearTimeout(State.Timeout);
State.Timeout = setTimeout(function () { Fonctions.ToggleDiapo(index, 1); }, State.Delay*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 = true;
clearTimeout(State.Timeout);
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 = true;
clearTimeout(State.Timeout);
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);
var DiaporamaFileContainer = State.Content.querySelector("#DiaporamaFileContainer_"+index);
var DiaporamaFiles = DiaporamaFileContainer.querySelectorAll('div.ImageFile');
var VisibleIndex = State.Visible;
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);
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.style.display = "none";
} else {
DiaporamaFiles.style.display = "block";
}
}
State.Visible = Value;
Fonctions.UpdateBar(index);
Fonctions.UpdateSelect(index);
if (!State.Paused) {
var multipl = 1;
if (Value === (State.Length-1)) {
multipl = 3;
}
State.Timeout = setTimeout(function () { Fonctions.ToggleDiapo(index, 1); }, State.Delay*1000*multipl);
}
};
Fonctions.CreateSelect = function(index, Title) {
var s, Opt;
var Total = State.Length;
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.selected) {
var Value = parseInt(Opts.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) {
Opts.selected = "selected";
} else {
Opts.selected = false;
}
}
};
Fonctions.UpdateBar = function(index){
var Percent = (100/(State.Length-1)) * State.Visible;
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');
Image.style.backgroundColor = "gray";
};
Fonctions.Offclick = function(Link, index){
var Span = Link.parentNode;
var Image = Link.getElementsByTagName('img');
var DiapoState = State.Paused;
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(//g, ""));
};
// point d'accès à la fonction d'initialisation,
// utilisé par ]
window.Diaporama_Init = Fonctions.Init;
mw.hook( 'wikipage.content' ).add( function ( $content ) {
Fonctions.Init( $content );
} );
} )();