Modification du script slide dans portail.php

Vue/portail.php

@@ -527,108 +527,191 @@
 		</div>
 
 		<script type="text/javascript">
-			// Empeche inspecter dans le navigateur 
+			// Slider Module - Protégé contre les exécutions multiples
-			
+			(function() {
-			/*
+				'use strict';
-			if (document.addEventListener) {
+				
-				document.addEventListener('contextmenu', function (e) {
+				// Vérifier si déjà initialisé
-					e.preventDefault();
+				if (window.sliderInstance) {
-				}, false);
+					console.warn('Une instance de slider existe déjà');
-			} else {
-				document.attachEvent('oncontextmenu', function () {
-					window.event.returnValue = false;
-				});
-			}
-				*/
-			
-			
-			// Accéder aux images
-			let slideImages = document.querySelectorAll('.slide');
-			// Accéder aux boutons suivant et précédent
-			let next = document.querySelector('.next');
-			let prev = document.querySelector('.prev');
-			// Accéder aux indicateurs
-			let dots = document.querySelectorAll('.dot');
-
-			var counter = 0;
-
-			// Code pour le bouton suivant
-			next.addEventListener('click', slideNext);
-			
-			function slideNext(){
-			slideImages[counter].style.animation = 'next1 0.5s ease-in forwards';
-			
-			if(counter >= slideImages.length-1){
-				counter = 0;
-			}
-			else{
-				counter++;
-			}
-			slideImages[counter].style.animation = 'next2 0.5s ease-in forwards';
-			indicators();
-			}
-
-			// Code pour le bouton précédent
-			prev.addEventListener('click', slidePrev);
-			function slidePrev(){
-			slideImages[counter].style.animation = 'prev1 0.5s ease-in forwards';
-			if(counter == 0){
-				counter = slideImages.length-1;
-			}
-			else{
-				counter--;
-			}
-			slideImages[counter].style.animation = 'prev2 0.5s ease-in forwards';
-			indicators();
-			}
-
-			// Defilement automatique
-			function autoSliding(){
-				deletInterval = setInterval(timer, 3000);
-				function timer(){
-					slideNext();
-					indicators();
-				}
-			}
-			autoSliding();
-
-			// Arrêtez le defilement automatique lorsque la souris survole une image
-			const container = document.querySelector('.slide-container');
-			container.addEventListener('mouseover', function(){
-				clearInterval(deletInterval);
-			});
-
-			// Reprendre le defilement lorsque la souris ne survole plus une image
-			container.addEventListener('mouseout', autoSliding);
-
-			// Ajouter et supprimer une classe active des indicateurs
-			function indicators(){
-				for(i = 0; i < dots.length; i++){
-					dots[i].className = dots[i].className.replace(' active', '');
-				}
-				dots[counter].className += ' active';
-			}
-
-			// Ajouter un événement de clic à l'indicateur
-			function switchImage(currentImage){
-				currentImage.classList.add('active');
-				var imageId = currentImage.getAttribute('attr');
-				if(imageId > counter){
-				slideImages[counter].style.animation = 'next1 0.5s ease-in forwards';
-				counter = imageId;
-				slideImages[counter].style.animation = 'next2 0.5s ease-in forwards';
-				}
-				else if(imageId == counter){
 					return;
 				}
-				else{
+				
-				slideImages[counter].style.animation = 'prev1 0.5s ease-in forwards';
+				// Empêche inspecter dans le navigateur 
-				counter = imageId;
+				/*
-				slideImages[counter].style.animation = 'prev2 0.5s ease-in forwards';	
+				if (document.addEventListener) {
+					document.addEventListener('contextmenu', function (e) {
+						e.preventDefault();
+					}, false);
+				} else {
+					document.attachEvent('oncontextmenu', function () {
+						window.event.returnValue = false;
+					});
 				}
-				indicators();
+				*/
-			}
+				
-			
+				// Déclaration des variables
+				var slideImages, next, prev, dots, counter, deletInterval, container;
+				
+				// Initialisation
+				function initSlider() {
+					slideImages = document.querySelectorAll('.slide-image');
+					next = document.querySelector('.next');
+					prev = document.querySelector('.prev');
+					dots = document.querySelectorAll('.dot');
+					container = document.querySelector('.slide-container');
+					counter = 0;
+					
+					// Vérifier les éléments requis
+					if (!slideImages.length) {
+						console.error('Éléments du slider non trouvés');
+						return false;
+					}
+					
+					// Configurer les event listeners
+					setupEventListeners();
+					
+					// Démarrer le slider
+					autoSliding();
+					indicators();
+					
+					// Stocker l'instance
+					window.sliderInstance = {
+						next: slideNext,
+						prev: slidePrev,
+						goTo: function(index) {
+							if (index >= 0 && index < slideImages.length) {
+								slideImages[counter].style.animation = '';
+								counter = index;
+								slideImages[counter].style.animation = '';
+								indicators();
+							}
+						},
+						destroy: destroySlider
+					};
+					
+					console.log('Slider initialisé avec ' + slideImages.length + ' images');
+					return true;
+				}
+				
+				// Configurer les event listeners
+				function setupEventListeners() {
+					if (next) {
+						next.addEventListener('click', slideNext);
+					}
+					
+					if (prev) {
+						prev.addEventListener('click', slidePrev);
+					}
+					
+					if (container) {
+						container.addEventListener('mouseover', function(){
+							clearInterval(deletInterval);
+						});
+						
+						container.addEventListener('mouseout', autoSliding);
+					}
+					
+					// Event listeners pour les dots
+					for (var i = 0; i < dots.length; i++) {
+						dots[i].addEventListener('click', function() {
+							var imageId = parseInt(this.getAttribute('attr') || this.getAttribute('data-index'));
+							if (!isNaN(imageId)) {
+								switchImage(imageId);
+							}
+						});
+					}
+				}
+				
+				// Fonctionnalités du slider
+				function slideNext(){
+					slideImages[counter].style.animation = 'next1 0.5s ease-in forwards';
+					
+					if(counter >= slideImages.length-1){
+						counter = 0;
+					} else {
+						counter++;
+					}
+					
+					slideImages[counter].style.animation = 'next2 0.5s ease-in forwards';
+					indicators();
+				}
+				
+				function slidePrev(){
+					slideImages[counter].style.animation = 'prev1 0.5s ease-in forwards';
+					
+					if(counter == 0){
+						counter = slideImages.length-1;
+					} else {
+						counter--;
+					}
+					
+					slideImages[counter].style.animation = 'prev2 0.5s ease-in forwards';
+					indicators();
+				}
+				
+				function autoSliding(){
+					clearInterval(deletInterval);
+					deletInterval = setInterval(function() {
+						slideNext();
+					}, 3000);
+				}
+				
+				function indicators(){
+					for(var i = 0; i < dots.length; i++){
+						dots[i].className = dots[i].className.replace(' active', '');
+					}
+					
+					if (dots[counter]) {
+						dots[counter].className += ' active';
+					}
+				}
+				
+				function switchImage(imageId){
+					if(imageId > counter){
+						slideImages[counter].style.animation = 'next1 0.5s ease-in forwards';
+						counter = imageId;
+						slideImages[counter].style.animation = 'next2 0.5s ease-in forwards';
+					} else if(imageId == counter){
+						return;
+					} else {
+						slideImages[counter].style.animation = 'prev1 0.5s ease-in forwards';
+						counter = imageId;
+						slideImages[counter].style.animation = 'prev2 0.5s ease-in forwards';	
+					}
+					indicators();
+				}
+				
+				// Nettoyage
+				function destroySlider() {
+					clearInterval(deletInterval);
+					
+					if (next) next.removeEventListener('click', slideNext);
+					if (prev) prev.removeEventListener('click', slidePrev);
+					if (container) {
+						container.removeEventListener('mouseover', function(){});
+						container.removeEventListener('mouseout', autoSliding);
+					}
+					
+					for (var i = 0; i < dots.length; i++) {
+						dots[i].removeEventListener('click', function(){});
+					}
+					
+					window.sliderInstance = null;
+					console.log('Slider détruit');
+				}
+				
+				// Initialiser quand le DOM est prêt
+				if (document.readyState === 'loading') {
+					document.addEventListener('DOMContentLoaded', initSlider);
+				} else {
+					initSlider();
+				}
+				
+				// Exposer publiquement si nécessaire
+				window.initSlider = initSlider;
+				window.destroySlider = destroySlider;
+			})();
 		</script>
 	</body>
 </html>