info.html

{% extends 'internal/base.html' %}

{% set title = 'Info' %}
{% set sticky_banners = g.is_kiosk %}
{% set localized = false %}
{% set content_lang = 'fi' %}

{% block head %}
    <meta name="twitter:widgets:csp" content="on">
    <meta name="twitter:widgets:autoload" content="off">

    {{- super() }}

    <style>
        .h-auto { height: auto; }
        .info-card > #visitTurku { overflow-y: scroll; }
        .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: 120px;
            position: relative;
        }
        .iframe-area, .iframe-cover {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
        .iframe-area {
            z-index: 0;
        }
        .iframe-cover {
            z-index: 1;
        }
        {% endif %} 
    </style>
{% endblock head %}

{% block content %}

<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 -->
            <div class="card info-card box-shadow h-auto">
                <div class="card-header">
                    <h3 class="card-title">Säätiedot</h3>
                </div>
                <div class="iframe-container">
                    <div class="iframe-area">
                        <div id="forecast7">
                            <a class="weatherwidget-io" href="https://forecast7.com/en/60d4522d27/turku/" data-label_1="TURKU" data-label_2="Sää" data-theme="original">TURKU Sää</a>
                            <script nonce="{{ g.csp_nonce }}">
                                !function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = 'https://weatherwidget.io/js/widget.min.js'; fjs.parentNode.insertBefore(js, fjs); } }(document, 'script', 'weatherwidget-io-js');
                            </script>
                        </div>
                    </div>
                    <div class="iframe-cover"> </div>
                </div>
            </div>
            <small class="source-link pull-right text-shadow content-spaced">Lähde: <a class="text-dark" href="https://forecast7.com/en/60d4522d27/turku/">Forecast7.com</a></small>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <!-- Twitter feed -->
            <div class="card info-card box-shadow content-spaced">
                <div id="twitter">
                    <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>
            </div>
        </div>
        <div class="col-md-6">
            <!-- Visit Turku news feed -->
            <div class="card info-card box-shadow">
                <div class="card-header">
                    <h3 class="card-title">Visit Turku -uutiset</h3>
                </div>
                <div id="visitTurku" class="list-group list-group-flush"></div>
            </div>
        </div>
    </div>
</div>

{% endblock content %}

{% block scripts %}
    {{- super() }}

    <!-- TODO: once the cdnjs project hosts this, migrate to that -->
    <script src="{{ util.static_url('js/jquery-rss/3.3.0/jquery.rss.min.js') }}" nonce="{{ g.csp_nonce }}"></script>

    <script nonce="{{ g.csp_nonce }}">
        $(document).ready(function () {
            // Twitter initialization code
            window.twttr = (function (d, s, id) {
                var js, fjs = d.getElementsByTagName(s)[0],
                    t = window.twttr || {};
                if (d.getElementById(id)) return;
                js = d.createElement(s);
                js.id = id;
                js.src = "https://platform.twitter.com/widgets.js";
                fjs.parentNode.insertBefore(js, fjs);

                t._e = [];
                t.ready = function (f) {
                    t._e.push(f);
                };
                return t;
            }(document, "script", "twitter-wjs"));

            // TODO: consider making a docker image of https://github.com/sdepold/feedr and use that as custom host option, to mitigate potential downtime
            // see: https://github.com/sdepold/jquery-rss
            $('#visitTurku').rss(
                'https://www.visitturku.fi/section/73193/rss.xml',
                {
                    limit: 10,
                    layoutTemplate: '{entries}',
                    // using the raw body here would give a better user experience, but it is a security risk and can result in broken HTML
                    entryTemplate: `
                        <a href="{url}" class="list-group-item list-group-item-action flex-column align-items-start">
                            <div class="d-flex w-100 justify-content-between">
                                <h5 class="mb-1 text-foli">{title}</h5>
                            </div>
                            <p class="mb-1">{bodyPlain}</p>
                            <small class="pull-right">{author} - {date}</small>
                        </a>`
                }
            ).disableExternalLinks();

            $('#twitter').disableExternalLinks(); // in case the widget fails to load disable the link in the container as a placeholder
            $('small.source-link').disableExternalLinks();

            // Note: disableExternalLinks() is not actually enough here, youtube videos and other embedded media are beyond its reach
            // HTML5 sandboxing on the iframe may help, but it is more likely just to break the widget...
            twttr.ready(function (twttr) {
                twttr.widgets.load(document.getElementById("twitter"));

                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).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();
                    });
                });
            });
        });
    </script>

{% endblock scripts %}