view default/blog/item.html @ 84:b2ef34e602cf

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 f19e9f5e43b0
children 94b5806b9e2f
line wrap: on
line source

{# display a blog item which can be expanded/retracted by clicking on it

    if the locale differs from item language, it will be totally reduced, and will need a click to be displayed

    @variable item(data_object.BlogItem): item to display
    @variable identities(data_object.Identities): identities which can be used to display info on item author
    @variable dates_format(unicode): format of the date to use (see date_fmt filter)
#}

{% block item %}

{% if item.language and locale and locale.language != item.language %}
    {# we may display items in different language in a specific way #}
    {% set other_lang = " other_lang" %}
{% endif %}

<article id="{{item.id}}" class="init box{{other_lang}}{{" clicked" if expanded}}">

    {# following message is displayed if item lang is different from page locale #}
    {% if other_lang is defined %}
        <div class="info"><p>{% trans language=locale.language_name %}This message is not in {{language}}, click to display anyway{% endtrans %}</p></div>
    {% endif %}

    {# we put a reduce button at the top #}
    <div class="expand_box box_top" onclick="clicked_mh_fix('{{item.id}}')">
        <p>
            <span class='hide'>{% trans %}Click to reduce…{% endtrans %}</span>
        </p>
    </div>

    <header>
        {% block header %}
        <div class="title">{% block blog_title %}{{ item.title_xhtml or item.title or '' }}{% endblock %}</div>
            {% block metadata %}
            <div class="metadata">
            {% if identities is defined %}
                <span class="author">{{identities[item.author_jid].nick | default(item.author)}}</span>
            {% else %}
                <span class="author">{{item.author}}</span>
            {% endif %}
            <span class="blog_data">{{item.published|date_fmt(fmt=dates_format)}}</span>
            </div>

            {% endblock metadata %}
        {% endblock header %}
    </header>

    <div class="content{{' text' if not item.content_xhtml}}">
        {% block content %}
        {{- item.content_xhtml or item.content or '' -}}
        {% endblock content %}
    </div>

    {# and the bottom button to expand/reduce the article #}
    <div class="expand_box box_bottom" onclick="clicked_mh_fix('{{item.id}}')">
        <p>
            <span class='show'>{% trans %}Click to expand…{% endtrans %}</span>
            <span class='hide'>{% trans %}Click to reduce…{% endtrans %}</span>
        </p>
    </div>

</article>

{% endblock item %}