diff --git a/templates/info.html b/templates/info.html index 09340bf561525c218afd4fa17851d2c44336b2bf..6a65a3f84772b65a037a3a13f6fceaeec24ba138 100644 --- a/templates/info.html +++ b/templates/info.html @@ -10,8 +10,11 @@ <style> .h-auto { height: auto; } .info-card > #visitTurku { overflow-y: scroll; } - .info-card > #twitter { height: 528px; } + .info-card > #twitter { height: 598px; } + {% if g.is_kiosk %} + /* This particular trick only works with fixed height elements, ie. breaks responsiveness, + but kiosk mode need not be responsive, since the screen resolution is fixed */ .iframe-container { width: 100%; height: 100px; @@ -30,6 +33,7 @@ .iframe-cover { z-index: 1; } + {% endif %} </style> {% endblock head %} @@ -38,8 +42,11 @@ <div class="container"> <div class="row"> <div class="col-12"> + {# + # FIXME: link disabling doesn't work with this particular widget (iframes need to die), using a CSS hack that disables all interaction, see above + # - the poblem is not having a reliable way to add an load hook to the iframe added by this widget + #} <!-- Forecast7.com --> - {# FIXME: link disabling doesn't work with this particular widget (iframes need to die), using a hack that disables all interaction, see CSS above #} <div class="card info-card box-shadow h-auto"> <div class="card-header"> <h3 class="card-title">Säätiedot</h3> @@ -64,11 +71,8 @@ <div class="col-md-6"> <!-- Twitter feed --> <div class="card info-card box-shadow content-spaced"> - <div class="card-header"> - <h3 class="card-title">Twiitit: Turkukaupunki</h3> - </div> <div id="twitter"> - <a class="twitter-timeline" data-dnt="true" data-theme="light" data-chrome="noheader nofooter noscrollbar" data-height="528" href="https://twitter.com/Turkukaupunki?ref_src=twsrc%5Etfw"> + <a class="twitter-timeline" data-dnt="true" data-height="598" data-theme="light" data-chrome="nofooter noscrollbar" href="https://twitter.com/Turkukaupunki?ref_src=twsrc%5Etfw"> Twiitit: Turkukaupunki </a> </div> @@ -139,7 +143,10 @@ twttr.events.bind('loaded', function (e) { e.widgets.forEach(function (w) { // the twitter widget is loaded in an iframe, contents() is needed because of that - $('#' + w.id).contents().disableExternalLinks(); + $(w).on('load', function () { + // Note: this may not fire, if the widget has already fully loaded, which is why we double up below + $(this).contents().disableExternalLinks(); + }).contents().disableExternalLinks(); }); }); }); diff --git a/templates/internal/base.html b/templates/internal/base.html index d5563545e37e8168a74187a234605824740d3c92..4544a456d9cb92ffe31ec391d3f3d69868eb20cf 100644 --- a/templates/internal/base.html +++ b/templates/internal/base.html @@ -166,10 +166,9 @@ // TODO: disable when not running on the display $.fn.disableExternalLinks = function(force = false) { // for some extra security the first condition is resolved when templates are compiled - if ({{ (not g.is_kiosk)|tojson|safe }} && !force) + if (({{ (not g.is_kiosk)|tojson|safe }} && !force) || this.data('links-disabled')) return this; - var target = this; var handler = function (e) { e.preventDefault(); $link = $(this); @@ -184,7 +183,8 @@ }).modal(); }; - target.on('click', 'a[href^="http"]:not([href*="' + location.hostname + '"])', handler); + this.on('click', 'a[href^="http"]:not([href*="{{ request.host }}"])', handler); + this.data('links-disabled', true); return this; };