Widget: Introduce addCloseListener (#2569)

doc/user/events/widget.rst

@@ -253,18 +253,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
+Waiting for the widget to load or close
-------------------------------
+---------------------------------------
 
-If you want to run custom JavaScript once the widget is fully loaded, you can register a callback function. Note that
+If you want to run custom JavaScript once the widget is fully loaded or when it is closed, you can register callback
-this function might be run multiple times, for example if you have multiple widgets on a page or if the user switches
+functions. Note that these function might be run multiple times, for example if you have multiple widgets on a page
-e.g. from an event list to an event detail view::
+or if the user switches e.g. from an event list to an event detail view::
 
     <script type="text/javascript">
     window.pretixWidgetCallback = function () {
         window.PretixWidget.addLoadListener(function () {
             console.log("Widget has loaded!");
         });
+        window.PretixWidget.addCloseListener(function () {
+            console.log("Widget has been closed!");
+        });
     }
     </script>
 

src/pretix/static/pretixpresale/js/widget/widget.js

@@ -747,6 +747,7 @@ Vue.component('pretix-overlay', {
             this.$root.frame_shown = false;
             this.$root.parent.frame_dismissed = true;
             this.$root.parent.reload();
+            this.$root.trigger_close_callback();
         },
         iframeLoaded: function () {
             if (this.$root.frame_loading) {
@@ -1368,6 +1369,13 @@ var shared_root_methods = {
             }
         });
     },
+    trigger_close_callback: function () {
+        this.$nextTick(function () {
+            for (var i = 0; i < window.PretixWidget._closed.length; i++) {
+                window.PretixWidget._closed[i]()
+            }
+        });
+    },
     reload: function () {
         var url;
         if (this.$root.is_button) {
@@ -1791,9 +1799,13 @@ var create_button = function (element) {
 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");