'
+ + shared_loading_fragment
+ + ''
+ + ''
+ + '
'
+ + '<div class="pretix-widget-compat" event="{% abseventurl request.event "presale:event.index" %}"{% if form.cleaned_data.subevent %} subevent="{{ form.cleaned_data.subevent.pk }}"{% endif %}{% if form.cleaned_data.voucher %} voucher="{{ form.cleaned_data.voucher }}"{% endif %}></div>
<noscript>
<div class="pretix-widget">
<div class="pretix-widget-info-message">
@@ -45,7 +45,7 @@
</noscript>
{% else %}
- <pretix-widget event="{% abseventurl request.event "presale:event.index" %}"{% if form.cleaned_data.subevent %} subevent="{{ form.cleaned_data.subevent.pk }}"{% endif %}{% if form.cleaned_data.voucher %} voucher="{{ form.cleaned_data.voucher }}"{% endif %} single-item-select="button"></pretix-widget>
+ <pretix-widget event="{% abseventurl request.event "presale:event.index" %}"{% if form.cleaned_data.subevent %} subevent="{{ form.cleaned_data.subevent.pk }}"{% endif %}{% if form.cleaned_data.voucher %} voucher="{{ form.cleaned_data.voucher }}"{% endif %}></pretix-widget>
<noscript>
<div class="pretix-widget">
<div class="pretix-widget-info-message">
diff --git a/src/pretix/control/views/event.py b/src/pretix/control/views/event.py
index 4667a6b96..9ffb76eac 100644
--- a/src/pretix/control/views/event.py
+++ b/src/pretix/control/views/event.py
@@ -96,6 +96,9 @@ from pretix.control.views.user import RecentAuthenticationRequiredMixin
from pretix.helpers.database import rolledback_transaction
from pretix.multidomain.urlreverse import build_absolute_uri, get_event_domain
from pretix.plugins.stripe.payment import StripeSettingsHolder
+from pretix.presale.views.widget import (
+ version_default as widget_version_default,
+)
from ...base.i18n import language
from ...base.models.items import (
@@ -1408,6 +1411,7 @@ class WidgetSettings(EventSettingsViewMixin, EventPermissionRequiredMixin, FormV
def get_context_data(self, **kwargs):
ctx = super().get_context_data(**kwargs)
ctx['urlprefix'] = settings.SITE_URL
+ ctx['widget_version_default'] = widget_version_default
domain = get_event_domain(self.request.event, fallback=True)
if domain:
siteurlsplit = urlsplit(settings.SITE_URL)
diff --git a/src/pretix/presale/templates/pretixpresale/widget_dummy.v1.html b/src/pretix/presale/templates/pretixpresale/widget_dummy.v1.html
new file mode 100644
index 000000000..72f58a906
--- /dev/null
+++ b/src/pretix/presale/templates/pretixpresale/widget_dummy.v1.html
@@ -0,0 +1,5 @@
+{% load compress %}
+{% load static %}
+{% compress css %}
+
+{% endcompress %}
diff --git a/src/pretix/presale/urls.py b/src/pretix/presale/urls.py
index 2289c4166..18089751d 100644
--- a/src/pretix/presale/urls.py
+++ b/src/pretix/presale/urls.py
@@ -32,7 +32,7 @@
# distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
# License for the specific language governing permissions and limitations under the License.
-from django.urls import include, re_path
+from django.urls import include, path, re_path
from django.views.decorators.csrf import csrf_exempt
import pretix.presale.views.cart
@@ -173,7 +173,7 @@ event_patterns = [
re_path(r'^widget/product_list$', pretix.presale.views.widget.WidgetAPIProductList.as_view(),
name='event.widget.productlist'),
- re_path(r'^widget/v1.css$', pretix.presale.views.widget.widget_css, name='event.widget.css'),
+ path('widget/v.css', pretix.presale.views.widget.widget_css, name='event.widget.css'),
re_path(r'^(?P\d+)/widget/product_list$', pretix.presale.views.widget.WidgetAPIProductList.as_view(),
name='event.widget.productlist'),
@@ -196,7 +196,7 @@ organizer_patterns = [
re_path(r'^widget/product_list$', pretix.presale.views.widget.WidgetAPIProductList.as_view(),
name='organizer.widget.productlist'),
- re_path(r'^widget/v1.css$', pretix.presale.views.widget.widget_css, name='organizer.widget.css'),
+ path('widget/v.css', pretix.presale.views.widget.widget_css, name='organizer.widget.css'),
re_path(r'^theme.css$', pretix.presale.views.theme.theme_css, name='organizer.theme.css'),
re_path(r'^accessibility$', pretix.presale.views.organizer.AccessibilityView.as_view(), name='organizer.accessibility'),
@@ -237,5 +237,5 @@ locale_patterns = [
re_path(r'^robots.txt$', pretix.presale.views.robots.robots_txt, name='robots.txt'),
re_path(r'^browserconfig.xml$', pretix.presale.views.theme.browserconfig_xml, name='browserconfig.xml'),
re_path(r'^site.webmanifest$', pretix.presale.views.theme.webmanifest, name='site.webmanifest'),
- re_path(r'^widget/v1\.(?P[a-zA-Z0-9_\-]+)\.js$', pretix.presale.views.widget.widget_js, name='widget.js'),
+ path('widget/v..js', pretix.presale.views.widget.widget_js, name='widget.js'),
]
diff --git a/src/pretix/presale/views/widget.py b/src/pretix/presale/views/widget.py
index 8ae618a6c..f16755eae 100644
--- a/src/pretix/presale/views/widget.py
+++ b/src/pretix/presale/views/widget.py
@@ -38,8 +38,10 @@ from django.core.files.base import ContentFile, File
from django.core.files.storage import default_storage
from django.db.models import Q
from django.http import FileResponse, Http404, HttpResponse, JsonResponse
+from django.shortcuts import redirect
from django.template import Context, Engine
from django.template.loader import get_template
+from django.urls import reverse
from django.utils.formats import date_format
from django.utils.timezone import now
from django.utils.translation import get_language, gettext, pgettext
@@ -81,15 +83,22 @@ logger = logging.getLogger(__name__)
# we never change static source without restart, so we can cache this thread-wise
_source_cache_key = None
+version_min = 1
+version_max = 2
+version_default = 2 # used for output in widget-embed-code
-def _get_source_cache_key():
+
+def _get_source_cache_key(version):
global _source_cache_key
checksum = hashlib.sha256()
if not _source_cache_key:
with open(finders.find("pretixbase/scss/_theme_variables.scss"), "r") as f:
checksum.update(f.read().encode())
- tpl = get_template('pretixpresale/widget_dummy.html')
- et = html.fromstring(tpl.render({})).xpath('/html/head/link')[0].attrib['href'].replace(settings.STATIC_URL, '')
+
+ template_path = 'pretixpresale/widget_dummy.html' if version == version_max else 'pretixpresale/widget_dummy.v{}.html'.format(version)
+
+ tpl = get_template(template_path)
+ et = html.fromstring(tpl.render()).xpath('/html/head/link')[0].attrib['href'].replace(settings.STATIC_URL, '')
checksum.update(et.encode())
_source_cache_key = checksum.hexdigest()[:12]
return _source_cache_key
@@ -99,29 +108,39 @@ def indent(s):
return s.replace('\n', '\n ')
-def widget_css_etag(request, **kwargs):
+def widget_css_etag(request, version, **kwargs):
# This makes sure a new version of the theme is loaded whenever settings or the source files have changed
if hasattr(request, 'event'):
- return (f'{_get_source_cache_key()}-'
+ return (f'{_get_source_cache_key(version)}-'
f'{request.organizer.cache.get_or_set("css_version", default=lambda: int(time.time()))}-'
f'{request.event.cache.get_or_set("css_version", default=lambda: int(time.time()))}')
else:
- return f'{_get_source_cache_key()}-{request.organizer.cache.get_or_set("css_version", default=lambda: int(time.time()))}'
+ return f'{_get_source_cache_key(version)}-{request.organizer.cache.get_or_set("css_version", default=lambda: int(time.time()))}'
-def widget_js_etag(request, lang, **kwargs):
+def widget_js_etag(request, version, lang, **kwargs):
gs = GlobalSettingsObject()
- return gs.settings.get('widget_checksum_{}'.format(lang))
+ return gs.settings.get('widget_checksum_{}_{}'.format(version, lang))
@gzip_page
@condition(etag_func=widget_css_etag)
@cache_page(60)
-def widget_css(request, **kwargs):
+def widget_css(request, version, **kwargs):
+ if version > version_max:
+ raise Http404()
+ if version < version_min:
+ return redirect(reverse('presale:event.widget.css' if hasattr(request, 'event') else 'organizer.widget.css', kwargs={
+ 'version': version_min,
+ 'organizer': request.organizer.slug,
+ 'event': request.event.slug if hasattr(request, 'event') else None,
+ }))
o = getattr(request, 'event', request.organizer)
- tpl = get_template('pretixpresale/widget_dummy.html')
- et = html.fromstring(tpl.render({})).xpath('/html/head/link')[0].attrib['href'].replace(settings.STATIC_URL, '')
+ template_path = 'pretixpresale/widget_dummy.html' if version == version_max else 'pretixpresale/widget_dummy.v{}.html'.format(version)
+
+ tpl = get_template(template_path)
+ et = html.fromstring(tpl.render()).xpath('/html/head/link')[0].attrib['href'].replace(settings.STATIC_URL, '')
with open(finders.find(et), 'r') as f:
widget_css = f.read()
@@ -134,7 +153,7 @@ def widget_css(request, **kwargs):
return resp
-def generate_widget_js(lang):
+def generate_widget_js(version, lang):
code = []
with language(lang):
# Provide isolation
@@ -169,7 +188,7 @@ def generate_widget_js(lang):
'vuejs/vue.js' if settings.DEBUG else 'vuejs/vue.min.js',
'pretixpresale/js/widget/docready.js',
'pretixpresale/js/widget/floatformat.js',
- 'pretixpresale/js/widget/widget.js',
+ 'pretixpresale/js/widget/widget.js' if version == version_max else 'pretixpresale/js/widget/widget.v{}.js'.format(version),
]
for fname in files:
f = finders.find(fname)
@@ -188,11 +207,17 @@ def generate_widget_js(lang):
@gzip_page
@condition(etag_func=widget_js_etag)
-def widget_js(request, lang, **kwargs):
- if lang not in [lc for lc, ll in settings.LANGUAGES]:
+def widget_js(request, version, lang, **kwargs):
+ if version > version_max or lang not in [lc for lc, ll in settings.LANGUAGES]:
raise Http404()
- cached_js = cache.get('widget_js_data_{}'.format(lang))
+ if version < version_min:
+ return redirect(reverse('presale:widget.js', kwargs={
+ 'version': version_min,
+ 'lang': lang,
+ }))
+
+ cached_js = cache.get('widget_js_data_{}_{}'.format(version, lang))
if cached_js and not settings.DEBUG:
resp = HttpResponse(cached_js, content_type='text/javascript')
resp._csp_ignore = True
@@ -200,7 +225,7 @@ def widget_js(request, lang, **kwargs):
return resp
gs = GlobalSettingsObject()
- fname = gs.settings.get('widget_file_{}'.format(lang))
+ fname = gs.settings.get('widget_file_{}_{}'.format(version, lang))
resp = None
if fname and not settings.DEBUG:
if isinstance(fname, File):
@@ -208,21 +233,21 @@ def widget_js(request, lang, **kwargs):
try:
data = default_storage.open(fname).read()
resp = HttpResponse(data, content_type='text/javascript')
- cache.set('widget_js_data_{}'.format(lang), data, 3600 * 4)
+ cache.set('widget_js_data_{}_{}'.format(version, lang), data, 3600 * 4)
except:
logger.exception('Failed to open widget.js')
if not resp:
- data = generate_widget_js(lang).encode()
+ data = generate_widget_js(version, lang).encode()
checksum = hashlib.sha1(data).hexdigest()
if not settings.DEBUG:
newname = default_storage.save(
- 'widget/widget.{}.{}.js'.format(lang, checksum),
+ 'widget/widget.{}.{}.{}.js'.format(version, lang, checksum),
ContentFile(data)
)
- gs.settings.set('widget_file_{}'.format(lang), 'file://' + newname)
- gs.settings.set('widget_checksum_{}'.format(lang), checksum)
- cache.set('widget_js_data_{}'.format(lang), data, 3600 * 4)
+ gs.settings.set('widget_file_{}_{}'.format(version, lang), 'file://' + newname)
+ gs.settings.set('widget_checksum_{}_{}'.format(version, lang), checksum)
+ cache.set('widget_js_data_{}_{}'.format(version, lang), data, 3600 * 4)
resp = HttpResponse(data, content_type='text/javascript')
resp._csp_ignore = True
resp['Access-Control-Allow-Origin'] = '*'
diff --git a/src/pretix/static/pretixbase/scss/_bootstrap_vars.scss b/src/pretix/static/pretixbase/scss/_bootstrap_vars.scss
index b944766cd..9d6648d8a 100644
--- a/src/pretix/static/pretixbase/scss/_bootstrap_vars.scss
+++ b/src/pretix/static/pretixbase/scss/_bootstrap_vars.scss
@@ -14,6 +14,7 @@ $input-color-placeholder: lighten(#000, 70%) !default;
$border-radius-base: var(--pretix-border-radius-base);
$border-radius-large: var(--pretix-border-radius-large);
$border-radius-small: var(--pretix-border-radius-small);
+$input-border: #949494 !default;
$navbar-inverse-bg: #3b1c4a !default;
$navbar-inverse-link-color: white;
@@ -72,7 +73,7 @@ $panel-default-heading-bg: #e5e5e5 !default;
$link-hover-color: var(--pretix-brand-primary-darken-15);
-$btn-default-border: #CCCCCC;
+$btn-default-border: #949494;
$btn-primary-border: var(--pretix-brand-primary-darken-5);
$btn-primary-border-active: var(--pretix-brand-primary-darken-30);
@@ -122,6 +123,12 @@ $label-warning-bg-hover: var(--pretix-brand-warning-darken-10);
$label-danger-bg: var(--pretix-brand-danger);
$label-danger-bg-hover: var(--pretix-brand-danger-darken-10);
+$alert-primary-bg: var(--pretix-brand-primary-tint-90);
+$alert-primary-text: var(--pretix-brand-primary-shade-42);
+$alert-primary-border: var(--pretix-brand-primary);
+$alert-primary-hr: var(--pretix-brand-primary-darken-5);
+$alert-primary-link: var(--pretix-brand-primary-shade-42);
+
$alert-success-bg: var(--pretix-brand-success-tint-85);
$alert-success-text: var(--pretix-brand-success-shade-25);
$alert-success-border: var(--pretix-brand-success);
diff --git a/src/pretix/static/pretixpresale/js/widget/widget.js b/src/pretix/static/pretixpresale/js/widget/widget.js
index 260606e94..db9eb5596 100644
--- a/src/pretix/static/pretixpresale/js/widget/widget.js
+++ b/src/pretix/static/pretixpresale/js/widget/widget.js
@@ -16,6 +16,8 @@ var strings = {
'quantity': django.pgettext('widget', 'Quantity'),
'quantity_dec': django.pgettext('widget', 'Decrease quantity'),
'quantity_inc': django.pgettext('widget', 'Increase quantity'),
+ 'filter_events_by': django.pgettext('widget', 'Filter events by'),
+ 'filter': django.pgettext('widget', 'Filter'),
'price': django.pgettext('widget', 'Price'),
'original_price': django.pgettext('widget', 'Original price: %s'),
'new_price': django.pgettext('widget', 'New price: %s'),
@@ -57,6 +59,8 @@ var strings = {
'redeem': django.pgettext('widget', 'Redeem'),
'voucher_code': django.pgettext('widget', 'Voucher code'),
'close': django.pgettext('widget', 'Close'),
+ 'close_checkout': django.pgettext('widget', 'Close checkout'),
+ 'cancel_blocked': django.pgettext('widget', 'You cannot cancel this operation. Please wait for loading to finish.'),
'continue': django.pgettext('widget', 'Continue'),
'variations': django.pgettext('widget', 'Show variants'),
'hide_variations': django.pgettext('widget', 'Hide variants'),
@@ -208,7 +212,7 @@ Vue.component('availbox', {
template: (''),
@@ -253,15 +252,17 @@ Vue.component('availbox', {
variation: Object
},
mounted: function() {
- if (this.item.has_variations) {
- this.$set(this.variation, 'amount_selected', 0);
- } else {
- // Automatically set the only available item to be selected.
- this.$set(this.item, 'amount_selected', this.$root.itemnum === 1 && !this.$root.has_seating_plan ? 1 : 0);
+ if (this.$root.itemnum === 1 && !this.$root.has_seating_plan ? 1 : 0) {
+ this.$refs.quantity.value = 1;
+ if (this.order_max === 1) {
+ this.$refs.quantity.checked = true;
+ }
}
- this.$root.$emit('amounts_changed')
},
computed: {
+ voucher_jump_link: function () {
+ return '#' + this.$root.html_id + '-voucher-input';
+ },
aria_labelledby: function () {
return this.$root.html_id + '-item-label-' + this.item.id;
},
@@ -271,11 +272,6 @@ Vue.component('availbox', {
inc_label: function () {
return '+ ' + (this.item.has_variations ? this.variation.value : this.item.name) + ': ' + strings.quantity_inc;
},
- count_group_classes: function () {
- return {
- 'pretix-widget-item-count-group': !this.$root.use_native_spinners
- }
- },
unavailability_reason_message: function () {
var reason = this.item.current_unavailability_reason || this.variation?.current_unavailability_reason;
if (reason) {
@@ -283,29 +279,6 @@ Vue.component('availbox', {
}
return "";
},
- amount_selected: {
- cache: false,
- get: function () {
- var selected = this.item.has_variations ? this.variation.amount_selected : this.item.amount_selected
- if (selected === 0) return undefined;
- return selected
- },
- set: function (value) {
- // Unary operator to force boolean to integer conversion, as the HTML form submission
- // needs the value to be integer for all products.
- value = (+value);
- if (this.item.has_variations) {
- this.variation.amount_selected = value;
- } else {
- this.item.amount_selected = value;
- }
- if (this.$refs.quantity) {
- // manually set value on quantity as on reload somehow v-model binding breaks
- this.$refs.quantity.value = value;
- }
- this.$root.$emit("amounts_changed")
- }
- },
label_select_item: function () {
return this.item.has_variations
? strings.select_variant.replace("%s", this.variation.value)
@@ -341,14 +314,14 @@ Vue.component('availbox', {
}
},
methods: {
- focus_voucher_field: function () {
- this.$root.$emit('focus_voucher_field')
- },
on_step: function (e) {
var t = e.target.tagName == 'BUTTON' ? e.target : e.target.closest('button');
var step = parseFloat(t.getAttribute("data-step"));
var controls = document.getElementById(t.getAttribute("data-controls"));
- this.amount_selected = Math.max(controls.min, Math.min(controls.max || Number.MAX_SAFE_INTEGER, (this.amount_selected || 0) + step));
+ this.$refs.quantity.value = Math.max(controls.min, Math.min(controls.max || Number.MAX_SAFE_INTEGER, (parseInt(this.$refs.quantity.value || "0")) + step));
+ this.$refs.quantity.dispatchEvent(new CustomEvent("change", {
+ bubbles: true,
+ }));
}
}
});
@@ -537,12 +510,7 @@ Vue.component('item', {
+ ''
+ '![]()
'
+ ''
- + ''
- + '{{ item.name }}'
- + ''
- + '{{ item.name }}'
+ + '{{ item.name }}'
+ ''
+ ''
@@ -622,7 +590,7 @@ Vue.component('item', {
image: this.item.picture_fullsize,
description: this.item.name,
}
- }
+ },
},
computed: {
classObject: function () {
@@ -855,53 +823,54 @@ var shared_loading_fragment = (
);
var shared_iframe_fragment = (
- ''
+ ''
+ + ''
);
var shared_alert_fragment = (
- ''
- + ''
- + ''
+ + ''
+ + '
'
+ + ''
+ + ''
+ + ''
+ ' '
- + ''
- + ' '
+ + ''
);
var shared_lightbox_fragment = (
- ''
+ ''
);
Vue.component('pretix-overlay', {
@@ -911,6 +880,11 @@ Vue.component('pretix-overlay', {
+ shared_lightbox_fragment
+ ''
),
+ data: function () {
+ return {
+ cancelBlocked: false,
+ }
+ },
watch: {
'$root.lightbox': function (newValue, oldValue) {
if (newValue) {
@@ -918,18 +892,24 @@ Vue.component('pretix-overlay', {
this.$set(newValue, "loading", true);
}
if (!oldValue) {
- window.addEventListener('keyup', this.lightboxCloseOnKeyup);
+ this.$el?.querySelector(".pretix-widget-lightbox-holder").showModal();
}
- } else {
- window.removeEventListener('keyup', this.lightboxCloseOnKeyup);
}
- }
+ },
+ '$root.error_message': function (newValue, oldValue) {
+ if (newValue) {
+ if (!oldValue) {
+ this.$el?.querySelector(".pretix-widget-alert-holder").showModal();
+ }
+ }
+ },
},
computed: {
frameClasses: function () {
return {
'pretix-widget-frame-holder': true,
'pretix-widget-frame-shown': this.$root.frame_shown || this.$root.frame_loading,
+ 'pretix-widget-frame-isloading': this.$root.frame_loading,
};
},
alertClasses: function () {
@@ -945,54 +925,67 @@ Vue.component('pretix-overlay', {
'pretix-widget-lightbox-isloading': this.$root.lightbox?.loading,
};
},
+ cancelBlockedClasses: function () {
+ return {
+ 'pretix-widget-visibility-hidden': !this.cancelBlocked,
+ }
+ },
},
methods: {
- lightboxCloseOnKeyup: function (event) {
- if (event.keyCode === 27) {
- // abort on ESC-key
- this.lightboxClose();
- }
- },
lightboxClose: function () {
this.$root.lightbox = null;
},
lightboxLoaded: function () {
this.$root.lightbox.loading = false;
},
- errorClose: function () {
+ errorClose: function (e) {
+ var dialog = e.target;
+ if (dialog.returnValue == "continue" && this.$root.error_url_after) {
+ if (this.$root.error_url_after_new_tab) {
+ window.open(this.$root.error_url_after);
+ } else if (this.$root.overlay) {
+ this.$root.overlay.frame_src = this.$root.error_url_after;
+ this.$root.frame_loading = true;
+ }
+ }
this.$root.error_message = null;
this.$root.error_url_after = null;
this.$root.error_url_after_new_tab = false;
},
- errorContinue: function () {
- if (this.$root.error_url_after_new_tab) {
- window.open(this.$root.error_url_after);
+ close: function (e) {
+ if (this.$root.frame_loading) {
+ // Chrome does not allow blocking dialog.cancel event more than once
+ // => wiggle the loading-element and re-open the modal
+ this.cancel(e);
+ e.target.showModal();
return;
}
- this.$root.overlay.frame_src = this.$root.error_url_after;
- this.$root.frame_loading = true;
- this.$root.error_message = null;
- this.$root.error_url_after = null;
- },
- close: function () {
this.$root.frame_shown = false;
this.$root.parent.frame_dismissed = true;
this.$root.frame_src = "";
this.$root.parent.reload();
this.$root.parent.trigger_close_callback();
},
+ cancel: function (e) {
+ // do not allow to cancel while frame is loading as we cannot abort the operation
+ if (this.$root.frame_loading) {
+ e.preventDefault();
+ e.target.addEventListener("animationend", function () {
+ e.target.classList.remove("pretix-widget-shake-once");
+ }, {once: true});
+ e.target.classList.add("pretix-widget-shake-once");
+ this.cancelBlocked = true;
+ }
+ },
iframeLoaded: function () {
if (this.$root.frame_loading) {
this.$root.frame_loading = false;
+ this.cancelBlocked = false;
if (this.$root.frame_src) {
this.$root.frame_shown = true;
}
}
},
- focusButton: function () {
- this.$el.querySelector(".pretix-widget-alert-box button").focus();
- },
-
}
});
@@ -1033,13 +1026,11 @@ Vue.component('pretix-widget-event-form', {
+ ''
// Resume cart
- + ''
+ + ''
// Seating plan
@@ -1067,7 +1058,10 @@ Vue.component('pretix-widget-event-form', {
// Buy button
+ ''
+ ''
@@ -1079,7 +1073,7 @@ Vue.component('pretix-widget-event-form', {
+ ''+ strings['redeem_voucher'] +'
'
+ ''
+ ''
+ ''
+ ''
),
+ data: function () {
+ return {
+ is_items_selected: false,
+ }
+ },
+ watch: {
+ '$root.overlay.frame_shown': function (newValue) {
+ if (!newValue) {
+ this.$refs.form.reset();
+ this.calc_items_selected();
+ }
+ }
+ },
mounted: function() {
- this.$root.$on('focus_voucher_field', this.focus_voucher_field)
+ this.$root.$on('focus_voucher_field', this.focus_voucher_field);
+ this.$refs.form.addEventListener("change", this.calc_items_selected);
},
beforeDestroy: function() {
- this.$root.$off('focus_voucher_field', this.focus_voucher_field)
+ this.$root.$off('focus_voucher_field', this.focus_voucher_field);
+ this.$refs.form.removeEventListener("change", this.calc_items_selected);
},
computed: {
- aria_labelledby: function() {
+ id_voucher_input: function () {
+ return this.$root.html_id + '-voucher-input';
+ },
+ aria_labelledby: function () {
return this.$root.html_id + '-voucher-headline';
},
display_event_info: function () {
@@ -1143,10 +1155,6 @@ Vue.component('pretix-widget-event-form', {
},
},
methods: {
- focus_voucher_field: function() {
- this.$refs.voucherinput.scrollIntoView(false)
- this.$refs.voucherinput.focus()
- },
back_to_list: function() {
this.$root.target_url = this.$root.parent_stack.pop();
this.$root.error = null;
@@ -1173,32 +1181,26 @@ Vue.component('pretix-widget-event-form', {
$el.focus();
});
},
+ calc_items_selected: function () {
+ this.is_items_selected = [...this.$refs.form.querySelectorAll("input[type=checkbox], input[type=radio]")].some(function(element) {
+ return element.checked;
+ }) || [...this.$refs.form.querySelectorAll(".pretix-widget-item-count-group input")].some(function(element) {
+ return parseInt(element.value || "0") > 0;
+ });
+ },
}
});
Vue.component('pretix-widget-event-list-filter-field', {
template: (''),
props: {
field: Object
},
- methods: {
- onChange: function(event) {
- var filterParams = new URLSearchParams(this.$root.filter);
- if (event.target.value) {
- filterParams.set(this.field.key, event.target.value);
- } else {
- filterParams.delete(this.field.key);
- }
- this.$root.filter = filterParams.toString();
- this.$root.loading++;
- this.$root.reload();
- },
- },
computed: {
id: function () {
return widget_id + "_" + this.field.key;
@@ -1211,9 +1213,29 @@ Vue.component('pretix-widget-event-list-filter-field', {
});
Vue.component('pretix-widget-event-list-filter-form', {
- template: (''),
+ template: (''),
+ methods: {
+ onSubmit: function(e) {
+ e.preventDefault();
+ var formData = new FormData(this.$refs.filterform);
+ var filterParams = new URLSearchParams(formData);
+ formData.forEach(function (value, key) {
+ if (value == "") {
+ filterParams.delete(key);
+ }
+ });
+
+ this.$root.filter = filterParams.toString();
+ this.$root.loading++;
+ this.$root.reload();
+ },
+ },
});
Vue.component('pretix-widget-event-list-entry', {
@@ -1740,7 +1762,7 @@ Vue.component('pretix-widget', {
return {
'pretix-widget': true,
'pretix-widget-mobile': this.mobile,
- 'pretix-widget-use-custom-spinners': !this.$root.use_native_spinners
+ 'pretix-widget-use-custom-spinners': true,
};
}
}
@@ -1902,7 +1924,6 @@ var shared_root_methods = {
root.categories = data.items_by_category;
root.currency = data.currency;
root.display_net_prices = data.display_net_prices;
- root.use_native_spinners = data.use_native_spinners;
root.voucher_explanation_text = data.voucher_explanation_text;
root.error = data.error;
root.display_add_to_cart = data.display_add_to_cart;
@@ -2161,28 +2182,11 @@ var create_overlay = function (app) {
// show loading spinner only when previously no frame_src was set
if (newValue && !oldValue) {
this.frame_loading = true;
+ this.$el?.querySelector('dialog.pretix-widget-frame-holder').showModal();
}
// to close and unload the iframe, frame_src can be empty -> make it valid HTML with about:blank
this.$el.querySelector("iframe").src = newValue || "about:blank";
},
- frame_shown: function (newValue) {
- if (newValue) {
- this.prevActiveElement = document.activeElement;
- var btn = this.$el?.querySelector(".pretix-widget-frame-close a");
- this.$nextTick(function () {
- btn?.focus();
- });
- } else {
- this.prevActiveElement?.focus();
- }
- },
- error_message: function (newValue) {
- if (newValue) {
- this.prevActiveElement = document.activeElement;
- } else {
- this.prevActiveElement?.focus();
- }
- },
}
});
app.$root.overlay = framechild;
@@ -2228,7 +2232,6 @@ var create_widget = function (element, html_id=null) {
var items = element.attributes.items ? element.attributes.items.value : null;
var variations = element.attributes.variations ? element.attributes.variations.value : null;
var categories = element.attributes.categories ? element.attributes.categories.value : null;
- var single_item_select = element.getAttribute("single-item-select") || "checkbox";
for (var i = 0; i < element.attributes.length; i++) {
var attrib = element.attributes[i];
if (attrib.name.match(/^data-.*$/)) {
@@ -2275,8 +2278,6 @@ var create_widget = function (element, html_id=null) {
variation_filter: variations,
voucher_code: voucher,
display_net_prices: false,
- use_native_spinners: false,
- single_item_select: single_item_select,
voucher_explanation_text: null,
show_variations_expanded: !!variations,
skip_ssl: skip_ssl,
diff --git a/src/pretix/static/pretixpresale/js/widget/widget.v1.js b/src/pretix/static/pretixpresale/js/widget/widget.v1.js
new file mode 100644
index 000000000..260606e94
--- /dev/null
+++ b/src/pretix/static/pretixpresale/js/widget/widget.v1.js
@@ -0,0 +1,2504 @@
+/*global siteglobals, module, lang, django*/
+/* PRETIX WIDGET BEGINS HERE */
+/* This is embedded in an isolation wrapper that exposes siteglobals as the global
+ scope. */
+
+window.PretixWidget = {
+ 'build_widgets': true,
+ 'widget_data': {
+ 'referer': location.href
+ }
+};
+
+var Vue = module.exports;
+
+var strings = {
+ 'quantity': django.pgettext('widget', 'Quantity'),
+ 'quantity_dec': django.pgettext('widget', 'Decrease quantity'),
+ 'quantity_inc': django.pgettext('widget', 'Increase quantity'),
+ 'price': django.pgettext('widget', 'Price'),
+ 'original_price': django.pgettext('widget', 'Original price: %s'),
+ 'new_price': django.pgettext('widget', 'New price: %s'),
+ 'select': django.pgettext('widget', 'Select'),
+ 'select_item': django.pgettext('widget', 'Select %s'),
+ 'select_variant': django.pgettext('widget', 'Select variant %s'),
+ 'sold_out': django.pgettext('widget', 'Sold out'),
+ 'buy': django.pgettext('widget', 'Buy'),
+ 'register': django.pgettext('widget', 'Register'),
+ 'reserved': django.pgettext('widget', 'Reserved'),
+ 'free': django.pgettext('widget', 'FREE'),
+ 'price_from': django.pgettext('widget', 'from %(currency)s %(price)s'),
+ 'image_of': django.pgettext('widget', 'Image of %s'),
+ 'tax_incl': django.pgettext('widget', 'incl. %(rate)s% %(taxname)s'),
+ 'tax_plus': django.pgettext('widget', 'plus %(rate)s% %(taxname)s'),
+ 'tax_incl_mixed': django.pgettext('widget', 'incl. taxes'),
+ 'tax_plus_mixed': django.pgettext('widget', 'plus taxes'),
+ 'quota_left': django.pgettext('widget', 'currently available: %s'),
+ 'unavailable_require_voucher': django.pgettext('widget', 'Only available with a voucher'),
+ 'unavailable_available_from': django.pgettext('widget', 'Not yet available'),
+ 'unavailable_available_until': django.pgettext('widget', 'Not available anymore'),
+ 'unavailable_active': django.pgettext('widget', 'Currently not available'),
+ 'unavailable_hidden_if_item_available': django.pgettext('widget', 'Not yet available'),
+ 'order_min': django.pgettext('widget', 'minimum amount to order: %s'),
+ 'exit': django.pgettext('widget', 'Close ticket shop'),
+ 'loading_error': django.pgettext('widget', 'The ticket shop could not be loaded.'),
+ 'loading_error_429': django.pgettext('widget', 'There are currently a lot of users in this ticket shop. Please ' +
+ 'open the shop in a new tab to continue.'),
+ 'open_new_tab': django.pgettext('widget', 'Open ticket shop'),
+ 'checkout': django.pgettext('widget', 'Checkout'),
+ 'cart_error': django.pgettext('widget', 'The cart could not be created. Please try again later'),
+ 'cart_error_429': django.pgettext('widget', 'We could not create your cart, since there are currently too many ' +
+ 'users in this ticket shop. Please click "Continue" to retry in a new tab.'),
+ 'waiting_list': django.pgettext('widget', 'Waiting list'),
+ 'cart_exists': django.pgettext('widget', 'You currently have an active cart for this event. If you select more' +
+ ' products, they will be added to your existing cart.'),
+ 'resume_checkout': django.pgettext('widget', 'Resume checkout'),
+ 'redeem_voucher': django.pgettext('widget', 'Redeem a voucher'),
+ 'redeem': django.pgettext('widget', 'Redeem'),
+ 'voucher_code': django.pgettext('widget', 'Voucher code'),
+ 'close': django.pgettext('widget', 'Close'),
+ 'continue': django.pgettext('widget', 'Continue'),
+ 'variations': django.pgettext('widget', 'Show variants'),
+ 'hide_variations': django.pgettext('widget', 'Hide variants'),
+ 'back_to_list': django.pgettext('widget', 'Choose a different event'),
+ 'back_to_dates': django.pgettext('widget', 'Choose a different date'),
+ 'back': django.pgettext('widget', 'Back'),
+ 'next_month': django.pgettext('widget', 'Next month'),
+ 'previous_month': django.pgettext('widget', 'Previous month'),
+ 'next_week': django.pgettext('widget', 'Next week'),
+ 'previous_week': django.pgettext('widget', 'Previous week'),
+ 'show_seating': django.pgettext('widget', 'Open seat selection'),
+ 'seating_plan_waiting_list': django.pgettext('widget', 'Some or all ticket categories are currently sold out. If you want, you can add yourself to the waiting list. We will then notify if seats are available again.'),
+ 'load_more': django.pgettext('widget', 'Load more'),
+ 'days': {
+ 'MO': django.gettext('Mo'),
+ 'TU': django.gettext('Tu'),
+ 'WE': django.gettext('We'),
+ 'TH': django.gettext('Th'),
+ 'FR': django.gettext('Fr'),
+ 'SA': django.gettext('Sa'),
+ 'SU': django.gettext('Su'),
+ 'MONDAY': django.gettext('Monday'),
+ 'TUESDAY': django.gettext('Tuesday'),
+ 'WEDNESDAY': django.gettext('Wednesday'),
+ 'THURSDAY': django.gettext('Thursday'),
+ 'FRIDAY': django.gettext('Friday'),
+ 'SATURDAY': django.gettext('Saturday'),
+ 'SUNDAY': django.gettext('Sunday'),
+ },
+ 'months': {
+ '01': django.gettext('January'),
+ '02': django.gettext('February'),
+ '03': django.gettext('March'),
+ '04': django.gettext('April'),
+ '05': django.gettext('May'),
+ '06': django.gettext('June'),
+ '07': django.gettext('July'),
+ '08': django.gettext('August'),
+ '09': django.gettext('September'),
+ '10': django.gettext('October'),
+ '11': django.gettext('November'),
+ '12': django.gettext('December'),
+ }
+};
+
+var setCookie = function (cname, cvalue, exdays) {
+ var d = new Date();
+ d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
+ var expires = "expires=" + d.toUTCString();
+ document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
+};
+var getCookie = function (name) {
+ var value = "; " + document.cookie;
+ var parts = value.split("; " + name + "=");
+ if (parts.length == 2) return parts.pop().split(";").shift() || null;
+ else return null;
+};
+
+var padNumber = function(number, size) {
+ var s = String(number);
+ while (s.length < (size || 2)) {s = "0" + s;}
+ return s;
+};
+
+var getISOWeeks = function (y) {
+ var d, isLeap;
+
+ d = new Date(y, 0, 1);
+ isLeap = new Date(y, 1, 29).getMonth() === 1;
+
+ //check for a Jan 1 that's a Thursday or a leap year that has a
+ //Wednesday jan 1. Otherwise it's 52
+ return d.getDay() === 4 || isLeap && d.getDay() === 3 ? 53 : 52
+};
+
+/* HTTP API Call helpers */
+var api = {
+ '_getJSON': function (endpoint, callback, err_callback) {
+ var xhr = new window.XMLHttpRequest();
+ xhr.open("GET", endpoint, true);
+ xhr.onload = function (e) {
+ if (xhr.readyState === 4) {
+ if (xhr.status === 200) {
+ callback(JSON.parse(xhr.responseText), xhr);
+ } else {
+ err_callback(xhr, e);
+ }
+ }
+ };
+ xhr.onerror = function (e) {
+ console.error(xhr.statusText);
+ err_callback(xhr, e);
+ };
+ xhr.send(null);
+ },
+
+ '_postFormJSON': function (endpoint, form, callback, err_callback) {
+ var params = [].filter.call(form.elements, function (el) {
+ return (el.type !== 'checkbox' && el.type !== 'radio') || el.checked;
+ })
+ .filter(function (el) {
+ return !!el.name && !!el.value;
+ })
+ .filter(function (el) {
+ return !el.disabled;
+ })
+ .map(function (el) {
+ return encodeURIComponent(el.name) + '=' + encodeURIComponent(el.value);
+ }).join('&');
+
+ var xhr = new window.XMLHttpRequest();
+ xhr.open("POST", endpoint, true);
+ xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+ xhr.onload = function (e) {
+ if (xhr.readyState === 4) {
+ if (xhr.status === 200) {
+ callback(JSON.parse(xhr.responseText));
+ } else {
+ err_callback(xhr, e);
+ }
+ }
+ };
+ xhr.onerror = function (e) {
+ err_callback(xhr, e);
+ };
+ xhr.send(params);
+ }
+};
+
+var makeid = function (length) {
+ var text = "";
+ var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+
+ for (var i = 0; i < length; i++) {
+ text += possible.charAt(Math.floor(Math.random() * possible.length));
+ }
+
+ return text;
+};
+
+var site_is_secure = function () {
+ return /https.*/.test(document.location.protocol)
+};
+
+var widget_id = makeid(16);
+
+/* Vue Components */
+Vue.component('availbox', {
+ template: (''),
+ props: {
+ item: Object,
+ variation: Object
+ },
+ mounted: function() {
+ if (this.item.has_variations) {
+ this.$set(this.variation, 'amount_selected', 0);
+ } else {
+ // Automatically set the only available item to be selected.
+ this.$set(this.item, 'amount_selected', this.$root.itemnum === 1 && !this.$root.has_seating_plan ? 1 : 0);
+ }
+ this.$root.$emit('amounts_changed')
+ },
+ computed: {
+ aria_labelledby: function () {
+ return this.$root.html_id + '-item-label-' + this.item.id;
+ },
+ dec_label: function () {
+ return '- ' + (this.item.has_variations ? this.variation.value : this.item.name) + ': ' + strings.quantity_dec;
+ },
+ inc_label: function () {
+ return '+ ' + (this.item.has_variations ? this.variation.value : this.item.name) + ': ' + strings.quantity_inc;
+ },
+ count_group_classes: function () {
+ return {
+ 'pretix-widget-item-count-group': !this.$root.use_native_spinners
+ }
+ },
+ unavailability_reason_message: function () {
+ var reason = this.item.current_unavailability_reason || this.variation?.current_unavailability_reason;
+ if (reason) {
+ return strings["unavailable_" + reason] || reason;
+ }
+ return "";
+ },
+ amount_selected: {
+ cache: false,
+ get: function () {
+ var selected = this.item.has_variations ? this.variation.amount_selected : this.item.amount_selected
+ if (selected === 0) return undefined;
+ return selected
+ },
+ set: function (value) {
+ // Unary operator to force boolean to integer conversion, as the HTML form submission
+ // needs the value to be integer for all products.
+ value = (+value);
+ if (this.item.has_variations) {
+ this.variation.amount_selected = value;
+ } else {
+ this.item.amount_selected = value;
+ }
+ if (this.$refs.quantity) {
+ // manually set value on quantity as on reload somehow v-model binding breaks
+ this.$refs.quantity.value = value;
+ }
+ this.$root.$emit("amounts_changed")
+ }
+ },
+ label_select_item: function () {
+ return this.item.has_variations
+ ? strings.select_variant.replace("%s", this.variation.value)
+ : strings.select_item.replace("%s", this.item.name)
+ },
+ input_name: function () {
+ if (this.item.has_variations) {
+ return 'variation_' + this.item.id + '_' + this.variation.id;
+ } else {
+ return 'item_' + this.item.id;
+ }
+ },
+ order_max: function () {
+ return this.item.has_variations ? this.variation.order_max : this.item.order_max;
+ },
+ avail: function () {
+ return this.item.has_variations ? this.variation.avail : this.item.avail;
+ },
+ waiting_list_show: function () {
+ return this.avail[0] < 100 && this.$root.waiting_list_enabled && this.item.allow_waitinglist;
+ },
+ waiting_list_url: function () {
+ var u
+ if (this.item.has_variations) {
+ u = this.$root.target_url + 'w/' + widget_id + '/waitinglist/?item=' + this.item.id + '&var=' + this.variation.id + '&widget_data=' + encodeURIComponent(this.$root.widget_data_json) + this.$root.consent_parameter;
+ } else {
+ u = this.$root.target_url + 'w/' + widget_id + '/waitinglist/?item=' + this.item.id + '&widget_data=' + encodeURIComponent(this.$root.widget_data_json) + this.$root.consent_parameter;
+ }
+ if (this.$root.subevent) {
+ u += '&subevent=' + this.$root.subevent
+ }
+ return u
+ }
+ },
+ methods: {
+ focus_voucher_field: function () {
+ this.$root.$emit('focus_voucher_field')
+ },
+ on_step: function (e) {
+ var t = e.target.tagName == 'BUTTON' ? e.target : e.target.closest('button');
+ var step = parseFloat(t.getAttribute("data-step"));
+ var controls = document.getElementById(t.getAttribute("data-controls"));
+ this.amount_selected = Math.max(controls.min, Math.min(controls.max || Number.MAX_SAFE_INTEGER, (this.amount_selected || 0) + step));
+ }
+ }
+});
+Vue.component('pricebox', {
+ template: (''),
+ props: {
+ price: Object,
+ free_price: Boolean,
+ field_name: String,
+ suggested_price: Object,
+ original_price: String,
+ mandatory_priced_addons: Boolean,
+ item_id: Number,
+ },
+ methods: {
+ stripHTML: function (s) {
+ var div = document.createElement('div');
+ div.innerHTML = s;
+ return div.textContent || div.innerText || '';
+ },
+ },
+ computed: {
+ aria_labelledby: function () {
+ return [
+ this.$root.html_id + '-item-label-' + this.item_id,
+ this.price_box_id
+ ].join(" ");
+ },
+ price_box_id: function () {
+ return this.$root.html_id + '-item-pricebox-' + this.item_id;
+ },
+ price_desc_id: function () {
+ return this.$root.html_id + '-item-pricedesc-' + this.item_id;
+ },
+ display_price: function () {
+ if (this.$root.display_net_prices) {
+ return floatformat(parseFloat(this.price.net), 2);
+ } else {
+ return floatformat(parseFloat(this.price.gross), 2);
+ }
+ },
+ display_price_nonlocalized: function () {
+ if (this.$root.display_net_prices) {
+ return parseFloat(this.price.net).toFixed(2);
+ } else {
+ return parseFloat(this.price.gross).toFixed(2);
+ }
+ },
+ suggested_price_nonlocalized: function () {
+ var price = this.suggested_price;
+ if (price === null) {
+ price = this.price;
+ }
+ if (this.$root.display_net_prices) {
+ return parseFloat(price.net).toFixed(2);
+ } else {
+ return parseFloat(price.gross).toFixed(2);
+ }
+ },
+ original_price_aria_label: function () {
+ return django.interpolate(strings.original_price, [this.stripHTML(this.original_line)]);
+ },
+ new_price_aria_label: function () {
+ return django.interpolate(strings.new_price, [this.stripHTML(this.priceline)]);
+ },
+ original_line: function () {
+ return ' " + floatformat(parseFloat(this.original_price), 2);
+ },
+ priceline: function () {
+ if (this.price.gross === "0.00") {
+ if (this.mandatory_priced_addons && !this.original_price) {
+ return "\xA0"; // nbsp, because an empty string would cause the HTML element to collapse
+ }
+ return strings.free;
+ } else {
+ return ' " + this.display_price;
+ }
+ },
+ taxline: function () {
+ if (this.$root.display_net_prices) {
+ if (this.price.includes_mixed_tax_rate) {
+ return strings.tax_plus_mixed;
+ } else {
+ return django.interpolate(strings.tax_plus, {
+ 'rate': autofloatformat(this.price.rate, 2),
+ 'taxname': this.price.name
+ }, true);
+ }
+ } else {
+ if (this.price.includes_mixed_tax_rate) {
+ return strings.tax_incl_mixed;
+ } else {
+ return django.interpolate(strings.tax_incl, {
+ 'rate': autofloatformat(this.price.rate, 2),
+ 'taxname': this.price.name
+ }, true);
+ }
+ }
+ }
+ }
+});
+Vue.component('variation', {
+ template: (''),
+ props: {
+ variation: Object,
+ item: Object,
+ category: Object,
+ },
+ computed: {
+ orig_price: function () {
+ if (this.variation.original_price) {
+ return this.variation.original_price;
+ }
+ return this.item.original_price;
+ },
+ quota_left_str: function () {
+ return django.interpolate(strings["quota_left"], [this.variation.avail[1]]);
+ },
+ variation_label_id: function () {
+ return this.$root.html_id + '-variation-label-' + this.item.id + '-' + this.variation.id;
+ },
+ variation_desc_id: function () {
+ return this.$root.html_id + '-variation-desc-' + this.item.id + '-' + this.variation.id;
+ },
+ variation_price_id: function () {
+ return this.$root.html_id + '-variation-price-' + this.item.id + '-' + this.variation.id;
+ },
+ aria_labelledby: function () {
+ return [this.variation_label_id, this.variation_price_id].join(" ");
+ },
+ headingLevel: function () {
+ return this.category.name ? '5' : '4';
+ },
+ }
+});
+Vue.component('item', {
+ template: (''
+ + ''
+
+ // Product description
+ + ''
+ + '![]()
'
+ + ''
+ + ''
+
+ // Price
+ + ''
+
+ // Availability
+ + ''
+
+ + ''
+ + ''
+
+ // Variations
+ + ''
+ + ''
+ + ' '
+ + ''
+
+ + ''),
+ props: {
+ item: Object,
+ category: Object,
+ },
+ data: function () {
+ return {
+ expanded: this.$root.show_variations_expanded
+ };
+ },
+ mounted: function () {
+ if (this.$refs.variations) {
+ if (!this.expanded) {
+ var $this = this;
+ this.$refs.variations.hidden = true;
+ this.$refs.variations.addEventListener('transitionend', function (event) {
+ if (event.target == this) {
+ this.hidden = !$this.expanded;
+ this.style.maxHeight = 'none';
+ }
+ });
+ this.$watch('expanded', function (newValue) {
+ var v = this.$refs.variations;
+ v.hidden = false;
+ v.style.maxHeight = (newValue ? 0 : v.scrollHeight) + 'px';
+ // Vue.nextTick does not work here
+ window.setTimeout(function () {
+ v.style.maxHeight = (!newValue ? 0 : v.scrollHeight) + 'px';
+ }, 50);
+ })
+ }
+ }
+ },
+ methods: {
+ expand: function () {
+ this.expanded = !this.expanded;
+ },
+ lightbox: function () {
+ this.$root.overlay.lightbox = {
+ image: this.item.picture_fullsize,
+ description: this.item.name,
+ }
+ }
+ },
+ computed: {
+ classObject: function () {
+ return {
+ 'pretix-widget-item': true,
+ 'pretix-widget-item-with-picture': !!this.item.picture,
+ 'pretix-widget-item-with-variations': this.item.has_variations
+ }
+ },
+ varClasses: function () {
+ return {
+ 'pretix-widget-item-variations': true,
+ 'pretix-widget-item-variations-expanded': this.expanded,
+ }
+ },
+ picture_alt_text: function () {
+ return django.interpolate(strings["image_of"], [this.item.name]);
+ },
+ headingLevel: function () {
+ return this.category.name ? '4' : '3';
+ },
+ item_label_id: function () {
+ return this.$root.html_id + '-item-label-' + this.item.id;
+ },
+ item_desc_id: function () {
+ return this.$root.html_id + '-item-desc-' + this.item.id;
+ },
+ item_price_id: function () {
+ return this.$root.html_id + '-item-price-' + this.item.id;
+ },
+ aria_labelledby: function () {
+ return [this.item_label_id, this.item_price_id].join(" ");
+ },
+ min_order_str: function () {
+ return django.interpolate(strings["order_min"], [this.item.order_min]);
+ },
+ quota_left_str: function () {
+ return django.interpolate(strings["quota_left"], [this.item.avail[1]]);
+ },
+ show_toggle: function () {
+ return this.item.has_variations && !this.$root.show_variations_expanded;
+ },
+ pricerange: function () {
+ if (this.item.free_price) {
+ return django.interpolate(strings.price_from, {
+ 'currency': this.$root.currency,
+ 'price': floatformat(this.item.min_price, 2)
+ }, true).replace(this.$root.currency, '');
+ } else if (this.item.min_price !== this.item.max_price) {
+ return ' "
+ + floatformat(this.item.min_price, 2) + " – "
+ + floatformat(this.item.max_price, 2);
+ } else if (this.item.min_price === "0.00" && this.item.max_price === "0.00") {
+ if (this.item.mandatory_priced_addons) {
+ return "\xA0"; // nbsp, because an empty string would cause the HTML element to collapse
+ }
+ return strings.free;
+ } else {
+ return ' " + floatformat(this.item.min_price, 2);
+ }
+ },
+ variationsToggleLabel: function () {
+ return this.expanded ? strings.hide_variations : strings.variations;
+ },
+ }
+});
+Vue.component('category', {
+ template: (''),
+ props: {
+ category: Object
+ }
+});
+
+var shared_methods = {
+ buy: function (event) {
+ if (this.$root.useIframe) {
+ if (event) {
+ event.preventDefault();
+ }
+ } else {
+ return;
+ }
+ if (this.$root.is_button && this.$root.items.length === 0) {
+ if (this.$root.voucher_code) {
+ this.voucher_open(this.$root.voucher_code);
+ } else {
+ this.resume();
+ }
+ } else {
+ var url = this.$root.formAction + "&locale=" + lang + "&ajax=1";
+ this.$root.overlay.frame_loading = true;
+
+ this.async_task_interval = 100;
+ var form = this.$refs.form;
+ if (form === undefined) {
+ form = this.$refs.formcomp.$refs.form;
+ }
+ api._postFormJSON(url, form, this.buy_callback, this.buy_error_callback);
+ }
+ },
+ buy_error_callback: function (xhr, data) {
+ if (xhr.status === 429 && typeof xhr.responseURL !== "undefined") {
+ this.$root.overlay.error_message = strings['cart_error_429'];
+ this.$root.overlay.frame_loading = false;
+ this.$root.overlay.error_url_after = this.$root.newTabTarget;
+ this.$root.overlay.error_url_after_new_tab = true;
+ return;
+ }
+ if (xhr.status === 405 && typeof xhr.responseURL !== "undefined") {
+ // Likely a redirect!
+ this.$root.target_url = xhr.responseURL.substr(0, xhr.responseURL.indexOf("/cart/add") - 18);
+ this.$root.overlay.frame_loading = false;
+ this.buy();
+ return;
+ }
+ this.$root.overlay.error_message = strings['cart_error'];
+ this.$root.overlay.frame_loading = false;
+ },
+ buy_check_error_callback: function (xhr, data) {
+ if (xhr.status == 200 || (xhr.status >= 400 && xhr.status < 500)) {
+ this.$root.overlay.error_message = strings['cart_error'];
+ this.$root.overlay.frame_loading = false;
+ } else {
+ this.async_task_timeout = window.setTimeout(this.buy_check, 1000);
+ }
+ },
+ buy_callback: function (data) {
+ if (data.redirect) {
+ if (data.cart_id) {
+ this.$root.cart_id = data.cart_id;
+ setCookie(this.$root.cookieName, data.cart_id, 30);
+ }
+ if (data.redirect.substr(0, 1) === '/') {
+ data.redirect = this.$root.target_url.replace(/^([^\/]+:\/\/[^\/]+)\/.*$/, "$1") + data.redirect;
+ }
+ var url = data.redirect;
+ if (url.indexOf('?')) {
+ url = url + '&iframe=1&locale=' + lang + '&take_cart_id=' + this.$root.cart_id;
+ } else {
+ url = url + '?iframe=1&locale=' + lang + '&take_cart_id=' + this.$root.cart_id;
+ }
+ url += this.$root.consent_parameter;
+ if (this.$root.additionalURLParams) {
+ url += '&' + this.$root.additionalURLParams;
+ }
+ if (data.success === false) {
+ url = url.replace(/checkout\/start/g, "");
+ this.$root.overlay.error_message = data.message;
+ if (data.has_cart) {
+ this.$root.overlay.error_url_after = url;
+ }
+ this.$root.overlay.frame_loading = false;
+ } else {
+ this.$root.overlay.frame_src = url;
+ }
+ } else {
+ this.async_task_id = data.async_id;
+ if (data.check_url) {
+ this.async_task_check_url = this.$root.target_url.replace(/^([^\/]+:\/\/[^\/]+)\/.*$/, "$1") + data.check_url;
+ }
+ this.async_task_timeout = window.setTimeout(this.buy_check, this.async_task_interval);
+ this.async_task_interval = 250;
+ }
+ },
+ buy_check: function () {
+ api._getJSON(this.async_task_check_url, this.buy_callback, this.buy_check_error_callback);
+ },
+ redeem: function (event) {
+ if (this.$root.useIframe) {
+ event.preventDefault();
+ this.voucher_open(this.voucher);
+ }
+ },
+ voucher_open: function (voucher) {
+ var redirect_url = this.$root.voucherFormTarget + '&voucher=' + encodeURIComponent(voucher);
+ if (this.$root.useIframe) {
+ this.$root.overlay.frame_src = redirect_url;
+ } else {
+ window.open(redirect_url);
+ }
+ },
+ resume: function () {
+ var redirect_url;
+ redirect_url = this.$root.target_url + 'w/' + widget_id + '/';
+ if (this.$root.subevent && !this.$root.cart_id) {
+ // button with subevent but no items
+ redirect_url += this.$root.subevent + '/';
+ }
+ redirect_url += '?iframe=1&locale=' + lang;
+ if (this.$root.cart_id) {
+ redirect_url += '&take_cart_id=' + this.$root.cart_id;
+ }
+ if (this.$root.widget_data) {
+ redirect_url += '&widget_data=' + encodeURIComponent(this.$root.widget_data_json);
+ }
+ redirect_url += this.$root.consent_parameter;
+ if (this.$root.additionalURLParams) {
+ redirect_url += '&' + this.$root.additionalURLParams;
+ }
+ if (this.$root.useIframe) {
+ this.$root.overlay.frame_src = redirect_url;
+ } else {
+ window.open(redirect_url);
+ }
+ },
+};
+
+var shared_widget_data = function () {
+ return {
+ async_task_id: null,
+ async_task_check_url: null,
+ async_task_timeout: null,
+ async_task_interval: 100,
+ voucher: null,
+ mobile: false,
+ }
+};
+
+var shared_loading_fragment = (
+ ''
+);
+
+var shared_iframe_fragment = (
+ ''
+ + ''
+ + ''
+ + ''
+);
+
+var shared_alert_fragment = (
+ ''
+ + ''
+ + ''
+ + ' '
+ + ''
+ + ''
+);
+
+var shared_lightbox_fragment = (
+ ''
+ + ''
+ + ''
+ + ''
+ + '![]()
'
+ + '{{$root.lightbox.description}} '
+ + ' '
+ + ''
+ + ''
+ + ''
+);
+
+Vue.component('pretix-overlay', {
+ template: (''
+ ),
+ watch: {
+ '$root.lightbox': function (newValue, oldValue) {
+ if (newValue) {
+ if (newValue.image != oldValue?.image) {
+ this.$set(newValue, "loading", true);
+ }
+ if (!oldValue) {
+ window.addEventListener('keyup', this.lightboxCloseOnKeyup);
+ }
+ } else {
+ window.removeEventListener('keyup', this.lightboxCloseOnKeyup);
+ }
+ }
+ },
+ computed: {
+ frameClasses: function () {
+ return {
+ 'pretix-widget-frame-holder': true,
+ 'pretix-widget-frame-shown': this.$root.frame_shown || this.$root.frame_loading,
+ };
+ },
+ alertClasses: function () {
+ return {
+ 'pretix-widget-alert-holder': true,
+ 'pretix-widget-alert-shown': this.$root.error_message,
+ };
+ },
+ lightboxClasses: function () {
+ return {
+ 'pretix-widget-lightbox-holder': true,
+ 'pretix-widget-lightbox-shown': this.$root.lightbox,
+ 'pretix-widget-lightbox-isloading': this.$root.lightbox?.loading,
+ };
+ },
+ },
+ methods: {
+ lightboxCloseOnKeyup: function (event) {
+ if (event.keyCode === 27) {
+ // abort on ESC-key
+ this.lightboxClose();
+ }
+ },
+ lightboxClose: function () {
+ this.$root.lightbox = null;
+ },
+ lightboxLoaded: function () {
+ this.$root.lightbox.loading = false;
+ },
+ errorClose: function () {
+ this.$root.error_message = null;
+ this.$root.error_url_after = null;
+ this.$root.error_url_after_new_tab = false;
+ },
+ errorContinue: function () {
+ if (this.$root.error_url_after_new_tab) {
+ window.open(this.$root.error_url_after);
+ return;
+ }
+ this.$root.overlay.frame_src = this.$root.error_url_after;
+ this.$root.frame_loading = true;
+ this.$root.error_message = null;
+ this.$root.error_url_after = null;
+ },
+ close: function () {
+ this.$root.frame_shown = false;
+ this.$root.parent.frame_dismissed = true;
+ this.$root.frame_src = "";
+ this.$root.parent.reload();
+ this.$root.parent.trigger_close_callback();
+ },
+ iframeLoaded: function () {
+ if (this.$root.frame_loading) {
+ this.$root.frame_loading = false;
+ if (this.$root.frame_src) {
+ this.$root.frame_shown = true;
+ }
+ }
+ },
+ focusButton: function () {
+ this.$el.querySelector(".pretix-widget-alert-box button").focus();
+ },
+
+ }
+});
+
+Vue.component('pretix-widget-event-form', {
+ template: (''
+ ),
+ mounted: function() {
+ this.$root.$on('focus_voucher_field', this.focus_voucher_field)
+ },
+ beforeDestroy: function() {
+ this.$root.$off('focus_voucher_field', this.focus_voucher_field)
+ },
+ computed: {
+ aria_labelledby: function() {
+ return this.$root.html_id + '-voucher-headline';
+ },
+ display_event_info: function () {
+ return this.$root.display_event_info || (this.$root.display_event_info === null && (this.$root.events || this.$root.weeks || this.$root.days));
+ },
+ id_cart_exists_msg: function () {
+ return this.$root.html_id + '-cart-exists';
+ },
+ buy_label: function () {
+ var i, j, k, all_free = true;
+ for (i = 0; i < this.$root.categories.length; i++) {
+ var cat = this.$root.categories[i];
+ for (j = 0; j < cat.items.length; j++) {
+ var item = cat.items[j];
+ for (k = 0; k < item.variations.length; k++) {
+ var v = item.variations[k];
+ if (v.price.gross !== "0.00") {
+ all_free = false;
+ break;
+ }
+ }
+ if ((item.variations.length === 0 && item.price.gross !== "0.00") || item.mandatory_priced_addons) {
+ all_free = false;
+ break;
+ }
+ }
+ if (!all_free) {
+ break;
+ }
+ }
+ if (all_free) {
+ return strings.register;
+ } else {
+ return strings.buy;
+ }
+ },
+ hiddenParams: function () {
+ var params = new URL(this.$root.voucherFormTarget).searchParams;
+ params.delete("iframe");
+ params.delete("take_cart_id");
+ return [...params.entries()];
+ },
+ },
+ methods: {
+ focus_voucher_field: function() {
+ this.$refs.voucherinput.scrollIntoView(false)
+ this.$refs.voucherinput.focus()
+ },
+ back_to_list: function() {
+ this.$root.target_url = this.$root.parent_stack.pop();
+ this.$root.error = null;
+ if (!this.$root.subevent) {
+ // reset if we are not in a series
+ this.$root.name = null;
+ this.$root.frontpage_text = null;
+ }
+ this.$root.subevent = null;
+ this.$root.offset = 0;
+ this.$root.append_events = false;
+ this.$root.trigger_load_callback();
+ if (this.$root.events !== undefined && this.$root.events !== null) {
+ this.$root.view = "events";
+ } else if (this.$root.days !== undefined && this.$root.days !== null) {
+ this.$root.view = "days";
+ } else {
+ this.$root.view = "weeks";
+ }
+
+ var $el = this.$root.$el;
+ this.$root.$nextTick(function() {
+ // wait for redraw, then focus content element for better a11y
+ $el.focus();
+ });
+ },
+ }
+});
+
+Vue.component('pretix-widget-event-list-filter-field', {
+ template: (''),
+ props: {
+ field: Object
+ },
+ methods: {
+ onChange: function(event) {
+ var filterParams = new URLSearchParams(this.$root.filter);
+ if (event.target.value) {
+ filterParams.set(this.field.key, event.target.value);
+ } else {
+ filterParams.delete(this.field.key);
+ }
+ this.$root.filter = filterParams.toString();
+ this.$root.loading++;
+ this.$root.reload();
+ },
+ },
+ computed: {
+ id: function () {
+ return widget_id + "_" + this.field.key;
+ },
+ currentValue: function () {
+ var filterParams = new URLSearchParams(this.$root.filter);
+ return filterParams.get(this.field.key) || "";
+ },
+ },
+});
+
+Vue.component('pretix-widget-event-list-filter-form', {
+ template: (''),
+});
+
+Vue.component('pretix-widget-event-list-entry', {
+ template: (''
+ + ''
+ + ''
+ + '' // hidden by css for now, but
+ // used by a few people
+ + ''
+ + ''),
+ props: {
+ event: Object
+ },
+ computed: {
+ classObject: function () {
+ var o = {
+ 'pretix-widget-event-list-entry': true
+ };
+ o['pretix-widget-event-availability-' + this.event.availability.color] = true;
+ if (this.event.availability.reason) {
+ o['pretix-widget-event-availability-' + this.event.availability.reason] = true;
+ }
+ return o
+ },
+ location: function () {
+ return this.event.location.replace(/\s*\n\s*/g, ', ');
+ }
+ },
+ methods: {
+ select: function () {
+ this.$root.parent_stack.push(this.$root.target_url);
+ this.$root.target_url = this.event.event_url;
+ this.$root.error = null;
+ this.$root.subevent = this.event.subevent;
+ this.$root.loading++;
+ this.$root.reload();
+ }
+ }
+});
+
+Vue.component('pretix-widget-event-list', {
+ template: (''),
+ computed: {
+ display_event_info: function () {
+ return this.$root.display_event_info || (this.$root.display_event_info === null && this.$root.parent_stack.length > 0);
+ },
+ },
+ methods: {
+ back_to_calendar: function () {
+ // make sure to always focus content element
+ this.$nextTick(function () {
+ this.$root.$el.focus();
+ });
+ this.$root.offset = 0;
+ this.$root.append_events = false;
+ if (this.$root.weeks) {
+ this.$root.events = undefined;
+ this.$root.view = "weeks";
+ this.$root.name = null;
+ this.$root.frontpage_text = null;
+ } else {
+ this.$root.loading++;
+ this.$root.target_url = this.$root.parent_stack.pop();
+ this.$root.error = null;
+ this.$root.reload();
+ }
+ },
+ load_more: function () {
+ this.$root.append_events = true;
+ this.$root.offset += 50;
+ this.$root.loading++;
+ this.$root.reload();
+ }
+ }
+});
+
+Vue.component('pretix-widget-event-calendar-event', {
+ template: (''
+ + ''
+ + '{{ event.name }}'
+ + ''
+ + ''
+ + ''
+ + ''),
+ props: {
+ event: Object,
+ describedby: String,
+ },
+ computed: {
+ classObject: function () {
+ var o = {
+ 'pretix-widget-event-calendar-event': true
+ };
+ o['pretix-widget-event-availability-' + this.event.availability.color] = true;
+ if (this.event.availability.reason) {
+ o['pretix-widget-event-availability-' + this.event.availability.reason] = true;
+ }
+ return o
+ }
+ },
+ methods: {
+ select: function () {
+ this.$root.parent_stack.push(this.$root.target_url);
+ this.$root.target_url = this.event.event_url;
+ this.$root.error = null;
+ this.$root.subevent = this.event.subevent;
+ this.$root.loading++;
+ this.$root.reload();
+ }
+ }
+});
+
+Vue.component('pretix-widget-event-week-cell', {
+ template: (''
+ + ''
+ + ''
+ + ''),
+ props: {
+ day: Object,
+ },
+ methods: {
+ selectDay: function () {
+ if (!this.day || !this.day.events.length || !this.$parent.$parent.$parent.mobile) {
+ return;
+ }
+ if (this.day.events.length === 1) {
+ var ev = this.day.events[0];
+ this.$root.parent_stack.push(this.$root.target_url);
+ this.$root.target_url = ev.event_url;
+ this.$root.error = null;
+ this.$root.subevent = ev.subevent;
+ this.$root.loading++;
+ this.$root.reload();
+ } else {
+ this.$root.events = this.day.events;
+ this.$root.view = "events";
+ }
+ }
+ },
+ computed: {
+ id: function () {
+ return this.day ? this.$root.html_id + '-' + this.day.date : '';
+ },
+ dayhead: function () {
+ if (!this.day) {
+ return;
+ }
+ return this.day.day_formatted;
+ },
+ classObject: function () {
+ var o = {};
+ if (this.day && this.day.events.length > 0) {
+ o['pretix-widget-has-events'] = true;
+ var best = 'red';
+ var all_low = true;
+ for (var i = 0; i < this.day.events.length; i++) {
+ var ev = this.day.events[i];
+ if (ev.availability.color === 'green') {
+ best = 'green';
+ if (ev.availability.reason !== 'low') {
+ all_low = false;
+ }
+ } else if (ev.availability.color === 'orange' && best !== 'green') {
+ best = 'orange'
+ }
+ }
+ o['pretix-widget-day-availability-' + best] = true;
+ if (best === 'green' && all_low) {
+ o['pretix-widget-day-availability-low'] = true;
+ }
+ }
+ return o
+ }
+ }
+});
+
+Vue.component('pretix-widget-event-calendar-cell', {
+ template: (''
+ + ''
+ + ''
+ + ' '),
+ props: {
+ day: Object,
+ },
+ methods: {
+ selectDay: function (e) {
+ if (!this.day || !this.day.events.length || !this.$parent.$parent.$parent.mobile) {
+ return;
+ }
+ e.preventDefault();
+ e.stopPropagation();
+ if (this.day.events.length === 1) {
+ var ev = this.day.events[0];
+ this.$root.parent_stack.push(this.$root.target_url);
+ this.$root.target_url = ev.event_url;
+ this.$root.error = null;
+ this.$root.subevent = ev.subevent;
+ this.$root.loading++;
+ this.$root.reload();
+ } else {
+ this.$root.events = this.day.events;
+ this.$root.view = "events";
+ }
+ },
+ onKeyDown: function (e) {
+ var keyDown = e.key !== undefined ? e.key : e.keyCode;
+ if ( (keyDown === 'Enter' || keyDown === 13) || (['Spacebar', ' '].indexOf(keyDown) >= 0 || keyDown === 32)) {
+ // (prevent default so the page doesn't scroll when pressing space)
+ e.preventDefault();
+ this.selectDay(e);
+ }
+ },
+ },
+ mounted: function () {
+ if (this.role == 'button') {
+ this.$el.addEventListener("click", this.selectDay);
+ this.$el.addEventListener("keydown", this.onKeyDown);
+ }
+ },
+ watch: {
+ role: function (newValue) {
+ if (newValue == 'button') {
+ this.$el.addEventListener("click", this.selectDay);
+ this.$el.addEventListener("keydown", this.onKeyDown);
+ } else {
+ this.$el.removeEventListener("click", this.selectDay);
+ this.$el.removeEventListener("keydown", this.onKeyDown);
+ }
+ }
+ },
+ computed: {
+ role: function () {
+ return (!this.day || !this.day.events.length || !this.$parent.$parent.$parent.mobile) ? 'cell' : 'button';
+ },
+ tabindex: function () {
+ return this.role == 'button' ? '0' : '-1';
+ },
+ daynum: function () {
+ if (!this.day) {
+ return;
+ }
+ return this.day.date.substr(8);
+ },
+ date: function () {
+ return this.day ? (new Date(this.day.date)).toLocaleDateString() : '';
+ },
+ classObject: function () {
+ var o = {};
+ if (this.day && this.day.events.length > 0) {
+ o['pretix-widget-has-events'] = true;
+ var best = 'red';
+ var all_low = true;
+ for (var i = 0; i < this.day.events.length; i++) {
+ var ev = this.day.events[i];
+ if (ev.availability.color === 'green') {
+ best = 'green';
+ if (ev.availability.reason !== 'low') {
+ all_low = false;
+ }
+ } else if (ev.availability.color === 'orange' && best !== 'green') {
+ best = 'orange'
+ }
+ }
+ o['pretix-widget-day-availability-' + best] = true;
+ if (best === 'green' && all_low) {
+ o['pretix-widget-day-availability-low'] = true;
+ }
+ }
+ return o
+ }
+ }
+});
+
+Vue.component('pretix-widget-event-calendar-row', {
+ template: (''
+ + ' '),
+ props: {
+ week: Array
+ },
+});
+
+Vue.component('pretix-widget-event-calendar', {
+ template: (''),
+ computed: {
+ display_event_info: function () {
+ return this.$root.display_event_info || (this.$root.display_event_info === null && this.$root.parent_stack.length > 0);
+ },
+ monthname: function () {
+ return strings['months'][this.$root.date.substr(5, 2)] + ' ' + this.$root.date.substr(0, 4);
+ },
+ id: function () {
+ return this.$root.html_id + "-event-calendar-table";
+ },
+ },
+ methods: {
+ back_to_list: function () {
+ this.$root.weeks = undefined;
+ this.$root.view = "events";
+ this.$root.name = null;
+ this.$root.frontpage_text = null;
+ },
+ prevmonth: function () {
+ var curMonth = parseInt(this.$root.date.substr(5, 2));
+ var curYear = parseInt(this.$root.date.substr(0, 4));
+ curMonth--;
+ if (curMonth < 1) {
+ curMonth = 12;
+ curYear--;
+ }
+ this.$root.date = String(curYear) + "-" + padNumber(curMonth, 2) + "-01";
+ this.$root.loading++;
+ this.$root.reload({focus: '#'+this.id});
+ },
+ nextmonth: function () {
+ var curMonth = parseInt(this.$root.date.substr(5, 2));
+ var curYear = parseInt(this.$root.date.substr(0, 4));
+ curMonth++;
+ if (curMonth > 12) {
+ curMonth = 1;
+ curYear++;
+ }
+ this.$root.date = String(curYear) + "-" + padNumber(curMonth, 2) + "-01";
+ this.$root.loading++;
+ this.$root.reload({focus: '#'+this.id});
+ }
+ },
+});
+
+Vue.component('pretix-widget-event-week-calendar', {
+ template: (''
+ + ''),
+ computed: {
+ display_event_info: function () {
+ return this.$root.display_event_info || (this.$root.display_event_info === null && this.$root.parent_stack.length > 0);
+ },
+ weekname: function () {
+ var curWeek = this.$root.week[1];
+ var curYear = this.$root.week[0];
+ return curWeek + ' / ' + curYear;
+ },
+ id: function () {
+ return this.$root.html_id + "-event-week-table";
+ },
+ },
+ methods: {
+ back_to_list: function () {
+ this.$root.weeks = undefined;
+ this.$root.name = null;
+ this.$root.frontpage_text = null;
+ this.$root.view = "events";
+ },
+ prevweek: function () {
+ var curWeek = this.$root.week[1];
+ var curYear = this.$root.week[0];
+ curWeek--;
+ if (curWeek < 1) {
+ curYear--;
+ curWeek = getISOWeeks(curYear);
+ }
+ this.$root.week = [curYear, curWeek];
+ this.$root.loading++;
+ this.$root.reload({focus: '#'+this.id});
+ },
+ nextweek: function () {
+ var curWeek = this.$root.week[1];
+ var curYear = this.$root.week[0];
+ curWeek++;
+ if (curWeek > getISOWeeks(curYear)) {
+ curWeek = 1;
+ curYear++;
+ }
+ this.$root.week = [curYear, curWeek];
+ this.$root.loading++;
+ this.$root.reload({focus: '#'+this.id});
+ }
+ },
+});
+
+Vue.component('pretix-widget', {
+ template: (''
+ + ''
+ ),
+ data: shared_widget_data,
+ methods: shared_methods,
+ mounted: function () {
+ var thisObj = this;
+ if ("ResizeObserver" in window) {
+ var resizeObserver = new ResizeObserver(function(entries) {
+ thisObj.mobile = entries[0].contentRect.width <= 800;
+ });
+ resizeObserver.observe(this.$refs.wrapper);
+ } else {
+ this.mobile = this.$refs.wrapper.clientWidth <= 800;
+ var debounce;
+ window.addEventListener("resize", function() {
+ if (debounce) clearTimeout(debounce);
+ debounce = setTimeout(function () {
+ thisObj.mobile = thisObj.$refs.wrapper.clientWidth <= 800;
+ }, 100);
+ });
+ }
+ },
+ computed: {
+ classObject: function () {
+ return {
+ 'pretix-widget': true,
+ 'pretix-widget-mobile': this.mobile,
+ 'pretix-widget-use-custom-spinners': !this.$root.use_native_spinners
+ };
+ }
+ }
+});
+
+Vue.component('pretix-button', {
+ template: (''
+ + ''
+ ),
+ data: shared_widget_data,
+ methods: shared_methods,
+});
+
+/* Function to create the actual Vue instances */
+
+var shared_root_methods = {
+ open_link_in_frame: function (event) {
+ var url = event.target.attributes.href.value;
+ if (this.$root.additionalURLParams) {
+ if (url.indexOf('?')) {
+ url += '&' + this.$root.additionalURLParams;
+ } else {
+ url += '?' + this.$root.additionalURLParams;
+ }
+ }
+ if (this.$root.useIframe) {
+ event.preventDefault();
+ if (url.indexOf('?')) {
+ url += '&iframe=1';
+ } else {
+ url += '?iframe=1';
+ }
+ this.$root.overlay.frame_src = url;
+ } else {
+ event.target.href = url;
+ return;
+ }
+ },
+ trigger_load_callback: function () {
+ this.$nextTick(function () {
+ for (var i = 0; i < window.PretixWidget._loaded.length; i++) {
+ window.PretixWidget._loaded[i]()
+ }
+ });
+ },
+ trigger_close_callback: function () {
+ this.$nextTick(function () {
+ for (var i = 0; i < window.PretixWidget._closed.length; i++) {
+ window.PretixWidget._closed[i]()
+ }
+ });
+ },
+ reload: function (opt = {}) {
+ var url;
+ if (this.$root.is_button) {
+ return;
+ }
+ if (this.$root.subevent) {
+ url = this.$root.target_url + this.$root.subevent + '/widget/product_list?lang=' + lang;
+ } else {
+ url = this.$root.target_url + 'widget/product_list?lang=' + lang;
+ }
+ if (this.$root.offset) {
+ url += '&offset=' + this.$root.offset;
+ }
+ if (this.$root.filter) {
+ url += '&' + this.$root.filter;
+ }
+ if (this.$root.item_filter) {
+ url += '&items=' + encodeURIComponent(this.$root.item_filter);
+ }
+ if (this.$root.category_filter) {
+ url += '&categories=' + encodeURIComponent(this.$root.category_filter);
+ }
+ if (this.$root.variation_filter) {
+ url += '&variations=' + encodeURIComponent(this.$root.variation_filter);
+ }
+ var cart_id = getCookie(this.cookieName);
+ if (this.$root.voucher_code) {
+ url += '&voucher=' + encodeURIComponent(this.$root.voucher_code);
+ }
+ if (cart_id) {
+ url += "&cart_id=" + encodeURIComponent(cart_id);
+ }
+ if (this.$root.date !== null) {
+ url += "&date=" + this.$root.date.substr(0, 7);
+ } else if (this.$root.week !== null) {
+ url += "&date=" + this.$root.week[0] + "-W" + this.$root.week[1];
+ }
+ if (this.$root.style !== null) {
+ url = url + '&style=' + encodeURIComponent(this.$root.style);
+ }
+ var root = this.$root;
+ api._getJSON(url, function (data, xhr) {
+ if (typeof xhr.responseURL !== "undefined") {
+ var new_url = xhr.responseURL.substr(0, xhr.responseURL.indexOf("/widget/product_list?") + 1);
+ var old_url = url.substr(0, url.indexOf("/widget/product_list?") + 1);
+ if (new_url !== old_url) {
+ if (root.subevent) {
+ new_url = new_url.substr(0, new_url.lastIndexOf("/", new_url.length - 1) + 1);
+ }
+ root.target_url = new_url;
+ root.reload();
+ return;
+ }
+ }
+ root.connection_error = false;
+ if (data.weeks !== undefined) {
+ root.weeks = data.weeks;
+ root.date = data.date;
+ root.week = null;
+ root.events = undefined;
+ root.view = "weeks";
+ root.name = data.name;
+ root.frontpage_text = data.frontpage_text;
+ root.meta_filter_fields = data.meta_filter_fields;
+ } else if (data.days !== undefined) {
+ root.days = data.days;
+ root.date = null;
+ root.week = data.week;
+ root.events = undefined;
+ root.view = "days";
+ root.name = data.name;
+ root.frontpage_text = data.frontpage_text;
+ root.meta_filter_fields = data.meta_filter_fields;
+ } else if (data.events !== undefined) {
+ root.events = root.append_events && root.events ? root.events.concat(data.events) : data.events;
+ root.append_events = false;
+ root.weeks = undefined;
+ root.view = "events";
+ root.name = data.name;
+ root.frontpage_text = data.frontpage_text;
+ root.has_more_events = data.has_more_events;
+ root.meta_filter_fields = data.meta_filter_fields;
+ } else {
+ root.view = "event";
+ // Replace target_url and subevent with canonical values in case they were slightly wrong
+ root.target_url = data.target_url;
+ root.subevent = data.subevent;
+ // Event data
+ root.name = data.name;
+ root.frontpage_text = data.frontpage_text;
+ root.date_range = data.date_range;
+ root.location = data.location;
+ root.categories = data.items_by_category;
+ root.currency = data.currency;
+ root.display_net_prices = data.display_net_prices;
+ root.use_native_spinners = data.use_native_spinners;
+ root.voucher_explanation_text = data.voucher_explanation_text;
+ root.error = data.error;
+ root.display_add_to_cart = data.display_add_to_cart;
+ root.waiting_list_enabled = data.waiting_list_enabled;
+ root.show_variations_expanded = data.show_variations_expanded || !!root.variation_filter;
+ root.cart_id = cart_id;
+ root.cart_exists = data.cart_exists;
+ root.vouchers_exist = data.vouchers_exist;
+ root.has_seating_plan = data.has_seating_plan;
+ root.has_seating_plan_waitinglist = data.has_seating_plan_waitinglist;
+ root.itemnum = data.itemnum;
+ }
+ root.poweredby = data.poweredby;
+ if (root.loading > 0) {
+ root.loading--;
+ root.trigger_load_callback();
+ }
+ if (root.parent_stack.length > 0 && root.has_seating_plan && root.categories.length === 0 && !root.frame_dismissed && root.useIframe && !root.error && !root.has_seating_plan_waitinglist) {
+ // If we're on desktop and someone selects a seating-only event in a calendar, let's open it right away,
+ // but only if the person didn't close it before.
+ root.startseating()
+ } else {
+ // make sure to only move focus to content element when it had focus before the reload/click
+ // this is needed because reload is also called on initial load and we do not want to move focus on initial load
+ if (root.$el.contains(document.activeElement)) {
+ root.$nextTick(function() {
+ // wait for redraw, then focus content element for better a11y
+ (opt.focus ? document.querySelector(opt.focus) : root.$el).focus();
+ });
+ }
+ }
+ }, function (error) {
+ root.categories = [];
+ root.currency = '';
+ if (error.status === 429) {
+ root.error = strings['loading_error_429'];
+ root.connection_error = true;
+ } else {
+ root.error = strings['loading_error'];
+ root.connection_error = true;
+ }
+ if (root.loading > 0) {
+ root.loading--;
+ root.trigger_load_callback();
+ }
+ });
+ },
+ startwaiting: function () {
+ var redirect_url = this.$root.target_url + 'w/' + widget_id + '/waitinglist/?iframe=1&locale=' + lang;
+ if (this.$root.subevent){
+ redirect_url += '&subevent=' + this.$root.subevent;
+ }
+ if (this.$root.additionalURLParams) {
+ redirect_url += '&' + this.$root.additionalURLParams;
+ }
+ if (this.$root.useIframe) {
+ this.$root.overlay.frame_src = redirect_url;
+ } else {
+ window.open(redirect_url);
+ }
+ },
+ startseating: function () {
+ var redirect_url = this.$root.target_url + 'w/' + widget_id;
+ if (this.$root.subevent){
+ redirect_url += '/' + this.$root.subevent;
+ }
+ redirect_url += '/seatingframe/?iframe=1&locale=' + lang;
+ if (this.$root.voucher_code) {
+ redirect_url += '&voucher=' + encodeURIComponent(this.$root.voucher_code);
+ }
+ if (this.$root.cart_id) {
+ redirect_url += '&take_cart_id=' + this.$root.cart_id;
+ }
+ if (this.$root.widget_data) {
+ redirect_url += '&widget_data=' + encodeURIComponent(this.$root.widget_data_json);
+ }
+ if (this.$root.additionalURLParams) {
+ redirect_url += '&' + this.$root.additionalURLParams;
+ }
+ redirect_url += this.$root.consent_parameter;
+ if (this.$root.useIframe) {
+ this.$root.overlay.frame_src = redirect_url;
+ } else {
+ window.open(redirect_url);
+ }
+ },
+ choose_event: function (event) {
+ this.$root.target_url = event.event_url;
+ this.$root.error = null;
+ this.$root.connection_error = false;
+ this.$root.subevent = event.subevent;
+ this.$root.loading++;
+ this.$root.reload();
+ }
+};
+
+var shared_root_computed = {
+ cookieName: function () {
+ return "pretix_widget_" + this.target_url.replace(/[^a-zA-Z0-9]+/g, "_");
+ },
+ formTarget: function () {
+ var is_firefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
+ var is_android = navigator.userAgent.toLowerCase().indexOf("android") > -1;
+ if (is_android && is_firefox) {
+ // Opening a POST form in a new browser fails in Firefox. This is supposed to be fixed since FF 76
+ // but for some reason, it is still the case in FF for Android.
+ // https://bugzilla.mozilla.org/show_bug.cgi?id=1629441
+ // https://github.com/pretix/pretix/issues/1040
+ return "_top";
+ } else {
+ return "_blank";
+ }
+ },
+ voucherFormTarget: function () {
+ var form_target = this.target_url + 'w/' + widget_id + '/redeem?iframe=1&locale=' + lang;
+ var cookie = getCookie(this.cookieName);
+ if (cookie) {
+ form_target += "&take_cart_id=" + cookie;
+ }
+ if (this.subevent) {
+ form_target += "&subevent=" + this.subevent;
+ }
+ if (this.$root.widget_data) {
+ form_target += '&widget_data=' + encodeURIComponent(this.$root.widget_data_json);
+ }
+ form_target += this.$root.consent_parameter;
+ if (this.$root.additionalURLParams) {
+ form_target += '&' + this.$root.additionalURLParams;
+ }
+ return form_target;
+ },
+ formMethod: function () {
+ if (!this.useIframe && this.is_button && this.items.length === 0) {
+ return 'get';
+ }
+ return 'post';
+ },
+ formAction: function () {
+ if (!this.useIframe && this.is_button && this.items.length === 0) {
+ var target;
+ if (this.voucher_code) {
+ target = this.target_url + 'redeem';
+ } else if (this.subevent) {
+ target = this.target_url + this.subevent + '/';
+ } else {
+ target = this.target_url;
+ }
+ return target;
+ }
+ var checkout_url = "/" + this.target_url.replace(/^[^\/]+:\/\/([^\/]+)\//, "") + "w/" + widget_id + "/";
+ if (!this.$root.cart_exists) {
+ checkout_url += "checkout/start";
+ }
+ if (this.$root.additionalURLParams) {
+ checkout_url += '?' + this.$root.additionalURLParams;
+ }
+ var form_target = this.target_url + 'w/' + widget_id + '/cart/add?iframe=1&next=' + encodeURIComponent(checkout_url);
+ var cookie = getCookie(this.cookieName);
+ if (cookie) {
+ form_target += "&take_cart_id=" + cookie;
+ }
+ form_target += this.$root.consent_parameter
+ return form_target
+ },
+ newTabTarget: function () {
+ var target = this.target_url;
+ if (this.subevent) {
+ target = this.target_url + this.subevent + '/';
+ }
+ return target;
+ },
+ useIframe: function () {
+ if (window.crossOriginIsolated === true) {
+ console.warn("pretix Widget cannot use iframe due to Cross-Origin-Embed-Policy")
+ return false;
+ }
+ return !this.disable_iframe && (this.skip_ssl || site_is_secure());
+ },
+ showPrices: function () {
+ var has_priced = false;
+ var cnt_items = 0;
+ for (var i = 0; i < this.categories.length; i++) {
+ for (var j = 0; j < this.categories[i].items.length; j++) {
+ var item = this.categories[i].items[j];
+ if (item.has_variations) {
+ cnt_items += item.variations.length;
+ has_priced = true;
+ } else {
+ cnt_items++;
+ has_priced = has_priced || item.price.gross != "0.00" || item.free_price;
+ }
+ }
+ }
+ return has_priced || cnt_items > 1;
+ },
+ consent_parameter_value: function () {
+ if (typeof this.widget_data["consent"] !== "undefined") {
+ return encodeURIComponent(this.widget_data["consent"]);
+ }
+ return "";
+ },
+ consent_parameter: function () {
+ if (typeof this.widget_data["consent"] !== "undefined") {
+ return "&consent=" + encodeURIComponent(this.widget_data["consent"]);
+ }
+ return "";
+ },
+ widget_data_json: function () {
+ var cloned_data = Object.assign({}, this.widget_data);
+ if (typeof cloned_data["consent"] !== "undefined") {
+ // Remove consent as we pass it differently. We still keep it as widget_data in the input to avoid breaking
+ // the JS API of the widget.
+ delete cloned_data["consent"];
+ }
+ return JSON.stringify(cloned_data);
+ },
+ additionalURLParams: function () {
+ if (!window.location.search.indexOf('utm_')) {
+ return '';
+ }
+ var params = new URLSearchParams(window.location.search);
+ for (var [key, value] of params.entries()) {
+ if (!key.startsWith('utm_')) {
+ params.delete(key);
+ }
+ }
+ return params.toString();
+ },
+};
+
+var create_overlay = function (app) {
+ var elem = document.createElement('pretix-overlay');
+ document.body.appendChild(elem);
+
+ var framechild = new Vue({
+ el: elem,
+ data: function () {
+ return {
+ parent: app,
+ frame_loading: false,
+ frame_shown: false,
+ error_url_after: null,
+ error_url_after_new_tab: true,
+ error_message: null,
+ lightbox: null,
+ prevActiveElement: null,
+ }
+ },
+ props: {
+ frame_src: String,
+ },
+ methods: {
+ },
+ watch: {
+ frame_src: function (newValue, oldValue) {
+ // show loading spinner only when previously no frame_src was set
+ if (newValue && !oldValue) {
+ this.frame_loading = true;
+ }
+ // to close and unload the iframe, frame_src can be empty -> make it valid HTML with about:blank
+ this.$el.querySelector("iframe").src = newValue || "about:blank";
+ },
+ frame_shown: function (newValue) {
+ if (newValue) {
+ this.prevActiveElement = document.activeElement;
+ var btn = this.$el?.querySelector(".pretix-widget-frame-close a");
+ this.$nextTick(function () {
+ btn?.focus();
+ });
+ } else {
+ this.prevActiveElement?.focus();
+ }
+ },
+ error_message: function (newValue) {
+ if (newValue) {
+ this.prevActiveElement = document.activeElement;
+ } else {
+ this.prevActiveElement?.focus();
+ }
+ },
+ }
+ });
+ app.$root.overlay = framechild;
+};
+
+function get_ga_client_id(tracking_id) {
+ if (typeof ga === "undefined") {
+ return null;
+ }
+ try {
+ var trackers = ga.getAll();
+ var i, len;
+ for (i = 0, len = trackers.length; i < len; i += 1) {
+ if (trackers[i].get('trackingId') === tracking_id) {
+ return trackers[i].get('clientId');
+ }
+ }
+ } catch (e) {
+ }
+ return null;
+}
+
+var create_widget = function (element, html_id=null) {
+ var target_url = element.attributes.event.value;
+ if (!target_url.match(/\/$/)) {
+ target_url += "/";
+ }
+ var voucher = element.attributes.voucher ? element.attributes.voucher.value : null;
+ var subevent = element.attributes.subevent ? element.attributes.subevent.value : null;
+ var style = element.attributes["list-type"] ? element.attributes["list-type"].value : (element.attributes.style ? element.attributes.style.value : null);
+ var skip_ssl = element.attributes["skip-ssl-check"] ? true : false;
+ var disable_iframe = element.attributes["disable-iframe"] ? true : false;
+ var disable_vouchers = element.attributes["disable-vouchers"] ? true : false;
+ var disable_filters = element.attributes["disable-filters"] ? true : false;
+ var display_event_info = element.getAttribute("display-event-info"); // null means "auto" (as before), everything other than "false" is true
+ if (display_event_info !== null && display_event_info !== "auto") {
+ display_event_info = display_event_info !== "false";
+ } else {
+ display_event_info = null;
+ }
+ var widget_data = JSON.parse(JSON.stringify(window.PretixWidget.widget_data));
+ var filter = element.attributes.filter ? element.attributes.filter.value : null;
+ var items = element.attributes.items ? element.attributes.items.value : null;
+ var variations = element.attributes.variations ? element.attributes.variations.value : null;
+ var categories = element.attributes.categories ? element.attributes.categories.value : null;
+ var single_item_select = element.getAttribute("single-item-select") || "checkbox";
+ for (var i = 0; i < element.attributes.length; i++) {
+ var attrib = element.attributes[i];
+ if (attrib.name.match(/^data-.*$/)) {
+ widget_data[attrib.name.replace(/^data-/, '')] = attrib.value;
+ }
+ }
+ html_id = html_id || element.id || makeid(16);
+
+ var observer = new MutationObserver((mutationList) => {
+ mutationList.forEach((mutation) => {
+ if (mutation.type == "attributes" && mutation.attributeName.startsWith("data-")) {
+ Vue.set(app.widget_data, mutation.attributeName.substring(5), mutation.target.getAttribute(mutation.attributeName));
+ }
+ });
+ });
+ var observerOptions = { attributes: true };
+
+ if (element.tagName !== "pretix-widget") {
+ element.innerHTML = "" + element.innerHTML + " ";
+ // Vue does not replace the container, so watch container as well
+ observer.observe(element, observerOptions);
+ }
+
+ var itemsplit = raw_items.split(",");
+ var items = [];
+ for (var i = 0; i < itemsplit.length; i++) {
+ if (itemsplit[i].indexOf("=") > 0 ) {
+ var splitthis = itemsplit[i].split("=");
+ items.push({'item': splitthis[0], 'count': splitthis[1]})
+ }
+ }
+
+ var app = new Vue({
+ el: element,
+ data: function () {
+ return {
+ target_url: target_url,
+ subevent: subevent,
+ is_button: true,
+ skip_ssl: skip_ssl,
+ disable_iframe: disable_iframe,
+ voucher_code: voucher,
+ items: items,
+ error: null,
+ filter: null,
+ frame_dismissed: false,
+ widget_data: widget_data,
+ widget_id: 'pretix-widget-' + widget_id,
+ html_id: html_id,
+ button_text: button_text
+ }
+ },
+ created: function () {
+ },
+ mounted: function () {
+ observer.observe(this.$el, observerOptions);
+ },
+ computed: shared_root_computed,
+ methods: shared_root_methods
+ });
+ create_overlay(app);
+ return app;
+};
+
+/* Find all widgets on the page and render them */
+widgetlist = [];
+buttonlist = [];
+window.PretixWidget._loaded = [];
+window.PretixWidget._closed = [];
+window.PretixWidget.addLoadListener = function (f) {
+ window.PretixWidget._loaded.push(f);
+}
+window.PretixWidget.addCloseListener = function (f) {
+ window.PretixWidget._closed.push(f);
+}
+window.PretixWidget.buildWidgets = function () {
+ document.createElement("pretix-widget");
+ document.createElement("pretix-button");
+ docReady(function () {
+ var widgets = document.querySelectorAll("pretix-widget, div.pretix-widget-compat");
+ var wlength = widgets.length;
+ for (var i = 0; i < wlength; i++) {
+ var widget = widgets[i];
+ widgetlist.push(create_widget(widget, widget.id || "pretix-widget-"+i));
+ }
+
+ var buttons = document.querySelectorAll("pretix-button, div.pretix-button-compat");
+ var blength = buttons.length;
+ for (var i = 0; i < blength; i++) {
+ var button = buttons[i];
+ buttonlist.push(create_button(button, button.id || "pretix-button-"+i));
+ }
+ });
+};
+
+window.PretixWidget.open = function (target_url, voucher, subevent, items, widget_data, skip_ssl_check, disable_iframe) {
+ if (!target_url.match(/\/$/)) {
+ target_url += "/";
+ }
+
+ var all_widget_data = JSON.parse(JSON.stringify(window.PretixWidget.widget_data));
+ if (widget_data) {
+ Object.keys(widget_data).forEach(function(key) { all_widget_data[key] = widget_data[key]; });
+ }
+ var root = document.createElement("div");
+ document.body.appendChild(root);
+ root.classList.add("pretix-widget-hidden");
+ root.innerHTML = "