sakura/resources/views/yuuno/forum/elements/replyForm.twig

{% set bbcode = {
    'b': ['Bold: [b]text[/b]', 'bold'],
    'i': ['Italic: [i]text[/i]', 'italic'],
    'u': ['Underline: [u]text[/u]', 'underline'],
    's': ['Strikethrough: [s]text[/s]', 'strikethrough'],
    'header': ['Header: [header]text[/header]', 'header'],
    'url': ['URL: [url]link[/url] or [url=link]text[/url]', 'chain'],
    'code': ['Code: [code]text[/code] (bbcodes inside this tag are ignored!)', 'code'],
    'spoiler': ['Spoiler: [spoiler]text[/spoiler]', 'minus'],
    'box': ['Spoiler box: [box]text[/box] or [box=title]text[/box]', 'folder', true],
    'list': ['List: [list][*]item\r\n[*]another item[/list]', 'list-ul'],
    'img': ['Image: [img]image link[/img], please use https instead of http if possible', 'picture-o'],
    'youtube': ['YouTube video: [youtube]video id (in the link after ?v= up until the first &)[/youtube]', 'youtube-play']
} %}

<div id="reply">
    <form id="postingForm" method="post" action="javascript:void(0)" onsubmit="yuunoForumSubmit(this)">
        <input type="hidden" name="session" value="{{ session_id() }}">
        <div id="postingTitleContainer"{% if topic is defined %} style="display: none;"{% endif %}>
            <input type="text" class="input__text" name="title" id="postingTitle" placeholder="Title">
        </div>
        <div>
            <textarea class="input__text input__text--grow" name="text" id="postingText" placeholder="Hit ctrl+enter to submit quickly!"></textarea>
        </div>
        <div>
            <div style="float: left;">
                {% for code,meta in bbcode %}
                    <button onclick="Sakura.Editor.InsertBBCode(Sakura.DOM.ID('postingText'), '{{ code }}'{% if meta[2] is defined %}, true{% endif %});" type="button"{% if meta[0] %} title="{{ meta[0] }}"{% endif %} class="input__button{% if meta[1] %} fa fa-{{ meta[1] }}{% endif %}">{% if not meta[1] %}{{ code }}{% endif %}</button>
                {% endfor %}
            </div>
            <div style="float: right;">
                <button class="input__button fa fa-remove" title="Stop editing" style="display: none;" type="button" onclick="stopEdit();" id="postingStopEditing"></button>
                <button class="input__button fa fa-send" title="Reply"></button>
            </div>
            <div class="clear"></div>
        </div>
    </form>
</div>

