Last active
October 18, 2025 23:12
-
-
Save boromisp/38743329814a97bdb1be047f0e306ad8 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ==UserScript== | |
| // @name Wandering Inn Paginator | |
| // @namespace wandering_inn_paginator@boromisp | |
| // @version 2025-10-18 | |
| // @description Change the Wandering Inn layout to horizontally scrolled pages | |
| // @author boromisp | |
| // @match https://wanderinginn.com/* | |
| // @icon https://www.google.com/s2/favicons?sz=64&wanderinginn.com | |
| // @grant none | |
| // ==/UserScript== | |
| (function() { | |
| 'use strict'; | |
| // Snap-scroll workaround Based on: https://github.com/jpamental/moby-dick | |
| function setupPagerCSS() { | |
| const sheet = new CSSStyleSheet(); | |
| sheet.replaceSync(` | |
| #pagerContainer { | |
| overflow-x: auto; | |
| overflow-y: hidden; | |
| scroll-snap-type: x mandatory; | |
| } | |
| #pagerContainer>.pagerContent { | |
| columns: 100vw auto; | |
| height: calc(100vh - 3.8rem); | |
| column-gap: 32px; | |
| width: unset; | |
| max-width: unset; | |
| margin-inline: unset; | |
| } | |
| #pagerWorkaroundFooter, #pagerWorkaroundHeader { | |
| display: flex; | |
| width: calc(100vw * var(--page-count)); | |
| } | |
| #pagerWorkaroundFooter>.pagePlaceholder, | |
| #pagerWorkaroundHeader>.pagePlaceholder { | |
| background-color: transparent; | |
| float: left; | |
| margin-left: 0; | |
| margin-right: 0; | |
| max-width: none; | |
| width: calc(100vw + 32px - var(--page-padding)*2); | |
| scroll-snap-align: start; | |
| position: relative; | |
| z-index: 10; | |
| } | |
| #pagerWorkaroundHeader>.pagePlaceholder { | |
| height: 0.8rem; | |
| } | |
| #pagerWorkaroundFooter>.pagePlaceholder>span { | |
| font-size: 0.8rem; | |
| } | |
| `); | |
| document.adoptedStyleSheets.push(sheet); | |
| } | |
| function setupPager(contentQuery = '.entry-content') { | |
| const content = document.querySelector(contentQuery); | |
| if (!content) { | |
| console.warn('content not found'); | |
| return; | |
| } | |
| let pagerContainer = content.parentElement; | |
| let pagerWorkaroundHeader, pagerWorkaroundFooter; | |
| if (pagerContainer.id !== "pagerContainer") { | |
| console.log('initial setup'); | |
| content.classList.add('pagerContent'); | |
| pagerContainer = document.createElement("div"); | |
| pagerContainer.id = "pagerContainer"; | |
| content.parentElement.insertBefore(pagerContainer, content); | |
| pagerWorkaroundHeader = document.createElement("div"); | |
| pagerWorkaroundHeader.id = "pagerWorkaroundHeader"; | |
| pagerContainer.appendChild(pagerWorkaroundHeader); | |
| pagerContainer.appendChild(content); | |
| pagerWorkaroundFooter = document.createElement("div"); | |
| pagerWorkaroundFooter.id = "pagerWorkaroundFooter"; | |
| pagerContainer.appendChild(pagerWorkaroundFooter); | |
| pagerContainer.onscrollend = function () { | |
| const page = Math.floor(pagerContainer.scrollLeft / (pagerContainer.offsetWidth + 32)) + 1; | |
| history.replaceState('', '', `#page_${page}`); | |
| } | |
| setupPagerCSS(); | |
| } else { | |
| console.log('reset previous setup'); | |
| pagerWorkaroundHeader = document.getElementById("pagerWorkaroundHeader"); | |
| pagerWorkaroundHeader.innerHTML = ""; | |
| pagerWorkaroundFooter = document.getElementById("pagerWorkaroundFooter"); | |
| pagerWorkaroundFooter.innerHTML = ""; | |
| } | |
| const padding = (window.innerWidth - pagerContainer.offsetWidth) / 2; | |
| const pageCount = Math.floor(pagerContainer.scrollWidth / pagerContainer.offsetWidth); | |
| document.body.style.setProperty('--page-count', pageCount); | |
| document.body.style.setProperty('--page-padding', `${padding}px`); | |
| for (let i = 0; i < pageCount; i++) { | |
| let pagePlaceholder = document.createElement("div"); | |
| pagePlaceholder.id = `page_${i + 1}`; | |
| pagePlaceholder.appendChild(document.createTextNode(" ")); | |
| pagePlaceholder.classList.add('pagePlaceholder'); | |
| pagerWorkaroundHeader.appendChild(pagePlaceholder); | |
| pagePlaceholder = document.createElement("div"); | |
| const pageLabel = document.createElement("span"); | |
| pageLabel.appendChild(document.createTextNode(`Page ${i + 1} of ${pageCount}`)); | |
| pagePlaceholder.appendChild(pageLabel); | |
| pagePlaceholder.classList.add('pagePlaceholder'); | |
| pagerWorkaroundFooter.appendChild(pagePlaceholder); | |
| } | |
| } | |
| setupPager(); | |
| })(); |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Screen_Recording_20251019_010930_Firefox.mp4