Skip to content

Commit

Permalink
Added JS for the cookie banner on the cookie pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@jameshodge96u
jameshodge96u committed Nov 28, 2024
1 parent d30a9bd commit e7caf11
Show file tree
Hide file tree
Showing 2 changed files with 138 additions and 91 deletions.
117 changes: 71 additions & 46 deletions app/views/mvp2/cookies-parents.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,26 @@

{% set pageName="Home" %}

<div class="govuk-notification-banner govuk-notification-banner--success" role="alert" aria-labelledby="govuk-notification-banner-title" data-module="govuk-notification-banner">
<div class="govuk-notification-banner__header">
<h2 class="govuk-notification-banner__title" id="govuk-notification-banner-title">
Success
</h2>
</div>
<div class="govuk-notification-banner__content">
<p class="govuk-notification-banner__heading">
You’ve set your cookie preferences. <a class="govuk-notification-banner__link" href="#">Go back to the page you were looking at</a>.
</p>
</div>
</div>

{% block content %}

<!-- Success Notification Banner -->
<div class="govuk-notification-banner govuk-notification-banner--success"
role="alert"
aria-labelledby="govuk-notification-banner-title"
data-module="govuk-notification-banner"
style="display: none;" id="success-banner">
<div class="govuk-notification-banner__header">
<h2 class="govuk-notification-banner__title" id="govuk-notification-banner-title">
Success
</h2>
</div>
<div class="govuk-notification-banner__content">
<p class="govuk-notification-banner__heading">
You’ve set your cookie preferences. <a class="govuk-notification-banner__link" href="#">Go back to the page you were looking at</a>.
</p>
</div>
</div>

<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">

Expand Down Expand Up @@ -116,40 +121,60 @@ <h2 class="govuk-heading-m govuk-!-margin-top-6">Analytics cookies (optional)</h
</tbody>
</table>

<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h2 class="govuk-heading-l">Change your cookie settings</h2>
<form action="/form-handler" method="post" novalidate>

<div class="govuk-form-group">
<fieldset class="govuk-fieldset">
<legend class="govuk-fieldset__legend govuk-fieldset__legend--s">
Do you want to accept analytics cookies?
</legend>
<div class="govuk-radios" data-module="govuk-radios">
<div class="govuk-radios__item">
<input class="govuk-radios__input" id="cookies-analytics" name="cookies[analytics]" type="radio" value="yes">
<label class="govuk-label govuk-radios__label" for="cookies-analytics">
Yes
</label>
</div>
<div class="govuk-radios__item">
<input class="govuk-radios__input" id="cookies-analytics-2" name="cookies[analytics]" type="radio" value="no" checked>
<label class="govuk-label govuk-radios__label" for="cookies-analytics-2">
No
</label>
</div>
</div>
</fieldset>

<h2 class="govuk-heading-l">Change your cookie settings</h2>
<form id="cookie-settings-form">
<div class="govuk-form-group">
<fieldset class="govuk-fieldset">
<legend class="govuk-fieldset__legend govuk-fieldset__legend--s">
Do you want to accept analytics cookies?
</legend>
<div class="govuk-radios" data-module="govuk-radios">
<div class="govuk-radios__item">
<input class="govuk-radios__input" id="cookies-analytics" name="cookies[analytics]" type="radio" value="yes">
<label class="govuk-label govuk-radios__label" for="cookies-analytics">Yes</label>
</div>
<button type="submit" class="govuk-button" data-module="govuk-button">
Save cookie settings
</button>
</form>
</div>
<div class="govuk-radios__item">
<input class="govuk-radios__input" id="cookies-analytics-2" name="cookies[analytics]" type="radio" value="no" checked>
<label class="govuk-label govuk-radios__label" for="cookies-analytics-2">No</label>
</div>
</div>
</fieldset>
</div>

</div>
<button type="submit" class="govuk-button" data-module="govuk-button">Save cookie settings</button>
</form>
</div>
</div>

{% endblock %}
<script>
document.addEventListener("DOMContentLoaded", function () {
const form = document.getElementById("cookie-settings-form");
const successBanner = document.getElementById("success-banner");

form.addEventListener("submit", function (event) {
event.preventDefault(); // Prevent the default form submission

// Ensure a selection has been made
const selectedOption = document.querySelector('input[name="cookies[analytics]"]:checked');
if (!selectedOption) {
return;
}



// Show the success banner
successBanner.style.display = "block";

// Scroll to the top of the page
window.scrollTo({ top: 0});

// (Optional) Clear the form after submission
form.reset();
});
});
</script>

{% endblock %}



112 changes: 67 additions & 45 deletions app/views/mvp2/cookies-schools-la.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,26 @@

