Greasy Fork is available in English.

LighboxModern

Simple Lightbox

Script này sẽ không được không được cài đặt trực tiếp. Nó là một thư viện cho các script khác để bao gồm các chỉ thị meta // @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()
  }
}