Skip to content

Commit 618c7d2

Browse files
repletereplete
committed
Remove dialog polyfill. Update browser support in README.
1 parent cb03962 commit 618c7d2

17 files changed

+129
-130
lines changed

‎README.md‎

Lines changed: 41 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# biscuitman.js 🍪 Lightweight Consent Manager
1+
# biscuitman.js 🍪 Lightweight Consent Manager ![tests](https://github.com/replete/biscuitman/actions/workflows/node.js.yml/badge.svg)
22

33
![screenshot of main UI](media/ui.webp)
44

@@ -21,10 +21,8 @@
2121
- include optional link in any text
2222
- CSS classes on `<html>` element for consents
2323
- Progressively enhanced CSS
24-
- Dialog polyfill loads as required (see [Browser Support](#browser-support))
2524
- Experimental ESM version included `biscuitman.mjs` (see [ESM demo](https://replete.github.io/biscuitman/index-esm.html))
26-
- Preliminary e2e tests:
27-
![tests](https://github.com/replete/biscuitman/actions/workflows/node.js.yml/badge.svg) ([failing due to GTM.js bug](https://github.com/replete/biscuitman/issues/4), pass locally)
25+
- This project is tested with BrowserStack.
2826

2927
## How to use
3028
[View demo](https://replete.github.io/biscuitman) for a more detailed example
@@ -68,7 +66,6 @@
6866
// more: '(Show more)', // Show more button text
6967
// noCookies: 'No cookies to display', // Displayed in expanded sections within modal
7068
// acceptNonEU: false, // When enabled biscuitman checks browser locale timezone to see if it matches EU, if not it will auto consent
71-
//dialogPolyfillUrl: '//cdnjs.cloudflare.com/ajax/libs/dialog-polyfill/0.5.6/dialog-polyfill.min.js' // extends browser support, overridable if you want to self-host. Grab the .css too, and host in the same place.
7269
7370
message: 'By clicking "Accept All", you agree to the use of cookies for improving browsing, providing personalized ads or content, and analyzing traffic. {link}',
7471
// {link} inside any configuration string will be replaced with an <a> link
@@ -187,15 +184,47 @@ With browserlist, we're targeting `">= 2%, last 2 years"`. The earliest versions
187184
- Safari (inc iOS): 15.4+ (released March 2022)
188185
- Samsung Internet: 14+ (released April 2021)
189186

190-
With `v0.3.19`, a [polyfill for dialog](https://github.com/GoogleChrome/dialog-polyfill) is loaded as necessary, extending the support to include these browsers (tested):
187+
### Extend browser support with Dialog polyfill
191188

192-
- Safari (inc iOS): 13.1+ (released March 2020)
193-
- Firefox: 77+ (released June 2020)
194-
- Firefox Android: 79+ (released August 2020)
189+
Include this script _after_ biscuitman.js to extend browser support to:
190+
- Safari (inc iOS) 13.1+ (released March 2020)
191+
- Firefox 77+ (released June 2020)
192+
- Firefox Android 79+ (released August 2020)
195193

196-
If you need to support earlier than these browsers, you will need to start loading polyfills for missing javascript features, starting with `String.prototype.replaceAll`. [Cloudflare's polyfill CDN site](https://cdnjs.cloudflare.com/polyfill) will help you generate a package which will need to load before biscuitman.
194+
```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);
213+
</script>
214+
```
215+
216+
### Extend browser support even further with javascript polyfills
217+
218+
You can extend support to these browsers, by including this script _before_ biscuitman.js:
219+
- Safari 11.1+ (released Jan 2018)
220+
- Firefox 55+ (released August 2017)
221+
- Chrome 60+ (released July 2017)
222+
223+
```html
224+
<script src="//cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?version=4.8.0&features=String.prototype.replaceAll%2CObject.fromEntries"></script>
225+
```
197226

198-
This project is tested with BrowserStack.
227+
If you need to support earlier than these browsers, you will need to start loading polyfills for missing javascript features.
199228

200229
## Globals
201230
- `biscuitman` – configuration object, must be `window.biscuitman` (`biscuitman.create(options)` for ESM version)
@@ -263,7 +292,7 @@ Visiting `https://localhost:3000` should now work without warnings.
263292
`npm run build` - creates project distributes via `run.js`, a custom build script requiring `Node v20`
264293

265294
### Tests
266-
Jest is set up with puppeteer to run some integration tests. We're using `@swc/jest`'s rust implementation of jest to speed things up. This is only chromium for now, but at some point it would be good to implement browserStack selenium tests to automate browser compatibility checks.
295+
Jest is set up with puppeteer to run some integration tests. We're using `@swc/jest`'s rust implementation of jest to speed things up.
267296

268297
`npm run test` - Launches pupeeter integration tests in a browser (in http mode only)
269298

‎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.19 */
1+
/*! biscuitman.js 0.3.20 */
22
.biscuitman {
33
--ui: 0, 0, 0;
44
--tx: #444;

‎dist/biscuitman.js‎

Lines changed: 2 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/*! biscuitman.js 0.3.19 */
1+
/*! biscuitman.js 0.3.20 */
22
((d, w, O, h, bm)=>{
33
const defaults = {
44
key: 'myconsent',
@@ -18,8 +18,7 @@
1818
info: '',
1919
more: 'Show more',
2020
noCookies: 'No cookies to display',
21-
acceptNonEU: false,
22-
dialogPolyfillUrl: '//cdnjs.cloudflare.com/ajax/libs/dialog-polyfill/0.5.6/dialog-polyfill.min.js'
21+
acceptNonEU: false
2322
};
2423
const o = {
2524
...defaults,
@@ -83,7 +82,6 @@
8382
</dialog>`.replaceAll('{link}', `<a href="${o.linkURL}">${o.linkText}</a>`);
8483
ui.querySelectorAll('button').forEach((b)=>b.addEventListener('click', buttonHandler));
8584
dialog = ui.querySelector('dialog');
86-
if (!dialog.showModal || !dialog.close) loadDialogPolyfill();
8785
dialog.addEventListener('close', closeModalHandler);
8886
dialog.addEventListener('cancel', cancelModalHandler);
8987
const moreLink = ui.querySelector('.more');
@@ -314,18 +312,4 @@
314312
});
315313
openModal();
316314
};
317-
function loadDialogPolyfill() {
318-
// https://github.com/GoogleChrome/dialog-polyfill
319-
h.classList.add('bm-dialog-polyfill');
320-
const script = d.createElement('script');
321-
script.src = o.dialogPolyfillUrl;
322-
script.onload = ()=>{
323-
w.dialogPolyfill.registerDialog(dialog);
324-
};
325-
d.head.appendChild(script);
326-
const link = d.createElement('link');
327-
link.rel = 'stylesheet';
328-
link.href = o.dialogPolyfillUrl.slice(0, -2) + 'css';
329-
d.head.appendChild(link);
330-
}
331315
})(document, window, Object, document.documentElement, 'biscuitman');

‎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)