{% set pageName="Home" %}

<div class="govuk-notification-banner govuk-notification-banner--success" role="alert" aria-labelledby="govuk-notification-banner-title" data-module="govuk-notification-banner">
<div class="govuk-notification-banner__header">
<h2 class="govuk-notification-banner__title" id="govuk-notification-banner-title">
Success
</h2>
</div>
<div class="govuk-notification-banner__content">
<p class="govuk-notification-banner__heading">
You’ve set your cookie preferences. <a class="govuk-notification-banner__link" href="#">Go back to the page you were looking at</a>.
</p>
</div>
</div>

{% block content %}

<!-- Success Notification Banner -->
<div class="govuk-notification-banner govuk-notification-banner--success"
role="alert"
aria-labelledby="govuk-notification-banner-title"
data-module="govuk-notification-banner"
style="display: none;" id="success-banner">
<div class="govuk-notification-banner__header">
<h2 class="govuk-notification-banner__title" id="govuk-notification-banner-title">
Success
</h2>
</div>
<div class="govuk-notification-banner__content">
<p class="govuk-notification-banner__heading">
You’ve set your cookie preferences. <a class="govuk-notification-banner__link" href="#">Go back to the page you were looking at</a>.
</p>
</div>
</div>

<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">

Expand Down Expand Up @@ -131,38 +136,55 @@ <h2 class="govuk-heading-m govuk-!-margin-top-6">Analytics cookies (optional)</h
</tbody>
</table>

<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h2 class="govuk-heading-l">Change your cookie settings</h2>
<form method="post" class="js-cookies-page-form" novalidate="">
<div class="govuk-form-group">
<fieldset class="govuk-fieldset js-cookies-page-form-fieldset" id="analytics">
<legend class="govuk-fieldset__legend govuk-fieldset__legend--s">
Do you want to accept analytics cookies?
</legend>
<div class="govuk-radios" data-module="govuk-radios">
<div class="govuk-radios__item">
<input class="govuk-radios__input" id="analytics-cookies-yes" name="analytics" type="radio" value="true">
<label class="govuk-label govuk-radios__label" for="analytics-cookies-yes">
Yes
</label>
</div>
<div class="govuk-radios__item">
<input class="govuk-radios__input" id="analytics-cookies-no" name="analytics" type="radio" value="false" checked="">
<label class="govuk-label govuk-radios__label" for="analytics-cookies-no">
No
</label>
</div>
</div>
</fieldset>
</div>
<button class="govuk-button js-cookies-form-button" data-module="govuk-button">
Save cookie settings
</button>
<input name="__RequestVerificationToken" type="hidden" value="CfDJ8DhiDDhPVfJAmQYKTI1c_nzy9aR1Bca6WIENRtR3YId7eNQs2HE5BN_t4uriq1tJx1UgCyxaS9-jUy7z_8v0z2vYYAAlwsVaQY7AvX45vtNrICDdDJ2U1NhkWoswstYaYJqaHAEflYXNaSl_tJZTvlg"></form>
</div>
</div>
</div>
<h2 class="govuk-heading-l">Change your cookie settings</h2>
<form id="cookie-settings-form">
<div class="govuk-form-group">
<fieldset class="govuk-fieldset">
<legend class="govuk-fieldset__legend govuk-fieldset__legend--s">
Do you want to accept analytics cookies?
</legend>
<div class="govuk-radios" data-module="govuk-radios">
<div class="govuk-radios__item">
<input class="govuk-radios__input" id="cookies-analytics" name="cookies[analytics]" type="radio" value="yes">
<label class="govuk-label govuk-radios__label" for="cookies-analytics">Yes</label>
</div>
<div class="govuk-radios__item">
<input class="govuk-radios__input" id="cookies-analytics-2" name="cookies[analytics]" type="radio" value="no" checked>
<label class="govuk-label govuk-radios__label" for="cookies-analytics-2">No</label>
</div>
</div>
</fieldset>
</div>
<button type="submit" class="govuk-button" data-module="govuk-button">Save cookie settings</button>
</form>
</div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function () {
const form = document.getElementById("cookie-settings-form");
const successBanner = document.getElementById("success-banner");

form.addEventListener("submit", function (event) {
event.preventDefault(); // Prevent the default form submission

// Ensure a selection has been made
const selectedOption = document.querySelector('input[name="cookies[analytics]"]:checked');
if (!selectedOption) {
return;
}


// Show the success banner
successBanner.style.display = "block";

// Scroll to the top of the page
window.scrollTo({ top: 0});

// Clear the form after submission
form.reset();
});
});
</script>

{% endblock %}

0 comments on commit e7caf11

Please sign in to comment.