mirror of
https://github.com/pretix/pretix.git
synced 2026-05-05 15:14:04 +00:00
Widget: Put overlay directly in <body> to avoid z-index problems
This commit is contained in:
Raphael Michel
@@ -396,26 +396,27 @@ var shared_methods = {
|
||||
this.resume();
|
||||
} else {
|
||||
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;
|
||||
api._postFormJSON(url, this.$refs.form, this.buy_callback, this.buy_error_callback);
|
||||
}
|
||||
},
|
||||
buy_error_callback: function (xhr, data) {
|
||||
this.$root.error_message = strings['cart_error'];
|
||||
this.$root.frame_loading = false;
|
||||
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.error_message = strings['cart_error'];
|
||||
this.$root.frame_loading = false;
|
||||
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) {
|
||||
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;
|
||||
setCookie(this.$root.cookieName, data.cart_id, 30);
|
||||
if (data.redirect.substr(0, 1) === '/') {
|
||||
@@ -429,11 +430,11 @@ var shared_methods = {
|
||||
}
|
||||
if (data.success === false) {
|
||||
url = url.replace(/checkout\/start/g, "");
|
||||
this.$root.error_message = data.message;
|
||||
this.$root.overlay.error_message = data.message;
|
||||
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 {
|
||||
iframe.src = url;
|
||||
}
|
||||
@@ -449,17 +450,6 @@ var shared_methods = {
|
||||
buy_check: function () {
|
||||
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) {
|
||||
if (this.$root.useIframe) {
|
||||
event.preventDefault();
|
||||
@@ -467,30 +457,20 @@ var shared_methods = {
|
||||
return;
|
||||
}
|
||||
var redirect_url = this.$root.voucherFormTarget + '&voucher=' + this.voucher + '&subevent=' + this.$root.subevent;
|
||||
var iframe = this.$refs['frame-container'].children[0];
|
||||
this.$root.frame_loading = true;
|
||||
var iframe = this.$root.overlay.$children[0].$refs['frame-container'].children[0];
|
||||
this.$root.overlay.frame_loading = true;
|
||||
iframe.src = redirect_url;
|
||||
},
|
||||
resume: function () {
|
||||
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) {
|
||||
var iframe = this.$refs['frame-container'].children[0];
|
||||
this.$root.frame_loading = true;
|
||||
var iframe = this.$root.overlay.$children[0].$refs['frame-container'].children[0];
|
||||
this.$root.overlay.frame_loading = true;
|
||||
iframe.src = redirect_url;
|
||||
} else {
|
||||
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 () {
|
||||
@@ -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 = (
|
||||
'<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>'
|
||||
@@ -531,7 +496,7 @@ var shared_iframe_fragment = (
|
||||
+ '</div>'
|
||||
+ '<div class="pretix-widget-frame-inner" ref="frame-container" v-show="$root.frame_shown">'
|
||||
+ '<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!'
|
||||
+ '</iframe>'
|
||||
+ '<div class="pretix-widget-frame-close"><a href="#" @click.prevent="close">X</a></div>'
|
||||
@@ -552,6 +517,51 @@ var shared_alert_fragment = (
|
||||
+ '</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', {
|
||||
template: ('<div class="pretix-widget-wrapper">'
|
||||
+ '<div class="pretix-widget">'
|
||||
@@ -592,14 +602,11 @@ Vue.component('pretix-widget', {
|
||||
+ strings.poweredby
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ shared_iframe_fragment
|
||||
+ shared_alert_fragment
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
),
|
||||
data: shared_widget_data,
|
||||
methods: shared_methods,
|
||||
computed: shared_widget_computed,
|
||||
});
|
||||
|
||||
Vue.component('pretix-button', {
|
||||
@@ -613,14 +620,11 @@ Vue.component('pretix-button', {
|
||||
+ '</form>'
|
||||
+ '<div class="pretix-widget-clear"></div>'
|
||||
+ '</div>'
|
||||
+ shared_iframe_fragment
|
||||
+ shared_alert_fragment
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
),
|
||||
data: shared_widget_data,
|
||||
methods: shared_methods,
|
||||
computed: shared_widget_computed,
|
||||
});
|
||||
|
||||
/* Function to create the actual Vue instances */
|
||||
@@ -630,8 +634,8 @@ var shared_root_methods = {
|
||||
if (this.$root.useIframe) {
|
||||
event.preventDefault();
|
||||
var url = event.target.attributes.href.value;
|
||||
this.$children[0].$refs['frame-container'].children[0].src = url;
|
||||
this.frame_loading = true;
|
||||
this.$root.overlay.$children[0].$refs['frame-container'].children[0].src = url;
|
||||
this.$root.overlay.frame_loading = true;
|
||||
} else {
|
||||
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 event_url = element.attributes.event.value;
|
||||
if (!event_url.match(/\/$/)) {
|
||||
@@ -755,14 +780,11 @@ var create_widget = function (element) {
|
||||
display_add_to_cart: false,
|
||||
loading: 1,
|
||||
widget_id: 'pretix-widget-' + widget_id,
|
||||
frame_loading: false,
|
||||
frame_shown: false,
|
||||
error_message: null,
|
||||
error_url_after: null,
|
||||
vouchers_exist: false,
|
||||
disable_vouchers: disable_vouchers,
|
||||
cart_exists: false,
|
||||
itemcount: 0
|
||||
itemcount: 0,
|
||||
overlay: null
|
||||
}
|
||||
},
|
||||
created: function () {
|
||||
@@ -771,6 +793,7 @@ var create_widget = function (element) {
|
||||
computed: shared_root_computed,
|
||||
methods: shared_root_methods
|
||||
});
|
||||
create_overlay(app);
|
||||
return app;
|
||||
};
|
||||
|
||||
@@ -810,10 +833,6 @@ var create_button = function (element) {
|
||||
items: items,
|
||||
error: null,
|
||||
widget_id: 'pretix-widget-' + widget_id,
|
||||
frame_loading: false,
|
||||
frame_shown: false,
|
||||
error_message: null,
|
||||
error_url_after: null,
|
||||
button_text: button_text
|
||||
}
|
||||
},
|
||||
@@ -822,6 +841,7 @@ var create_button = function (element) {
|
||||
computed: shared_root_computed,
|
||||
methods: shared_root_methods
|
||||
});
|
||||
create_overlay(app);
|
||||
return app;
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user