diff --git a/src/pretix/presale/views/widget.py b/src/pretix/presale/views/widget.py index 1a4131ec88..84ad2e348c 100644 --- a/src/pretix/presale/views/widget.py +++ b/src/pretix/presale/views/widget.py @@ -142,7 +142,6 @@ def generate_widget_js(lang): files = [ 'vuejs/vue.js' if settings.DEBUG else 'vuejs/vue.min.js', - 'vuejs/vue-resize.min.js', 'pretixpresale/js/widget/docready.js', 'pretixpresale/js/widget/floatformat.js', 'pretixpresale/js/widget/widget.js', diff --git a/src/pretix/static/pretixpresale/js/widget/widget.js b/src/pretix/static/pretixpresale/js/widget/widget.js index 84a0aa0cc5..e63392353d 100644 --- a/src/pretix/static/pretixpresale/js/widget/widget.js +++ b/src/pretix/static/pretixpresale/js/widget/widget.js @@ -11,7 +11,6 @@ window.PretixWidget = { }; var Vue = module.exports; -Vue.component('resize-observer', VueResize.ResizeObserver) var strings = { 'quantity': django.pgettext('widget', 'Quantity'), @@ -736,9 +735,6 @@ var shared_methods = { window.open(redirect_url); } }, - handleResize: function () { - this.mobile = this.$refs.wrapper.clientWidth <= 800; - } }; var shared_widget_data = function () { @@ -1493,7 +1489,6 @@ Vue.component('pretix-widget-event-week-calendar', { Vue.component('pretix-widget', { template: ('
' + '
' - + '' + shared_loading_fragment + '
{{ $root.error }}
' + '
' @@ -1513,7 +1508,22 @@ Vue.component('pretix-widget', { data: shared_widget_data, methods: shared_methods, mounted: function () { - this.mobile = this.$refs.wrapper.clientWidth <= 600; + var thisObj = this; + if ("ResizeObserver" in window) { + var resizeObserver = new ResizeObserver(function(entries) { + thisObj.mobile = entries[0].contentRect.width <= 800; + }); + resizeObserver.observe(this.$refs.wrapper); + } else { + this.mobile = this.$refs.wrapper.clientWidth <= 800; + var debounce; + window.addEventListener("resize", function() { + if (debounce) clearTimeout(debounce); + debounce = setTimeout(function () { + thisObj.mobile = thisObj.$refs.wrapper.clientWidth <= 800; + }, 100); + }); + } }, computed: { classObject: function () { diff --git a/src/pretix/static/pretixpresale/scss/widget.scss b/src/pretix/static/pretixpresale/scss/widget.scss index e8257b6de6..5ff9db318e 100644 --- a/src/pretix/static/pretixpresale/scss/widget.scss +++ b/src/pretix/static/pretixpresale/scss/widget.scss @@ -1000,6 +1000,3 @@ } } } - -// https://github.com/Akryum/vue-resize/blob/master/dist/vue-resize.css -.resize-observer[data-v-b329ee4c]{position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;border:none;background-color:transparent;pointer-events:none;display:block;overflow:hidden;opacity:0}.resize-observer[data-v-b329ee4c] object{display:block;position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;pointer-events:none;z-index:-1} diff --git a/src/pretix/static/vuejs/vue-resize.min.js b/src/pretix/static/vuejs/vue-resize.min.js deleted file mode 100644 index 952155609c..0000000000 --- a/src/pretix/static/vuejs/vue-resize.min.js +++ /dev/null @@ -1 +0,0 @@ -var VueResize=function(e){"use strict";var t=void 0;function i(){i.init||(i.init=!0,t=-1!==function(){var e=window.navigator.userAgent,t=e.indexOf("MSIE ");if(t>0)return parseInt(e.substring(t+5,e.indexOf(".",t)),10);if(e.indexOf("Trident/")>0){var i=e.indexOf("rv:");return parseInt(e.substring(i+3,e.indexOf(".",i)),10)}var n=e.indexOf("Edge/");return n>0?parseInt(e.substring(n+5,e.indexOf(".",n)),10):-1}())}var n={render:function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"resize-observer",attrs:{tabindex:"-1"}})},staticRenderFns:[],_scopeId:"data-v-b329ee4c",name:"resize-observer",methods:{compareAndNotify:function(){this._w===this.$el.offsetWidth&&this._h===this.$el.offsetHeight||(this._w=this.$el.offsetWidth,this._h=this.$el.offsetHeight,this.$emit("notify"))},addResizeHandlers:function(){this._resizeObject.contentDocument.defaultView.addEventListener("resize",this.compareAndNotify),this.compareAndNotify()},removeResizeHandlers:function(){this._resizeObject&&this._resizeObject.onload&&(!t&&this._resizeObject.contentDocument&&this._resizeObject.contentDocument.defaultView.removeEventListener("resize",this.compareAndNotify),delete this._resizeObject.onload)}},mounted:function(){var e=this;i(),this.$nextTick(function(){e._w=e.$el.offsetWidth,e._h=e.$el.offsetHeight});var n=document.createElement("object");this._resizeObject=n,n.setAttribute("aria-hidden","true"),n.setAttribute("tabindex",-1),n.onload=this.addResizeHandlers,n.type="text/html",t&&this.$el.appendChild(n),n.data="about:blank",t||this.$el.appendChild(n)},beforeDestroy:function(){this.removeResizeHandlers()}};function s(e){e.component("resize-observer",n),e.component("ResizeObserver",n)}var r={version:"0.4.5",install:s},o=null;return"undefined"!=typeof window?o=window.Vue:"undefined"!=typeof global&&(o=global.Vue),o&&o.use(r),e.install=s,e.ResizeObserver=n,e.default=r,e}({});