Skip to content

Commit 8c4c4cd

Browse files
repletereplete
committed
CSS Compatibiltiy
- remove :has() dependency - change moreLink functionality - add revoke check in bmInvalidate - Update README / sandbox
1 parent 6e61d76 commit 8c4c4cd

11 files changed

Lines changed: 114 additions & 87 deletions

‎README.md‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,16 +15,16 @@
1515
- Injects scripts when granular consent is granted (`<script data-consent="analytics" type="text/plain" src="..."></script>`)
1616
- Injects embedded 'after' `<script>` from script tags with `src` properties on onload (= less markup)
1717
- Mobile-first
18-
- Browser support (targeted via `browserlist` in `package.json` - `>= 2%, last 2 years`):
19-
- Chrome 105+,
20-
- Edge 105+
21-
- Safari 15.4+
22-
- Firefox 121+
23-
- see [CSS Feature Compatibility](https://replete.github.io/biscuitman/#browser-support) (uses `cssreport.json` generated by `npm run report`)
24-
- If you need a version to work in older browsers it's possible but requires updating the `browserlist` string in `package.json`, and then rewriting CSS to remove unsupported features, e.g. `:has()`. If this is really important open an issue and we can look at making it more compatible by default.
2518
- 'show more' functionality for long disclaimer text
2619
- include optional link in any text
2720
- CSS classes on `<html>` element for consents
21+
- Progressively enhanced CSS
22+
- Ideal experience browser support (targeted via browserlist string `>= 2%, last 2 years`):
23+
- Chrome/Edge 105+ (should be fine in many earlier versions, TBD)
24+
- Safari 15.4+
25+
- Firefox 121+ (should be fine in many earlier versions, TBD)
26+
- If JS fails in an old browser, it will probably be fixable by updating `browserlist` in `package.json` then rebuilding
27+
- (Will be tested more definitively with browserstack at some point)
2828

2929
![screenshot of main UI](media/ui.webp)
3030

‎biscuitman.css‎

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
line-height:1.4em;
2828
}
2929

30+
/* Progressive enhancement */
3031
&:has([open]) {
3132
transform: translateY(100%);
3233
}
@@ -204,20 +205,21 @@
204205
> p {
205206
line-height:18px;
206207
padding-right:30px;
208+
font-size:13px;
209+
210+
@media (min-width:576px) {
211+
font-size:14px;
212+
}
207213

208214
span {
209-
font-size:13px;
210-
display:block;
215+
font-size:inherit;
216+
display:inline-block;
211217
padding-bottom:5px;
218+
}
212219

213-
@media (min-width:576px) {
214-
font-size:14px;
215-
}
216-
217-
&:has(.more) ~ span {
218-
display:none;
219-
}
220-
}
220+
.more ~ span {
221+
display:none;
222+
}
221223
}
222224
}
223225

@@ -347,7 +349,7 @@
347349
transform-origin: center center;
348350
}
349351

