Optimizations.

- rename events
- tidy event payloads
- simplify JS
- simplify CSS
- Update README

Author: replete

README.md

@@ -32,7 +32,8 @@ The goal was to make something as small as possible and versatile enough that I
 	   - add 'data-consent' property with consent section name (e.g. analytics, functional, performance)
 -->
 <script data-consent="analytics" async src="https://www.googletagmanager.com/gtag/js?id=G-TEST" type="text/plain" id="js-analytics-gtm">
-	console.log(google_tag_manager) // evaluated 'onload' of src
+	// The contents of this script is injected when the parent script is loaded, for convenience
+	console.log(google_tag_manager)
 </script>
 <script data-consent="analytics" type="text/plain" id="js-analytics-gtm-after">
 	console.log('This script runs as soon as analytics section consent is granted')
@@ -138,25 +139,24 @@ html:not(.js-bm-hidden)::after {
 	}
 	```
 	- example usage: `if (Consent && Consent.analytics) { doAnalyticsThing() }`
-- `bmInvalidateConsent()` – Delete stored consent data and reinstate UI
-- `bmUpdateConsent()` – Opens My Consent Settings modal
-	- example usage: `<a href="javascript:bmUpdateConsent();"> Update my consent settings</a>` 
+- `bmInvalidate()` – Delete stored consent data and reinstate UI
+- `bmOpen()` – Opens My Consent Settings modal
+	- example usage: `<a href="javascript:bmOpen();"> Update my consent settings</a>` 
 
 ## Events
 
 The easiest way to see how events work is to view the `console.debug()` calls in the [demo](https://replete.github.io/biscuitman)
-- `biscuitman:openModal`
-- `biscuitman:closeModel`
-- `biscuitman:buttonPress`
-- `biscuitman:saveConsent`
-- `biscuitman:scriptInjected`
-- `biscuitman:scriptLoaded`
-- `biscuitman:invalidateConsent`
-- `biscuitman:updateConsent`
+- `biscuitman:open` => `{time: 1718915128298}` modal opened
+- `biscuitman:close` => `{time: 1718915128298}` modal closed
+- `biscuitman:button` => `{id: "settings", time: 1718915128298}` button clicked
+- `biscuitman:save` => `{data: {consentTime: 1718914784624, advertisement:true, advertisement: fal..}, time: 1718914784624}` consent choice saved
+- `biscuitman:inject` =>  `{el: $Element, parent?: $Element, time: 1718914784624}` script injected to DOM. if parent exists, it's a new tag inserted after a `src` script loaded which also had text content (a 'dependent' script = tidier convenient markup)
+- `biscuitman:invalidate` => `{data: {..consentObjectJustDeleted}, time: 1718915128298}` consent invalidated
+- `biscuitman:update` => `{data: {...currentConsentObject}, time: 1718914784624}` returns current consent object and time
 
 You can watch for these events like this:
 ```js
