Weight Weenies overquoting remedy

ww_overquoting_remedy.user.js

// ==UserScript==
// @name         Weight Weenies overquoting remedy
// @version      1.0
// @description  Makes overquoting more tolerable
// @author       Klaster_1
// @icon         http://weightweenies.starbike.com/images/weenie.gif
// @match        https://weightweenies.starbike.com/forum/viewtopic.php*
// @downloadURL  https://gist.github.com/Klaster1/eecb49e913cd531fb2f31647a7b1909e/raw/ww_overquoting_remedy.user.js
// @updateURL    https://gist.github.com/Klaster1/eecb49e913cd531fb2f31647a7b1909e/raw/ww_overquoting_remedy.user.js
// @grant        none
// ==/UserScript==

const TALL_CLASSNAME = 'too-tall'
const MAX_HEIGHT = 200

/**
 * @param {HTMLElement} el
 * @returns {boolean}
 */
const isOverquote = el => el && !el.classList.contains(TALL_CLASSNAME) && el.getBoundingClientRect().height > MAX_HEIGHT

/**
 * @param {HTMLElement} el
 * @returns {void}
 */
const shrinkIt = el => el.classList.add(TALL_CLASSNAME)

/**
 * @param {HTMLImageElement} img
 * @returns {Promise<void>}
 */
const waitForImageLoad = (img) => img.complete
	? Promise.resolve(undefined)
	: img.addEventListener('load', () => Promise.resolve(undefined))

/**
 * @returns {HTMLImageElement[]}
 */
const getQuoteImages = () => [...document.querySelectorAll('.postbody>.quotecontent img')]

/**
 * @param {HTMLElement} el
 * @returns {HTMLElement|null}
 */
const getParentQuote = el => el.closest('.quotecontent')

/**
 * @param {string} style
 * @returns {void}
 */
const injectStyle = style => {
	const styleEl = document.createElement('style')
	styleEl.innerHTML = style
	document.body.appendChild(styleEl)
}

/**
 * @returns {string}
 */
const getQuoteBackgroundColor = () => window
	.getComputedStyle(document.querySelector('.quotecontent'))
	.backgroundColor

getQuoteImages().forEach(async img => {
	const quoteEl = getParentQuote(img)
	await waitForImageLoad(img)
	if (isOverquote(quoteEl)) shrinkIt(quoteEl)
})

injectStyle`
.too-tall {
	max-height: 200px;
	overflow: hidden;
	position: relative;
}
.too-tall:before {
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0) 50%, var(---quote-background-color) 80%);
	content: '';
	cursor: pointer;
}
.too-tall:after {
	content: '+ Quote too tall, click to expand';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	text-align: center;
	padding: 0.75em;
	pointer-events: none;
	cursor: pointer;
}
body {
	---quote-background-color: white;
}
`

const getClickExpand = (el) => el.matches(`.${TALL_CLASSNAME}`)
	? el
	: el.closest(`.${TALL_CLASSNAME}`)

document.addEventListener('click', e => {
	const quoteEl = getClickExpand(e.target)
	if (quoteEl) quoteEl.classList.remove(TALL_CLASSNAME)
})

document.addEventListener('DOMContentLoaded', () => {
	injectStyle`
	body {
		---quote-background-color: ${getQuoteBackgroundColor()};
	}
	`
})