CGM_Public/pretix_cgo
1
0
Fork 0
forked from CGM_Public/pretix_original
Code Pull Requests Actions Activity

Widget: Put overlay directly in <body> to avoid z-index problems

Browse Source
This commit is contained in:
Raphael Michel
2018-08-17 11:02:44 +02:00
parent bf9ce68d8b
commit 85952ce6b7
1 changed files with 87 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

154
src/pretix/static/pretixpresale/js/widget/widget.js
View File

@@ -396,26 +396,27 @@ var shared_methods = {
this.resume(); this.resume();
} else { } else {
var url = this.$root.formTarget + "&locale=" + lang + "&ajax=1"; var url = this.$root.formTarget + "&locale=" + lang + "&ajax=1";
this.$root.frame_loading = true; this.$root.overlay.frame_loading = true;
this.async_task_interval = 100; this.async_task_interval = 100;
api._postFormJSON(url, this.$refs.form, this.buy_callback, this.buy_error_callback); api._postFormJSON(url, this.$refs.form, this.buy_callback, this.buy_error_callback);
} }
}, },
buy_error_callback: function (xhr, data) { buy_error_callback: function (xhr, data) {
this.$root.error_message = strings['cart_error']; this.$root.overlay.error_message = strings['cart_error'];
this.$root.frame_loading = false; this.$root.overlay.frame_loading = false;
}, },
buy_check_error_callback: function (xhr, data) { buy_check_error_callback: function (xhr, data) {
if (xhr.status == 200 || (xhr.status >= 400 && xhr.status < 500)) { if (xhr.status == 200 || (xhr.status >= 400 && xhr.status < 500)) {
this.$root.error_message = strings['cart_error']; this.$root.overlay.error_message = strings['cart_error'];
this.$root.frame_loading = false; this.$root.overlay.frame_loading = false;
} else { } else {
this.async_task_timeout = window.setTimeout(this.buy_check, 1000); this.async_task_timeout = window.setTimeout(this.buy_check, 1000);
} }
}, },
buy_callback: function (data) { buy_callback: function (data) {
if (data.redirect) { if (data.redirect) {
var iframe = this.$refs['frame-container'].children[0]; var iframe = this.$root.overlay.$children[0].$refs['frame-container'].children[0];
this.$root.cart_id = data.cart_id; this.$root.cart_id = data.cart_id;
setCookie(this.$root.cookieName, data.cart_id, 30); setCookie(this.$root.cookieName, data.cart_id, 30);
if (data.redirect.substr(0, 1) === '/') { if (data.redirect.substr(0, 1) === '/') {
@@ -429,11 +430,11 @@ var shared_methods = {
} }
if (data.success === false) { if (data.success === false) {
url = url.replace(/checkout\/start/g, ""); url = url.replace(/checkout\/start/g, "");
this.$root.error_message = data.message; this.$root.overlay.error_message = data.message;
if (data.has_cart) { if (data.has_cart) {
this.$root.error_url_after = url; this.$root.overlay.error_url_after = url;
} }
this.$root.frame_loading = false; this.$root.overlay.frame_loading = false;
} else { } else {
iframe.src = url; iframe.src = url;
} }
@@ -449,17 +450,6 @@ var shared_methods = {
buy_check: function () { buy_check: function () {
api._getJSON(this.async_task_check_url, this.buy_callback, this.buy_check_error_callback); api._getJSON(this.async_task_check_url, this.buy_callback, this.buy_check_error_callback);
}, },
errorContinue: function () {
var iframe = this.$refs['frame-container'].children[0];
iframe.src = this.$root.error_url_after;
this.$root.frame_loading = true;
this.$root.error_message = null;
this.$root.error_url_after = null;
},
errorClose: function () {
this.$root.error_message = null;
this.$root.error_url_after = null;
},
redeem: function (event) { redeem: function (event) {
if (this.$root.useIframe) { if (this.$root.useIframe) {
event.preventDefault(); event.preventDefault();
@@ -467,30 +457,20 @@ var shared_methods = {
return; return;
} }
var redirect_url = this.$root.voucherFormTarget + '&voucher=' + this.voucher + '&subevent=' + this.$root.subevent; var redirect_url = this.$root.voucherFormTarget + '&voucher=' + this.voucher + '&subevent=' + this.$root.subevent;
var iframe = this.$refs['frame-container'].children[0]; var iframe = this.$root.overlay.$children[0].$refs['frame-container'].children[0];
this.$root.frame_loading = true; this.$root.overlay.frame_loading = true;
iframe.src = redirect_url; iframe.src = redirect_url;
}, },
resume: function () { resume: function () {
var redirect_url = this.$root.event_url + 'w/' + widget_id + '/?iframe=1&locale=' + lang + '&take_cart_id=' + this.$root.cart_id; var redirect_url = this.$root.event_url + 'w/' + widget_id + '/?iframe=1&locale=' + lang + '&take_cart_id=' + this.$root.cart_id;
if (this.$root.useIframe) { if (this.$root.useIframe) {
var iframe = this.$refs['frame-container'].children[0]; var iframe = this.$root.overlay.$children[0].$refs['frame-container'].children[0];
this.$root.frame_loading = true; this.$root.overlay.frame_loading = true;
iframe.src = redirect_url; iframe.src = redirect_url;
} else { } else {
window.open(redirect_url); window.open(redirect_url);
} }
}, },
close: function () {
this.$root.frame_shown = false;
this.$root.reload();
},
iframeLoaded: function () {
if (this.$root.frame_loading) {
this.$root.frame_loading = false;
this.$root.frame_shown = true;
}
}
}; };
var shared_widget_data = function () { var shared_widget_data = function () {
@@ -503,21 +483,6 @@ var shared_widget_data = function () {
} }
}; };
var shared_widget_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,
};
},
};
var shared_loading_fragment = ( var shared_loading_fragment = (
'<div class="pretix-widget-loading" v-show="$root.loading > 0">' '<div class="pretix-widget-loading" v-show="$root.loading > 0">'
+ '<svg width="128" height="128" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path class="pretix-widget-primary-color" d="M1152 896q0-106-75-181t-181-75-181 75-75 181 75 181 181 75 181-75 75-181zm512-109v222q0 12-8 23t-20 13l-185 28q-19 54-39 91 35 50 107 138 10 12 10 25t-9 23q-27 37-99 108t-94 71q-12 0-26-9l-138-108q-44 23-91 38-16 136-29 186-7 28-36 28h-222q-14 0-24.5-8.5t-11.5-21.5l-28-184q-49-16-90-37l-141 107q-10 9-25 9-14 0-25-11-126-114-165-168-7-10-7-23 0-12 8-23 15-21 51-66.5t54-70.5q-27-50-41-99l-183-27q-13-2-21-12.5t-8-23.5v-222q0-12 8-23t19-13l186-28q14-46 39-92-40-57-107-138-10-12-10-24 0-10 9-23 26-36 98.5-107.5t94.5-71.5q13 0 26 10l138 107q44-23 91-38 16-136 29-186 7-28 36-28h222q14 0 24.5 8.5t11.5 21.5l28 184q49 16 90 37l142-107q9-9 24-9 13 0 25 10 129 119 165 170 7 8 7 22 0 12-8 23-15 21-51 66.5t-54 70.5q26 50 41 98l183 28q13 2 21 12.5t8 23.5z"/></svg>' + '<svg width="128" height="128" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path class="pretix-widget-primary-color" d="M1152 896q0-106-75-181t-181-75-181 75-75 181 75 181 181 75 181-75 75-181zm512-109v222q0 12-8 23t-20 13l-185 28q-19 54-39 91 35 50 107 138 10 12 10 25t-9 23q-27 37-99 108t-94 71q-12 0-26-9l-138-108q-44 23-91 38-16 136-29 186-7 28-36 28h-222q-14 0-24.5-8.5t-11.5-21.5l-28-184q-49-16-90-37l-141 107q-10 9-25 9-14 0-25-11-126-114-165-168-7-10-7-23 0-12 8-23 15-21 51-66.5t54-70.5q-27-50-41-99l-183-27q-13-2-21-12.5t-8-23.5v-222q0-12 8-23t19-13l186-28q14-46 39-92-40-57-107-138-10-12-10-24 0-10 9-23 26-36 98.5-107.5t94.5-71.5q13 0 26 10l138 107q44-23 91-38 16-136 29-186 7-28 36-28h222q14 0 24.5 8.5t11.5 21.5l28 184q49 16 90 37l142-107q9-9 24-9 13 0 25 10 129 119 165 170 7 8 7 22 0 12-8 23-15 21-51 66.5t-54 70.5q26 50 41 98l183 28q13 2 21 12.5t8 23.5z"/></svg>'
@@ -531,7 +496,7 @@ var shared_iframe_fragment = (
+ '</div>' + '</div>'
+ '<div class="pretix-widget-frame-inner" ref="frame-container" v-show="$root.frame_shown">' + '<div class="pretix-widget-frame-inner" ref="frame-container" v-show="$root.frame_shown">'
+ '<iframe frameborder="0" width="650px" height="650px" @load="iframeLoaded" ' + '<iframe frameborder="0" width="650px" height="650px" @load="iframeLoaded" '
+ ' :name="$root.widget_id" src="about:blank" v-once>' + ' :name="$root.parent.widget_id" src="about:blank" v-once>'
+ 'Please enable frames in your browser!' + 'Please enable frames in your browser!'
+ '</iframe>' + '</iframe>'
+ '<div class="pretix-widget-frame-close"><a href="#" @click.prevent="close">X</a></div>' + '<div class="pretix-widget-frame-close"><a href="#" @click.prevent="close">X</a></div>'
@@ -552,6 +517,51 @@ var shared_alert_fragment = (
+ '</div>' + '</div>'
); );
Vue.component('pretix-overlay', {
template: ('<div class="pretix-widget-overlay">'
+ shared_iframe_fragment
+ shared_alert_fragment
+ '</div>'
),
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,
};
},
},
methods: {
errorClose: function () {
this.$root.error_message = null;
this.$root.error_url_after = null;
},
errorContinue: function () {
var iframe = this.$refs['frame-container'].children[0];
iframe.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.reload();
},
iframeLoaded: function () {
if (this.$root.frame_loading) {
this.$root.frame_loading = false;
this.$root.frame_shown = true;
}
}
}
});
Vue.component('pretix-widget', { Vue.component('pretix-widget', {
template: ('<div class="pretix-widget-wrapper">' template: ('<div class="pretix-widget-wrapper">'
+ '<div class="pretix-widget">' + '<div class="pretix-widget">'
@@ -592,14 +602,11 @@ Vue.component('pretix-widget', {
+ strings.poweredby + strings.poweredby
+ '</div>' + '</div>'
+ '</div>' + '</div>'
+ shared_iframe_fragment
+ shared_alert_fragment
+ '</div>' + '</div>'
+ '</div>' + '</div>'
), ),
data: shared_widget_data, data: shared_widget_data,
methods: shared_methods, methods: shared_methods,
computed: shared_widget_computed,
}); });
Vue.component('pretix-button', { Vue.component('pretix-button', {
@@ -613,14 +620,11 @@ Vue.component('pretix-button', {
+ '</form>' + '</form>'
+ '<div class="pretix-widget-clear"></div>' + '<div class="pretix-widget-clear"></div>'
+ '</div>' + '</div>'
+ shared_iframe_fragment
+ shared_alert_fragment
+ '</div>' + '</div>'
+ '</div>' + '</div>'
), ),
data: shared_widget_data, data: shared_widget_data,
methods: shared_methods, methods: shared_methods,
computed: shared_widget_computed,
}); });
/* Function to create the actual Vue instances */ /* Function to create the actual Vue instances */
@@ -630,8 +634,8 @@ var shared_root_methods = {
if (this.$root.useIframe) { if (this.$root.useIframe) {
event.preventDefault(); event.preventDefault();
var url = event.target.attributes.href.value; var url = event.target.attributes.href.value;
this.$children[0].$refs['frame-container'].children[0].src = url; this.$root.overlay.$children[0].$refs['frame-container'].children[0].src = url;
this.frame_loading = true; this.$root.overlay.frame_loading = true;
} else { } else {
return; return;
} }
@@ -724,6 +728,27 @@ var shared_root_computed = {
} }
}; };
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_message: null,
}
},
methods: {
}
});
app.$root.overlay = framechild;
};
var create_widget = function (element) { var create_widget = function (element) {
var event_url = element.attributes.event.value; var event_url = element.attributes.event.value;
if (!event_url.match(/\/$/)) { if (!event_url.match(/\/$/)) {
@@ -755,14 +780,11 @@ var create_widget = function (element) {
display_add_to_cart: false, display_add_to_cart: false,
loading: 1, loading: 1,
widget_id: 'pretix-widget-' + widget_id, widget_id: 'pretix-widget-' + widget_id,
frame_loading: false,
frame_shown: false,
error_message: null,
error_url_after: null,
vouchers_exist: false, vouchers_exist: false,
disable_vouchers: disable_vouchers, disable_vouchers: disable_vouchers,
cart_exists: false, cart_exists: false,
itemcount: 0 itemcount: 0,
overlay: null
} }
}, },
created: function () { created: function () {
@@ -771,6 +793,7 @@ var create_widget = function (element) {
computed: shared_root_computed, computed: shared_root_computed,
methods: shared_root_methods methods: shared_root_methods
}); });
create_overlay(app);
return app; return app;
}; };
@@ -810,10 +833,6 @@ var create_button = function (element) {
items: items, items: items,
error: null, error: null,
widget_id: 'pretix-widget-' + widget_id, widget_id: 'pretix-widget-' + widget_id,
frame_loading: false,
frame_shown: false,
error_message: null,
error_url_after: null,
button_text: button_text button_text: button_text
} }
}, },
@@ -822,6 +841,7 @@ var create_button = function (element) {
computed: shared_root_computed, computed: shared_root_computed,
methods: shared_root_methods methods: shared_root_methods
}); });
create_overlay(app);
return app; return app;
}; };