mandelstudio/mandelstudio/templates/cookie_jar/cookie_banner.html

{% load i18n %}
{% load mandelstudio_i18n %}
{% load wagtailcore_tags ocyanjson %}

{% with settings.cookie_jar.CookieSettings as cookie_settings %}
    {% if cookie_jar.needs_approval or cookie_jar.site_settings.strict_cookies %}
        {% if cookie_jar.needs_display or cookie_jar.cookie is None %}
        <div id="cookie_popup_body" class="cookie-consent-overlay" role="region" aria-label="{% cookie_ui_text '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>{% cookie_ui_text 'cookie_title' %}</span>
                    </div>
                    <div id="cookie_popup_content">
                        {% localized_cookie_text cookie_settings "cookie_message" as cookie_message_text %}
                        {% if cookie_message_text %}
                            {{ cookie_message_text|richtext }}
                        {% else %}
                            <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>
                        {% endif %}
                    </div>
                    <div id="cookie_buttons" class="cookie-consent-actions">
                        <button type="button" id="cookie_popup_acceptButton" data-cookie-key="{{ cookie_jar.cookie_key }}">{% cookie_ui_text 'accept' %}</button>
                        <button type="button" id="cookie_popup_settingsToggle">{% cookie_ui_text 'settings' %}</button>
                    </div>
                    <div class="cookie-consent-hint">
                        {% cookie_ui_text 'hint' %}
                    </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>{% cookie_ui_text 'back' %}</span>
                    </button>
                    <div class="cookie-banner-title">
                        <i class="fa fa-sliders" aria-hidden="true"></i>
                        <span>{% cookie_ui_text 'cookie_settings' %}</span>
                    </div>
                    <div id="cookie_popup_content_modal">
                        {% localized_cookie_text cookie_settings "popup_cookie_message" as popup_cookie_message_text %}
                        {% if popup_cookie_message_text %}
                            {{ popup_cookie_message_text|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">{% cookie_ui_text 'accept' %}</button>
                        <button type="button" id="cookie_model_saveButton" data-cookie-key="{{ cookie_jar.cookie_key }}">{% cookie_ui_text 'save_preferences' %}</button>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}
    {% endif %}
{% 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>