// ==UserScript==
// @name TwitterImgViewer
// @namespace http://tampermonkey.net/
// @version 0.1
// @description try to take over the world!
// @author You
// @match https://twitter.com/*
// @grant none
// ==/UserScript==
(function() {
function createImgViewer() {
var html = `
<div id='divViewer'
style='
position: fixed;
height: 100%;
width: 100%;
top:0;
left:0;
text-align:center;
background-color:rgba(0,0,0,0.3);'>
<table style='margin-top:2.5vh; margin-top:;margin-left:auto;margin-right:auto;'>
<tr>
<td style='padding:0;width:3em;text-align:center;'><button id='btnPrev' style='width:2em;height:100%;'>p<br>r<br>e<br>v</button</td>
<td style='padding:0'width:auto;text-align:center;'><img id='imgMain' style='height: 95vh;'></td>
<td style='padding:0;width:3em;text-align:center;'><button id='btnNext' style='width:2em;height:100%;'>n<br>e<br>x<br>t</button</td>
</tr>
</table>
</div>`;
document.body.insertAdjacentHTML("beforeend", html);
// 画像を取得して、ツイートのリンクURL順に並べ替え
var imgList = [...document.querySelectorAll("img[src*='https://pbs.twimg.com/media/']")]
.filter(el=> el.closest("a[href]") != null)
.sort((el1, el2) => el1.closest("a[href]").href > el2.closest("a[href]").href )
.map(el=>el.src.replace(/&name.*$/, ''));
var currIdx = 0;
var showPage = function(plus) {
currIdx += plus;
if (currIdx<0) { currIdx = 0; }
if (currIdx>imgList.length-1) { currIdx = imgList.length-1; }
document.querySelector("#imgMain").src = imgList[currIdx];
};
showPage(0);
document.querySelector("#btnPrev").addEventListener("click", () => showPage(-1) );
document.querySelector("#btnNext").addEventListener("click", () => showPage(+1) );
document.body.addEventListener("keydown", (ev) => {
if (ev.keyCode == 27) { document.querySelector("#divViewer").remove(); }
if (ev.keyCode == 37) { showPage(-1); }
if (ev.keyCode == 39) { showPage(+1); }
});
}
setTimeout(() => {
var buttonParent = document.querySelector("a[aria-label='ツイートする']").parentElement;
buttonParent.insertAdjacentHTML("beforeend", "<button id='btnViewer' style='margin-top:2em;padding:5px;'>Viewer</button>");
document.querySelector("#btnViewer").addEventListener("click", createImgViewer);
}, 1000);
})();