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",

	// 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",

	/**
	* 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