Skip to content

Commit 2397132

Browse files
repletereplete
committed
Fix event payload. Shorten event names. Improve polyfill loading.
1 parent 618c7d2 commit 2397132

17 files changed

Lines changed: 141 additions & 132 deletions

‎README.md‎

Lines changed: 47 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
#### [View demo](https://replete.github.io/biscuitman)
66

7-
100kB+ seemed too heavy for a cookie popup so I wrote this. It's around 4kB gz/br, including CSS. It's designed to be as small as possible with an adequate featureset for basic website cookie consent.
7+
100kB+ seemed too heavy for a cookie popup so I wrote this, it's around 4kB compressed including CSS, designed to be as small as possible and versatile enough for basic website 'cookie' consent management.
88

99
- Stores consent in `localStorage`, exposes in `window.Consent` and through custom events fired on `document`
1010
- Handles consent granulated by custom sections (e.g. essential, performance, analytics...)
@@ -22,7 +22,6 @@
2222
- CSS classes on `<html>` element for consents
2323
- Progressively enhanced CSS
2424
- Experimental ESM version included `biscuitman.mjs` (see [ESM demo](https://replete.github.io/biscuitman/index-esm.html))
25-
- This project is tested with BrowserStack.
2625

2726
## How to use
2827
[View demo](https://replete.github.io/biscuitman) for a more detailed example
@@ -121,7 +120,7 @@ While you have the option to enable or disable some or all of these cookies, not
121120

122121
## Experimental ESM version
123122

124-
I've included an ESM version as an alternative packaging format. Longterm it's better to not have two versions, so this may or not become the main version. Consider it an alternate packaging format at this point.
123+
ESM version supplied as an alternative packaging format. Long-term it's better to not have two versions, so this may or not become the main version. Consider it an alternate packaging format at this point. [see ESM demo](https://replete.github.io/biscuitman/index-esm.html)
125124

126125
```html
127126
<!-- Experimental ESM version: -->
@@ -186,45 +185,51 @@ With browserlist, we're targeting `">= 2%, last 2 years"`. The earliest versions
186185

187186
### Extend browser support with Dialog polyfill
188187

189-
Include this script _after_ biscuitman.js to extend browser support to:
188+
Include this script alongside the biscuitman config to extend browser support to:
190189
- Safari (inc iOS) 13.1+ (released March 2020)
191190
- Firefox 77+ (released June 2020)
192191
- Firefox Android 79+ (released August 2020)
193192

194193
```html
195-
<script type="text/javascript" id="js-biscuitman-dialog-polyfill">
196-
// https://github.com/GoogleChrome/dialog-polyfill
197-
(function(d, h){
198-
let dialog = d.querySelector('.biscuitman dialog');
199-
if (!dialog) return;
200-
if (!dialog.showModal || !dialog.close) {
201-
h.classList.add('bm-dialog-polyfill');
202-
let s = d.createElement('script');
203-
s.src = '//cdnjs.cloudflare.com/ajax/libs/dialog-polyfill/0.5.6/dialog-polyfill.min.js';
204-
s.onload = () => { window.dialogPolyfill.registerDialog(dialog) };
205-
d.head.appendChild(s);
206-
207-
let l = d.createElement('link');
208-
l.rel = 'stylesheet';
209-
l.href = '//cdnjs.cloudflare.com/ajax/libs/dialog-polyfill/0.5.6/dialog-polyfill.min.css';
210-
d.head.appendChild(l);
211-
}
212-
})(document, document.documentElement);
194+
<script type="text/javascript" id="js-biscuitman-config">
195+
biscuitman = {...}
196+
197+
// optional: extend browser support with dialog polyfill
198+
// https://github.com/replete/biscuitman?tab=readme-ov-file#browser-support
199+
document.addEventListener('bm:render', ({ detail }) => {
200+
let { dialog } = detail
201+
if (dialog.showModal && dialog.close) return
202+
document.documentElement.classList.add('bm-dialog-polyfill')
203+
let s = document.createElement('script')
204+
s.src = '//cdnjs.cloudflare.com/ajax/libs/dialog-polyfill/0.5.6/dialog-polyfill.min.js';
205+
s.onload = () => { dialogPolyfill.registerDialog(dialog) }
206+
document.head.appendChild(s)
207+
208+
let l = document.createElement('link')
209+
l.rel = 'stylesheet'
210+
l.href = '//cdnjs.cloudflare.com/ajax/libs/dialog-polyfill/0.5.6/dialog-polyfill.min.css';
211+
document.head.appendChild(l)
212+
})
213213
</script>
214214
```
215215

216216
### Extend browser support even further with javascript polyfills
217217

218-
You can extend support to these browsers, by including this script _before_ biscuitman.js:
218+
You can extend support to these browsers, by including the following script _before_ biscuitman.js:
219219
- Safari 11.1+ (released Jan 2018)
220-
- Firefox 55+ (released August 2017)
221-
- Chrome 60+ (released July 2017)
220+
- Safari iOS 11.3+ (released Mar 2018)
221+
- Firefox 55+ (released Aug 2017)
222+
- Chrome 60+ (released Jul 2017)
222223

223224
```html
224225
<script src="//cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?version=4.8.0&features=String.prototype.replaceAll%2CObject.fromEntries"></script>
225226
```
226227

227-
If you need to support earlier than these browsers, you will need to start loading polyfills for missing javascript features.
228+
Obviously a third party hosted polyfill is not good for performance, so in this scenario you'd want to self-host the `replaceAll` and `Object.fromEntries` polyfills.
229+
230+
This does not apply to the ESM version, the support for ESM more like 2020.
231+
232+
If you need to support earlier than these browsers, biscuitman would need to be compiled for an earlier javascript target as things like the spread operator are unsupported in earlier versions, which is possible by specifying an earlier `browserlist` target in package.json.
228233

229234
## Globals
230235
- `biscuitman` – configuration object, must be `window.biscuitman` (`biscuitman.create(options)` for ESM version)
@@ -254,22 +259,25 @@ The ESM version currently does still use some globals.
254259

255260
## Events
256261

257-
Custom events prefixed with `biscuitman:` are fired on `document`. The easiest way to see how events work is to view the `console.debug()` calls in the [demo](https://replete.github.io/biscuitman).
258-
- `biscuitman:open` => `{time: 1718915128298}` modal opened
259-
- `biscuitman:close` => `{time: 1718915128298}` modal closed
260-
- `biscuitman:button` => `{id: "settings", time: 1718915128298}` button clicked
261-
- `biscuitman:save` => `{data: {consentTime: 1718914784624, advertisement:true, advertisement: fal..}, time: 1718914784624}` consent choice saved
262-
- `biscuitman:inject` => `{el: $Element, parent?: $Element, id?: 'script-id', 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)
263-
- `biscuitman:invalidate` => `{data: {...consentObjectJustDeleted}, time: 1718915128298}` consent invalidated
264-
- `biscuitman:revoke` => `{section: 'analytics', time: 1718914784624}` returns section that was revoked if updated consent changed from true to false
265-
- `biscuitman:update` => `{data: {...currentConsentObject}, time: 1718914784624}` returns current consent object and time
266-
- `biscuitman:delete` => `{localStorage|cookie: 'cookieName', time: 1718914784624}` fires when consent is rejected or invalidated and cookies/localStorage entries are deleted
262+
Custom events prefixed with `bm:` are fired on `document`. The easiest way to see how events work is to view the `console.debug()` calls in the [demo](https://replete.github.io/biscuitman).
263+
- `bm:open` => `{time: 1718915128298}` modal opened
264+
- `bm:close` => `{time: 1718915128298}` modal closed
265+
- `bm:button` => `{id: "settings", time: 1718915128298}` button clicked
266+
- `bm:save` => `{data: {consentTime: 1718914784624, advertisement:true, advertisement: fal..}, time: 1718914784624}` consent choice saved
267+
- `bm:inject` => `{el: $Element, parent?: $Element, id?: 'script-id', 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)
268+
- `bm:invalidate` => `{data: {...consentObjectJustDeleted}, time: 1718915128298}` consent invalidated
269+
- `bm:revoke` => `{section: 'analytics', time: 1718914784624}` returns section that was revoked if updated consent changed from true to false
270+
- `bm:update` => `{data: {...currentConsentObject}, time: 1718914784624}` returns current consent object and time
271+
- `bm:delete` => `{localStorage|cookie: 'cookieName', time: 1718914784624}` fires when consent is rejected or invalidated and cookies/localStorage entries are deleted
267272

268273
You can watch for these events like this:
269274
```js
270-
document.addEventListener('biscuitman:open', (e) => {
271-
console.log('modal opened')
272-
}, true);
275+
document.addEventListener('bm:save', ({ detail }) => {
276+
let { data, time } = detail
277+
console.log(data)
278+
})
279+
280+
TODO: Switch to `postMessage` to support web workers.
273281
```
274282

275283
## Development

‎dist/biscuitman.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/*! biscuitman.js 0.3.20 */
1+
/*! biscuitman.js 0.4.0 */
22
.biscuitman {
33
--ui: 0, 0, 0;
44
--tx: #444;

‎dist/biscuitman.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/*! biscuitman.js 0.3.20 */
1+
/*! biscuitman.js 0.4.0 */
22
((d, w, O, h, bm)=>{
33
const defaults = {
44
key: 'myconsent',
@@ -145,12 +145,14 @@
145145
dialog.showModal();
146146
}
147147
function dispatch(eventName, data) {
148-
const name = `${bm}:${eventName}`;
148+
const name = `bm:${eventName}`;
149149
const payload = {
150150
...data !== undefined && data,
151151
time: +new Date()
152152
};
153-
d.dispatchEvent(new CustomEvent(name, payload));
153+
d.dispatchEvent(new CustomEvent(name, {
154+
detail: payload
155+
}));
154156
console.debug(name, payload);
155157
}
156158
// Data:

‎dist/biscuitman.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)