forked from CGM_Public/pretix_original
Fix safari blocking widget opening error url in new tab (Z#23243124) (#6477)
* Fix safari blocking widget opening error url in new tab (Z#23243124) * Fix autofocus in vue3 widget autofocus no longer works as the elements are added dynamically * fix eslint * rename v-focus to v-autofocus --------- Co-authored-by: Richard Schreiber <schreiber@rami.io>
This commit is contained in:
pajowu
co-authored by
Richard Schreiber
Richard Schreiber
parent
7b1558b22e
commit
b241adb7d0
@@ -262,7 +262,7 @@ Vue.component('availbox', {
|
||||
},
|
||||
mounted: function() {
|
||||
if (!this.$root.cart_exists && this.$root.itemnum === 1 && (!this.$root.categories[0].items[0].has_variations || this.$root.categories[0].items[0].variations.length < 2) && !this.$root.has_seating_plan ? 1 : 0) {
|
||||
this.$refs.quantity.value = 1;
|
||||
this.$refs.quantity.value = 1;
|
||||
if (this.order_max === 1) {
|
||||
this.$refs.quantity.checked = true;
|
||||
}
|
||||
@@ -310,7 +310,7 @@ Vue.component('availbox', {
|
||||
return this.avail[0] < 100 && this.$root.waiting_list_enabled && this.item.allow_waitinglist;
|
||||
},
|
||||
waiting_list_url: function () {
|
||||
var u = this.$root.target_url + 'w/' + widget_id + '/waitinglist/?locale=' + lang + '&item=' + this.item.id
|
||||
var u = this.$root.target_url + 'w/' + widget_id + '/waitinglist/?locale=' + lang + '&item=' + this.item.id
|
||||
if (this.item.has_variations) {
|
||||
u += '&var=' + this.variation.id
|
||||
}
|
||||
@@ -863,7 +863,7 @@ var shared_alert_fragment = (
|
||||
'<dialog :class="alertClasses" role="alertdialog" v-bind:aria-labelledby="$root.parent.html_id + \'-error-message\'" @close="errorClose">'
|
||||
+ '<form class="pretix-widget-alert-box" method="dialog">'
|
||||
+ '<p :id="$root.parent.html_id + \'-error-message\'">{{ $root.error_message }}</p>'
|
||||
+ '<p><button v-if="$root.error_url_after" value="continue" autofocus v-bind:aria-describedby="$root.parent.html_id + \'-error-message\'">' + strings.continue + '</button>'
|
||||
+ '<p><button v-if="$root.error_url_after" @click="errorContinue" autofocus v-bind:aria-describedby="$root.parent.html_id + \'-error-message\'">' + strings.continue + '</button>'
|
||||
+ '<button v-else autofocus v-bind:aria-describedby="$root.parent.html_id + \'-error-message\'">' + strings.close + '</button></p>'
|
||||
+ '</form>'
|
||||
+ '<transition name="bounce">'
|
||||
@@ -952,7 +952,7 @@ Vue.component('pretix-overlay', {
|
||||
cancelBlockedClasses: function () {
|
||||
return {
|
||||
'pretix-widget-visibility-hidden': !this.cancelBlocked,
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted () {
|
||||
@@ -974,19 +974,18 @@ Vue.component('pretix-overlay', {
|
||||
this.$root.lightbox.loading = false;
|
||||
},
|
||||
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);
|
||||
} else if (this.$root.overlay) {
|
||||
this.$root.overlay.frame_src = this.$root.error_url_after;
|
||||
this.$root.frame_loading = true;
|
||||
}
|
||||
},
|
||||
close: function (e) {
|
||||
if (this.$root.frame_loading) {
|
||||
// Chrome does not allow blocking dialog.cancel event more than once
|
||||
|
||||
@@ -54,16 +54,16 @@ function lightboxLoaded () {
|
||||
}
|
||||
}
|
||||
|
||||
function errorClose (e: Event) {
|
||||
const dialog = e.target as HTMLDialogElement
|
||||
if (dialog.returnValue === 'continue' && store.overlay.errorUrlAfter) {
|
||||
if (store.overlay.errorUrlAfterNewTab) {
|
||||
window.open(store.overlay.errorUrlAfter)
|
||||
} else {
|
||||
store.overlay.frameSrc = store.overlay.errorUrlAfter
|
||||
store.overlay.frameLoading = true
|
||||
}
|
||||
function errorContinue () {
|
||||
if (store.overlay.errorUrlAfterNewTab) {
|
||||
window.open(store.overlay.errorUrlAfter)
|
||||
} else {
|
||||
store.overlay.frameSrc = store.overlay.errorUrlAfter
|
||||
store.overlay.frameLoading = true
|
||||
}
|
||||
}
|
||||
|
||||
function errorClose () {
|
||||
store.overlay.errorMessage = null
|
||||
store.overlay.errorUrlAfter = null
|
||||
store.overlay.errorUrlAfterNewTab = false
|
||||
@@ -168,6 +168,10 @@ onMounted(() => {
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('message', onMessage, false)
|
||||
})
|
||||
|
||||
const vAutofocus = {
|
||||
mounted: (el) => el.focus()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template lang="pug">
|
||||
@@ -181,7 +185,7 @@ Teleport(to="body")
|
||||
strong {{ STRINGS.cancel_blocked }}
|
||||
.pretix-widget-frame-inner(v-show="store.overlay.frameShown")
|
||||
form.pretix-widget-frame-close(method="dialog")
|
||||
button(ref="closeButton", :aria-label="STRINGS.close_checkout", autofocus)
|
||||
button(ref="closeButton", v-autofocus, :aria-label="STRINGS.close_checkout")
|
||||
svg(:alt="STRINGS.close", height="16", viewBox="0 0 512 512", width="16", xmlns="http://www.w3.org/2000/svg")
|
||||
path(fill="#fff", d="M437.5,386.6L306.9,256l130.6-130.6c14.1-14.1,14.1-36.8,0-50.9c-14.1-14.1-36.8-14.1-50.9,0L256,205.1L125.4,74.5 c-14.1-14.1-36.8-14.1-50.9,0c-14.1,14.1-14.1,36.8,0,50.9L205.1,256L74.5,386.6c-14.1,14.1-14.1,36.8,0,50.9 c14.1,14.1,36.8,14.1,50.9,0L256,306.9l130.6,130.6c14.1,14.1,36.8,14.1,50.9,0C451.5,423.4,451.5,400.6,437.5,386.6z")
|
||||
iframe(
|
||||
@@ -200,9 +204,9 @@ Teleport(to="body")
|
||||
form.pretix-widget-alert-box(method="dialog")
|
||||
p(:id="errorMessageId") {{ store.overlay.errorMessage }}
|
||||
p
|
||||
button(v-if="store.overlay.errorUrlAfter", value="continue", autofocus, :aria-describedby="errorMessageId")
|
||||
button(v-if="store.overlay.errorUrlAfter", v-autofocus, :aria-describedby="errorMessageId", @click="errorContinue")
|
||||
| {{ STRINGS.continue }}
|
||||
button(v-else, autofocus, :aria-describedby="errorMessageId") {{ STRINGS.close }}
|
||||
button(v-else, v-autofocus, :aria-describedby="errorMessageId") {{ STRINGS.close }}
|
||||
transition(name="bounce")
|
||||
svg.pretix-widget-alert-icon(v-if="store.overlay.errorMessage", width="64", height="64", viewBox="0 0 1792 1792", xmlns="http://www.w3.org/2000/svg")
|
||||
path(style="fill:#ffffff;", d="M 599.86438,303.72882 H 1203.5254 V 1503.4576 H 599.86438 Z")
|
||||
@@ -214,7 +218,7 @@ Teleport(to="body")
|
||||
path.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")
|
||||
.pretix-widget-lightbox-inner(v-if="store.overlay.lightbox")
|
||||
form.pretix-widget-lightbox-close(method="dialog")
|
||||
button(:aria-label="STRINGS.close", autofocus)
|
||||
button(v-autofocus, :aria-label="STRINGS.close")
|
||||
svg(:alt="STRINGS.close", height="16", viewBox="0 0 512 512", width="16", xmlns="http://www.w3.org/2000/svg")
|
||||
path(fill="#fff", d="M437.5,386.6L306.9,256l130.6-130.6c14.1-14.1,14.1-36.8,0-50.9c-14.1-14.1-36.8-14.1-50.9,0L256,205.1L125.4,74.5 c-14.1-14.1-36.8-14.1-50.9,0c-14.1,14.1-14.1,36.8,0,50.9L205.1,256L74.5,386.6c-14.1,14.1-14.1,36.8,0,50.9 c14.1,14.1,36.8,14.1,50.9,0L256,306.9l130.6,130.6c14.1,14.1,36.8,14.1,50.9,0C451.5,423.4,451.5,400.6,437.5,386.6z")
|
||||
figure.pretix-widget-lightbox-image
|
||||
|
||||
Reference in New Issue
Block a user