CrW_Threadmark_Word_Counter.user.js

// ==UserScript==
// @name           SB/SV/QQ: Threadmark Word Counter
// @namespace      https://github.com/w4tchdoge
// @version        1.1.1-20240618_161840
// @description    Display the word count of threadmarked forum posts in the header area of the post
// @author         w4tchdoge
// @homepage       https://github.com/w4tchdoge/MISC-UserScripts
// @updateURL      https://github.com/w4tchdoge/MISC-UserScripts/raw/main/CrW_Threadmark_Word_Counter.user.js
// @downloadURL    https://github.com/w4tchdoge/MISC-UserScripts/raw/main/CrW_Threadmark_Word_Counter.user.js
// @match          *://forums.spacebattles.com/threads/*
// @match          *://forums.sufficientvelocity.com/threads/*
// @match          *://forum.questionablequesting.com/threads/*
// @run-at         document-idle
// @license        AGPL-3.0-or-later
// @history        1.1.1 — Log the sum of the word count of all threadmarks currently being displayed to the browser console
// @history        1.1.0 — Reworked `CSSRGBintoComponents()` to better handle cases where the color is in the format `color(srgb ...)`. Changed how lightness_increase works so that it's a negative value when `color-scheme` is `light` and zero when `color-scheme` is neither `light` nor `dark`. Reworked `phb_color` so that the string it outputs uses the newer space separated `rgb()` parameters (https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb#syntax)
// @history        1.0.0 — Initial commit
// ==/UserScript==

