Mercurial > libervia-templates

view default/base/base.html @ 84:b2ef34e602cf

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
base, js (websocket), css (main style): dynamic pages implementation, first draft: this patch introduces the browser part of dynamic pages. Dynamic pages work by establishing a websocket between server and the current page, if requested by server (which means that needed arguments are present in template). Once the connection is established, the server can, for now, reload the page, append HTML elements, or receive arbitrary data (without reloading the page, in opposition to data post). If connection can't be established, a popup will be displayed and connection will be retried many times after variable timeouts. The browser will finally give up and display an alert to client if the number of retries is too high (20 for now).
author Goffi <goffi@goffi.org>
date Wed, 03 Jan 2018 01:12:16 +0100
parents 6ba0129a9a4e
children 304cbb690f15
line wrap: on
line source

{% set embedded = True %} {# embedded is set to avoid including base.html several times if a generic page is included (e.g. blog/articles.html) #}
{% import 'components/common.html' as component with context %}
{{ script.include('common', '') }} {# common.js is a common script, so it's useful to import it here #}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    {% if norobots %}
        <meta name="robots" content="noindex, nofollow">
    {% endif %}

    <title>{% block title %}{{C.APP_NAME}}{% endblock %}</title>

    {% if css_content is defined %}
        <style type="text/css">
            {{css_content}}
        </style>
    {% else %}
        {% for css_file in css_files %}
            <link rel='stylesheet' type="text/css" href='{{root_path}}{{css_file}}'>
        {% endfor %}
    {% endif %}

    {% if background_image is defined %}
        {# Q&D workaround to implement dynamic background-image
           it should be replaced by a better mechanism in the future, avoid using it #}
        <style type="text/css">
            html {
                background-image: url('{{background_image}}');
                background-size: 15em;
            }
        </style>
    {% endif %}

    {# JS handling #}
    {% if websocket is defined %}
        {{ script.include('websocket', '') }}
    {% endif %}
    {{ script.generate_scripts() }}
    {% if websocket is defined %}
        <script>var socket=new WSHandler("{{websocket.url}}", "{{websocket.token}}", {{websocket.debug}});</script>
    {% endif %}
</head>
<body>
    {% if main_menu is defined %}
        {% block main_menu %}
            {{ component.menu(main_menu, class="main_menu") }}
        {% endblock main_menu %}
    {% endif %}

    <main id='main_area'>
        <header>
            {% if confirm %}
            {# confirmation message used when post data has been handled correctly #}
                {% block confirm %}
                    <div class="box post_confirm">
                        {% block confirm_message %}
                            {% trans %}Your data has been sent correctly.{% endtrans %}
                        {% endblock confirm_message %}
                    </div>
                {% endblock confirm %}
            {% endif %}

        </header>

        <div id="body">
        {% block category_menu scoped %}
            {% if category_menu is defined %}
                {{ component.menu(category_menu, class="category_menu") }}
            {% endif %}
        {% endblock category_menu %}
        {% block body %}
        {% endblock body %}
        </div>
        <footer>{% block footer %}{% trans app_name=C.APP_NAME %}Powered by {{app_name}}{% endtrans %}{% endblock %}</footer>
    </main>
</body>
</html>