Dear anyone,
Your duolingo forum registration isn't automaticaly transferred to duome forum so in order to join duome forums you need to register with your existing or any other username and email; in any case it's advised that you choose a new password for the forum.
~ Duome Team

My custom extensions, snippets, BBCodes, and other customizations

Ask, and we'll consider your request. Provide an accurate description of what you would like to do/have, and we'll consider implementing it, if this is technically possible.


User avatar
luo-ning

My custom extensions, snippets, BBCodes, and other customizations

Post by luo-ning »

Creating a topic here to track progress of all my custom extensions, snippets, BBCodes, userscripts, and other customizations in one place.

If you spot any bugs, please report them in this topic or in the relevant GitHub repository, unless the bug concerns security, in which case please PM me instead.

Contents

✅ = installed
 


Definitions

  • Extension: A phpBB add-on that needs to be installed by a forum admin and is applied forum-wide. It can make full use of PHP code, HTML, CSS, JavaScript, etc to provide enhanced features
  • Snippet: A short piece of CSS or JavaScript that can be either added by a forum admin as part of a "custom-styles" extension, as described in this post, or used in a userscript/userstyle
  • BBCode: A tag that can be used in a post that is replaced with custom HTML based on its text contents and attributes
  • Userscript: Custom JavaScript, applied only to the device where it was installed, and managed using a userscript manager such as Tampermonkey
  • Userstyle: Custom CSS, applied only to the device where it was installed, and managed using a userstyle manager such as Stylebot
Last edited by luo-ning on Sun Apr 17, 2022 1:23 pm, edited 27 times in total.

🦀 Pensando en la inmortalidad del cangrejo 🏴‍☠️ Flags Are Not Languages

User avatar
luo-ning

@mention profile link

Post by luo-ning »

  • Type: BBCode
  • Maturity: Validated, available here
  • Status: Installed on forum.duome.eu

Creates a @mention link to the named user's profile.

Used as a drop-in replacement for the default BBCode used by the Simple Mentions extension.

Also installed are some custom styles for the mentions:

Code: Select all

.mention {
	background: #1221;
	color: #235;
	font-size: 0.9em;
	height: 1.5em;
	border-radius: 0.75em;
	padding: 0 0.6em;
	display: inline-flex;
	align-items: center;
	font-weight: bold;
}
Last edited by luo-ning on Thu Mar 24, 2022 5:04 pm, edited 4 times in total.

🦀 Pensando en la inmortalidad del cangrejo 🏴‍☠️ Flags Are Not Languages

User avatar
luo-ning

HTML Entities: Insert special characters in posts

Post by luo-ning »

(Deprecated) HTML Entities: Insert special characters in posts

  • Type: Extension
  • Maturity: Deprecated in favor of TextFormatter. Original thread here. TextFormatter is now installed
  • Status: N/A

Render HTML entities in post's text content, such as   for a non-breaking space, or λ for "λ". Full list of available characters

As requested by [mention]eI000yo[/mention] in the thread Internal hyperlink, additional spaces, svg:

eI000yo wrote: Mon Mar 07, 2022 7:21 pm

Characters written as XML. I'm missing a   to add additional SPACE

entities.PNG
entities.PNG (33.1 KiB) Viewed 4781 times
Last edited by luo-ning on Mon Apr 11, 2022 4:37 pm, edited 7 times in total.

🦀 Pensando en la inmortalidad del cangrejo 🏴‍☠️ Flags Are Not Languages

User avatar
luo-ning

Human-Friendly URLs

Post by luo-ning »

Human-Friendly URLs

  • Type: Extension
  • Maturity: Beta — tested, with no current known bugs. Thread here
  • Status: Installed

Adds human-readable "slugs" to URLs, so users always have a hint of what to expect when clicking on them when someone shares a link.

  • Adds human-readable "slugs" to URLs based on their text content.
  • Provides Unicode-aware rendering of URLs within posts, similar to how modern browsers display them in the address bar. This works with the newly-slugified URLs but also with external links and even internationalized domain names.

