Skip to content

Commit bfcbf7e

Browse files
robdodsonrobdodson
authored
Make banner dismissible (GoogleChrome#805)
1 parent 93d2839 commit bfcbf7e

File tree

9 files changed

+63
-19
lines changed

9 files changed

+63
-19
lines changed

‎site/_data/banner.yml‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
1+
# This file can be used to display a site-wide banner.
2+
# The actions should contain at least one action with an href.
3+
# Clicking on any action will dismiss the banner.
4+
# An action without an href will use a <button> instead of an <a>.
5+
16
type: info
27
text: I/O is back, online, and free for everyone! I/O connects developers from around the world for thoughtful discussions and hands-on learning with Google experts.
38
actions:
49
- text: Register now
510
href: https://events.google.com/io/?utm_source=web&utm_medium=embedded_marketing
11+
- text: Dismiss

‎site/_data/site.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,5 +9,6 @@
99
"en",
1010
"es"
1111
],
12-
"defaultLocale": "en"
12+
"defaultLocale": "en",
13+
"cookiesCtaUrl": "https://policies.google.com/technologies/cookies"
1314
}

‎site/_includes/partials/banner.njk‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{% if banner %}
22
{# Supports 'info' or 'warning' banners. #}
3-
<div class="banner banner--{{ banner.type or 'info' }}">
3+
<announcement-banner class="banner banner--{{ banner.type or 'info' }}" storage-key="user-banner">
44
<div class="banner__inner">
55
<div class="banner__text">
66
{# These inline block wrappers are a little hack to make content #}
@@ -17,13 +17,19 @@
1717
<div class="display-inline-block">
1818
{% if banner.actions %}
1919
{% for action in banner.actions %}
20-
<a class="banner__action material-button button-text" href="{{ action.href }}">
21-
{{ action.text }}
22-
</a>
20+
{% if action.href %}
21+
<a class="banner__action material-button button-text" href="{{ action.href }}" data-banner-close-btn>
22+
{{ action.text }}
23+
</a>
24+
{% else %}
25+
<button class="banner__action material-button button-text" data-banner-close-btn>
26+
{{ action.text }}
27+
</button>
28+
{% endif %}
2329
{% endfor %}
2430
{% endif %}
2531
</div>
2632
</div>
2733
</div>
28-
</div>
34+
</announcement-banner>
2935
{% endif %}

‎site/_includes/partials/cookie-banner.njk‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
</div>
88
<div class="cookie-banner__controls">
99
<a class="material-button button-text color-blue-medium display-inline-flex align-center"
10-
href="https://policies.google.com/technologies/cookies">
10+
href="{{ site.cookiesCtaUrl }}">
1111
More details {{ icon('external-link', {className: 'gap-left-200'}) }}
1212
</a>
1313
<button class="material-button button-filled color-bg bg-primary" data-banner-close-btn>

‎site/_includes/partials/script.js‎

Lines changed: 21 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -38,12 +38,29 @@
3838
);
3939
ga('send', 'pageview');
4040

41+
// Check if the user has accepted cookies. If so, set an attribute on
42+
// the html element which will hide the banner.
4143
try {
42-
const ctaUrl = 'https://policies.google.com/technologies/cookies';
43-
const savedCtaUrl = localStorage.getItem('user-cookies');
44+
const cookiesCtaUrl = '{{ site.cookiesCtaUrl }}';
45+
const savedCookiesCtaUrl = localStorage.getItem('user-cookies');
4446

45-
if (savedCtaUrl === ctaUrl) {
46-
document.documentElement.classList.add('banner--hide');
47+
if (savedCookiesCtaUrl === cookiesCtaUrl) {
48+
document.documentElement.setAttribute('data-cookies-accepted', '');
49+
}
50+
} catch (e) {
51+
// ignore
52+
}
53+
54+
// If we're displaying a promotional banner, check if the user has dismissed
55+
// it. If so, set an attribute on the html element to hide the banner.
56+
// Note that it's possible for a banner to have more than one action but
57+
// we always use the url from the first action as the localStorage value.
58+
try {
59+
const bannerCtaUrl = '{{ banner.actions[0].href }}';
60+
const savedBannerCtaUrl = localStorage.getItem('user-banner');
61+
62+
if (savedBannerCtaUrl === bannerCtaUrl) {
63+
document.documentElement.setAttribute('data-banner-dismissed', '');
4764
}
4865
} catch (e) {
4966
// ignore

‎site/_js/third-party/announcement-banner/announcement-banner.js‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,13 @@ class Banner extends HTMLElement {
44
// after this class is added—this prevents ghost clicks on the button before
55
// the event listener is added.
66
this.setAttribute('active', '');
7-
8-
const button = this.querySelector('[data-banner-close-btn]');
9-
/** @type {HTMLElement} */ (button).addEventListener('click', () => {
10-
this.savePreference();
11-
this.close();
7+
this.addEventListener('click', e => {
8+
if (
9+
/** @type {HTMLElement} */ (e.target).closest('[data-banner-close-btn]')
10+
) {
11+
this.savePreference();
12+
this.close();
13+
}
1214
});
1315
}
1416

‎site/_scss/blocks/_announcement-banner.scss‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1-
.banner--hide announcement-banner,
1+
announcement-banner {
2+
display: block;
3+
}
4+
25
announcement-banner[hidden] {
36
display: none;
47
}

‎site/_scss/blocks/_banner.scss‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
justify-content: space-between;
2323
width: 100%;
2424

25-
@include media-query('md') {
25+
@include media-query('lg') {
2626
align-items: baseline;
2727
flex-direction: row;
2828
}
@@ -36,8 +36,9 @@
3636
display: flex;
3737
justify-content: flex-end;
3838
margin-top: get-size(300);
39+
white-space: nowrap;
3940

40-
@include media-query('md') {
41+
@include media-query('lg') {
4142
align-items: flex-end;
4243
margin-left: get-size(300);
4344
margin-top: 0;
@@ -48,3 +49,7 @@
4849
@include apply-utility('weight', 'medium');
4950
}
5051
}
52+
53+
[data-banner-dismissed] .banner {
54+
display: none;
55+
}

‎site/_scss/blocks/_cookie-banner.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
[data-cookies-accepted] .cookie-banner {
2+
display: none;
3+
}
4+
15
.cookie-banner {
26
@include apply-utility('stack', '700');
37
background-color: var(--color-bg);

0 commit comments

Comments
 (0)