JVC_ImageViewer

Naviguer entre les images d'un post sous forme de slideshow en cliquant sur une image sans ouvrir NoelShack.
当前为 2024-09-15 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         JVC_ImageViewer
// @namespace    http://tampermonkey.net/
// @version      1.36.31
// @description  Naviguer entre les images d'un post sous forme de slideshow en cliquant sur une image sans ouvrir NoelShack.
// @author       HulkDu92
// @match        https://*.jeuxvideo.com/forums/*
// @match        https://jvarchive.com/forums/*
// @grant        none
// @run-at       document-end
// @license      MIT
// ==/UserScript==
 
(function() {
    'use strict';
 
    class ImageViewer {
        constructor() {
            if (ImageViewer.instance) {
                return ImageViewer.instance;
            }
 
            this.images = [];
            this.currentIndex = 0;
            this.overlay = null;
            this.imgElement = null;
            this.spinner = null;
            this.prevButton = null;
            this.nextButton = null;
            this.closeButton = null;
            this.infoText = null;
            this.zoomLevel = 1;
            this.isDragging = false;
            this.startX = 0;
            this.startY = 0;
            this.offsetX = 0;
            this.offsetY = 0;
            this.xDown = null;
            this.yDown = null;
            this.initialDistance = null;
            this.startTouches = [];
            this.isSwiping = false;
            this.isScaling = false;
            this.imageElementScale = 1;
            this.start = {};
 
            ImageViewer.instance = this;
 
            this.createOverlay();
            this.updateImage();
        }
 
        // Crée et configure les éléments du visualiseur d'images (overlay, boutons, texte d'information, etc.)
        createOverlay() {
            this.overlay = this.createElement('div', {
                position: 'fixed',
                top: 0,
                left: 0,
                width: '100%',
                height: '100%',
                backgroundColor: 'rgba(0, 0, 0, 0.8)',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                zIndex: 10000
            });
 
            this.imgElement = this.createElement('img', {
                maxWidth: '90%',
                maxHeight: '80%',
                objectFit: 'contain',
                transition: 'opacity 0.3s',
                opacity: 0,
                cursor: 'pointer'
            });
 
            this.spinner = this.createSpinner();
            this.prevButton = this.createButton('<', 'left');
            this.nextButton = this.createButton('>', 'right');
            this.closeButton = this.createCloseButton();
            this.infoText = this.createInfoText();
 
            // Événements associés aux boutons et à l'overlay
            this.addEventListeners();
 
            // Ajout des éléments au DOM
            this.overlay.append(this.imgElement, this.spinner, this.prevButton, this.nextButton, this.closeButton, this.infoText);
            document.body.appendChild(this.overlay);
        }
 
        // Crée un élément HTML avec des styles
        createElement(tag, styles = {}) {
            const element = document.createElement(tag);
            Object.assign(element.style, styles);
            return element;
        }
 
        // Crée le bouton précédent ou suivant
        createButton(text, position) {
          const button = this.createElement('button', {
              position: 'absolute',
              [position]: '10px',
              backgroundColor: 'rgba(0, 0, 0, 0.6)',
              color: 'white',
              fontSize: '22px',
              border: 'none',
              borderRadius: '50%',
              width: '40px',
              height: '40px',
              cursor: 'pointer',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.6)',
              transition: 'background-color 0.3s, transform 0.3s'
          });
 
          button.textContent = text;
          this.addButtonEffects(button);
 
          return button;
      }
 
        // Crée le bouton de fermeture
        createCloseButton() {
            const button = this.createElement('button', {
                position: 'absolute',
                top: '80px',
                right: '10px',
                backgroundColor: 'rgba(0, 0, 0, 0.8)',
                color: 'white',
                fontSize: '14px',
                border: 'none',
                borderRadius: '50%',
                width: '35px',
                height: '35px',
                cursor: 'pointer',
                zIndex: 10001
            });
 
           button.textContent = '✕';
           this.addButtonEffects(button);
 
          return button;
        }
 
        // Crée la zone d'affichage du texte d'information (numéro d'image)
        createInfoText() {
            return this.createElement('div', {
                position: 'absolute',
                bottom: '10px',
                right: '10px',
                color: 'white',
                fontSize: '16px',
                backgroundColor: 'rgba(0, 0, 0, 0.5)',
                padding: '5px',
                borderRadius: '5px',
                zIndex: 10001
            });
        }
 
        // Crée un spinner pour indiquer le chargement de l'image
        createSpinner() {
            const spinner = this.createElement('div', {
                position: 'absolute',
                border: '8px solid #f3f3f3',
                borderTop: '8px solid #3498db',
                borderRadius: '50%',
                width: '50px',
                height: '50px',
                animation: 'spin 1s linear infinite',
                zIndex: 10001
            });
            return spinner;
        }
 
        addButtonEffects(button) {
            button.addEventListener('mouseenter', () => {
                button.style.backgroundColor = 'rgba(255, 255, 255, 0.8)';
                button.style.color = 'black';
                button.style.transform = 'scale(1.1)';
            });
 
            button.addEventListener('mouseleave', () => {
                button.style.backgroundColor = 'rgba(0, 0, 0, 0.6)';
                button.style.color = 'white';
                button.style.transform = 'scale(1)';
            });
 
            button.addEventListener('mousedown', () => {
                button.style.transform = 'scale(0.9)';
            });
 
            button.addEventListener('mouseup', () => {
                button.style.transform = 'scale(1.1)';
            });
        }
 
        // Ajoute les événements aux différents éléments du visualiseur
        addEventListeners() {
            console.log("addEventListeners");
            this.prevButton.addEventListener('click', () => this.changeImage(-1));
            this.nextButton.addEventListener('click', () => this.changeImage(1));
            this.closeButton.addEventListener('click', () => this.closeViewer());
            this.overlay.addEventListener('click', (event) => {
                if (event.target === this.overlay) {
                    this.closeViewer();
                }
            });
 
            // Zoom avec la molette de la souris
            this.imgElement.addEventListener('wheel', (event) => this.handleZoom(event));
 
            // Déplacement lors du zoom (drag)
            this.imgElement.addEventListener('mousedown', (event) => this.startDrag(event));
            document.addEventListener('mousemove', (event) => this.onDrag(event));
            document.addEventListener('mouseup', () => this.endDrag());
 
 
            // Glissement sur mobile (swipe)
            this.overlay.addEventListener('touchstart', (event) => this.handleTouchStart(event));
            this.overlay.addEventListener('touchmove', (event) => this.handleTouchMove(event));
            this.overlay.addEventListener('touchend', (event) => this.handleTouchEnd(event));
 
             // Zoom sur mobile
            this.overlay.addEventListener('touchstart', (event) => this.handlePinchStart(event));
            this.overlay.addEventListener('touchmove', (event) => this.handlePinchMove(event));
            this.overlay.addEventListener('touchend', (event) => this.handlePinchEnd(event));
 
 
            this.imgElement.addEventListener('click', () => {
                window.open(this.images[this.currentIndex].href, '_blank');
            });
        }
 
        // Gestion du début de l'interaction tactile
        handleTouchStart(event) {
            if (event.touches.length === 1) {
                // Commencer le swipe
                this.isSwiping = true;
                this.startX = event.touches[0].clientX;
            } /*else if (event.touches.length === 2) {
                // Commencer le zoom par pincement
                this.startTouches = [...event.touches];
                this.initialDistance = this.getTouchDistance(this.startTouches);
            }*/
        }
 
        // Gestion du mouvement tactile pour swipe ou zoom
        handleTouchMove(event) {
            if (this.isSwiping && event.touches.length === 1) {
                // Swipe
                this.currentX = event.touches[0].clientX;
            } /*else if (event.touches.length === 2) {
                // Zoom par pincement
                this.handlePinchZoom(event);
            }*/
        }
 
        // Gestion de la fin de l'interaction tactile
        handleTouchEnd(event) {
            if (event.touches.length < 2) {
              this.initialDistance = null;
            }
            if (this.isSwiping) {
              this.isSwiping = false;
              const deltaX = this.currentX - this.startX;
 
              // Si le mouvement est suffisamment grand, on change d'image
              if (Math.abs(deltaX) > 50) {
                  if (deltaX > 0) {
                      this.showPreviousImage(); // Fonction pour afficher l'image précédente
                  } else {
                      this.showNextImage(); // Fonction pour afficher l'image suivante
                  }
              }
          }
        }
 
        // Calculate distance between two fingers
        distance(event){
            return Math.hypot(event.touches[0].pageX - event.touches[1].pageX, event.touches[0].pageY - event.touches[1].pageY);
        }
 
        // Gestion du début de l'interaction tactile pour le pincement
        handlePinchStart(event) {
            if (event.touches.length === 2) {
                event.preventDefault(); // Prevent page scroll
 
                // Calculate where the fingers have started on the X and Y axis
                start.x = (event.touches[0].pageX + event.touches[1].pageX) / 2;
                start.y = (event.touches[0].pageY + event.touches[1].pageY) / 2;
                start.distance = distance(event);
                // On commence à zoomer
                //this.initialDistance = this.getTouchDistance(event.touches);
                //this.isScaling = true;
            }
        }
 
        // Gestion du mouvement tactile pour le pincement (zoom)
        handlePinchMove(event) {
            if (event.touches.length === 2) {
                console.log("moving the zoom");
                event.preventDefault(); // Prevent page scroll
 
                // Safari provides event.scale as two fingers move on the screen
                // For other browsers just calculate the scale manually
                let scale;
                if (event.scale) {
                  scale = event.scale;
                } else {
                  const deltaDistance = distance(event);
                  scale = deltaDistance / start.distance;
                }
                imageElementScale = Math.min(Math.max(1, scale), 4);
 
                // Calculate how much the fingers have moved on the X and Y axis
                const deltaX = (((event.touches[0].pageX + event.touches[1].pageX) / 2) - start.x) * 2; // x2 for accelarated movement
                const deltaY = (((event.touches[0].pageY + event.touches[1].pageY) / 2) - start.y) * 2; // x2 for accelarated movement
 
                // Transform the image to make it grow and move with fingers
                const transform = `translate3d(${deltaX}px, ${deltaY}px, 0) scale(${imageElementScale})`;
                this.imgElement.style.transform = transform;
                this.imgElement.style.WebkitTransform = transform;
                this.imgElement.style.zIndex = "9999";
 
                  //
                /*const newDistance = this.getTouchDistance(event.touches);
                const scaleFactor = newDistance / this.initialDistance;
                this.zoomImage(scaleFactor);
                this.initialDistance = newDistance;*/
            }
        }
 
        // Gestion de la fin de l'interaction tactile pour le pincement
        handlePinchEnd(event) {
            if (event.touches.length < 2) {
              this.imgElement.style.transform = "";
              this.imgElement.style.WebkitTransform = "";
              this.imgElement.style.zIndex = "";
 
                //this.isScaling = false;
                console.log("end of zoom pinch");
            }
        }
 
        /*zoomImage(scaleFactor) {
            this.zoomLevel *= scaleFactor;
            this.imgElement.style.transform = `scale(${this.zoomLevel})`;
        }*/
 
        zoomImage(scaleFactor) {
            console.log("zooming");
          // Calcul du nouveau niveau de zoom
          this.zoomLevel *= scaleFactor;
 
          // Ajuster le zoomLevel pour ne pas descendre sous 1
          this.zoomLevel = Math.max(1, this.zoomLevel);
 
          // Calculer la position du zoom basé sur le centre de l'image
          const rect = this.imgElement.getBoundingClientRect();
          const offsetX = (rect.width / 2 - (rect.width / 2 * scaleFactor)) / scaleFactor;
          const offsetY = (rect.height / 2 - (rect.height / 2 * scaleFactor)) / scaleFactor;
 
          // Appliquer la transformation CSS
          this.imgElement.style.transform = `scale(${this.zoomLevel}) translate(${offsetX}px, ${offsetY}px)`;
          console.log("zoom done");
          console.log(this.imgElement)
      }
 
 
        // Fonction pour calculer la distance entre deux points de contact
        getTouchDistance(touches) {
            const [touch1, touch2] = touches;
            const deltaX = touch2.clientX - touch1.clientX;
            const deltaY = touch2.clientY - touch1.clientY;
            return Math.sqrt(deltaX * deltaX + deltaY * deltaY);
        }
 
        handleZoom(event) {
            event.preventDefault();
            const zoomIncrement = 0.1;
 
            if (event.deltaY < 0) {
                this.zoomLevel += zoomIncrement; // Zoomer
            } else {
                this.zoomLevel = Math.max(1, this.zoomLevel - zoomIncrement); // Dézoomer, mais ne pas descendre sous 1
            }
 
            this.imgElement.style.transform = `scale(${this.zoomLevel}) translate(${this.offsetX}px, ${this.offsetY}px)`;
        }
 
        startDrag(event) {
            this.isDragging = true;
            this.startX = event.clientX - this.offsetX;
            this.startY = event.clientY - this.offsetY;
            this.imgElement.style.cursor = 'grabbing';
        }
 
        onDrag(event) {
            if (!this.isDragging) return;
 
            this.offsetX = event.clientX - this.startX;
            this.offsetY = event.clientY - this.startY;
 
            this.imgElement.style.transform = `scale(${this.zoomLevel}) translate(${this.offsetX}px, ${this.offsetY}px)`;
        }
 
        endDrag() {
            this.isDragging = false;
            this.imgElement.style.cursor = 'grab';
        }
 
        startTouchDrag(event) {
            if (event.touches.length === 1) { // S'assurer qu'il y a un seul doigt
                this.isDragging = true;
                this.startX = event.touches[0].clientX - this.offsetX;
                this.startY = event.touches[0].clientY - this.offsetY;
            }
        }
 
        onTouchDrag(event) {
            if (!this.isDragging || event.touches.length !== 1) return;
 
            this.offsetX = event.touches[0].clientX - this.startX;
            this.offsetY = event.touches[0].clientY - this.startY;
 
            this.imgElement.style.transform = `scale(${this.zoomLevel}) translate(${this.offsetX}px, ${this.offsetY}px)`;
        }
 
 
          // Gestion du zoom pour appareils tactiles (pincement)
          handlePinchZoom(event) {
              this.zoomLevel += event.scale - 1; // Ajuste le zoom en fonction de l'échelle du pincement
              this.imgElement.style.transform = `scale(${Math.max(1, this.zoomLevel)})`; // Ne pas descendre en dessous d'un zoom de 1
          }
 
        // Met à jour l'image affichée dans le visualiseur
        updateImage() {
            if (this.currentIndex >= 0 && this.currentIndex < this.images.length) {
              const imageUrl = this.images[this.currentIndex].href;
              this.imgElement.src = imageUrl;
              this.infoText.textContent = `${this.currentIndex + 1} / ${this.images.length}`;
              this.spinner.style.display = 'block';
 
              this.toggleButtonState();
 
              this.imgElement.onload = () => {
                  this.imgElement.style.opacity = 1;
                  this.spinner.style.display = 'none';
              };
 
              this.imgElement.onerror = () => this.handleImageError();
            }
        }
 
        // Gestion des erreurs de chargement d'image
        handleImageError() {
            const miniUrl = this.images[this.currentIndex].querySelector('img').src;
            const extensions = ['.jpg', '.png', '.jpeg'];
            const baseUrl = miniUrl.replace('/minis/', '/fichiers/');
 
            const tryNextExtension = (index) => {
                if (index >= extensions.length) {
                    // Si toutes les extensions échouent, tenter l'URL originale
                    this.imgElement.src = miniUrl;
                    return;
                }
 
                // Remplacer l'extension et mettre à jour l'URL
                const updatedUrl = baseUrl.replace(/\.(jpg|png|jpeg)$/, extensions[index]);
                this.imgElement.src = updatedUrl;
 
                // Tester l'URL
                this.imgElement.onerror = () => tryNextExtension(index + 1);
            };
 
            // Commencer les essais avec la première extension
            tryNextExtension(0);
        }
 
        // Change d'image en fonction de la direction (suivant/précédent)
        changeImage(direction) {
            this.currentIndex = (this.currentIndex + direction + this.images.length) % this.images.length;
            this.imgElement.style.opacity = 0;
            this.spinner.style.display = 'block';
            this.updateImage();
        }
 
        showPreviousImage() {
            this.changeImage(-1);
        }
 
        showNextImage() {
            this.changeImage(1);
        }
 
        // Ferme le visualiseur d'images
        closeViewer() {
          if (this.overlay) {
                document.body.removeChild(this.overlay);
                this.overlay = null;
                ImageViewer.instance = null; // Réinitialise l'instance singleton
            }
        }
 
      // Désactive ou active les boutons suivant/précédent en fonction de l'index actuel
      toggleButtonState() {
          if (this.currentIndex === 0) {
              this.prevButton.disabled = true;
              this.prevButton.style.opacity = 0.5;
              this.prevButton.style.cursor = 'initial';
          } else {
              this.prevButton.disabled = false;
              this.prevButton.style.opacity = 1;
              this.prevButton.style.cursor = 'pointer';
          }
 
          if (this.currentIndex === this.images.length - 1) {
              this.nextButton.disabled = true;
              this.nextButton.style.opacity = 0.5;
              this.nextButton.style.cursor = 'initial';
          } else {
              this.nextButton.disabled = false;
              this.nextButton.style.opacity = 1;
              this.nextButton.style.cursor = 'pointer';
          }
      }
 
      openViewer(images, currentIndex) {
            if (this.overlay) {
                this.images = images;
                this.currentIndex = currentIndex;
                this.updateImage();
                //this.overlay.style.display = 'flex';
            } else {
                new ImageViewer();
                this.images = images;
                this.currentIndex = currentIndex;
                this.createOverlay();
                this.updateImage();
                //this.overlay.style.display = 'flex';
            }
        }
    }
 
    function addSpinnerStyles() {
        const style = document.createElement('style');
        style.textContent = `
            @keyframes spin {
                0% { transform: rotate(0deg); }
                100% { transform: rotate(360deg); }
            }
            .spinner { /* Exemple de classe pour spinner */
                width: 50px;
                height: 50px;
                border: 5px solid rgba(0, 0, 0, 0.1);
                border-left-color: #000;
                border-radius: 50%;
                animation: spin 1s linear infinite;
            }
        `;
        document.head.appendChild(style);
    }
 
    const parentClasses = '.txt-msg, .message, .conteneur-message.mb-3, .bloc-editor-forum, .signature-msg';
    const linkSelectors = parentClasses.split(', ').map(cls => `${cls} a`);
 
    // Ajouter des écouteurs d'événements aux images sur la page
    function addListeners() {
        linkSelectors.forEach(selector => {
            document.querySelectorAll(selector).forEach(link => {
                link.addEventListener('click', handleImageClick, true);
            });
        });
    }
 
    function handleImageClick(event) {
        const imgElement = this.querySelector('img');
        if (imgElement) {
            event.preventDefault();
            const closestElement = this.closest(parentClasses);
            if (closestElement) {
                const images = Array.from(closestElement.querySelectorAll('a')).filter(imgLink => imgLink.querySelector('img'));
                const currentIndex = images.indexOf(this);
 
                const viewer = new ImageViewer();
                viewer.openViewer(images, currentIndex);
            }
        }
    }
 
    function main() {
        addSpinnerStyles();
        addListeners();
 
        const observer = new MutationObserver(() => addListeners());
        observer.observe(document, { childList: true, subtree: true });
    }
 
    main();
 
 
})();