![Human-Friendly URLs](download/file.php?id=90)

unicode-aware-link-rendering.png
unicode-aware-link-rendering.png (60.59 KiB) Viewed 4784 times
Last edited by luo-ning on Sun Mar 27, 2022 2:06 pm, edited 3 times in total.

🦀 Pensando en la inmortalidad del cangrejo 🏴‍☠️ Flags Are Not Languages

User avatar
luo-ning

Enhanced Quote: Partial quoting based on selected text

Post by luo-ning »

Enhanced Quote: Partial quoting based on selected text

  • Type: Extension
  • Maturity: Alpha with known bugs. Thread here
  • Status: Not installed

Enables partial quoting of post content, based on the selected text when the quote button is clicked, along with other quality-of-life improvements to the default quoting behavior.

  • Enables partial quoting by clicking the quote or reply buttons while text within a post is selected
  • Preserves formatting where possible, repairing any "orphaned" BBCode tags from the partial selection
  • Always uses multi-line version of quote BBCode for enhanced readability while editing
  • Intelligently adds spacing around quoted text when using multi-quote feature
  • Automatically focuses the text input box when quoting or replying

![Partial quoting](download/file.php?id=112)

Last edited by luo-ning on Thu Mar 24, 2022 5:10 pm, edited 3 times in total.

🦀 Pensando en la inmortalidad del cangrejo 🏴‍☠️ Flags Are Not Languages

User avatar
luo-ning

Limit Signature Height

Post by luo-ning »

Limit Signature Height

  • Type: CSS Snippet
  • Maturity: Mature
  • Status: Installed

Per the thread Height limit for signatures:

luo-ning wrote: Tue Mar 01, 2022 8:11 pm

signatures currently have a length limit of 255 characters, but no height limit.

Before:

sig-before.PNG
sig-before.PNG (7.96 KiB) Viewed 4776 times

After:

sig-after.PNG
sig-after.PNG (4.27 KiB) Viewed 4776 times

Code:

Code: Select all

.signature {
	max-height: 5em;
	overflow-y: auto;
}
Last edited by luo-ning on Tue Mar 29, 2022 12:06 pm, edited 5 times in total.

🦀 Pensando en la inmortalidad del cangrejo 🏴‍☠️ Flags Are Not Languages

User avatar
luo-ning

Make Loading Indicator Less Ugly

Post by luo-ning »

Make Loading Indicator Less Ugly

  • Type: CSS Snippet
  • Maturity: Mature
  • Status: Installed

The default loading indicator for the ProLight theme is weirdly over-designed and janky-looking and doesn't fit the overall minimalist style of the theme. This snippet replaces it with a nicer looking one.

Before:

load-before.gif
load-before.gif (119.82 KiB) Viewed 4828 times

After:

load-after.gif
load-after.gif (132.05 KiB) Viewed 4828 times

Code:

Code: Select all

.loading_indicator {
	--color: #105289;
	--width: 6px;
	--size: 60px;
	--inner-size: calc(var(--size) - var(--width) * 2);

	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	margin: 0;

	background: transparent;
	width: var(--size);
	height: var(--size);
}

.loading_indicator:after {
	content: "";
	display: block;
	width: var(--inner-size);
	height: var(--inner-size);
	border-radius: 50%;
	border-width: var(--width);
	border-style: solid;
	border-color: var(--color) transparent;
	animation: loading_indicator 1.2s linear infinite;
}

