-
-
Save c6p/463892bb243f611f2a3cfa4268c6435e to your computer and use it in GitHub Desktop.
// ==UserScript== | |
// @name Reddit Multi Column | |
// @namespace https://gist.github.com/c6p/463892bb243f611f2a3cfa4268c6435e | |
// @version 0.2.0 | |
// @description Multi column layout for reddit redesign | |
// @author Can Altıparmak | |
// @homepageURL https://gist.github.com/c6p/463892bb243f611f2a3cfa4268c6435e | |
// @match https://www.reddit.com/* | |
// @grant none | |
// @downloadURL https://update.greasyfork.org/scripts/371490/Reddit%20Multi%20Column.user.js | |
// @updateURL https://update.greasyfork.org/scripts/371490/Reddit%20Multi%20Column.meta.js | |
// ==/UserScript== | |
/* jshint esversion: 6 */ | |
(function() { | |
'use strict'; | |
const MIN_WIDTH = 400; | |
const COLUMNS = 4; | |
let columns = COLUMNS; | |
let cleanup = null; | |
let parent = null; | |
const cardIcon = () => document?.querySelector('shreddit-sort-dropdown[header-text="View"]')?.shadowRoot?.querySelector('svg'); | |
const shouldClean =(icon) => icon === undefined ? false : icon.getAttribute('icon-name') !== "view-card-outline"; | |
cleanup = shouldClean() | |
const indexOfSmallest = function (a) { | |
let lowest = 0; | |
for (let i = 1; i<a.length; i++) { | |
if (a[i] < a[lowest]) lowest = i; | |
} | |
return lowest; | |
}; | |
const makeLayout = function(changes=[]) { | |
if (cleanup) return; | |
if (!parent) return; | |
document.getElementById("main-content").style.maxWidth = "100%"; | |
document.querySelector("div.subgrid-container").classList.remove("m:w-[1120px]") // make wide | |
document.getElementById("right-sidebar-container").style.display = "none" // hide sidebar | |
parent.style.position = "relative" | |
const cols = Math.floor(parent.offsetWidth / MIN_WIDTH); | |
columns = cols; | |
const WIDTH = Math.floor((100-columns)/columns); | |
let heights = Array(columns).fill(0); | |
for (const article of parent.querySelectorAll("article, faceplate-partial").values()) { | |
const col = indexOfSmallest(heights); | |
article.setAttribute("style", cleanup ? "" : `position:absolute; width:${WIDTH}%; top:${heights[col]}px; left:${col*(WIDTH+1)}%`) | |
heights[col] += article.offsetHeight; | |
} | |
}; | |
const setLayout = function(changes, observer) { | |
const c = shouldClean(cardIcon()); | |
if (c !== cleanup) { | |
cleanup = c; | |
window.requestAnimationFrame(makeLayout) | |
} | |
}; | |
const pageChange = new MutationObserver(makeLayout); | |
window.addEventListener('resize', makeLayout); | |
const layoutSwitch = new MutationObserver(setLayout); | |
const watch = function(changes, observer) { | |
parent = document.querySelector("article + hr + faceplate-partial").parentNode | |
if (parent === null) return; | |
pageChange.observe(parent, {childList: true}); | |
const timeout = setTimeout(() => { | |
const icon = cardIcon(); | |
if (icon !== undefined) { | |
clearTimeout(timeout); | |
layoutSwitch.observe(icon, {attributes: true}); | |
} | |
}) | |
window.requestAnimationFrame(makeLayout); | |
}; | |
const apply = new MutationObserver(watch); | |
const app = document.querySelector("shreddit-app") | |
apply.observe(app, {attributes: true}); | |
watch(); | |
})(); |
It seems to be working for me. @elmonteanalogo could you share a subreddit that it does not work, so I can check?
It seems to be working intermitently, it didn't work yesterday but it worked this morning. Not working right now though, in any subreddit or anywhere in the website. Been using it for about a year and its the first time it gives me issues. but I guess it could be on my end, I havent downloaded a different browser to test (I use yandex browser)
Maybe reddit is doing A/B testing with the layout, breaking the script. I can't reproduce for now.
could you do this for twitter?
@dmax511 I've looked into it, but Twitter is cycling element content with scroll position. It is possible, however very hard, with this approach. So I can't make any promises.
ok thanks for looking into it
it doesn't seem to work anymore. Is there a fix for it ?
it doesn't seem to work anymore. Is there a fix for it ?
I started using this userscript Reddit 2023 Ui Revert to forward www.reddit.com to new.reddit.com, then add:
// @match https://new.reddit.com/*
to the top of Reddit Multi Column script and it will work again
@c6p good job on the update, I installed it from Greasyfork
this broke today for me