-document.addEventListener('biscuitman:openModal', (e) => {
+document.addEventListener('biscuitman:open', (e) => {
 	console.log('modal opened')
 }, true);
 ```

biscuitman.css

@@ -6,7 +6,6 @@
 	and is processed to un-nested native CSS nesting
 	and include vendor
 */
-
 .biscuitman {
 	--text: #444;
 	--bg: #fff;
@@ -19,14 +18,6 @@
 	font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
 	box-sizing: border-box;
 
-	&:has(dialog[open]) {
-		padding:0;
-
-		article{
-			display:none;
-		}
-	}
-
 	* {
 		box-sizing: border-box;
 		font-size: 16px;
@@ -66,7 +57,7 @@
 		background: var(--bg);
 		border:2px solid var(--color);
 		line-height:1em;
-		padding:0.8em;
+		padding:.8em;
 		margin-top:10px;
 		color: var(--color);
 		font-size:13px;
@@ -87,7 +78,7 @@
 			top: 0;
 			right:10px;
 			line-height:1em;
-			opacity:0.6;
+			opacity:.6;
 			font-size:24px;
 			user-select:none;
 			z-index:2;
@@ -100,7 +91,7 @@
 		}
 
 		&:hover {
-			opacity:0.8;
+			opacity:.8;
 		}
 	}
 
@@ -123,7 +114,7 @@
 		}
 	}
 
-	dialog[open] {
+	dialog {
 		border:0;
 		width:100%;
 		height:100%;
@@ -139,7 +130,7 @@
 		border-radius:10px;
 		}
 		@media (min-width:576px) and (min-height:1134px) {
-		max-height:908px;
+			height:890px; /* KLUDGE: magic number based on 6 sections */
 		}
 
 		nav {
@@ -245,7 +236,7 @@
 		list-style:none;
 
 		&[open] summary b::after {
-			transform:rotate(45deg) scale(0.3);
+			transform:rotate(45deg) scale(.3);
 			margin:-3px 0 0 -2px;
 		}
 	}
@@ -271,7 +262,7 @@
 				border-left-color:transparent;
 				border-top-color:transparent;
 				border-radius:2px;
-				transform:rotate(-45deg) scale(0.3);
+				transform:rotate(-45deg) scale(.3);
 				margin:-2px 0 0 -4px;
 			}
 		}
@@ -338,7 +329,7 @@
 			left:var(--gap);
 			left:0;
 			top:50%;
-			transform: translateY(-50%) scale(0.8);
+			transform: translateY(-50%) scale(.8);
 			transform-origin: center center;
 		}
 
@@ -358,7 +349,7 @@
 		}
 
 		&:has([disabled]:checked) {
-			opacity:0.6
+			opacity:.6
 		}
 
 		input {

biscuitman.js

@@ -128,11 +128,11 @@
 			case 'reject': saveConsent(false); break;
 			default: break
 		}
-		dispatch('buttonPress', {id})
+		dispatch('button', {id})
 	}
 
 	function closeModalHandler() {
-		dispatch('closeModal')
+		dispatch('close')
 	}
 
 	function cancelModalHandler(e) {
@@ -141,7 +141,7 @@
 
 	function openModal() {
 		dialog.showModal()
-		dispatch('openModal')
+		dispatch('open')
 	}
 
 	const displayUI = (show) => d.documentElement.classList[show ? 'remove' : 'add']('js-bm-hidden')
@@ -150,7 +150,7 @@
 		try {
 			return JSON.parse(localStorage.getItem(o.storageKey))
 		} catch (err) {
-			console.error(`${bm} readConsent error:`, err.message)
+			console.error(bm, err)
 			localStorage.removeItem(o.storageKey) // If there's an error in localstorage, wipe consent data
 			return {}
 		}
@@ -170,7 +170,7 @@
 		})
 		localStorage.setItem(o.storageKey, JSON.stringify(w[o.global]))
 		insertScripts()
-		dispatch('saveConsent', {data: w[o.global]})
+		dispatch('save', {data: w[o.global]})
 		dialog.close()
 		displayUI(false)
 	}
@@ -205,14 +205,14 @@
 			if (!script.src) newScript.textContent = script.textContent
 			// Insert script to DOM
 			script.parentNode.replaceChild(newScript, script)
-			dispatch('scriptInjected', {data: script.outerHTML})
+			dispatch('inject', {el: script})
 
 			// If tag has src and inline script, insert dependent inline script as new tag on load
 			if (script.src && script.textContent.trim() !== '') newScript.addEventListener('load', () => {
 				let depScript = d.createElement('script')
 				depScript.textContent = script.textContent
 				newScript.insertAdjacentElement('afterend', depScript)
-				dispatch('scriptLoaded', {data: depScript.outerHTML})
+				dispatch('inject', {el: depScript, parent: script})
 			})
 		});
 	}
@@ -244,13 +244,13 @@
 	// Helper global methods 
 	// <a onclick="bmUpdateConsent()" href="javascript:void(0)">Update Consent Preferences</a>
 	w.bmInvalidateConsent = () => {
+		dispatch('invalidate', {data: readConsent()})
 		saveConsent(false) // resets UI
 		localStorage.removeItem(o.storageKey)
 		displayUI(true)
-		dispatch('invalidateConsent', readConsent())
 	}
 	w.bmUpdateConsent = () => {
+		dispatch('update', {data: readConsent()})
 		openModal()
-		dispatch('updateConsent', readConsent())
 	}
 })(document, window)