Ed Johnson-Williams edjw

onElementFound

A small JavaScript function that executes a callback when elements matching a CSS selector appear in the DOM. It works with elements that are available on page load and dynamically added later.

Usage

// Basic usage
onElementFound({
  selector: ".my-element",

	/**
	* Gets URL query parameters from the current location
	* @returns {Object} An object containing all query parameters as key-value pairs
	* @example
	* // URL: https://example.com?name=John&age=25
	* const params = getParams();
	* // Result: { name: "John", age: "25" }
	*
	* @example
	* // With destructuring

	// Todo
	// - Work out how to change font, colours, weights
	// - Work out how to change the logo if it's not available as a URL
	// - Add changing page and form background colours
	// - Make a UI to build the config including maybe base64 encoding the images and font files

	// A config that could be created by a user or generated by a tool
	const PAGE_ELEMENTS_CHANGES = {
	LOGO_SRC: "https://cdn.friendsoftheearth.uk/themes/custom/foed8/logo.svg", // Just a demo!
	TOP_BAR_COLOUR: "#232f4a",

	{
	"constituencies": [
	{
	"id": 1,
	"name": "Aberafan Maesteg",
	"messages": [
	{
	"sender": "John Doe",
	"content": "Message content 1"
	},

	// // .vscode/tasks.json
	{
	"version": "2.0.0",
	"tasks": [
	{
	"label": "Run Vite",
	"type": "shell",
	"command": "pnpm run dev",
	"presentation": {
	"reveal": "silent",

	// Laracasts Theatre Mode: Add YouTube style tap 'T' for toggle theatre mode

	// https://github.com/uzairfarooq/arrive
	// prettier-ignore
	const Arrive = function (e, t, n) { "use strict"; function r(e, t, n) { l.addMethod(t, n, e.unbindEvent), l.addMethod(t, n, e.unbindEventWithSelectorOrCallback), l.addMethod(t, n, e.unbindEventWithSelectorAndCallback) } function i(e) { e.arrive = f.bindEvent, r(f, e, "unbindArrive"), e.leave = d.bindEvent, r(d, e, "unbindLeave") } if (e.MutationObserver && "undefined" != typeof HTMLElement) { var o = 0, l = function () { var t = HTMLElement.prototype.matches \|\| HTMLElement.prototype.webkitMatchesSelector \|\| HTMLElement.prototype.mozMatchesSelector \|\| HTMLElement.prototype.msMatchesSelector; return { matchesSelector: function (e, n) { return e instanceof HTMLElement && t.call(e, n) }, addMethod: function (e, t, r) { var i = e[t]; e[t] = function () { return r.length == arguments.length ? r.apply(this, arguments) : "function" == typeof i ? i.apply(this, arguments) : n } }, ca

	const styleElements = document.querySelectorAll(
	'link[rel="stylesheet"], style'
	);
	const inlineStyleElements = document.querySelectorAll("[style]");

	for (const styleElement of styleElements) {
	if (styleElement.parentNode) {
	styleElement.parentNode.removeChild(styleElement);
	}
	}

	<style type="text/css">
	section#main::before {
	background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
	url("https://action.mungos.org/sites/stmungos/files/styles/full/public/christmas-background.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	content: "";
	position: fixed; /* Fix position to cover whole area */
	top: 0;
	left: 0;

	// Also this in on-page CSS
	// @keyframes fadeIn {
	// 0% {opacity: 0;}
	// 100% {opacity: 1;}
	// }

	// .fade-in {
	// animation: fadeIn 1s;
	// }