Post image lightbox for DEV.to

Adds lightbox to post pages so now you don't need to close tabs again & again.

Dovrai installare un'estensione come Tampermonkey, Greasemonkey o Violentmonkey per installare questo script.

You will need to install an extension such as Tampermonkey to install this script.

Dovrai installare un'estensione come Tampermonkey o Violentmonkey per installare questo script.

Dovrai installare un'estensione come Tampermonkey o Userscripts per installare questo script.

Dovrai installare un'estensione come ad esempio Tampermonkey per installare questo script.

Dovrai installare un gestore di script utente per installare questo script.

(Ho già un gestore di script utente, lasciamelo installare!)

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

(Ho già un gestore di stile utente, lasciamelo installare!)

// ==UserScript==
// @name                Post image lightbox for DEV.to
// @name:hi             DEV.to के लिए पोस्ट-इमेज लाइट बॉक्स
// @name:ja             DEV.to 用ポストイメージライトボックス
// @name:ko             DEV.to 위한 이미지 후 라이트 박스
// @name:ru             Пост-имиджевый световой короб для DEV.to
// @namespace           https://sharadcodes.github.io
// @version             1.0.1
// @compatible          chrome
// @compatible          firefox
// @compatible          edge
// @description         Adds lightbox to post pages so now you don't need to close tabs again & again.
// @description:hi      पोस्ट पेजों में लाइटबॉक्स जोड़ता है इसलिए अब आपको टैब को फिर से और फिर से बंद करने की आवश्यकता नहीं है।
// @description:ja      ポストページにライトボックスを追加するので、タブをもう一度閉じる必要はありません。
// @description:ko      이제 다시 탭을 닫을 필요가 없도록 페이지를 게시할 라이트박스를 추가합니다.
// @description:ru      Добавляет лайтбокс к страницам публикаций, поэтому теперь вам не нужно закрывать вкладки снова и снова.
// @author              sharadcodes
// @supportURL          https://github.com/sharadcodes/UserScripts/issues
// @match               https://dev.to/*
// @grant               none
// @license             MIT
// ==/UserScript==

(function(){
  var lb_style = document.createElement('style')
  lb_style.innerHTML = '#dev-to-post-dev_to_lightbox{position:fixed;z-index:10000;inset:0;background-color:rgba(0, 0, 0, 0.6);display:none;visibility:hidden}#dev-to-post-dev_to_lightbox.active{display:flex;visibility:visible;justify-content:center;align-items:center}#dev-to-post-dev_to_lightbox img{height:95vh;background-color:#333}.dev-to-lb-post-image{cursor:zoom-in}'
  
  var dev_to_lightbox = document.createElement("div");
  dev_to_lightbox.id = "dev-to-post-dev_to_lightbox";
  document.body.appendChild(dev_to_lightbox)
  document.head.appendChild(lb_style)
  
  var anchors = document.querySelectorAll('#article-show-container a');
  anchors.forEach(function(a){
    var test = a.href.includes('jpeg') || a.href.includes('jpg') || a.href.includes('png') || a.href.includes('gif')
    if(test){
      // Removing a tag
      var img = document.createElement('img');
      img.src = a.href;
      img.className = 'dev-to-lb-post-image'
      img.alt = 'Missing image (-.-)'
      a.parentNode.insertBefore(img, a.nextSibling);
      a.parentNode.removeChild(a);
      // Adding listner
      img.addEventListener("click", function(e){
        dev_to_lightbox.classList.add("active");
        var lb_img = document.createElement("img");
        lb_img.src = img.src;
        while (dev_to_lightbox.firstChild) {
          dev_to_lightbox.removeChild(dev_to_lightbox.firstChild);
        }
        lb_img.style.setProperty("cursor", "not-allowed");
        dev_to_lightbox.appendChild(lb_img);
        dev_to_lightbox.style.setProperty("cursor", "zoom-out");
      });
    }
  })
  
  dev_to_lightbox.addEventListener("click", function (e){
    if (e.target !== e.currentTarget) return;
    dev_to_lightbox.classList.remove("active");
  });
}
)()