Skip to content

Commit

Permalink
feat: add banner toggle button
Browse files Browse the repository at this point in the history
  • Loading branch information
@SgtPooki
SgtPooki committed Dec 3, 2022
1 parent 2cf5912 commit e8c9810
Show file tree
Hide file tree
Showing 3 changed files with 94 additions and 32 deletions.
40 changes: 28 additions & 12 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,21 +14,20 @@
</head>
<body id="checker" class="sans-serif charcoal bg-snow-muted">
<div class="hidden js-metrics-notification-decline-warning metrics-notification-wrapper">
<button id="metrics-notification-warning-close" class="js-metrics-notification-warning-close">✕</button>
<span id="metrics-notification-decline-warning" class="metrics-notification-text">
We will limit collection of metrics to only "necessary" features:
<ul>
<li><bold>sessions</bold> - tracks when, how often, and how long users use your website</li>
<li><bold>views</bold> - allows for the views/pages accessed by a user to be tracked</li>
</ul>
See <a href="https://support.count.ly/hc/en-us/articles/360037441932-Web-analytics-JavaScript-#features-for-consent">Countly's group_features</a> for more information.
</span>
<div class="metrics-notification-container">
<span id="metrics-notification-decline-warning" class="metrics-notification-text">
We will limit collection of metrics to only necessary features, 'sessions' and 'views'. See <a href="https://support.count.ly/hc/en-us/articles/360037441932-Web-analytics-JavaScript-#features-for-consent">Countly's group_features</a> for more information.
</span>
<div class="metrics-notification-buttons">
<button id="metrics-notification-warning-close" class="js-metrics-notification-warning-close">✕&nbsp;Close</button>
</div>
</div>
</div>
<div class="hidden js-metrics-notification metrics-notification-wrapper">
<div id="metrics-notification-container">
<div class="metrics-notification-container">
<span class="metrics-notification-text">We're collecting <a href="https://github.com/ipfs/ipfs-gui/issues/125">web-vitals, pageview, and other metrics</a> in order to improve and prioritize our work on IPFS and its public gateways.
Please consent to the collection of these metrics to assist in our efforts!</span>
<div id="metrics-notification-buttons">
<div class="metrics-notification-buttons">
<button id="metrics-notification-accept" class="js-metrics-notification-accept">☑&nbsp;Agree</button>
<button id="metrics-notification-decline" class="js-metrics-notification-decline">Decline</button>
</div>
Expand Down Expand Up @@ -66,7 +65,24 @@ <h1 class='f3 fw2 montserrat aqua ttu ma0'>Public Gateways</h1>
</li>
</ul>
</div>
<div id="checker.stats" class="Stats monospace f6"></div>
<div id="checker.stats" class="Stats monospace f6">
<button class="cookieConsentToggle js-cookie-banner-toggle" aria-label="Edit cookie settings">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M510.52 255.82c-69.97-.85-126.47-57.69-126.47-127.86-70.17
0-127-56.49-127.86-126.45-27.26-4.14-55.13.3-79.72 12.82l-69.13
35.22a132.221 132.221 0 0 0-57.79 57.81l-35.1 68.88a132.645 132.645 0 0
0-12.82 80.95l12.08 76.27a132.521 132.521 0 0 0 37.16 72.96l54.77
54.76a132.036 132.036 0 0 0 72.71 37.06l76.71 12.15c27.51 4.36 55.7-.11
80.53-12.76l69.13-35.21a132.273 132.273 0 0 0
57.79-57.81l35.1-68.88c12.56-24.64 17.01-52.58 12.91-79.91zM176
368c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32
32zm32-160c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33
32-32 32zm160 128c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32
32-14.33 32-32 32z"
/>
</svg>
</button>
</div>
<div id="checker.results" class="Results monospace f6">
<div class="Node Header">
<div class="Status" title="Online status: is it possible to read data?" style="cursor: help">Online</div>
Expand Down
35 changes: 27 additions & 8 deletions src/metrics.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,10 @@ const declineWarning = document.querySelector('.js-metrics-notification-decline-
const acceptButton = document.querySelector('.js-metrics-notification-accept')
const declineButton = document.querySelector('.js-metrics-notification-decline')
const declineWarningClose = document.querySelector('.js-metrics-notification-warning-close')
const bannerToggle = document.querySelector('.js-cookie-banner-toggle')

function addConsent (consent: string[]): void {
banner?.classList.add('hidden')
hideConsentBanner()
Countly.add_consent(consent)

if (Array.isArray(consent)) {
Expand All @@ -26,28 +27,46 @@ function addConsentEventHandler (): void {
}

function declineConsentEventHandler (): void {
acceptButton?.removeEventListener('click', addConsentEventHandler)
banner?.classList.add('hidden')
declineWarning?.classList.remove('hidden')

addConsent(['necessary'])
hideConsentBanner()
displayDeclineWarning()
}

function displayDeclineWarning (): void {
declineWarning?.classList.remove('hidden')
bannerToggle?.setAttribute('disabled', '')
}

function declineWarningCloseEventHandler (): void {
declineWarningClose?.removeEventListener('click', declineWarningCloseEventHandler)
declineWarning?.classList.add('hidden')
bannerToggle?.removeAttribute('disabled')
}

function hideConsentBanner (): void {
acceptButton?.removeEventListener('click', addConsentEventHandler)
declineButton?.removeEventListener('click', declineConsentEventHandler)
banner?.classList.add('hidden')
bannerToggle?.removeAttribute('disabled')
}

/**
* Display the consent banner and handle the user's choice
*/
function displayConsentBanner (): void {
banner?.classList.remove('hidden')
}
function loadCountly (): void {
acceptButton?.addEventListener('click', addConsentEventHandler)
declineButton?.addEventListener('click', declineConsentEventHandler)
declineWarningClose?.addEventListener('click', declineWarningCloseEventHandler)
banner?.classList.remove('hidden')
bannerToggle?.setAttribute('disabled', '')
declineWarning?.classList.add('hidden')
}

function bannerToggleEventHandler (): void {
displayConsentBanner()
}
function loadCountly (): void {
bannerToggle?.addEventListener('click', bannerToggleEventHandler)
Countly.init({
app_key: '3c2c0819434074fc4d339ddd8e112a1e741ecb72',
url: 'https://countly.ipfs.io',
Expand Down
51 changes: 39 additions & 12 deletions src/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,7 @@ div.metrics-notification-wrapper {
max-width: 1024px;
}

div#metrics-notification-container {
div.metrics-notification-container {
display: flex;
align-items: center;
gap: 0.5rem 5rem;
Expand All @@ -154,14 +154,16 @@ div.metrics-notification-wrapper .metrics-notification-text {
order: 1;
align-self: flex-start;
}
div.metrics-notification-wrapper #metrics-notification-buttons {

div.metrics-notification-wrapper .metrics-notification-buttons {
order: 3;
align-self: center;
align-items: center;
align-content: center;
display: flex;
gap: 1rem;
}

div.metrics-notification-wrapper a {
color: rgba(107, 196, 206, 1);
}
Expand All @@ -178,18 +180,11 @@ div.metrics-notification-wrapper button {

.metrics-notification-wrapper button#metrics-notification-accept {
border: 1pt solid rgba(107, 196, 206, 1);
/* grid-column-start: 3; */
}

#metrics-notification-decline-warning ul {
list-style-type: none;
}

button#metrics-notification-warning-close {
position: absolute;
top: 0;
right: 0;
margin: 10px;
border: 1pt solid rgba(107, 196, 206, 1);
/* color: rgba(7, 58, 83, 1); */
}

@media (max-width: 1002px) {
Expand All @@ -201,8 +196,40 @@ button#metrics-notification-warning-close {
padding: 0 2rem;
}

#metrics-notification-container {
.metrics-notification-container {
display: flex;
flex-direction: column;
}
}

/**
* From https://unpkg.com/@beyonk/gdpr-cookie-consent-banner@9.1.0/dist/style.css
*/
.cookieConsentToggle {
width: 40px;
height: 40px;
will-change: transform;
padding: 9px;
border: 0;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
background: white;
border-radius: 50%;
transition: 200ms;
opacity: 1;
z-index: 99980;
cursor: pointer;
margin: 0 1em 0 0;
}

.cookieConsentToggle:disabled {
cursor: default;
}

.cookieConsentToggle:hover:not(:disabled) {
color: white;
background: #69c4cd;
}

.cookieConsentToggle * {
fill: currentColor;
}

0 comments on commit e8c9810

Please sign in to comment.