Shows the images in grid format
// MIT License
// Copyright (c) 2022 Sharad Raj Singh Maurya
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
// The above copyright notice and this permission notice shall be included in all
// copies or substantial portions of the Software.
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
// ==UserScript==
// @name Reddit Image Grid
// @namespace https://sharadcodes.github.io
// @author sharadcodes
// @description Shows the images in grid format
// @match https://old.reddit.com/*
// @supportURL https://github.com/sharadcodes/UserScripts/issues
// @version 1.0.2
// @license MIT
// @run-at document-idle
// @grant GM_registerMenuCommand
// @grant GM_addStyle
// ==/UserScript==
GM_addStyle(`
body.modal-open {
overflow: hidden;
}
.modal {
display: none;
position: absolute;
z-index: 10000;
inset: 0;
width: 100%;
height: 100%;
padding-top: 50px;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
text-align: center;
}
/* Modal Content */
#modal-images {
background-color: #fefefe;
margin: auto;
padding: 20px;
width: 80%;
height: 600px;
overflow: auto;
display: grid!important;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr))!important;
column-gap: .2rem!important;
row-gap: .2rem!important;
}
.modal button {
padding: 10px 25px;
border-radius: 10px;
border: none;
margin-top: 5px;
font-family: monospace;
background: #89ff89;
}
.modal button:active{
filter: brightness(80%);
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
`);
let images = [];
let next_page_url = "";
const modal_div = document.createElement("div");
modal_div.innerHTML = `
<!-- The Modal -->
<div id="myModal" class="modal">
<div id="modal-images"></div>
<button id="load">Load more</button>
</div>
`;
const modal = modal_div.querySelector(".modal");
const image_grid = modal.querySelector("#modal-images");
// When the user clicks anywhere outside of the modal, close it
window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = "none";
document.body.classList.remove("modal-open");
}
};
const load_btn = modal.querySelector("#load");
load_btn.addEventListener("click", async () => {
console.log("Loading next page", next_page_url);
await getImages();
});
GM_registerMenuCommand("Show Grid", async () => {
document.body.appendChild(modal);
document.body.classList.toggle("modal-open");
modal.style.display = "block";
next_page_url = document.location.href;
window.scrollTo(0, 0);
reset();
await getImages();
});
async function getImages() {
try {
if (!next_page_url) {
throw "No next page";
}
load_btn.innerHTML = "Loading...";
const res = await fetch(next_page_url);
const html_txt = await res.text();
const doc = document.createElement("html");
doc.innerHTML = html_txt;
next_page_url = doc.querySelector(
"#siteTable > div.nav-buttons .next-button a:last-child"
)?.href;
//
console.log(next_page_url);
//
const posts = doc.querySelectorAll(
'div.content[role="main"] div#siteTable .thing:not(.promotedlink)'
);
posts.forEach((post) => {
const url = post.querySelector("a.thumbnail")?.href;
if (url.includes("/gallery/")) {
console.log("<RIG> Gallery found");
const html = document.createElement("html");
html.innerHTML = post
.querySelector(".expando")
.getAttribute("data-cachedhtml");
html.querySelectorAll("a.gallery-item-thumbnail-link").forEach(
(i) => {
addImage(i?.href);
}
);
} else {
addImage(url);
}
});
load_btn.innerHTML = "Next Page";
} catch (err) {
console.log(err);
load_btn.innerHTML = err;
}
}
function addImage(url) {
images.push(url);
const img = document.createElement("img");
img.src = url;
if (
url.includes(".jpg") ||
url.includes(".jpeg") ||
url.includes(".jfif") ||
url.includes(".png") ||
url.includes(".webp")
) {
img.style.width = "160px";
image_grid.append(img);
}
}
function reset() {
next_page_url = document.location.href;
modal.querySelector("#modal-images").innerHTML = null;
}