(function () {
	`use strict`;

	const start_time = performance.now();
	console.log(`
Initializing Threadmark Word Counter UserScript
———————————————–————————————————
Time since Start: ${performance.now() - start_time}ms`
	);

	// Conversion of the word counting Regular Expression used by AO3, with added support for most Unicode scripts supported in Regular Expressions
	// Vanilla AO3 compliant script_list:
	// const script_list = [`Han`, `Hiragana`, `Katakana`, `Thai`];
	// Full script_list:
	const script_list = [`Arabic`, `Armenian`, `Balinese`, `Bengali`, `Bopomofo`, `Braille`, `Buginese`, `Buhid`, `Canadian_Aboriginal`, `Carian`, `Cham`, `Cherokee`, `Common`, `Coptic`, `Cuneiform`, `Cypriot`, `Cyrillic`, `Deseret`, `Devanagari`, `Ethiopic`, `Georgian`, `Glagolitic`, `Gothic`, `Greek`, `Gujarati`, `Gurmukhi`, `Han`, `Hangul`, `Hanunoo`, `Hebrew`, `Hiragana`, `Inherited`, `Kannada`, `Katakana`, `Kayah_Li`, `Kharoshthi`, `Khmer`, `Lao`, `Latin`, `Lepcha`, `Limbu`, `Linear_B`, `Lycian`, `Lydian`, `Malayalam`, `Mongolian`, `Myanmar`, `New_Tai_Lue`, `Nko`, `Ogham`, `Ol_Chiki`, `Old_Italic`, `Old_Persian`, `Oriya`, `Osmanya`, `Phags_Pa`, `Phoenician`, `Rejang`, `Runic`, `Saurashtra`, `Shavian`, `Sinhala`, `Sundanese`, `Syloti_Nagri`, `Syriac`, `Tagalog`, `Tagbanwa`, `Tai_Le`, `Tamil`, `Telugu`, `Thaana`, `Thai`, `Tibetan`, `Tifinagh`, `Ugaritic`, `Vai`, `Yi`];
	// Excludes the Unicode scripts "Common" and "Latin" because that messes with the counting somehow
	// Exclude "Inherited" just to be safe
	const script_exclude_list = [`Common`, `Latin`, `Inherited`];
	const word_count_regex = new RegExp((function () {
		// Switch from using alternations in a group (e.g. (a|b|c)) to a character class (e.g. [abc]) for performance reasons (https://stackoverflow.com/a/27791811/11750206)
		const regex_scripts = script_list.filter((elm) => !script_exclude_list.includes(elm)).map((elm) => `\\p{Script=${elm}}`).join(``);
		const full_regex_str = `[${regex_scripts}]|((?![${regex_scripts}])[\\p{Letter}\\p{Mark}\\p{Number}\\p{Connector_Punctuation}])+`;
		return full_regex_str;
	})(), `gv`);

	function WordCounter(string, word_count_regex_expr = word_count_regex) {
		// Count the number of words
		// Counting method from: https://stackoverflow.com/a/76673564/11750206, https://stackoverflow.com/a/69486719/11750206, and https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/matchAll
		// Regex substitutions from: https://github.com/otwcode/otwarchive/blob/943f585818005be8df269d84ca454af478150e75/lib/word_counter.rb#L30C33-L30C68
		const word_count_arr = Array.from(string.replaceAll(/--/g, `—`).replaceAll(/['’‘-]/g, ``).matchAll(word_count_regex_expr), (m) => m[0]);
		const word_count_int = word_count_arr.length;

		return word_count_int;
	}

	// Colour Functions for manipulating wc_borderColor

	// Split the initial CSS colour string into components
	function CSSRGBintoComponents(rgb_str) {
		const match_regex = /^(rgb|color\(srgb(?=\s))/i;
		const split_regex = /[^\d\.%]/i;

		const regex_test = match_regex.test(rgb_str);

		if (regex_test == false) {
			throw new Error(`The parameter passed to CSSRGBintoComponents() is not an rgb()/rgba()/color(srgb ...) CSS colour string.`);
		}

		function CommonFilter(input_str, splt_rgx = split_regex) {
			const [red, green, blue, alpha] = input_str.split(splt_rgx)
				.filter(elm => {
					try {
						return ((!isNaN(parseFloat(elm)) && isFinite(elm)) || elm.includes(`%`));
					} catch (error) {
						return false;
					}
				});

			return [red, green, blue, alpha];
		}

		const color_test = rgb_str.split(/[\s\(]/i).at(0).toLowerCase().includes(`color`);

		if (color_test) {

			const [comp_red, comp_green, comp_blue, comp_alpha] = CommonFilter(rgb_str)
				.map((element, index) => {
					if (Boolean(element) && index < 3) {
						const output_str = parseInt(parseFloat(element) * 255).toString();
						return output_str;
					} else { return element.toString(); }
				});

			return [comp_red, comp_green, comp_blue, comp_alpha];

		} else {

			const [comp_red, comp_green, comp_blue, comp_alpha] = CommonFilter(rgb_str);

			return [comp_red, comp_green, comp_blue, comp_alpha];

		}
	}

	// Reference XYZ values ; Observer: 2° ; Illuminant: D65
	const [ref_X, ref_Y, ref_Z] = [95.047, 100.000, 108.883];

	// Converts RGB components into CIELAB
	// Input is an array of RGB components in that order
	// Outputs an array of CIE Lab components in that order
	// from https://stackoverflow.com/a/73998199/11750206
	function RGBtoLAB([red, green, blue]) {
		const [var_R, var_G, var_B] =
			[red, green, blue]
				.map(n => n / 255)
				.map(n =>
					n > 0.0405
						? ((n + 0.055) / 1.055) ** 2.4
						: n / 12.92
				)
				.map(n => n * 100);

		const [X, Y, Z] = [
			var_R * 0.4124 + var_G * 0.3576 + var_B * 0.1805,
			var_R * 0.2126 + var_G * 0.7152 + var_B * 0.0722,
			var_R * 0.0193 + var_G * 0.1192 + var_B * 0.9505
		];

		const [var_X, var_Y, var_Z] =
			[X / ref_X, Y / ref_Y, Z / ref_Z]
				.map(n =>
					n > 0.008856
						? n ** (1 / 3)
						: (7.787 * n) + (16 / 116)
				);

		const [CIE_L, CIE_a, CIE_b] =
			[
				(116 * var_Y) - 16,
				500 * (var_X - var_Y),
				200 * (var_Y - var_Z)
			];

		return [CIE_L, CIE_a, CIE_b];
	}

	// Converts CIELAB components into RGB
	// Input is an array of CIE Lab components in that order
	// Outputs an array of RGB components in that order
	// from https://stackoverflow.com/a/73998199/11750206
	function LABtoRGB([CIE_L, CIE_a, CIE_b]) {
		const
			var_Y = (CIE_L + 16) / 116,
			var_X = (CIE_a / 500) + var_Y,
			var_Z = var_Y - (CIE_b / 200);

		const [X, Y, Z] = (() => {
			const [mid_X, mid_Y, mid_Z] = [var_X, var_Y, var_Z]
				.map(n =>
					n ** 3 > 0.008856
						? n ** 3
						: (n - 16 / 116) / 7.787
				);

			return [mid_X * ref_X, mid_Y * ref_Y, mid_Z * ref_Z];
		})();

		const [var_R, var_G, var_B] = [
			X * 3.2406 + Y * -1.5372 + Z * -0.4986,
			X * -0.9689 + Y * 1.8758 + Z * 0.0415,
			X * 0.0557 + Y * -0.2040 + Z * 1.0570
		];

		const [R, G, B] = [var_R, var_G, var_B]
			.map(n => n / 100)
			.map(n =>
				n > 0.0031308
					? (1.055 * (n ** (1 / 2.4))) - 0.055
					: 12.92 * n
			)
			.map(n => parseInt(n * 255));

		return [R, G, B];
	}


	// Get array of threadmarked posts
	const threadmarked_posts = Array.from(document.querySelectorAll(`article.hasThreadmark:has(.message-inner .message-cell--main)`));

	// Time logging because why not
	console.log(`
Starting Word Counting of Threadmarks
———————————————–————————————————
Time since Start: ${performance.now() - start_time}ms`
	);

	let word_count_sum = 0;

	// Iterate on the array of threadmarked posts
	threadmarked_posts.forEach(function (element, index, array) {
		// Get the timestamp element which the Word count element will be put after
		const tmrkd_post_timestamp = element.querySelector(`.message-cell--main .message-attribution-main`);

		// Get the computed styles of the threadmark header element (where the threadmark name,category, and nav buttons are)
		// This is to mimick the border style when making the word count element
		// Also getting the threadmark title and category because it's right there why not
		const [threadmark_title, threadmark_category, ph_styles] = (function () {
			const tmrk_header = element.querySelector(`div.message-cell--threadmark-header`);
			const
				tmrk_title = tmrk_header.querySelector(`span.primary > span[id^="threadmark"]`).cloneNode(true).textContent.trim(),
				tmrk_category = tmrk_header.querySelector(`span.primary > label[for^="threadmark"]`).cloneNode(true).textContent.trim();

			const tmrk_header_styles = getComputedStyle(tmrk_header);
			return [tmrk_title, tmrk_category, tmrk_header_styles];
		})();

		// Change how much higher the perceptual lightness of the word count border colour is
		// const lightness_increase = 10;
		// const lightness_increase = 6.75;
		const lightness_increase = (() => {
			const up_value = 6.75;
			const site_color_scheme = getComputedStyle(document.querySelector(`body`)).getPropertyValue(`color-scheme`);

			// if (site_color_scheme == `light`) {
			// 	const output_num = -up_value;
			// 	return output_num;
			// } else {
			// 	const output_num = up_value;
			// 	return output_num;
			// }

			switch (site_color_scheme) {
				case `light`:
					return -up_value;

				case `dark`:
					return up_value;

				default:
					return 0;
			}
		})();

		// Assign/Get/Calculate the border properties for the word count element border
		const [wc_borderWidth, wc_borderStyle, wc_borderColor] = (function () {
			const
				// Manually set to 1px because that's what it's set to in the Threadmark header
				// But computed style returns 0.740 recurring
				phb_width = `1px`,

				// Get the border style
				phb_style = ph_styles.getPropertyValue(`border-bottom-style`),

				// Calculated the border colour based on retrieved border colour and lightness_increase
				phb_color = (() => {
					const [initial_red, initial_green, initial_blue, initial_alpha] = CSSRGBintoComponents(ph_styles.getPropertyValue(`border-bottom-color`));

					const [i_CIE_L, i_CIE_a, i_CIE_b] = RGBtoLAB([initial_red, initial_green, initial_blue]);
					const [final_CIE_L, final_CIE_a, final_CIE_b] = [i_CIE_L + lightness_increase, i_CIE_a, i_CIE_b];
					const [final_red, final_green, final_blue] = LABtoRGB([final_CIE_L, final_CIE_a, final_CIE_b]);

					if (Boolean(initial_alpha)) {
						const out_phb_color = `rgb(${final_red} ${final_green} ${final_blue} / ${initial_alpha})`;
						return out_phb_color;
					} else {
						const out_phb_color = `rgb(${final_red} ${final_green} ${final_blue})`;
						return out_phb_color;
					}
				})();

			return [phb_width, phb_style, phb_color];
		})();

		// Get the actual text of the threadmark to be word counted
		const threadmark_text = element.querySelector(`.message-inner .message-cell--main .message-content article.message-body .bbWrapper`).cloneNode(true).textContent;

		// Calculate word count using WordCounter() and format it to a thousand-separated string
		const word_count_int = parseInt(WordCounter(threadmark_text));
		const word_count_str = new Intl.NumberFormat({ style: `decimal` }).format(word_count_int);

		// Add to sum
		word_count_sum += word_count_int;

		// Threadmark info logging + Time logging
		console.log(
			`
Threadmark ${index + 1}
Threadmark Category: ${threadmark_category}
Threadmark Title: ${threadmark_title}
Word Count: ${word_count_str} words
———————————————–————————————————
Time since Start: ${performance.now() - start_time}ms`
		);

		// Create the word count element
		const word_count_element = Object.assign(document.createElement(`ul`), {
			id: `threadmark-word-count`,
			className: `listInline`,
			// style: `padding-left: 0.5em; margin-left: 0.5em; border-left: ${wc_borderWidth} ${wc_borderStyle} ${wc_borderColor};`,
			style: `padding-left: 7.5px; margin-left: 7.5px; border-left: ${wc_borderWidth} ${wc_borderStyle} ${wc_borderColor};`,
			innerHTML: (function () {
				const element = Object.assign(document.createElement(`li`), {
					className: `u-concealed`,
					innerHTML: `Word Count: ${word_count_str} words`
				});
				return element.outerHTML;
			})()
		});

		// Check if the word count element already exists
		const wc_elem_check = element.querySelector(`#threadmark-word-count`);
		if (Boolean(wc_elem_check)) {
			// If yes, replace existing one with new one
			wc_elem_check.replaceWith(word_count_element);
		} else {
			// If no, add a word count element
			tmrkd_post_timestamp.after(word_count_element);
		}
	});

	const word_count_sum_elm = (() => {
		const out_elm = Object.assign(document.createElement(`div`), {
			id: `CrW_Thrdmrk_Wrd_Cnt_Sum_hidden`,
		});
		out_elm.setAttribute(`data_word_count_sum`, word_count_sum);

		return out_elm;
	})();
	document.querySelector(`body`).appendChild(word_count_sum_elm);

	console.log(`
Sum of the word counts of the threadmarks on the current page:`, word_count_sum);

	// More time logging wheeeeeeeeeeeeeeeeeeee
	console.log(`
Completed Word Counting of Threadmarks
UserScript has completed running
———————————————–————————————————
Time since Start: ${performance.now() - start_time}ms`
	);

})();