Widget: make data-attributes reactive (#3586)

This commit is contained in:
Richard Schreiber
2023-09-14 10:51:35 +02:00
committed by GitHub
parent dea7de4e6c
commit 75abab403a
2 changed files with 93 additions and 108 deletions

View File

@@ -1911,8 +1911,19 @@ var create_widget = function (element) {
}
}
var observer = new MutationObserver((mutationList) => {
mutationList.forEach((mutation) => {
if (mutation.type == "attributes" && mutation.attributeName.startsWith("data-")) {
Vue.set(app.widget_data, mutation.attributeName.substring(5), mutation.target.getAttribute(mutation.attributeName));
}
});
});
var observerOptions = { attributes: true };
if (element.tagName !== "pretix-widget") {
element.innerHTML = "<pretix-widget></pretix-widget>";
// we need to watch the container as well as the replaced root-node (see mounted())
observer.observe(element, observerOptions);
}
var app = new Vue({
@@ -1970,6 +1981,9 @@ var create_widget = function (element) {
created: function () {
this.reload();
},
mounted: function () {
observer.observe(this.$el, observerOptions);
},
computed: shared_root_computed,
methods: shared_root_methods
});
@@ -1996,8 +2010,19 @@ var create_button = function (element) {
}
}
var observer = new MutationObserver((mutationList) => {
mutationList.forEach((mutation) => {
if (mutation.type == "attributes" && mutation.attributeName.startsWith("data-")) {
Vue.set(app.widget_data, mutation.attributeName.substring(5), mutation.target.getAttribute(mutation.attributeName));
}
});
});
var observerOptions = { attributes: true };
if (element.tagName !== "pretix-button") {
element.innerHTML = "<pretix-button>" + element.innerHTML + "</pretix-button>";
// Vue does not replace the container, so watch container as well
observer.observe(element, observerOptions);
}
var itemsplit = raw_items.split(",");
@@ -2030,6 +2055,9 @@ var create_button = function (element) {
},
created: function () {
},
mounted: function () {
observer.observe(this.$el, observerOptions);
},
computed: shared_root_computed,
methods: shared_root_methods
});