diff --git a/doc/user/events/widget.rst b/doc/user/events/widget.rst index f91f48f9a6..59aa1f8723 100644 --- a/doc/user/events/widget.rst +++ b/doc/user/events/widget.rst @@ -206,6 +206,21 @@ If you want, you can suppress us loading the widget and/or modify the user data If you then later want to trigger loading the widgets, just call ``window.PretixWidget.buildWidgets()``. +Waiting for the widget to load +------------------------------ + +If you want to run custom JavaScript once the widget is fully loaded, you can register a callback function. Note that +this function might be run multiple times, for example if you have multiple widgets on a page or if the user switches +e.g. from an event list to an event detail view:: + + + Passing user data to the widget ------------------------------- diff --git a/src/pretix/static/pretixpresale/js/widget/widget.js b/src/pretix/static/pretixpresale/js/widget/widget.js index c09d6feeb8..497e85715e 100644 --- a/src/pretix/static/pretixpresale/js/widget/widget.js +++ b/src/pretix/static/pretixpresale/js/widget/widget.js @@ -784,6 +784,7 @@ Vue.component('pretix-widget-event-form', { this.$root.target_url = this.$root.parent_stack.pop(); this.$root.error = null; this.$root.subevent = null; + this.$root.trigger_load_callback(); if (this.$root.events !== undefined) { this.$root.view = "events"; } else { @@ -1086,6 +1087,13 @@ var shared_root_methods = { return; } }, + trigger_load_callback: function () { + this.$nextTick(function () { + for (var i = 0; i < window.PretixWidget._loaded.length; i++) { + window.PretixWidget._loaded[i]() + } + }); + }, reload: function () { var url; if (this.$root.subevent) { @@ -1148,6 +1156,7 @@ var shared_root_methods = { } if (root.loading > 0) { root.loading--; + root.trigger_load_callback(); } }, function (error) { root.categories = []; @@ -1155,6 +1164,7 @@ var shared_root_methods = { root.error = strings['loading_error']; if (root.loading > 0) { root.loading--; + root.trigger_load_callback(); } }); }, @@ -1385,6 +1395,10 @@ var create_button = function (element) { /* Find all widgets on the page and render them */ widgetlist = []; buttonlist = []; +window.PretixWidget._loaded = []; +window.PretixWidget.addLoadListener = function (f) { + window.PretixWidget._loaded.push(f); +} window.PretixWidget.buildWidgets = function () { document.createElement("pretix-widget"); document.createElement("pretix-button");