mirror of
https://github.com/lucaspalomodevelop/eventcally.git
synced 2026-03-13 00:07:22 +00:00
Widget einfacher einbinden #337
This commit is contained in:
Daniel Grams
parent
81b1594c4d
commit
42928a2ca5
@ -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');
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
131
project/static/widget-loader.js
Normal file
131
project/static/widget-loader.js
Normal file
@ -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);
|
||||
@ -6,10 +6,13 @@
|
||||
{%- endblock -%}
|
||||
{% block content %}
|
||||
|
||||
<h1>{{ _('Widgets') }} <a id="toggle-settings-btn" class="btn btn-light" role="button" data-toggle="collapse" href="#settingsContainer" aria-expanded="false" aria-controls="settingsContainer"><i class="fa fa-cog"></i></a></h1>
|
||||
<h1 class="mb-3">{{ _('Widgets') }}</h1>
|
||||
<div class="btn-group mb-3">
|
||||
<button type="button" id="toggle-settings-btn" class="btn btn-outline-secondary btn-sm" data-toggle="collapse" data-target="#settingsContainer" aria-expanded="false" aria-controls="settingsContainer"><i class="fa fa-cog"></i> {{ _('Settings') }}</button>
|
||||
</div>
|
||||
|
||||
<div class="collapse" id="settingsContainer">
|
||||
<h2>{{ _('Settings') }}</h2>
|
||||
<div class="collapse pb-4" id="settingsContainer">
|
||||
<h2 class="mt-0">{{ _('Settings') }}</h2>
|
||||
<form action="" method="POST">
|
||||
{{ form.hidden_tag() }}
|
||||
|
||||
@ -22,17 +25,68 @@
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<h2>{{ _('Veranstaltungen als iFrame einbetten') }}</h2>
|
||||
<textarea class="form-control"><iframe src="{{ url_for('widget_event_dates', au_short_name=admin_unit.short_name, _external=True) }}" allowtransparency="true"></iframe></textarea>
|
||||
<p><a class="btn btn-outline-info my-2" data-toggle="collapse" href="#iFrameContainer" aria-expanded="false" aria-controls="iFrameContainer">Vorschau</a></p>
|
||||
<div class="collapse" id="iFrameContainer">
|
||||
<iframe src="{{ url_for('widget_event_dates', au_short_name=admin_unit.short_name) }}" allowtransparency="true" style="display: block; width: 90vw; height: 40vh; max-width: 100%;"></iframe>
|
||||
<h2>Veranstaltungen als Widget einbinden</h2>
|
||||
<p>Auf deiner Webseite kannst du per Widget ganz einfach die Veranstaltungen deiner Organisation einbinden.</p>
|
||||
|
||||
<div class="modal fade" id="embedWidgetModal" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Installation</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<nav>
|
||||
<div class="nav nav-tabs" id="embedWidgetModalTab" role="tablist">
|
||||
<a class="nav-item nav-link active" id="embedWidgetModalScriptTabLink" data-toggle="tab" href="#embedWidgetModalScriptTab" role="tab" aria-controls="embedWidgetModalScriptTab" aria-selected="true">Standard</a>
|
||||
<a class="nav-item nav-link" id="embedWidgetModalIframeTabLink" data-toggle="tab" href="#embedWidgetModalIframeTab" role="tab" aria-controls="embedWidgetModalIframeTab" aria-selected="false">Alternative iFrame</a>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="tab-content" id="nav-tabContent">
|
||||
<div class="tab-pane fade show active py-3" id="embedWidgetModalScriptTab" role="tabpanel" aria-labelledby="embedWidgetModalScriptTabLink">
|
||||
<p>Kopiere den unten stehenden Code und füge ihn auf deiner Website ein.</p>
|
||||
<p>Füge den folgenden Code im <code><head></code> der Seite ein.</p>
|
||||
<textarea class="form-control text-monospace" style="font-size: 0.7rem;" disabled rows="6"><!-- Oveda Widget -->
|
||||
<script>(function(w,d,s,o,f,js,fjs){w['OvedaWidget']=o;w[o]=w[o]||function(){(w[o].q=w[o].q||[]).push(arguments)};js=d.createElement(s),fjs=d.getElementsByTagName(s)[0];js.id=o;js.src=f;js.async=1;fjs.parentNode.insertBefore(js,fjs);}(window,document,'script','oveda','{{ url_for('static', filename='widget-loader.js', _external=True) }}'));</script>
|
||||
<!-- End Oveda Widget --></textarea>
|
||||
<p class="mt-3">Füge den folgenden Code an der Stelle im <code><body></code> der Seite ein, wo das Widget dargestellt werden soll.</p>
|
||||
<textarea class="form-control text-monospace" style="font-size: 0.7rem;" disabled rows="3"><div class="oveda-widget" data-widget-short-name="{{ admin_unit.short_name }}" data-widget-width="100%" data-widget-height="400px" data-widget-resize="true" data-widget-google-tag-manager="false"></div></textarea>
|
||||
<p class="mt-3">Mit den folgenden Attributen kann das Widget konfiguriert werden:</p>
|
||||
<ul>
|
||||
<li><var>data-widget-short-name</var>: Kurzname der Organisation</li>
|
||||
<li><var>data-widget-width</var>: iFrame Breite (CSS)</li>
|
||||
<li><var>data-widget-height</var>: iFrame Höhe (CSS)</li>
|
||||
<li><var>data-widget-resize</var>: iFrame Größe automatisch anpassen</li>
|
||||
<li><var>data-widget-google-tag-manager</var>: Events in window.dataLayer für Google Tag Manager schreiben.
|
||||
<ul>
|
||||
<li>Event <var>ovedaWidget.pageView</var> mit Parameter <var>url</var></li>
|
||||
<li>Event <var>ovedaWidget.linkClick</var> mit Parameter <var>url</var></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="tab-pane fade py-3" id="embedWidgetModalIframeTab" role="tabpanel" aria-labelledby="embedWidgetModalIframeTabLink">
|
||||
<p>Alternativ zur Einbindung per Script kann das Widget direkt per iFrame eingebunden werden.</p>
|
||||
<p>Kopiere den unten stehenden Code und füge ihn auf deiner Website ein. Füge den folgenden Code an der Stelle im <code><body></code> der Seite ein, wo das Widget dargestellt werden soll.</p>
|
||||
<textarea class="form-control text-monospace" style="font-size: 0.7rem;" disabled><iframe src="{{ url_for('widget_event_dates', au_short_name=admin_unit.short_name, _external=True) }}"></iframe></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="btn-group mb-3">
|
||||
<button type="button" class="btn btn-outline-info" data-toggle="modal" data-target="#embedWidgetModal"><i class="fa fa-wrench"></i> Installation</button>
|
||||
<a class="btn btn-outline-info" href="{{ url_for('organizations', path=admin_unit.id) }}" target="_blank" rel="noopener noreferrer"><i class="fa fa-external-link-alt"></i> Vorschau</a>
|
||||
</div>
|
||||
|
||||
{% if admin_unit.suggestions_enabled %}
|
||||
<h2>{{ _('Link, um Veranstaltungen vorzuschlagen') }}</h2>
|
||||
<input class="form-control" value="{{ url_for('event_suggestion_create_for_admin_unit', au_short_name=admin_unit.short_name, _external=True) }}" />
|
||||
<p><a class="btn btn-outline-info my-2" href="{{ url_for('event_suggestion_create_for_admin_unit', au_short_name=admin_unit.short_name, _external=True) }}" target="_blank" rel="noopener noreferrer">Vorschau <i class="fa fa-external-link-alt"></i></a></p>
|
||||
<input class="form-control text-monospace" style="font-size: 0.7rem;" disabled value="{{ url_for('event_suggestion_create_for_admin_unit', au_short_name=admin_unit.short_name, _external=True) }}" />
|
||||
<p><a class="btn btn-outline-info my-2" href="{{ url_for('event_suggestion_create_for_admin_unit', au_short_name=admin_unit.short_name, _external=True) }}" target="_blank" rel="noopener noreferrer"><i class="fa fa-external-link-alt"></i> Vorschau</a></p>
|
||||
{% endif %}
|
||||
|
||||
|
||||
|
||||
@ -13,13 +13,34 @@
|
||||
{% block header_before_site_js %}
|
||||
{{ render_form_scripts() }}
|
||||
<script>
|
||||
window.iFrameResizer = {
|
||||
onReady: function() {
|
||||
if ('parentIFrame' in window && document.location.search.length) {
|
||||
parentIFrame.scrollToOffset(0,0);
|
||||
}
|
||||
function scrollParentToTop() {
|
||||
if ('parentIFrame' in window) {
|
||||
parentIFrame.scrollToOffset(0,0);
|
||||
}
|
||||
}
|
||||
|
||||
function trackAnalyticsEvent(data) {
|
||||
if ('parentIFrame' in window) {
|
||||
parentIFrame.sendMessage({'type': 'OVEDA_ANALYTICS_EVENT', 'data': data});
|
||||
}
|
||||
}
|
||||
|
||||
window.iFrameResizer = {
|
||||
onReady: function() {
|
||||
if (document.location.search.length) {
|
||||
scrollParentToTop();
|
||||
}
|
||||
|
||||
trackAnalyticsEvent({'event':'pageView', 'url':document.location.href});
|
||||
}
|
||||
}
|
||||
|
||||
$(function () {
|
||||
$("a.stretched-link").click(function(){
|
||||
trackAnalyticsEvent({'event':'linkClick', 'url':this.href});
|
||||
return true;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.2/iframeResizer.contentWindow.min.js" integrity="sha512-14SY6teTzhrLWeL55Q4uCyxr6GQOxF3pEoMxo2mBxXwPRikdMtzKMYWy2B5Lqjr6PHHoGOxZgPaxUYKQrSmu0A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
{%- endblock -%}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user