flaskbb/flaskbb/templates/forum/topic.html

{% extends theme("layout.html") %}
{% set page_title = _("%(title)s - Topic", title=topic.title) %}
{% set active_forum_nav=True %}

{% block content %}
{% from theme('macros.html') import render_pagination, form_field, generate_post_id, generate_post_url %}

<div class="topic-view">
    <ol class="breadcrumb flaskbb-breadcrumb">
        <li><a href="{{ url_for('forum.index') }}">{% trans %}Forum{% endtrans %}</a></li>
        <li><a href="{{ topic.forum.category.url }}">{{ topic.forum.category.title }}</a></li>
        <li><a href="{{ topic.forum.url }}">{{ topic.forum.title }}</a></li>
        <li class="active">{{ topic.title }}</li>
    </ol>

    {% include theme('forum/topic_controls.html') %}

    <div class="panel topic-panel">
        <div class="panel-heading topic-head">
            <a href="{{ topic.url }}">{{ topic.title }}</a>
        </div>
        <div class="panel-body topic-body">
            {% for post, user in posts.items %}
            <div id="{{ post.id }}" class="row post-row clearfix">

                <div class="author col-md-2 col-sm-3 col-xs-12">
                    <!-- Registered User -->
                    {% if post.user_id %}
                    <div class="author-name"><h4><a href="{{ user.url }}">{{ user.username }}</a></h4></div>

                    <!-- check if user is online or not -->
                    {% if user|is_online %}
                    <div class="author-online" data-toggle="tooltip" data-placement="top" title="online"></div>
                    {% else %}
                    <div class="author-offline" data-toggle="tooltip" data-placement="top" title="offline"></div>
                    {% endif %}
                    <div class="author-title"><h5>{{ user.primary_group.name }}</h5></div>

                    {% if user.avatar %}
                        <div class="author-avatar"><img src="{{ user.avatar }}" alt="avatar"></div>
                    {% endif %}

                    <div class="author-registered">{% trans %}Joined{% endtrans %}: {{ user.date_joined|format_date('%b %d %Y') }}</div>
                    <div class="author-posts">{% trans %}Posts{% endtrans %}: {{ user.post_count }}</div>
                    <div class="author-pm">
                        {% if current_user.is_authenticated() and post.user_id %}
                        <a href="{{ url_for('message.new_conversation') }}?to_user={{ user.username }}">{% trans %}Message{% endtrans %}</a>
                        {% endif %}
                    </div>

                    {% if user.website %}
                    <div class="author-website"><a href="{{ user.website }}" rel="nofollow">{% trans %}Website{% endtrans %}</a></div>
                    {% endif %}

                    {% else %}
                    <!-- user deleted or guest -->
                    <div class="author-name"><h4><a href="{{ user.url }}">{{ post.username }}</a></h4></div>
                    <div class="author-title"><h5>{% trans %}Guest{% endtrans %}</h5></div>
                    {% endif %}

                </div>

                <div class="post-box col-md-10 col-sm-9 col-xs-12">

                    <div class="post-meta clearfix">
                        <div class="pull-left">
                            <!-- Creation date / Date modified -->
                            <a href="{{ generate_post_url(topic, post, posts.page) }}">
                                {{ post.date_created|format_date('%d %B %Y - %H:%M') }}
                            </a>
                            {% if post.user_id and post.date_modified %}
                            <small>
                                (Last modified: {{ post.date_modified|format_date('%d %B %Y - %H:%M') }} by
                                <a href="{{ url_for('user.profile', username=post.modified_by) }}">{{ post.modified_by }}</a>.)
                            </small>
                            {% endif %}
                        </div>

                        <!-- Post number -->
                        <div class="pull-right">
                            <strong>#{{ generate_post_id(posts, loop.index, flaskbb_config["POSTS_PER_PAGE"]) }}</strong>
                        </div>
                    </div>

                        <div class="post-content clearfix" id="pid{{ post.id }}">
                        {{ post.content|markup|safe }}
                        <!-- Signature Begin -->
                        {% if flaskbb_config["SIGNATURE_ENABLED"] and post.user_id and user.signature %}
                        <div class="post-signature hidden-xs">
                        <hr />
                            {{ user.signature|markup|safe }}
                        </div>
                        {% endif %}
                        <!-- Signature End -->
                    </div>

                        <div class="post-footer clearfix">

                            <!-- Report/Edit/Delete/Quote Post-->
                            <div class="post-menu pull-right">

                            {% if current_user|post_reply(topic) %}
                            <!-- Quick quote -->
                                <a href="#" class="btn btn-icon icon-reply quote-btn" data-post-id="{{ post.id }}" data-toggle="tooltip" data-placement="top" title="Quote this post"></a>
                            <!-- Full quote/reply -->
                                <a href="{{ url_for('forum.reply_post', topic_id=topic.id, post_id=post.id) }}" class="btn btn-icon icon-replyall" data-toggle="tooltip" data-placement="top" title="Full Reply"></a>
                            {% endif %}

                            {% if current_user|edit_post(post) %}
                            <!-- Edit Post -->
                            <a href="{{ url_for('forum.edit_post', post_id=post.id) }}" class="btn btn-icon icon-edit" data-toggle="tooltip" data-placement="top" title="Edit this post"></a>
                            {% endif %}
                            {% if topic.first_post_id == post.id %}
                                {% if current_user|delete_topic(topic) %}
                                <form class="inline-form" method="post" action="{{ url_for('forum.delete_topic', topic_id=topic.id, slug=topic.slug) }}">
                                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
                                    <button class="btn btn-icon icon-delete" data-toggle="tooltip" data-placement="top" title="Delete this topic"></button>
                                </form>
                                {% endif %}
                            {% else %}
                                {% if current_user|delete_post(post) %}
                            <!-- Delete Post -->
                                <form class="inline-form" method="post" action="{{ url_for('forum.delete_post', post_id=post.id) }}">
                                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
                                    <button  class="btn btn-icon icon-delete" data-toggle="tooltip" data-placement="top" title="Delete this post"></button>
                                </form>
                                {% endif %}

                            {% endif %}

                            {% if current_user.is_authenticated() %}
                            <!-- Report post -->
                                <a href="{{ url_for('forum.report_post', post_id=post.id) }}" onclick="window.open(this.href, 'wio_window','width=500,height=500'); return false;" class="btn btn-icon icon-report" data-toggle="tooltip" data-placement="top" title="Report this post"></a>
                            {% endif %}

                            </div> <!-- end post-menu -->
                        </div> <!-- end footer -->

                </div>
            </div>
            {% endfor %}

        </div> <!-- end topic-body -->
    </div> <!-- end topic-panel -->

    {% include theme('forum/topic_controls.html') %}
    {% from theme("macros.html") import render_field, render_quickreply, render_submit_field %}
    {% if form %}
    <form class="form" action="#" method="post">
        {{ form.hidden_tag() }}
        <div class="row">
            <div class="col-md-offset-2 col-sm-offset-3 col-md-10 col-sm-9 col-xs-12">
                <div class="editor-box">
                    <div class="editor quickreply">
                            {{ render_quickreply(form.content, div_class="new-message", rows=7, cols=75, placeholder="", **{'data-provide': 'markdown', 'data-autofocus': 'false', 'id': 'quickreply-editor'}) }}
                    </div>
                    <div class="editor-submit">
                        <div class="editor-options pull-left">
                            <span class="label label-info">Markdown</span>

                            <a href="#" class="label label-success" data-toggle="modal" data-target="#markdown-cheatsheet">
                                help
                            </a>

                            <!-- Modal -->
                            <div class="modal fade" id="markdown-cheatsheet" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                            <h4 class="modal-title" id="myModalLabel">Markdown Cheatsheet</h4>
                                        </div>
                                        <div class="modal-body">
                                            {% include theme("markdown_help.html") %}
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <a class="label label-success" href="#">emojis</a> <!-- TODO: add emoji cheat sheet -->
                        </div>
                        {{ render_submit_field(form.submit, input_class="btn btn-success pull-right") }}
                    </div>
                </div>
            </div>
        </div>
    </form>
    {% endif %}

</div>
{% endblock %}

{% block scripts %}
    <script type="text/javascript" src="{{ url_for('static', filename='js/editor.min.js') }}"></script>
    <script>
    $(function () {
      $('[data-toggle="tooltip"]').tooltip()
    })

    $('#quickreply-editor').textcomplete([
        { // emoji strategy
            match: /\B:([\-+\w]*)$/,
            search: function (term, callback) {
                callback($.map(emojies, function (emoji) {
                    return emoji.indexOf(term) === 0 ? emoji : null;
                }));
            },
            template: function (value) {
                return '<img class="emoji" src="/static/emoji/' + value + '.png"></img>' + value;
            },
            replace: function (value) {
                return ':' + value + ': ';
            },
            index: 1
        },
    ], {
        onKeydown: function (e, commands) {
            if (e.ctrlKey && e.keyCode === 74) { // CTRL-J
                return commands.KEY_ENTER;
            }
        }
    });
    </script>
{% endblock %}