LighboxModern

Simple Lightbox

Dieses Skript sollte nicht direkt installiert werden. Es handelt sich hier um eine Bibliothek für andere Skripte, welche über folgenden Befehl in den Metadaten eines Skriptes eingebunden wird // @require https://update.greasyfork.org/scripts/480727/1285876/LighboxModern.js 

class LightboxModern {
  _swipeStartX = null;
  _swipeStartY = null;
  _swipeEndX = null;
  _swipeEndY = null;
  _clickTimeStart = null;
  _clickTimeEnd = null;

  // Tentukan threshold untuk dianggap sebagai swipe
  _THRESHOLD = 20;
  _CLICK_TIME_THRESHOLD = 100;
  _currentImage = null;

  _progress = 1
  _idFadeOutTool = null;

  constructor(container, { images = [] } = {}) {
    this.container = container;
    this.container.classList.add("LightboxModern", "FadeIn")
    this.container.innerHTML = ""

    this.progress = this._renderProgress();
    this.container.append(this.progress);

    this.images = images
    const imagesContainer = this._renderListImage(images);
    this.container.append(imagesContainer)

    this._updateProgress()

    // this.swiper = this._SwipeListener()
    // this.container.append(this.swiper)

    this.tool = this._RenderTool()
    this.container.append(this.tool)
  }

  _renderListImage(images) {
    const container = document.createElement("div");
    container.classList.add("ImagesContainer");
    this._listenSwipe(container)

    for(const index in images) {
      const wrapper = document.createElement("div");
      wrapper.classList.add("ImageWrapper");

      if(index == 0) {
        wrapper.classList.add("FadeIn")
        this._currentImage = wrapper;
      }

      const imgElement = document.createElement("img");
      imgElement.src = images[index];
      imgElement.alt = `Images Number ${index + 1}`;

      const padding = document.createElement("div")
      padding.classList.add("ImagePadding");

      wrapper.append(imgElement, padding)
      container.append(wrapper)
    }

    return container;
  }

  _renderProgress() {
    const container = document.createElement("div");
    container.classList.add("Progress");
    
    return container;
  }
  
  _updateProgress() {
    this.progress.style.width = `${Math.floor(this._progress / this.images.length * 100)}%`
  }

  _SwipeListener() {
    const container = document.createElement("div");
    container.classList.add("Swiper")
    _listenSwipe

    return container;
  }

  _listenSwipe(element) {
    element.addEventListener("touchstart", (e) => {
      this._clickTimeStart = new Date().getTime()
      this._swipeStartX = e.touches[0].clientX;
      this._swipeStartY = e.touches[0].clientY;
    })

    element.addEventListener("touchmove", (e) => {
      if(e.touches.length === 1) {
        e.preventDefault(); // Mencegah scroll selama swipe
        this._swipeEndX = e.touches[0].clientX;
        this._swipeEndY = e.touches[0].clientY;
      }
    })

    element.addEventListener("touchend", (e) => {
      this._clickTimeEnd = new Date().getTime()
      this._detectSwipe()
    })
  }

  _RenderTool() {
    const container = document.createElement("div");
    container.classList.add("LightboxTool")
    this._listenSwipe(container)

    const header = document.createElement("div");
    header.classList.add("ToolHeader")

    const closeButton = document.createElement("button")
    closeButton.classList.add("btn")
    closeButton.innerText = "Close"

    closeButton.addEventListener("click", () => {
      this.container.classList.remove("FadeIn")
    })

    const fullScreenButton = document.createElement("button")
    fullScreenButton.classList.add("btn")
    fullScreenButton.innerText = "[ ]"
    fullScreenButton.onclick = () => {
      if(document.fullscreenElement) {
        document.exitFullscreen()
      } else {
        document.documentElement.requestFullscreen()
      }
    }

    header.append(fullScreenButton, closeButton)

    const footer = document.createElement("div")
    footer.classList.add("ToolFooter")

    const downloadImage = document.createElement("button")
    downloadImage.classList.add("btn")
    downloadImage.innerText = "Download Image"
    downloadImage.onclick = () => this.downloadImage(this._currentImage.querySelector("img").src)

    const downloadAllImage = document.createElement("button")
    downloadAllImage.classList.add("btn")
    downloadAllImage.innerText = "Download All Image"
    downloadAllImage.onclick = () => {
      downloadAllImage.disabled = true;
      for(const image of this.images) {
        this.downloadImage(image)
      }
      downloadAllImage.disabled = false;
    }

    footer.append(downloadImage, downloadAllImage)

    container.append(header, footer);
    container.addEventListener("click", () => {
      container.classList.toggle("FadeIn")
    })

    return container
  }

  _fadeOutImage() {
    if(this._currentImage) this._currentImage.classList.remove("FadeIn")
  }

  _nextImage() {
    const nextElement = this._currentImage.nextElementSibling;
    
    this._fadeOutImage();

    if( nextElement ) {
      nextElement.classList.add("FadeIn")
      this._currentImage = nextElement;
      this._progress += 1
    } else {
      const currentImage = this.container.querySelector(".ImagesContainer .ImageWrapper");
      currentImage.classList.add("FadeIn")
      this._currentImage = currentImage;
      this._progress = 1
    }
  }

  _prevImage() {
    const prevElement = this._currentImage.previousElementSibling;
    
    this._fadeOutImage()
    if(prevElement) {
      prevElement.classList.add("FadeIn")
      this._currentImage = prevElement;
      this._progress -= 1
    } else {
      const currentImage = this.container.querySelector(".ImagesContainer").lastElementChild
      currentImage.classList.add("FadeIn")
      this._currentImage = currentImage;
      this._progress = this.images.length
    }
  }

  _detectSwipe() {
    const deltaX = this._swipeEndX - this._swipeStartX;
    const deltaY = this._swipeEndY - this._swipeStartY;
    const deltaTime = this._clickTimeEnd - this._clickTimeStart

    if((Math.abs(deltaX) > this._THRESHOLD || Math.abs(deltaY) > this._THRESHOLD) && 
      deltaTime > this._CLICK_TIME_THRESHOLD) {
      if(deltaX > 0) {
        this._prevImage();
      } else {
        this._nextImage();
      }

      this._updateProgress()
    } else if(deltaTime < this._CLICK_TIME_THRESHOLD ) {
      this.tool.classList.toggle("FadeIn")
      
      if(this._idFadeOutTool) clearTimeout(this._idFadeOutTool)

      this._idFadeOutTool = setTimeout(() => this.tool.classList.remove("FadeIn") , 1500)
    } else {
      console.log('Tidak ada swipe yang terdeteksi.');
    }
  }

  downloadImage(url) {
    const link = document.createElement("a")
    link.href = url
    link.click()
  }
}