Files
pretix_cgo/src/pretix/presale/templates/pretixpresale/fragment_modals.html
Richard Schreiber 7c59ec51ca [A11y] switch modal dialogs to <dialog> tag (#5128)
* add templatetag {% dialog %} using <dialog> tag
* new dialog style
* show dialog when empty add-to-cart instead of disabling the button
* update cookieconsent-modal to use new template tag
2025-05-21 16:52:49 +02:00

126 lines
6.2 KiB
HTML

{% load i18n %}
{% load rich_text %}
{% load safelink %}
{% load escapejson %}
{% load icon %}
{% load dialog %}
<div id="ajaxerr">
</div>
<div id="popupmodal" hidden aria-live="polite">
<div class="modal-card">
<div class="modal-card-icon">
<i class="fa fa-window-restore big-icon" aria-hidden="true"></i>
</div>
<div class="modal-card-content">
<div>
<h3>
{% trans "We've started the requested process in a new window." %}
</h3>
<p class="text">
{% trans "If you do not see the new window, we can help you launch it again." %}
</p>
<p>
<a href="" data-open-in-popup-window class="btn btn-default">
<span class="fa fa-external-link-square"></span>
{% trans "Open window again" %}
</a>
</p>
<p class="text">
{% trans "Once the process in the new window has been completed, you can continue here." %}
</p>
</div>
</div>
</div>
</div>
<div id="loadingmodal" hidden aria-live="polite">
<div class="modal-card">
<div class="modal-card-icon">
<i class="fa fa-cog big-rotating-icon" aria-hidden="true"></i>
</div>
<div class="modal-card-content">
<h3 id="loadingmodal-label"></h3>
<div id="loadingmodal-description">
<p class="text"></p>
<p class="status">{% trans "If this takes longer than a few minutes, please contact us." %}</p>
</div>
</div>
</div>
</div>
{% if request.organizer and request.organizer.settings.cookie_consent %}
<script type="text/plain" id="cookie-consent-storage-key">cookie-consent-{{ request.organizer.slug }}</script>
{% if cookie_consent_from_widget %}
{{ cookie_consent_from_widget|json_script:"cookie-consent-from-widget" }}
{% endif %}
{% if cookie_providers %}
{% with request.event|default:request.organizer as sh %}
{% dialog "cookie-consent-modal" sh.settings.cookie_consent_dialog_title sh.settings.cookie_consent_dialog_text|rich_text icon="shield" %}
{% if sh.settings.cookie_consent_dialog_text_secondary %}
<div class="text-muted">
{{ sh.settings.cookie_consent_dialog_text_secondary|rich_text }}
</div>
{% endif %}
<details id="cookie-consent-details">
<summary>
<span class="fa fa-fw chevron"></span>
{% trans "Adjust settings in detail" %}
</summary>
<div class="checkbox">
<label>
<input type="checkbox" disabled checked="" aira-describedby="cookie-consent-checkbox-required-description">
{% trans "Required cookies" %}
</label>
</div>
<div class="help-block" id="cookie-consent-checkbox-required-description">
<p>{% trans "Functional cookies (e.g. shopping cart, login, payment, language preference) and technical cookies (e.g. security purposes)" %}</p>
</div>
{% for cp in cookie_providers %}
<div class="checkbox">
<label>
<input type="checkbox" name="{{ cp.identifier }}" aira-describedby="cookie-consent-checkbox-{{ cp.identifier }}-description">
{{ cp.provider_name }}
</label>
</div>
<div class="help-block" id="cookie-consent-checkbox-{{ cp.identifier }}-description">
<p>
{% for c in cp.usage_classes %}
{% if forloop.counter0 > 0 %}&middot; {% endif %}
{% if c.value == 1 %}
{% trans "Functionality" context "cookie_usage" %}
{% elif c.value == 2 %}
{% trans "Analytics" context "cookie_usage" %}
{% elif c.value == 3 %}
{% trans "Marketing" context "cookie_usage" %}
{% elif c.value == 4 %}
{% trans "Social features" context "cookie_usage" %}
{% endif %}
{% endfor %}
{% if cp.privacy_url %}
&middot;
<a href="{% safelink cp.privacy_url %}" target="_blank">
{% trans "Privacy policy" %}
</a>
{% endif %}
</p>
</div>
{% endfor %}
</details>
<p class="modal-card-confirm modal-card-confirm-spread">
<button class="btn btn-lg btn-default" id="cookie-consent-button-no" value="no" autofocus="true"
data-summary-text="{{ sh.settings.cookie_consent_dialog_button_no }}"
data-detail-text="{% trans "Save selection" %}">
{{ sh.settings.cookie_consent_dialog_button_no }}
</button>
<button class="btn btn-lg btn-primary" id="cookie-consent-button-yes" value="yes">
{{ sh.settings.cookie_consent_dialog_button_yes }}
</button>
</p>
{% if sh.settings.privacy_url %}
<p class="text-center">
<small><a href="{% safelink sh.settings.privacy_url %}" target="_blank" rel="noopener">{% trans "Privacy policy" %}</a></small>
</p>
{% endif %}
{% enddialog %}
{% endwith %}
{% endif %}
{% endif %}