Preview the chat images in a tidy way
// ==UserScript==
// @name imagesSlideshow
// @namespace https://github.com/yegorgunko/shikme-tools
// @version 0.13
// @description Preview the chat images in a tidy way
// @author Yegor Gunko
// @match https://shikme.ru/
// @icon https://shikme.ru/default_images/icon.png?v=1528136794
// @grant none
// ==/UserScript==
const getImages=e=>{for(const t of document.getElementsByClassName("chat_image")){const{src:s,offsetParent:{offsetParent:{id:i}}}=t;if(!e.find(e=>e.src===s&&e.id===i)){const[{innerHTML:o}]=t.offsetParent.getElementsByClassName("username"),[{innerHTML:n}]=document.getElementsByClassName("chat_image")[0].offsetParent.getElementsByClassName("logs_date"),a=n.substr(0,n.indexOf("<span")),d=`${t.offsetParent.offsetParent.getElementsByClassName("my_avatar")[0].getElementsByClassName("get_av")[0].getElementsByTagName("img")[0].classList.contains("girl")?"fe":""}male`;e.push({src:s,id:i,author:o,sex:d,date:a})}}},setImageSize=e=>{e.style["max-width"]=`${parseFloat(window.innerWidth-15)}px`,e.style["max-height"]=`${parseFloat(window.innerHeight-15)}px`},setIndicators=(e,t)=>{document.getElementById("imageIndex").innerHTML=e+1,({length:document.getElementById("imagesCount").innerHTML}=t)},setAuthor=(e,t)=>`Отправил${"female"===e[t].sex?"а":""} ${e[t].author} ${e[t].date}`,saveToLocalStorage=(e,t)=>{window.localStorage.setItem("slideshowOptions",JSON.stringify({imageIndex:e,images:t}))},moveBack=(e,t)=>{let s=e;return 0===s?s=t.length-1:s-=1,s},moveForward=(e,t)=>{let s=e;return s===t.length-1?s=0:s+=1,s},imagesSlideshow=()=>{const e=document.createElement("style");e.type="text/css",e.appendChild(document.createTextNode(".slideshow-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.7);display:none;justify-content:center;align-items:center;z-index:10001}.slideshow-action{width:5em;height:5em;display:flex;justify-content:center;align-items:center;cursor:pointer}.slideshow-action i{font-size:2.5em}.slideshow-indicator{position:fixed;bottom:1em;font-size:2.5em;background:rgba(0,0,0,.65);padding:.3em}.slideshow-actions-author{padding:0 .6em}.slideshow-action-author{font-size:1.25em;width:100%}.slideshow-actions{display:flex;position:absolute;background:rgba(0,0,0,.6)}.actions-top-right{top:0;right:0}.actions-top-left{top:0;left:0}.actions-bottom-left{bottom:0;left:0}.actions-middle-left{left:0}.actions-middle-right{right:0}")),document.head.appendChild(e),document.getElementById("open_left_menu").insertAdjacentHTML("afterend",'<div title=Слайдшоу id=slideshow class=chat_footer_item><i class="i_btm fa fa-images"></i></div>');const t=document.createElement("div");t.setAttribute("class","slideshow-overlay"),t.id="slideshowOverlay",t.innerHTML='<img id=slideshowImage><div class="slideshow-actions actions-top-left"><div id=slideshowStorageClear class=slideshow-action title="Удалить изображения из локального хранилища"><i class="fa fa-eraser"></i></div><div id=toMessage class=slideshow-action title="К сообщению, содержащему изображение"><i class="fa fa-chevron-up"></i></div></div><div class="slideshow-actions actions-top-right"> <div id=slideshowDownload class=slideshow-action title=Скачать><i class="fa fa-download"></i></div><div title=Закрыть(Esc) id=slideshowClose class=slideshow-action><i class="fa fa-times"></i></div></div><div class="slideshow-actions actions-middle-left"> <div id=moveBack class=slideshow-action><i class="fa fa-chevron-left"></i></div></div><div class="slideshow-actions actions-middle-right"><div id=moveForward class=slideshow-action><i class="fa fa-chevron-right"></i></div></div><div class="slideshow-actions slideshow-actions-author actions-bottom-left"><div id=messageAuthor class="slideshow-action slideshow-action-author"></div></div><div class=slideshow-indicator><span id=imageIndex></span> / <span id=imagesCount></span></div>',document.body.appendChild(t);const s=document.getElementById("slideshowImage"),i=document.getElementById("slideshowOverlay"),o=document.getElementById("messageAuthor");let n=0,a=[];window.localStorage.getItem("slideshowOptions")&&({imageIndex:n,images:a}=JSON.parse(window.localStorage.getItem("slideshowOptions"))),setImageSize(s);let d="";const l=()=>(document.removeEventListener("keydown",d),i.style.display="none",!1);d=(e=>{const t=e.which||e;return 27===t?l():38===t||39===t?n=moveForward(n,a):37!==t&&40!==t||(n=moveBack(n,a)),getImages(a),s.src=a[n].src,o.innerHTML=setAuthor(a,n),setIndicators(n,a),saveToLocalStorage(n,a)}),document.getElementById("slideshow").addEventListener("click",()=>(getImages(a),a.length?(s.src=a[n].src,setIndicators(n,a),o.innerHTML=setAuthor(a,n),i.style.display="flex",document.addEventListener("keydown",d),document.getElementById("slideshowDownload").addEventListener("click",()=>window.open(a[n].src,"_blank")),!1):window.alert("Список пуст, пролистайте чат вверх, чтобы прогрузить изображения"))),window.addEventListener("resize",()=>setImageSize(s)),document.getElementById("slideshowClose").addEventListener("click",l),document.getElementById("slideshowStorageClear").addEventListener("click",()=>{const e=window.localStorage.getItem("slideshowOptions");e&&JSON.parse(e).images.length?window.confirm(`Вы действительно хотите удалить из локального хранилища ${JSON.parse(e).images.length} изображений?`)&&(window.localStorage.removeItem("slideshowOptions"),a=[],n=0,l()):window.alert("В локальном хранилище нет изображений.")}),document.getElementById("toMessage").addEventListener("click",()=>{document.getElementById(a[n].id)&&(l(),document.getElementById(a[n].id).scrollIntoView())}),document.getElementById("moveForward").addEventListener("click",()=>d(38)),document.getElementById("moveBack").addEventListener("click",()=>d(37))};document.addEventListener("DOMContentLoaded",imagesSlideshow());