350-
&:has(:checked) {
352+
&.checked {
351353
background-color: var(--c);
352354

353355
&::before {
@@ -356,12 +358,13 @@
356358
}
357359
}
358360

361+
/* Progressive enhancement */
359362
&:has(:focus-visible) {
360363
/* Show focus outline correctly correctly with keyboard focus */
361364
outline: auto highlight;
362365
}
363366

364-
&:has([disabled]:checked) {
367+
&.disabled.checked {
365368
opacity:.6
366369
}
367370

‎biscuitman.js‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
save: 'Save My Settings',
1414
settingsTitle: 'My Consent Settings',
1515
info: ``,
16-
more: '(Show more)',
16+
more: 'Show more',
1717
noCookies: 'No cookies to display',
1818
acceptNonEU: false,
1919
// message: 'By clicking "Accept All", you agree to the use of cookies for improving browsing, providing personalized ads or content, and analyzing traffic. {link}',
@@ -67,27 +67,28 @@
6767
<p><span>${o.message}</span></p>
6868
<p>${
6969
o.info.split('\n').map((line, i, arr) => {
70-
let more = (arr.length > 1 && o.enableMore && i == 0)
70+
return `<span>${line}</span>
71+
${arr.length > 1 && o.enableMore && i == 0
7172
? `<a class="more" href="javascript:void(0)">${o.more}</a>`
7273
: ''
73-
return `<span>${line}${more}</span>`
74+
}`
7475
}).join('')
7576
}
7677
</p>
7778
${o.sections.map(section => {
7879
let hasConsent = getConsents()[section]
7980
let isEssential = section === 'essential'
80-
let isDisabled = isEssential ? 'disabled' : ''
81-
let isChecked = isEssential ? 'checked' : ''
82-
if (hasConsent !== undefined) isChecked = hasConsent ? 'checked' : ''
81+
let disabledProp = isEssential ? 'disabled' : ''
82+
let checkedProp = isEssential ? 'checked' : ''
83+
if (hasConsent !== undefined) checkedProp = hasConsent ? 'checked' : ''
8384
let cookies = o[`${section}Cookies`]
8485
return `
8586
<section>
8687
<details>
8788
<summary>
8889
<b>${o[`${section}Title`]}</b>
89-
<label for="${bm}_${section}">
90-
<input type="checkbox" id="${bm}_${section}" ${isDisabled} ${isChecked} data-s="${section}"/>
90+
<label for="${bm}_${section}" class="${disabledProp} ${checkedProp}">
91+
<input type="checkbox" id="${bm}_${section}" ${disabledProp} ${checkedProp} data-s="${section}"/>
9192
</label>
9293
<p>${o[`${section}Message`]}</p>
9394
</summary>
@@ -112,6 +113,9 @@
112113
dialog.addEventListener('cancel', cancelModalHandler)
113114
const moreLink = ui.querySelector('.more');
114115
if (moreLink) moreLink.addEventListener('click', moreLink.remove)
116+
ui.querySelectorAll('[data-s]').forEach(checkbox => checkbox.addEventListener('change', e => {
117+
checkbox.parentElement.classList.toggle('checked', e.target.checked)
118+
}))
115119
d.body.appendChild(ui)
116120
}
117121

@@ -305,6 +309,7 @@
305309
// <a onclick="bmInvalidate()" href="javascript:void(0)">Delete Consent Preferences</a>
306310
w.bmInvalidate = () => {
307311
dispatch('invalidate', {data: getConsents()})
312+
checkConsents({})
308313
saveConsents(false)
309314
setConsents({})
310315
localStorage.removeItem(o.key)

‎dist/biscuitman.css‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/*! biscuitman.js 0.3.11 */
1+
/*! biscuitman.js 0.3.12 */
22
.biscuitman {
33
--t: #444;
44
--b: #fff;
@@ -213,22 +213,23 @@
213213

214214
.biscuitman .bm-sections > p {
215215
padding-right: 30px;
216-
line-height: 18px;
217-
}
218-
219-
.biscuitman .bm-sections > p span {
220-
padding-bottom: 5px;
221216
font-size: 13px;
222-
display: block;
217+
line-height: 18px;
223218
}
224219

225220
@media (min-width: 576px) {
226-
.biscuitman .bm-sections > p span {
221+
.biscuitman .bm-sections > p {
227222
font-size: 14px;
228223
}
229224
}
230225

231-
.biscuitman .bm-sections > p span:has(.more) ~ span {
226+
.biscuitman .bm-sections > p span {
227+
font-size: inherit;
228+
padding-bottom: 5px;
229+
display: inline-block;
230+
}
231+
232+
.biscuitman .bm-sections > p .more ~ span {
232233
display: none;
233234
}
234235

@@ -361,11 +362,11 @@
361362
transform: translateY(-50%)scale(.8);
362363
}
363364

364-
.biscuitman label:has(:checked) {
365+
.biscuitman label.checked {
365366
background-color: var(--c);
366367
}
367368

368-
.biscuitman label:has(:checked):before {
369+
.biscuitman label.checked:before {
369370
left: auto;
370371
right: 0;
371372
}
@@ -374,7 +375,7 @@
374375
outline: auto highlight;
375376
}
376377

377-
.biscuitman label:has([disabled]:checked) {
378+
.biscuitman label.disabled.checked {
378379
opacity: .6;
379380
}
380381

‎dist/biscuitman.js‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/*! biscuitman.js 0.3.11 */
1+
/*! biscuitman.js 0.3.12 */
22
((d, w, Object1, h, bm)=>{
33
const defaults = {
44
key: 'myconsent',
@@ -16,7 +16,7 @@
1616
save: 'Save My Settings',
1717
settingsTitle: 'My Consent Settings',
1818
info: ``,
19-
more: '(Show more)',
19+
more: 'Show more',
2020
noCookies: 'No cookies to display',
2121
acceptNonEU: false
2222
};
@@ -46,24 +46,24 @@
4646
<div class="bm-sections">
4747
<p><span>${o.message}</span></p>
4848
<p>${o.info.split('\n').map((line, i, arr)=>{
49-
let more = arr.length > 1 && o.enableMore && i == 0 ? `<a class="more" href="javascript:void(0)">${o.more}</a>` : '';
50-
return `<span>${line}${more}</span>`;
49+
return `<span>${line}</span>
50+
${arr.length > 1 && o.enableMore && i == 0 ? `<a class="more" href="javascript:void(0)">${o.more}</a>` : ''}`;
5151
}).join('')}
5252
</p>
5353
${o.sections.map((section)=>{
5454
let hasConsent = getConsents()[section];
5555
let isEssential = section === 'essential';
56-
let isDisabled = isEssential ? 'disabled' : '';
57-
let isChecked = isEssential ? 'checked' : '';
58-
if (hasConsent !== undefined) isChecked = hasConsent ? 'checked' : '';
56+
let disabledProp = isEssential ? 'disabled' : '';
57+
let checkedProp = isEssential ? 'checked' : '';
58+
if (hasConsent !== undefined) checkedProp = hasConsent ? 'checked' : '';
5959
let cookies = o[`${section}Cookies`];
6060
return `
6161
<section>
6262
<details>
6363
<summary>
6464
<b>${o[`${section}Title`]}</b>
65-
<label for="${bm}_${section}">
66-
<input type="checkbox" id="${bm}_${section}" ${isDisabled} ${isChecked} data-s="${section}"/>
65+
<label for="${bm}_${section}" class="${disabledProp} ${checkedProp}">
66+
<input type="checkbox" id="${bm}_${section}" ${disabledProp} ${checkedProp} data-s="${section}"/>
6767
</label>
6868
<p>${o[`${section}Message`]}</p>
6969
</summary>
@@ -88,6 +88,9 @@
8888
dialog.addEventListener('cancel', cancelModalHandler);
8989
const moreLink = ui.querySelector('.more');
9090
if (moreLink) moreLink.addEventListener('click', moreLink.remove);
91+
ui.querySelectorAll('[data-s]').forEach((checkbox)=>checkbox.addEventListener('change', (e)=>{
92+
checkbox.parentElement.classList.toggle('checked', e.target.checked);
93+
}));
9194
d.body.appendChild(ui);
9295
}
9396
const displayUI = (show)=>ui.classList.toggle('bm-hide', !show);
@@ -288,6 +291,7 @@
288291
dispatch('invalidate', {
289292
data: getConsents()
290293
});
294+
checkConsents({});
291295
saveConsents(false);
292296
setConsents({});
293297
localStorage.removeItem(o.key);

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