ContentDB Image Gallery

02.11.2022, 00:57:11
Tính đến 02-11-2022. Xem phiên bản mới nhất.
Đặt câu hỏi, đăng đánh giá, hoặc báo cáo tập lệnh.
Wrap lines
// ==UserScript==
// @name        ContentDB Image Gallery
// @namespace   Violentmonkey Scripts
// @match       https://content.minetest.net/*
// @grant       none
// @version     1.0
// @author      Xevin
// @license     MIT
// @description 02.11.2022, 00:57:11
// ==/UserScript==

const $ = s => document.querySelector(s)
const $$ = s => document.querySelectorAll(s)


function showImage(url) {
  const $galleryModal = $("body #gallery-modal")
  let $galleryModalBody

  if (!$galleryModal) {
    const $galleryModal = document.createElement("div")
    $galleryModal.id = "gallery-modal"
    $galleryModal.classList.add("gallery-modal")

    const $galleryModalClose = document.createElement("button")
    $galleryModalClose.innerHTML = "&times;"
    $galleryModalClose.classList.add("gallery-modal__close")

    $galleryModalClose.addEventListener("click", () => {
      $galleryModal.classList.add("hidden")
    })

    $galleryModalBody = document.createElement("div")
    $galleryModalBody.classList.add("gallery-modal__body")

    $galleryModalImage = document.createElement("img")

    $galleryModal.appendChild($galleryModalClose)
    $galleryModal.appendChild($galleryModalBody)
    $galleryModalBody.appendChild($galleryModalImage)
    document.body.appendChild($galleryModal)
  } else {
    $galleryModal.classList.remove("hidden")
    $galleryModalBody = $galleryModal.querySelector(".gallery-modal__body")
  }

  $galleryModalBody.style.backgroundImage = `url(${url})`

  return $galleryModal
}


function addCss(styleText) {
  const $style = document.createElement("style")
  $style.innerHTML = styleText

  document.head.appendChild($style)
}


$$("ul.gallery li a.gallery-image").forEach((el) => {
  el.addEventListener("click", (ev) => {
    ev.preventDefault()
    showImage(el.href)
  })
})

addCss(`
.gallery-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, .5);
  z-index: 10;
}

.gallery-modal.hidden {
  display: none;
}

.gallery-modal__body {
  position: absolute;
  height: 90%;
  width: 90%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
}


.gallery-modal__close {
  width: 50px;
  height: 50px;
  background-color: rgba(255,255,255,0.5);
  color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  font-size: 200%;
  top: 6px;
  right: 6px;
  border: none;
  border-radius: 6px;
  transition: all .15s ease-in-out;
}


.gallery-modal__close:hover {
  background-color: white;
  transform: scale(1.1);
}
`)