Files
mandelstudio/mandelstudio/templates/cookie_jar/cookie_banner.html

110 lines
4.8 KiB
HTML

{% load i18n %}
{% load wagtailcore_tags ocyanjson %}
{% with settings.cookie_jar.CookieSettings as cookie_settings %}
<div id="cookie_popup_body" class="cookie-consent-overlay" role="region" aria-label="{% trans 'Cookie settings' %}">
<div class="cookie-consent-modal" role="dialog" aria-modal="true" aria-labelledby="cookie-consent-title">
<div class="cookie-consent-panel is-active" id="cookie-consent-main-panel">
<div class="cookie-banner-title" id="cookie-consent-title">
<i class="fa fa-shield-halved" aria-hidden="true"></i>
<span>{% trans 'Privacy & Cookies' %}</span>
</div>
<div id="cookie_popup_content">
<p>
{% blocktrans %}
We use cookies to make sure our website works as well as possible. If you continue using this website, we assume you agree.
{% endblocktrans %}
</p>
</div>
<div id="cookie_buttons" class="cookie-consent-actions">
<button type="button" id="cookie_popup_acceptButton" data-cookie-key="{{ cookie_jar.cookie_key }}">{% trans 'Accept' %}</button>
<button type="button" id="cookie_popup_settingsToggle">{% trans 'Settings' %}</button>
</div>
<div class="cookie-consent-hint">
{% trans 'You can update your cookie preferences at any time.' %}
</div>
</div>
<div class="cookie-consent-panel" id="cookie-consent-settings-panel">
<button type="button" class="cookie-consent-back" id="cookie_popup_backButton">
<i class="fa fa-arrow-left" aria-hidden="true"></i>
<span>{% trans 'Back' %}</span>
</button>
<div class="cookie-banner-title">
<i class="fa fa-sliders" aria-hidden="true"></i>
<span>{% trans 'Cookie settings' %}</span>
</div>
<div id="cookie_popup_content_modal">
{% if cookie_settings.popup_cookie_message %}
{{ cookie_settings.popup_cookie_message|richtext }}
{% else %}
<p>
{% blocktrans %}
Choose which cookie categories you allow. Functional cookies are always enabled because they are required for the website to work.
{% endblocktrans %}
</p>
{% endif %}
</div>
{% include "cookie_jar/partials/cookie_checkboxes.html" %}
<div class="cookie-consent-actions cookie-consent-actions-settings">
<button type="button" id="cookie_popup_acceptButton_settings">{% trans 'Accept' %}</button>
<button type="button" id="cookie_model_saveButton" data-cookie-key="{{ cookie_jar.cookie_key }}">{% trans 'Save preferences' %}</button>
</div>
</div>
</div>
</div>
{% endwith %}
<script>
(function () {
function byId(id) {
return document.getElementById(id);
}
function showSettings(event) {
if (event) {
event.preventDefault();
event.stopPropagation();
}
var main = byId("cookie-consent-main-panel");
var settings = byId("cookie-consent-settings-panel");
if (main && settings) {
main.classList.remove("is-active");
settings.classList.add("is-active");
}
}
function showMain(event) {
if (event) {
event.preventDefault();
}
var main = byId("cookie-consent-main-panel");
var settings = byId("cookie-consent-settings-panel");
if (main && settings) {
settings.classList.remove("is-active");
main.classList.add("is-active");
}
}
document.addEventListener("DOMContentLoaded", function () {
var settingsBtn = byId("cookie_popup_settingsToggle");
var backBtn = byId("cookie_popup_backButton");
var acceptSettingsBtn = byId("cookie_popup_acceptButton_settings");
var acceptBtn = byId("cookie_popup_acceptButton");
if (settingsBtn) {
settingsBtn.addEventListener("click", showSettings);
}
if (backBtn) {
backBtn.addEventListener("click", showMain);
}
if (acceptSettingsBtn && acceptBtn) {
acceptSettingsBtn.addEventListener("click", function (event) {
event.preventDefault();
acceptBtn.click();
});
}
});
})();
</script>