Transition templating to Twig

1 files changed, 353 insertions, 0 deletions

diff --git a/src/application/templates/bootstrap-3/view_topic.twig b/src/application/templates/bootstrap-3/view_topic.twig
new file mode 100644
index 0000000..008c336
--- /dev/null
+++ b/src/application/templates/bootstrap-3/view_topic.twig
@@ -0,0 +1,353 @@
+{% set canReply =
+    not ctx.topic.isLocked
+    and currentUser is not null
+    and currentUser.hasPermission(permission("CREATE_OWN_POST")) %}
+
+{% set canEdit =
+    currentUser is not null and (
+        (
+            ctx.topicAuthor is not null
+            and currentUser.id == ctx.topicAuthor.id
+            and ctx.topicAuthor.hasPermission(permission("EDIT_OWN_TOPIC"))
+        )
+        or currentUser.hasPermission(permission("EDIT_OTHER_TOPIC"))
+    ) %}
+
+{% set canDelete =
+    currentUser is not null and (
+        (
+            ctx.topicAuthor is not null
+            and currentUser.id == ctx.topicAuthor.id
+            and ctx.topicAuthor.hasPermission(permission("DELETE_OWN_TOPIC"))
+        )
+        or currentUser.hasPermission(permission("DELETE_OTHER_TOPIC"))
+    ) %}
+
+{% set title = ctx.topic.title %}
+{% extends "base.twig" %}
+
+{% block content %}
+
+{% if canEdit %}
+    <div class="modal fade" tabindex="-1" role="dialog" id="diag-edit-post">
+        <form class="modal-dialog" role="document" action="?_action=updatepost" method="post">
+            <input type="hidden" id="i_edit_post" name="post">
+            <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">{{ __("Edit post") }}</h4>
+                </div>
+                <div class="modal-body">
+                    <label class="sr-only" for="i_edit_message">{{ __("Message:") }}</label>
+                    <div class="panel panel-default">
+                        <div class="panel-heading" style="padding:4px">
+                            <div class="btn-toolbar" role="toolbar">
+                                <div class="btn-group" role="group">
+                                    <button data-area="#i_edit_message" title="{{ __("Bold") }}" data-editor-command="bold" type="button" class="btn btn-default btn-xs"><i class="fa fa-fw fa-bold"></i></button>
+                                    <button data-area="#i_edit_message" title="{{ __("Italic") }}" data-editor-command="italic" type="button" class="btn btn-default btn-xs"><i class="fa fa-fw fa-italic"></i></button>
+                                    <button data-area="#i_edit_message" title="{{ __("Underlined") }}" data-editor-command="underline" type="button" class="btn btn-default btn-xs"><i class="fa fa-fw fa-underline"></i></button>
+                                    <button data-area="#i_edit_message" title="{{ __("Strikethrough") }}" data-editor-command="strikethrough" type="button" class="btn btn-default btn-xs"><i class="fa fa-fw fa-strikethrough"></i></button>
+                                </div>
+                                <div class="btn-group" role="group">
+                                    <button data-area="#i_edit_message" title="{{ __("Superscript") }}" data-editor-command="sup" type="button" class="btn btn-default btn-xs"><i class="fa fa-fw fa-superscript"></i></button>
+                                    <button data-area="#i_edit_message" title="{{ __("Subscript") }}" data-editor-command="sub" type="button" class="btn btn-default btn-xs"><i class="fa fa-fw fa-subscript"></i></button>
+                                </div>
+                                <div class="btn-group" role="group">
+                                    <button data-area="#i_edit_message" title="{{ __("Quote") }}" data-editor-command="quote" type="button" class="btn btn-default btn-xs"><i class="fa fa-fw fa-quote-left"></i></button>
+                                    <button data-area="#i_edit_message" title="{{ __("Spoiler") }}" data-editor-command="spoiler" type="button" class="btn btn-default btn-xs"><i class="fa fa-fw fa-eye"></i></button>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="panel-body" style="padding:0">
+                            <textarea class="form-control" id="i_edit_message" name="message" required rows="12" cols="60" style="resize:vertical;max-height:500px;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;margin:-1px;width:calc(100% + 2px)"></textarea>
+                        </div>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal"><span class="fa fa-remove" aria-hidden="true"></span> {{ __("Cancel") }}</button>
+                    <button type="submit" class="btn btn-success"><span class="fa fa-save" aria-hidden="true"></span> {{ __("Save changes") }}</button>
+                </div>
+            </div>
+        </form>
+    </div>
+{% endif %}
+{% if currentUser is null %}
+    <div class="modal fade" tabindex="-1" role="dialog" id="diag-cant-view-attachment">
+        <div class="modal-dialog modal-danger" role="document">
+            <div class="modal-content panel-danger">
+                <div class="modal-header panel-heading">
+                    <h4 class="modal-title"><span class="fa fa-exclamation-circle" aria-hidden="true"></span> {{ __("Permission denied") }}</h4>
+                </div>
+                <div class="modal-body">
+                    {{ __("You must be logged in to view attachments") }}
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal"><span class="fa fa-close" aria-hidden="true"></span> {{ __("Close") }}</button>
+                    <a href="?_action=auth&amp;next={{ g.server.REQUEST_URI|url_encode }}" class="btn btn-success"><span class="fa fa-user" aria-hidden="true"></span> {{ __("Log in") }}</a>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        $(function() {
+            $(".attachment").click(function(e) {
+                e.preventDefault();
+                $("#diag-cant-view-attachment").modal();
+            });
+        });
+    </script>
+{% else %}
+    <div class="modal fade" tabindex="-1" role="dialog" id="diag-image-attachment">
+        <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">{{ __("Attachment") }}</h4>
+                </div>
+                <div class="modal-body">
+                    <img class="image-attachment-view attachment-view" id="image-attachment-view" alt="">
+                </div>
+                <div class="modal-footer">
+                    <a href="" download id="image-attachment-dl-btn" class="btn btn-default"><span class="fa fa-download" aria-hidden="true"></span> {{ __("Download") }}</a>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="modal fade" tabindex="-1" role="dialog" id="diag-video-attachment">
+        <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">{{ __("Attachment") }}</h4>
+                </div>
+                <div class="modal-body">
+                    <video class="video-attachment-view attachment-view" id="video-attachment-view" controls></video>
+                </div>
+                <div class="modal-footer">
+                    <a href="" download id="video-attachment-dl-btn" class="btn btn-default"><span class="fa fa-download" aria-hidden="true"></span> {{ __("Download") }}</a>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        $(function() {
+            $(".image-attachment:not(.video-attachment)").click(function(e) {
+                e.preventDefault();
+                var attUrl = "?_action=attachment&attachment=" + encodeURIComponent($(this).attr("data-attachment-id"));
+                $("#image-attachment-view").attr("src", attUrl);
+                $("#image-attachment-dl-btn").attr("href", attUrl);
+                $("#diag-image-attachment").modal();
+            });
+            $(".image-attachment.video-attachment").click(function(e) {
+                e.preventDefault();
+                var attUrl = "?_action=attachment&attachment=" + encodeURIComponent($(this).attr("data-attachment-id"));
+                $("#video-attachment-view").attr("src", attUrl);
+                $("#video-attachment-dl-btn").attr("href", attUrl);
+                $("#diag-video-attachment").modal();
+            });
+            $("#diag-video-attachment").on("hide.bs.modal", function() {
+                $("#video-attachment-view")[0].pause();
+            });
+        });
+    </script>
+{% endif %}
+
+{% set formError = getAndClearFormError("updateTopic") %}
+{% if formError %}
+    {% include "components/alert_error.twig" with { message: formError } %}
+{% endif %}
+{% set formError = getAndClearFormError("lockTopic") %}
+{% if formError %}
+    {% include "components/alert_error.twig" with { message: formError } %}
+{% endif %}
+{% set formError = null %}
+
+<div class="page-header margin-top-0 clearfix">
+    <div id="displayHeading">
+        <div role="heading" class="h1 seamless-inline">
+            {% if ctx.topic.isLocked %}
+                <span class="fa fa-lock text-muted" aria-hidden="true"></span>
+            {% endif %}
+            {{ ctx.topic.title }}
+            <div class="pull-right text-normal">
+                {% if canEdit and not ctx.topic.isLocked %}
+                    <button id="btn-edit-title" class="btn btn-default js-only"><span class="fa fa-pencil" aria-hidden="true"></span> {{ __("Edit title") }}</button>
+                {% endif %}
+                {% if canReply %}
+                    <button id="btn-reply" class="btn btn-default js-only"><span class="fa fa-comment" aria-hidden="true"></span> {{ __("Reply") }}</button>
+                {% endif %}
+                {% if canEdit %}
+                    {% if ctx.topic.isLocked %}
+                        <form action="?_action=locktopic" method="post" class="seamless-inline">
+                            <input type="hidden" name="topic" value="{{ ctx.topic.id }}">
+                            <input type="hidden" name="locked" value="false">
+                            <button type="submit" class="btn btn-success"><span class="fa fa-unlock" aria-hidden="true"></span> {{ __("Unlock topic") }}</button>
+                        </form>
+                    {% else %}
+                        <form action="?_action=locktopic" method="post" class="seamless-inline">
+                            <input type="hidden" name="topic" value="{{ ctx.topic.id }}">
+                            <input type="hidden" name="locked" value="true">
+                            <button type="submit" class="btn btn-warning"><span class="fa fa-lock" aria-hidden="true"></span> {{ __("Lock topic") }}</button>
+                        </form>
+                    {% endif %}
+                {% endif %}
+                {% if canDelete %}
+                    <form action="?_action=deletetopic" method="post" class="seamless-inline">
+                        <input type="hidden" name="topic" value="{{ ctx.topic.id }}">
+                        <button type="submit" class="btn btn-danger"><span class="fa fa-trash" aria-hidden="true"></span> {{ __("Delete topic") }}</button>
+                    </form>
+                {% endif %}
+            </div>
+        </div><br>
+        {{ __("Started by %user% on %date%", {
+            "user": (ctx.topicAuthor is not null) ? ('<a href="?_action=viewuser&amp;user=' ~ ctx.topicAuthor.id|url_encode|e("html") ~ '">' ~ ctx.topicAuthor.displayName|e("html") ~ '</a>') : __("(deleted)"),
+            "date": '<span class="_time">' ~ ctx.topic.creationDate.format("c")|e("html") ~ '</span>',
+        }) }}
+    </div>
+    {% if canEdit %}
+        <form action="?_action=updatetopic" method="post" id="editHeading" style="display: none;" class="form-inline seamless-inline">
+            <input type="hidden" name="topic" value="{{ ctx.topic.id }}">
+            <div class="row">
+                <div class="col-md-8">
+                    <input type="text" class="form-control" name="title" id="i_edit_title" data-original-value="{{ ctx.topic.title }}" value="{{ ctx.topic.title }}" style="box-sizing: border-box; width: 100%; font-size: 36px; height: 56px">
+                </div>
+                <div class="col-md-4 text-right">
+                    <button type="button" id="topicTitleEditCancel" class="btn btn-default"><span class="fa fa-close" aria-hidden="true"></span> {{ __("Cancel") }}</button>
+                    <button type="submit" class="btn btn-success"><span class="fa fa-save" aria-hidden="true"></span> {{ __("Save changes") }}</button>
+                </div>
+            </div>
+        </form>
+    {% endif %}
+</div>
+<script>
+{% if canEdit %}
+$(function() {
+    $("#btn-edit-title").click(function() {
+        $("#displayHeading").hide();
+        $("#editHeading").show();
+        $("#i_edit_title").val($("#i_edit_title").attr("data-original-value")).focus();
+    });
+    $("#topicTitleEditCancel").click(function() {
+        $("#displayHeading").show();
+        $("#editHeading").hide();
+    });
+    $("._edit-post").click(function() {
+        var $post = $("#post-" + $(this).attr("data-post-id"));
+        var $postContent = $post.find(".post-content");
+        $("#i_edit_message").css("height", "").val($post.attr("data-text"));
+        $("#i_edit_post").val($(this).attr("data-post-id"));
+        $("#diag-edit-post").modal();
+    });
+    $("#diag-edit-post").on("shown.bs.modal", function() {
+        $("#i_edit_message").focus();
+    });
+});
+{% endif %}
+{% if canReply %}
+$(function() {
+    function focusReplyBox() {
+        var msgInput = $("#i_message");
+        msgInput[0].scrollIntoView();
+        msgInput.focus();
+    }
+    $("#btn-reply").click(function() {
+        focusReplyBox();
+    });
+    $("._reply-post").click(function() {
+        var text = $("#post-" + $(this).attr("data-post-id")).attr("data-text");
+        var val = $("#i_message").val();
+        var lines = text.split("\n");
+        for (var i = 0; i < lines.length; ++i)
+            val += "\n> " + lines[i];
+        val += "\n\n";
+        $("#i_message").val(val.replace(/^\n+/, ""));
+        focusReplyBox();
+    });
+});
+{% endif %}
+</script>
+
+{% for item in ctx.allItems %}
+    {% if item.type == "post" %}
+        {% include "components/post.twig" with {
+            post: item.post,
+            postAuthor: item.postAuthor,
+            topic: item.topic,
+            attachments: item.attachments,
+            hide_actions: false,
+            hide_pfp: false,
+        } %}
+    {% elseif item.type == "logMessage" %}
+        {% include "components/topic_log.twig" with {
+            type: item.type,
+            logMessage: item.logMessage,
+            postAuthor: item.postAuthor,
+            topicAuthor: item.topicAuthor,
+            topic: item.topic,
+            hide_actions: false,
+            hide_pfp: false,
+        } %}
+    {% endif %}
+{% endfor %}
+
+{% if ctx.topic.isLocked %}
+    <div class="well icon-well text-warning margin-top-4x">
+        <span class="fa fa-lock text-warning" aria-hidden="true"></span>
+        <em>{{ __("This topic has been locked") }}</em>
+    </div>
+{% elseif currentUser is not null %}
+    {% set formId = "addpost" %}
+    <h3 id="form">{{ __("Reply to this topic") }}</h3>
+    {% set formError = getAndClearFormError(formId) %}
+    {% if formError %}
+        {% include "components/alert_error.twig" with { message: formError } %}
+    {% endif %}
+    <form action="{{ g.server.REQUEST_URI }}#form" method="post" enctype="multipart/form-data">
+        <input type="hidden" name="form_id" value="{{ formId }}">
+        <div class="form-group">
+            <label for="i_message">{{ __("Message:") }}</label>
+            <div class="panel panel-default">
+                <div class="panel-heading" style="padding:4px">
+                    <div class="btn-toolbar" role="toolbar">
+                        <div class="btn-group" role="group">
+                            <button data-area="#i_message" title="{{ __("Bold") }}" data-editor-command="bold" type="button" class="btn btn-default btn-xs"><i class="fa fa-fw fa-bold"></i></button>
+                            <button data-area="#i_message" title="{{ __("Italic") }}" data-editor-command="italic" type="button" class="btn btn-default btn-xs"><i class="fa fa-fw fa-italic"></i></button>
+                            <button data-area="#i_message" title="{{ __("Underlined") }}" data-editor-command="underline" type="button" class="btn btn-default btn-xs"><i class="fa fa-fw fa-underline"></i></button>
+                            <button data-area="#i_message" title="{{ __("Strikethrough") }}" data-editor-command="strikethrough" type="button" class="btn btn-default btn-xs"><i class="fa fa-fw fa-strikethrough"></i></button>
+                        </div>
+                        <div class="btn-group" role="group">
+                            <button data-area="#i_message" title="{{ __("Superscript") }}" data-editor-command="sup" type="button" class="btn btn-default btn-xs"><i class="fa fa-fw fa-superscript"></i></button>
+                            <button data-area="#i_message" title="{{ __("Subscript") }}" data-editor-command="sub" type="button" class="btn btn-default btn-xs"><i class="fa fa-fw fa-subscript"></i></button>
+                        </div>
+                        <div class="btn-group" role="group">
+                            <button data-area="#i_message" title="{{ __("Quote") }}" data-editor-command="quote" type="button" class="btn btn-default btn-xs"><i class="fa fa-fw fa-quote-left"></i></button>
+                            <button data-area="#i_message" title="{{ __("Spoiler") }}" data-editor-command="spoiler" type="button" class="btn btn-default btn-xs"><i class="fa fa-fw fa-eye"></i></button>
+                        </div>
+                    </div>
+                </div>
+                <div class="panel-body" style="padding:0">
+                    <textarea class="form-control" id="i_message" name="message" required rows="12" cols="60" style="resize:vertical;max-height:499px;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;margin:-1px;width:calc(100% + 2px)"></textarea>
+                </div>
+            </div>
+        </div>
+        <div class="form-group">
+            <label for="i_files">{{ __("Attachments: <small>(max. %max_attachment_count% files, max. %max_attachment_size% MiB each)</small>", {
+                "max_attachment_count": constant("MAX_ATTACHMENT_COUNT"),
+                "max_attachment_size": constant("MAX_ATTACHMENT_SIZE") // (2**20),
+            }) }}</label>
+            <input type="file" name="files[]" id="i_files" multiple accept="*/*">
+        </div>
+        <button type="submit" class="btn btn-success">{{ __("Post reply") }} <span class="fa fa-send" aria-hidden="true"></span></button>
+    </form>
+{% else %}
+    <div class="well margin-top-4x text-center">
+        <div class="h3 margin-top-0">{{ __("Log in to reply to this topic") }}</div>
+        <a href="?_action=auth&amp;next={{ g.server.REQUEST_URI|url_encode }}" class="btn btn-success">
+            <span class="fa fa-user" aria-hidden="true"></span>
+            {{ __("Log in") }}
+        </a>
+    </div>
+{% endif %}
+
+
+{% endblock %}