MediaWiki:Gadget-Diaporama.js

/**
 * 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");
		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].parentNode.appendChild(Fonctions.CreateSelect(index, ControlLinks[5].title));
		ControlLinks[5].parentNode.removeChild(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;

} )();