From 42928a2ca53aeba146b8798ccd2371fbcbb683d5 Mon Sep 17 00:00:00 2001 From: Daniel Grams Date: Tue, 23 Nov 2021 16:57:28 +0100 Subject: [PATCH] Widget einfacher einbinden #337 --- project/static/vue/organization/read.vue.js | 2 +- project/static/widget-loader.js | 131 ++++++++++++++++++ project/templates/manage/widgets.html | 74 ++++++++-- project/templates/widget/event_date/list.html | 31 ++++- 4 files changed, 222 insertions(+), 16 deletions(-) create mode 100644 project/static/widget-loader.js diff --git a/project/static/vue/organization/read.vue.js b/project/static/vue/organization/read.vue.js index 21f8967..c341410 100644 --- a/project/static/vue/organization/read.vue.js +++ b/project/static/vue/organization/read.vue.js @@ -72,7 +72,7 @@ const OrganizationRead = { .then((response) => { this.organization = response.data; Vue.nextTick(function () { - iFrameResize({ minHeight: 300 }, '#oveda-widget'); + iFrameResize({ minHeight: 300, onMessage: function(m) {} }, '#oveda-widget'); }); }); }, diff --git a/project/static/widget-loader.js b/project/static/widget-loader.js new file mode 100644 index 0000000..d59778b --- /dev/null +++ b/project/static/widget-loader.js @@ -0,0 +1,131 @@ +(function(w, d) { + + var script = document.currentScript || document.querySelector('script[src*="widget-loader.js"]') + var baseUrl = script.src.replace("/static/widget-loader.js", ""); + + var iFrameElements = []; + var needsResizer = false; + + w.onload = function() { + initWidgets() + + if (needsResizer) { + addIframeResizerScript(); + } + }; + + function initWidgets() { + var elements = d.getElementsByClassName("oveda-widget"); + for (var i = 0; i < elements.length; i++) { + initIframeWidget(elements.item(i)); + } + } + + function initIframeWidget(element) { + var shortName = getWidgetData(element, 'short-name'); + var width = getWidgetData(element, 'width', '100%'); + var height = getWidgetData(element, 'height', '400px'); + var resize = getWidgetBoolData(element, 'resize', false); + var googleTagManager = getWidgetBoolData(element, 'google-tag-manager', false); + + var style = "border: none; width:" + width + ";height:" + height + ";"; + if (resize) { + style += "min-width:100%;max-width:100%;"; + } + + var iFrame = d.createElement("iframe"); + iFrame.class = "oveda-widget-iframe"; + iFrame.src = baseUrl + "/" + shortName + "/widget/eventdates"; + iFrame.style = style; + iFrame.frameborder = "0"; + iFrame.allowtransparency = "true"; + element.appendChild(iFrame); + + if (resize || googleTagManager) { + needsResizer = true; + } + + iFrameElements.push(element); + } + + function getWidgetData(element, name, defaultValue = null) { + var attribute = 'data-widget-' + name; + + if (!element.hasAttribute(attribute)) { + return defaultValue; + } + + return element.getAttribute(attribute); + } + + function getWidgetBoolData(element, name, defaultValue = false) { + return getWidgetData(element, name, defaultValue) !== "false"; + } + + function addIframeResizerScript() { + addScript("https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.2/iframeResizer.min.js", startIframeResizer); + } + + function startIframeResizer() { + for (var i = 0; i < iFrameElements.length; i++) { + var element = iFrameElements[i]; + var iFrame = element.getElementsByTagName("iframe")[0]; + var height = getWidgetData(element, 'height', '400px'); + var resize = getWidgetBoolData(element, 'resize', false); + var googleTagManager = getWidgetBoolData(element, 'google-tag-manager', false); + + if (resize || googleTagManager) { + var config = { autoResize: resize }; + + if (resize) { + config.minHeight = height; + } else { + config.scrolling = "omit"; + config.sizeHeight = false; + config.sizeWidth = false; + } + + if (googleTagManager) { + config.onMessage = function(messageData) { + onIframeMessage(messageData, googleTagManager); + } + } + + iFrameResize(config, iFrame); + } + } + }; + + function onIframeMessage(messageData, googleTagManager) { + var message = messageData.message; + + if (message.type == "OVEDA_ANALYTICS_EVENT") { + trackAnalyticsEvent(message.data, googleTagManager); + } + } + + function trackAnalyticsEvent(data, googleTagManager) { + if (googleTagManager) { + data.event = "ovedaWidget." + data.event; + + if (window.dataLayer !== null && window.dataLayer !== undefined) { + window.dataLayer.push(data); + } + } + } + + function addScript(src, callback) { + var script = d.createElement("script"); + script.src = src; + script.onreadystatechange = callback; + script.onload = callback; + + addScriptElement(script) + } + + function addScriptElement(element) { + var p = d.getElementsByTagName("script")[0]; + p.parentNode.insertBefore(element, p); + } + + })(window, document); \ No newline at end of file diff --git a/project/templates/manage/widgets.html b/project/templates/manage/widgets.html index f3d8873..abe1e9e 100644 --- a/project/templates/manage/widgets.html +++ b/project/templates/manage/widgets.html @@ -6,10 +6,13 @@ {%- endblock -%} {% block content %} -

{{ _('Widgets') }}

+

{{ _('Widgets') }}

+
+ +
-
-

{{ _('Settings') }}

+
+

{{ _('Settings') }}

{{ form.hidden_tag() }} @@ -22,17 +25,68 @@
-

{{ _('Veranstaltungen als iFrame einbetten') }}

- -

-
- +

Veranstaltungen als Widget einbinden

+

Auf deiner Webseite kannst du per Widget ganz einfach die Veranstaltungen deiner Organisation einbinden.

+ + + +
+ + Vorschau
{% if admin_unit.suggestions_enabled %}

{{ _('Link, um Veranstaltungen vorzuschlagen') }}

- -

Vorschau

+ +

Vorschau

{% endif %} diff --git a/project/templates/widget/event_date/list.html b/project/templates/widget/event_date/list.html index 7ed00a1..d0b33d3 100644 --- a/project/templates/widget/event_date/list.html +++ b/project/templates/widget/event_date/list.html @@ -13,13 +13,34 @@ {% block header_before_site_js %} {{ render_form_scripts() }} {%- endblock -%}