<script type="text/javascript">
    Sakura.Config.Set({
        ForumTitleMin: {{ config('forum.min_title_length') }},
        ForumTitleMax: {{ config('forum.max_title_length') }},
        ForumTextMin: {{ config('forum.min_post_length') }},
        ForumTextMax: {{ config('forum.max_post_length') }},
    });
    Sakura.Editor.Prepare();

    var preview = document.getElementById('postingPreview'),
        pTitle = document.getElementById('postingTitle'),
        pTitleCont = document.getElementById('postingTitleContainer'),
        pText = document.getElementById('postingText'),
        pForm = document.getElementById('postingForm'),
        pStopEdit = document.getElementById('postingStopEditing'),
        pMode = document.getElementById('previewMode'),
        tTitle = document.getElementById('topicTitle'),
        rTitle = document.getElementById('previewTitle'),
        rText = document.getElementById('previewText'),
        postFetch = new Sakura.AJAX(),
        parserActive = false,
        op = {{ topic is defined ? topic.post : 0 }},
        topicName = "{{ topic is defined ? topic.title : '' }}",
        editing = 0;

    pText.addEventListener("focus", function () {
        preview.style.display = null;
    });

    pText.addEventListener("blur", function () {
        if (op && pText.value.length < 1) {
            preview.style.display = 'none';
        }
    });

    function postUpdateEvent(e) {
        if (e.keyCode == 9) {
            e.preventDefault();
            var tab = '    ';
            Sakura.DOM.EnterAtCursor(e.target, tab);
            Sakura.DOM.SetPosition(e.target, Sakura.DOM.GetPosition(e.target) + tab.length);
        }

        if (e.keyCode == 13 && e.ctrlKey) {
            pForm.onsubmit();
        }

        Sakura.Editor.PreviewTimeout(rText, pText);
    }

    pText.addEventListener("change", postUpdateEvent);
    pText.addEventListener("keydown", postUpdateEvent);

    pTitle.addEventListener("keyup", function (e) {
        var title = pTitle.value;

        if (title.length == 0) {
            title = "";
        } else if (title.length < Sakura.Config.ForumTitleMin) {
            title = "<span style='color: red;'>Too short!</span>";
            tTitle.innerHTML = title;
            rTitle.innerHTML = title;
            return;
        } else if (title.length > Sakura.Config.ForumTitleMax) {
            title = "<span style='color: red;'>Too long!</span>";
            tTitle.innerHTML = title;
            rTitle.innerHTML = title;
            return;
        }

        tTitle.innerText = title;
        rTitle.innerText = title;
    });

    function editPost(id) {
        pText.disabled = true;
        pTitleCont.style.display = 'none';
        rTitle.innerText = 'Re: ' + topicName;
        editing = id;

        url = "{{ route('forums.post.raw', '1') }}".replace('1', id);

        postFetch.SetUrl(url);

        postFetch.AddCallback(200, function () {
            pText.value = postFetch.Response();
            pStopEdit.style.display = null;
            pForm.setAttribute('onsubmit', "editSave(this, " + id + ")");
            pMode.innerText = 'Editing #' + id;
            if (id === op) {
                pTitleCont.style.display = null;
                pTitle.value = topicName;
                rTitle.innerText = topicName;
            }
            pText.disabled = false;
            pText.focus();
        });

        postFetch.Start(Sakura.HTTPMethod.GET);
    }

    function editSave(form, id) {
        var client = new Sakura.AJAX;
        client.SetUrl("{{ route('forums.post.edit', '1') }}".replace('1', id));
        client.SetFormData(new FormData(form));
        client.AddCallback(200, function () {
            var result = client.JSON();

            if (result.error) {
                var error = new Sakura.Dialogue;
                error.Title = "Error";
                error.Text = result.error;
                error.SetType(Sakura.DialogueType.Info);
                error.Display();
            } else {
                stopEdit();

                if (result.id === op) {
                    topicName = result.title;
                }

                var post = Sakura.DOM.ID('p' + result.id);
                post.querySelector('.post__text').innerHTML = result.text;
                post.querySelector('.post__title').innerText = result.title.substring(0, 50) + (result.title.length > 50 ? '...' : '');
                post.scrollIntoView(true);
            }
        });
        client.Start(Sakura.HTTPMethod.POST);
    }

    function stopEdit() {
        editing = 0;
        pText.value = "";
        pStopEdit.style.display = 'none';
        pTitleCont.style.display = 'none';
        pMode.innerText = 'Preview';
        preview.style.display = 'none';
    }

    function yuunoForumSubmit(form) {
        if (editing) {
            editSave(form, editing);
            return;
        }

        var client = new Sakura.AJAX;
        client.SetUrl("{{ postingAction }}");
        client.SetFormData(new FormData(form));
        client.AddCallback(200, function () {
            var result = client.JSON();

            if (result.error) {
                var error = new Sakura.Dialogue;
                error.Title = "Error";
                error.Text = result.error;
                error.SetType(Sakura.DialogueType.Info);
                error.Display();
            } else if (result.go) {
                window.location.assign(result.go)
            }
        });
        client.Start(Sakura.HTTPMethod.POST);
    }
</script>