@keyframes loading_indicator {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
Last edited by luo-ning on Tue Mar 29, 2022 12:06 pm, edited 5 times in total.

🦀 Pensando en la inmortalidad del cangrejo 🏴‍☠️ Flags Are Not Languages

User avatar
luo-ning

UX Improvements for Dropdown Menu

Post by luo-ning »

UX Improvements for Dropdown Menu

  • Type: JS Snippet
  • Maturity: Alpha
  • Status: Not installed

Automatically marks all notifications as read when opening the notifications dropdown, and allows closing the menu by pressing the Esc key.

Code: Select all

;(() => {
	/**
	 * phpBB utilities exposed on `window` by `assets/javascript/core.js`
	 *
	 * @type {{
	 * 	phpbb: {
	 * 		toggleDropdown: (this: HTMLElement) => void,
	 * 		dropdownHandles: string,
	 * 	},
	 * }}
	 */
	const { phpbb } = window

	// mark all as read when opening the menu
	document.querySelector('#notification_list_button').addEventListener('click', () => {
		for (const $el of document.querySelectorAll('[data-ajax="notification.mark_read"]')) {
			$el.click()
		}
	})

	// `Esc` key closes dropdown menus
	window.addEventListener('keydown', e => {
		if (e.key === 'Escape') {
			for (const $el of document.querySelectorAll(phpbb.dropdownHandles)) {
				phpbb.toggleDropdown.call($el)
			}
		}
	})
})()

🦀 Pensando en la inmortalidad del cangrejo 🏴‍☠️ Flags Are Not Languages

User avatar
luo-ning

Tab-Size 4

Post by luo-ning »

Tab-Size 4

  • Type: CSS Snippet
  • Maturity: Mature
  • Status: Installed

For legacy reasons, browsers use a default tab-size of 8 (i.e. equal width to 8 spaces), which makes code snippets look weirdly spaced-out if they indent with tabs. This snippet simply changes the tab size to 4.

Code: Select all

body {
	tab-size: 4;
}

Demo (similated with spaces to show the difference):

Code: Select all

// before...
const obj = {
        wow: 'this',
        looks: [
                'kinda',
                'gross',
        ],
}

// after...
const obj = {
    wow: 'this',
    looks: [
        'much',
        'better',
    ],
}
Last edited by luo-ning on Tue Mar 29, 2022 12:07 pm, edited 1 time in total.

🦀 Pensando en la inmortalidad del cangrejo 🏴‍☠️ Flags Are Not Languages

User avatar
luo-ning

UX Improvements for Breadcrumbs

Post by luo-ning »

UX Improvements for Breadcrumbs

  • Type: CSS Snippet
  • Maturity: Alpha
  • Status: Installed with modifications for desktop vs mobile

Removes the first breadcrumb (the one that leads outside the forums to duome.eu, which I only ever click by mistake), and makes the oversized breadcrumbs on the ProLight theme smaller, which fits much better on mobile.

Code: Select all

/* Remove first breadcrumb */

.breadcrumbs .crumb:first-child {
	display: none;
}

.breadcrumbs .crumb:first-child + .crumb::before {
	display: none;
}

/* Make ProLight breadcrumbs smaller */

.lightnav .navbar .inner {
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	align-items: center;
}

.lightnav .navbar .inner::after {
	content: none;
}

.lightnav .breadcrumbs .crumb {
	font-size: calc(1em / 1.5);
}
Last edited by luo-ning on Tue Mar 29, 2022 6:23 pm, edited 3 times in total.

🦀 Pensando en la inmortalidad del cangrejo 🏴‍☠️ Flags Are Not Languages

User avatar
duome

Re: Human-Friendly URLs

Post by duome »

luo-ning wrote: Thu Mar 24, 2022 3:59 pm

Human-Friendly URLs

  • Type: Extension
  • Maturity: Beta — tested, with no current known bugs. Thread here
  • Status: Not installed

Installed

User avatar
luo-ning

Re: My custom extensions, snippets, BBCodes, and other customizations

Post by luo-ning »

Awesome! [mention]duome[/mention] can you confirm the version? I think it's 0.1.11-beta — 0.1.12-beta has a fix in the Unicode-aware URL logic for parentheses in URLs. For example:

https://es.wikipedia.org/wiki/Contraseña_(álbum)
https://es.wikipedia.org/wiki/Contrase%C3%B1a_(%C3%A1lbum)

Should display as https://es.wikipedia.org/wiki/Contraseña_(álbum), rather than https://es.wikipedia.org/wiki/Contrase% ... C3%A1lbum)

It's an edge case and the consequences are minimal, so no need to update if it's too much hassle, but I'd recommend updating once version 1.0.0 is officially published (most likely in a couple of months).

🦀 Pensando en la inmortalidad del cangrejo 🏴‍☠️ Flags Are Not Languages

User avatar
duome

Re: My custom extensions, snippets, BBCodes, and other customizations

Post by duome »

updated to 0.1.13

User avatar
luo-ning

Calculate "Thanks" ratings on a curve

Post by luo-ning »

Calculate "Thanks" ratings on a curve

  • Type: Userscript (proof-of-concept); pull request up on the "Thanks for posts" extension repo
  • Maturity: Proof-of-concept
  • Status: Not installed

Support thread on phpBB

One major problem in how ratings are calculated is that they tend to obey Benford's Law, giving exponentially-skewed distribution.

For example, in a typical forum, there might be just one post with 100 thanks, with a few hovering around the 80-90 mark, and the vast majority having just a few. In this hypothetical forum, almost all posts would have ratings close to zero, implying they're bad (or at least not particularly valuable). If less than 2% of posts gained more than 5 thanks, a post with 5 thanks would already be in the 98th percentile of outstanding posts, yet its rating would show only 5%, due to being ranked against that 100-thank post instead of the vast majority of its peers!

The most accurate way of fixing this problem would be to rate posts by their percentile; however, this would massively complicate the calculation logic and probably impact performance a lot, as every single new post would affect the rating of every single other post.

A much simpler solution would be simply applying an exponential easing function to the current ratings to adjust them. This would counteract the exponential effect from Benford's Law and give a much more even distribution.

To better illustrate the effect, I've written a userscript that rewrites the percentages on the front-end:

Code: Select all

const DECIMAL_PLACES = 2;

// modified from https://easings.net/#easeOutExpo
const easeOutExpo = (num) => {
	return num === 1 ? 1 : 1 - Math.pow(2, -10 * num);
};

for (const $el of document.querySelectorAll('[id^=div_post_reput], .section-app\\/toplist .lastpost')) {
	const oldPct = parseFloat($el.textContent.match(/[\d.]+%/));

if (!Number.isNaN(oldPct)) {
	const newPct = parseFloat((easeOutExpo(oldPct / 100) * 100).toFixed(DECIMAL_PLACES));

	$el.innerHTML = $el.innerHTML.replaceAll(String(oldPct), String(newPct));
}
}

Taking forum.duome.eu as a real-world example, here's the toplist page before (the 5th best post of all time on the forum is only rated ~40%!)

toplist-before.PNG

 
And after (now it's ~94% — much better)

toplist-after.PNG

 
Meanwhile, here's a random sample from a popular topic — before (2.7% for a thank? Pffft, you might as well not even try)

ratings-before.PNG

 
And after (now my thanks seem so much more valuable! 😊)

ratings-after.PNG

🦀 Pensando en la inmortalidad del cangrejo 🏴‍☠️ Flags Are Not Languages

User avatar
luo-ning

Code syntax highlighting — Highlight JS

Post by luo-ning »

Code syntax highlighting — Highlight JS

  • Type: JS Snippet
  • Maturity: Mature — it's just an updated version of the snippet used on the phpBB support forum
  • Status: Installed

Adds syntax highlighting and pretty styles to code blocks.

Code: Select all

/* global hljs */

;(function () {
	const BASE_URL = '//cdnjs.cloudflare.com/ajax/libs/highlight.js'
	const VERSION = '11.5.0'
	const STYLE = 'base16/github'

    const $codeBlocks = document.querySelectorAll('pre code')

    if ($codeBlocks.length) {
		const script = document.createElement('script')
		const link = document.createElement('link')

		script.addEventListener('load', function () {
            for (const $code of $codeBlocks) {
                $code.innerHTML = $code.innerHTML.replace(/<br ?\/?>/g, '\n')
                hljs.highlightElement($code)
            }
		})

		script.async = true
		script.src = [BASE_URL, VERSION, 'highlight.min.js'].join('/')

		link.rel = 'stylesheet'
		link.href = [BASE_URL, VERSION, 'styles', STYLE + '.min.css'].join('/')

		document.head.appendChild(link)
		document.body.appendChild(script)
	}
})()

Here's what it looks like when run on its own source code:

hljs-after.png
hljs-after.png (27.27 KiB) Viewed 4731 times
Last edited by luo-ning on Mon Apr 11, 2022 4:21 pm, edited 4 times in total.

🦀 Pensando en la inmortalidad del cangrejo 🏴‍☠️ Flags Are Not Languages

User avatar
luo-ning

Keyboard key <kbd> BBCode

Post by luo-ning »

Keyboard key <kbd> BBCode

BBCode Usage

Code: Select all

[kbd]{TEXT}[/kbd]

HTML Replacement

Code: Select all

<kbd style="display: inline-block; font-size: 0.8em; padding: 0 0.4em; background: rgba(0, 0, 0, 0.07); border-radius: 0.5em; border: 1px solid rgba(0, 0, 0, 0.2); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2);">{TEXT}</kbd>

Help Line

Code: Select all

[kbd]Key[/kbd], for example: [kbd]Ctrl[/kbd] + [kbd]Alt[/kbd] + [kbd]Delete[/kbd]

Result

ctrlaltdel.png
ctrlaltdel.png (3.56 KiB) Viewed 4720 times
Last edited by luo-ning on Sat Apr 02, 2022 8:39 pm, edited 2 times in total.

🦀 Pensando en la inmortalidad del cangrejo 🏴‍☠️ Flags Are Not Languages

User avatar
duome

Re: My custom extensions, snippets, BBCodes, and other customizations

Post by duome »

luo-ning wrote: Mon Mar 28, 2022 6:08 pm

Keyboard key <kbd> BBCode

  • Type: BBCode
  • Maturity: Mature; awaiting validation
  • Status: Not installed

Installed

User avatar
duome

Re: Tab-Size 4

Post by duome »

luo-ning wrote: Thu Mar 24, 2022 4:46 pm

Tab-Size 4

  • Type: CSS Snippet
  • Maturity: Mature
  • Status: Not installed

Installed

User avatar
duome

Re: Limit Signature Height

Post by duome »

luo-ning wrote: Thu Mar 24, 2022 4:07 pm

Limit Signature Height

  • Type: CSS Snippet
  • Maturity: Mature
  • Status: Not installed

Installed

User avatar
duome

Re: Make Loading Indicator Less Ugly

Post by duome »

luo-ning wrote: Thu Mar 24, 2022 4:14 pm

Make Loading Indicator Less Ugly

  • Type: CSS Snippet
  • Maturity: Mature
  • Status: Not installed

Installed

User avatar
luo-ning

Twemoji Emoticons

Post by luo-ning »

Twemoji Emoticons

  • Type: Smiley pack
  • Maturity: Mature
  • Status: Installed

Replace the default phpBB emoticons with emoji-style "twemojis", for consistent style with how phpBB handles actual emojis. Covers all the default emoticons.

luo-ning wrote: Tue Mar 29, 2022 12:03 am

Here's a package I made that should make the update easier (instructions in README.md inside):

twemojis.zip

Smiley selector looks like this after install:

![Twemoji smileys](https://www.phpbb.com/customise/db/download/195851)

🦀 Pensando en la inmortalidad del cangrejo 🏴‍☠️ Flags Are Not Languages

User avatar
duome

Re: UX Improvements for Breadcrumbs

Post by duome »

luo-ning wrote: Thu Mar 24, 2022 5:01 pm

UX Improvements for Breadcrumbs

  • Type: CSS Snippet
  • Maturity: Alpha
  • Status: Not installed

I added one extra condition:

Code: Select all

@media screen and (max-width: 600px) { .... }

otherwise the breadcrubs seem way too small on a desktop

User avatar
luo-ning

A/B Testing

Post by luo-ning »

A/B Testing

  • Type: JS Snippet
  • Maturity: Mature
  • Status: Installed

This snippet doesn't add any functionality on its own, but it will enable A/B testing of new JavaScript features based on forum or user IDs. By limiting rollout of in-development code to only certain users or subforums, any impact of bugs etc. can be minimized.

Code: Select all

;(() => {
	const TESTING_FORUM_ID = 99

	const currentUserId = parseInt(
		new URL(
			$('#username_logged_in a[href*="/memberlist.php"]')[0].href,
		).searchParams.get('u'),
	)

	const currentForumIds = [...$('.crumb [href*="?f="]')].map($el =>
		parseInt(
			new URL($el.href).searchParams.get('f'),
		),
	)

	const isTestingForum = currentForumIds.includes(TESTING_FORUM_ID)

	const isMod = Boolean($('a[href*="/mcp.php"]').length)
	const isAdmin = Boolean($('a[href*="/adm/index.php"]').length)

	const currentUser = {
		id: currentUserId,
		isMod,
		isAdmin,
	}

	const currentForum = {
		ids: currentForumIds,
		isTestingForum,
	}

	window.duome = {
		...window.duome,
		...{
			currentUser,
			currentForum,
		}
	}
})()

When inserted early in the document (e.g. inside head), this can then be used by in-development scripts later on, for example:

Code: Select all

;(() => {
	if (!(duome.currentForum.isTestingForum || duome.currentUser.isAdmin)) return

	// ... other code goes here
})
Last edited by luo-ning on Mon Apr 11, 2022 4:17 pm, edited 2 times in total.

🦀 Pensando en la inmortalidad del cangrejo 🏴‍☠️ Flags Are Not Languages

User avatar
luo-ning

UX improvements for thanking

Post by luo-ning »

UX improvements for thanking

  • Type: JS Snippet
  • Maturity:
    • Needs testing on iOS Safari
    • Tested on all other major platforms
    • Open pull request on the thanks_for_posts repo
    • Suggest A/B testing first to check for any Safari bugs (depends on A/B testing script)
  • Status: Installed

Allows thanking and un-thanking to update the UI directly, without leaving the page.

![UX improvements for thanking screen capture](https://user-images.githubusercontent.c ... 2342ce.gif)

Code: Select all

;(() => {
	const AB_USER_IDS = [66 /* me :) */]

	if (!(duome.currentForum.isTestingForum || [AB_USER_IDS].includes(duome.currentUser.id))) return

    window.thanksForPosts = {
        "l10n": {
            "errorTitle": "AJAX error",
            "errorMessage": "Something went wrong when processing your request.",
        },
    }

	/** @typedef {{ fadeOut: (ms: number) => JQuery }} JQuery */

	/**
	 * @type {{
	 * 	phpbb: {
	 * 		alertTime: number,
	 * 		loadingIndicator: () => JQuery,
	 * 		alert: (title: string, message: string) => JQuery,
	 * 		confirm: (msg: string, callback: (val: boolean) => void) => JQuery,
	 * 		clearLoadingTimeout: () => void,
	 * 	},
	 * 	thanksForPosts: { l10n: { errorTitle: string, errorMessage: string } },
	 * }}
	 */
	const { phpbb, thanksForPosts: { l10n } } = window

	/**
	 * @param {HTMLAnchorElement} $link
	 * @param {Document} replacementDoc
	 */
	const getReplacerForLink = ($link, replacementDoc) => {
		const $post = $link.closest('.post')
		const $replacement = replacementDoc.getElementById($post.id)

		if ($replacement) {
			$replacement
				.querySelector('.content')
				.replaceWith($post.querySelector('.content'))

			return () => {
				const $focused = window.document.activeElement

				$post.replaceWith($replacement)

				// UX - re-focus active element within replacement DOM
				if ($post.contains($focused)) {
					;[...$replacement.querySelectorAll('*')]
						.find(
							($el) =>
								($el.id && $el.id === $focused.id) ||
								($el.href && $el.href === $focused.href),
						)
						?.focus()
				}
			}
		}

		return null
	}

	/** @param {HTMLAnchorElement} $link */
	const thankHandler = async ($link) => {
		const $loadingIndicator = phpbb.loadingIndicator()
		// use HEAD instead of GET as we only care about `ok` status
		const { ok } = await fetch($link.href, { method: 'HEAD' })

		if (ok) {
			const res = await fetch(window.location.href)
			const text = await res.text()

			const resDoc = new DOMParser().parseFromString(text, 'text/html')

			getReplacerForLink($link, resDoc)?.()
		} else {
			phpbb.alert(l10n.errorTitle, l10n.errorMessage)
		}

		phpbb.clearLoadingTimeout()
		$loadingIndicator.fadeOut(phpbb.alertTime)
	}

	/** @param {HTMLAnchorElement} $link */
	const unthankHandler = ($link) => {
		const $loadingIndicator = phpbb.loadingIndicator()

		const $iframe = Object.assign(document.createElement('iframe'), {
			src: $link.href,
			sandbox: 'allow-same-origin allow-forms allow-scripts',
			// Firefox will not submit form if iframe is `hidden` or
			// `display: none`, so we place it out of view instead
			style: 'width: 1; height: 1; position: fixed; top: -10000px',
			// a11y - hide from assistive technology etc.
			ariaHidden: 'true',
		})

		document.body.appendChild($iframe)

		$iframe.addEventListener('load', () => {
			// 'load' will fire multiple times, due to in-frame navigation;
			// we check for presence of elements on the page to determine
			// which load event we're inside of

			const $form = $iframe.contentDocument.querySelector('form#confirm')
			const $confirmBtn = $form?.querySelector('[name=confirm]')

			// is confirmation form
			if ($confirmBtn) {
				const $clone = $form.cloneNode(true)
				const $confirm = $clone.querySelector('.inner') ?? $clone

				// must be <input type=button name=confirm/cancel>
				// in order for phpbb.confirm to recognize clicks
				for (const $btn of $confirm.querySelectorAll('[type=submit]')) {
					$btn.type = 'button'
				}

				phpbb.confirm($confirm.innerHTML, (val) => {
					if (val) {
						$confirmBtn.click()

						phpbb.loadingIndicator()
					} else {
						$iframe.remove()
					}
				})

				return
			}

			const replacer = getReplacerForLink($link, $iframe.contentDocument)

			// is navigation back to own page
			if (replacer) {
				replacer()

				phpbb.clearLoadingTimeout()
				$loadingIndicator.fadeOut(phpbb.alertTime)

				$iframe.remove()

				return
			}
		})
	}

	document.body.addEventListener('click', (e) => {
		/** @type {HTMLAnchorElement} $link */
		let $link

		if (($link = e.target.closest('a[href*="&thanks="]'))) {
			e.preventDefault()
			thankHandler($link)
		} else if (($link = e.target.closest('a[href*="&rthanks="]'))) {
			e.preventDefault()
			unthankHandler($link)
		}
	})
})()
Last edited by luo-ning on Sun Apr 17, 2022 1:24 pm, edited 4 times in total.

🦀 Pensando en la inmortalidad del cangrejo 🏴‍☠️ Flags Are Not Languages

User avatar
luo-ning

Fix broken markdown list styling

Post by luo-ning »

Fix broken markdown list styling

  • Type: CSS
  • Maturity: Mature
  • Status: Fixed

Delete the following lines from darkmode.css, because they break list styling for nested lists (see example in previous post):

Code: Select all

.content ol,
.content ul { display: inline-block; }

🦀 Pensando en la inmortalidad del cangrejo 🏴‍☠️ Flags Are Not Languages

User avatar
luo-ning

Dark-mode fix 1: full-opacity images

Post by luo-ning »

Dark-mode fix 1: full-opacity images

  • Type: CSS Snippet
  • Maturity: Mature
  • Status: Installed

Reverts darkmode images to full-opacity, per [mention]coto.i[/mention]'s first request here:

coto.i wrote: Fri Mar 25, 2022 8:54 am

Pretty please

  1. Remove the dark theme image transparency for all images (pictures, flags, smilies, etc.). It doesn't help with visual comfort and the images look drowned.

Code: Select all

:root.darkmode img:not(:hover) {
	opacity: unset;
}
Last edited by luo-ning on Mon Apr 11, 2022 4:15 pm, edited 1 time in total.

🦀 Pensando en la inmortalidad del cangrejo 🏴‍☠️ Flags Are Not Languages

User avatar
luo-ning

Dark-mode fix 2: fix layout bugs

Post by luo-ning »

Dark-mode fix 2: fix layout bugs

Dark mode breaks the positioning of all position: fixed elements on the page (modals, loading spinners, etc). This becomes apparent when you trigger a modal from low down a page that is taller than the screen hight, such as subscribing to a forum; the loading spinner and modal are "invisible" due to being placed above the visible viewport.

Demo (the modal should be fixed in place, not scrolling with the background):

![darkmode-pos-fixed-bug](https://user-images.githubusercontent.c ... 928ac8.gif)

The bug is due to this:

https://stackoverflow.com/questions/529 ... ositioning

A value other than none for the filter property results in the creation of a containing block for absolute and fixed positioned descendants unless the element it applies to is a document root element in the current browsing context. The list of functions are applied in the order provided.

To fix this, we apply apply the darkmode class and filter: invert(1) hue-rotate(.5turn) style to the :root element (i.e. html), not body.

This should also fix the issue with the dark background not extending to the bottom of the page.

Last edited by luo-ning on Wed Apr 06, 2022 7:30 pm, edited 1 time in total.

🦀 Pensando en la inmortalidad del cangrejo 🏴‍☠️ Flags Are Not Languages

User avatar
duome

Re: Dark-mode fix 1: full-opacity images

Post by duome »

luo-ning wrote: Fri Apr 01, 2022 9:11 pm

Code: Select all

body#phpbb.darkmode img:not(:hover) {
	opacity: unset;
}

Alternatively, the original { opacity: .7 } can be commented-out (that's what I did).

apply the darkmode class and filter: invert(1) hue-rotate(.5turn) style to the :root element (i.e. html), not body.

Something in the code is still applying the filters to the body on page reaload, even though I think I replaced every occurence of "page" with "html"

User avatar
luo-ning

Re: My custom extensions, snippets, BBCodes, and other customizations

Post by luo-ning »

Better to update the whole extension to 1.0.3, making a backup of the additions and re-applying them, or better yet moving them to duome/custom if that's up and running now.

As far as possible, everything custom should be kept completely separate from core or other extensions — it will make updating things a lot easier. The exception is if we want to permanently fork an extension and commit to maintaining that fork long-term, which might be worth doing in some cases, but only if the customizations are significant and difficult to keep separate.

🦀 Pensando en la inmortalidad del cangrejo 🏴‍☠️ Flags Are Not Languages

User avatar
duome

Re: My custom extensions, snippets, BBCodes, and other customizations

Post by duome »

luo-ning wrote: Wed Apr 06, 2022 1:24 pm

Better to update the whole extension to 1.0.3...

I did.

luo-ning wrote: Wed Apr 06, 2022 1:24 pm

... making a backup of the additions and re-applying them, or better yet moving them to duome/custom if that's up and running now.

Since yesterday night, yes. ProLight theme only.

Post Reply

Return to “Requests new Duome features”