Post image lightbox for DEV.to

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

За да инсталирате този скрипт, трябва да имате инсталирано разширение като Tampermonkey, Greasemonkey или Violentmonkey.

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

За да инсталирате този скрипт, трябва да имате инсталирано разширение като Tampermonkey или Violentmonkey.

За да инсталирате този скрипт, трябва да имате инсталирано разширение като Tampermonkey или Userscripts.

За да инсталирате скрипта, трябва да инсталирате разширение като Tampermonkey.

За да инсталирате този скрипт, трябва да имате инсталиран скриптов мениджър.

(Вече имам скриптов мениджър, искам да го инсталирам!)

За да инсталирате този стил, трябва да инсталирате разширение като Stylus.

За да инсталирате този стил, трябва да инсталирате разширение като Stylus.

За да инсталирате този стил, трябва да инсталирате разширение като Stylus.

За да инсталирате този стил, трябва да имате инсталиран мениджър на потребителски стилове.

За да инсталирате този стил, трябва да имате инсталиран мениджър на потребителски стилове.

За да инсталирате този стил, трябва да имате инсталиран мениджър на потребителски стилове.

(Вече имам инсталиран мениджър на стиловете, искам да го инсталирам!)

// ==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");
  });
}
)()