sakura/templates/yuuno/forum/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="{{ postingAction }}">
        <div class="posting-subject" id="postingTitleContainer"{% if titleCache is not defined %} style="display: none;"{% endif %}>
            <input type="text" class="inputStyling" name="title" id="postingTitle" placeholder="Title" value="{{ titleCache is defined ? titleCache : '' }}" />
        </div>
        <div class="posting-text">
            <textarea class="inputStyling" name="text" id="postingText" placeholder="Hit ctrl+enter to submit quickly!"{% if titleCache is defined %} autofocus{% endif %}>{{ textCache }}</textarea>
        </div>
        <div class="posting-buttons">
            <div style="float: left;">
                {% for code,meta in bbcode %}
                    <button onclick="insertBBcode('postingText', '{{ code }}'{% if meta[2] %}, true{% endif %});" type="button"{% if meta[0] %} title="{{ meta[0] }}"{% endif %} class="forumbtn{% if meta[1] %} fa fa-{{ meta[1] }}{% endif %}">{% if not meta[1] %}{{ code }}{% endif %}</button>
                {% endfor %}
            </div>
            <div style="float: right;">
                <button class="forumbtn fa fa-remove" title="Stop editing" style="display: none;" type="button" onclick="stopEdit();" id="postingStopEditing"></button>
                <button class="forumbtn fa fa-send" title="Reply"></button>
            </div>
            <div class="clear"></div>
        </div>
    </form>
</div>

<script type="text/javascript">
    var titleMax = {{ sakura.forumTitleMaxLength }},
        titleMin = {{ sakura.forumTitleMinLength }},
        textMax = {{ sakura.forumTextMaxLength }},
        textMin = {{ sakura.forumTextMinLength }},
        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('threadTitle'),
        rTitle = document.getElementById('previewTitle'),
        rText = document.getElementById('previewText'),
        lastParsed = Date.now(),
        lastKeystroke = Date.now(),
        parser = new AJAX(),
        postFetch = new AJAX(),
        parserActive = false,
        op = {{ thread is defined ? thread.firstPost.id : 0 }},
        threadName = "{{ thread is defined ? thread.firstPost.subject : '' }}";

    parser.setUrl("{{ route('helper.bbcode.parse') }}");
    parser.contentType("application/x-www-form-urlencoded");

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

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

    setInterval(function () {
        if (lastParsed < Date.now() - 1000
            && lastKeystroke > Date.now() - 1000
            && parserActive !== true) {
            lastParsed = Date.now();

            var text = pText.value;

            if (text.length == 0) {
                rText.innerHTML = "";
            } else if (text.length < textMin) {
                rText.innerHTML = "<span style='color: red;'>Too short!</span>";
            } else if (text.length > textMax) {
                rText.innerHTML = "<span style='color: red;'>Too long!</span>";
            } else {
                parserActive = true;

                parser.setSend({"text":text});

                parser.addCallback(200, function () {
                    rText.innerHTML = parser.response();

                    var codeBlocks = rText.querySelectorAll("pre code");

                    for (var _i in codeBlocks) {
                        if ((typeof codeBlocks[_i]).toLowerCase() === 'object') {
                            hljs.highlightBlock(codeBlocks[_i]);
                        }
                    }

                    parserActive = false;
                });

                parser.start(HTTPMethods.POST);
            }
        }
    }, 1000);

    pText.addEventListener("keydown", function (e) {
        lastKeystroke = Date.now();

        if (e.keyCode == 9) {
            e.preventDefault();
            insertText('postingText', '    ');
        }

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

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

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

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

    function quotePost(id) {
        pText.value = pText.value + "[quote=#" + id + "][/quote]";
        pText.focus();
    }

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

        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.action = "{{ route('forums.post.edit', '1') }}".replace('1', id);
            pMode.innerText = 'Editing #' + id;
            if (id === op) {
                pTitleCont.style.display = null;
                pTitle.value = threadName;
                rTitle.innerText = threadName;
            }
            pText.disabled = false;
            pText.focus();
        });

        postFetch.start(HTTPMethods.GET);
    }

    function stopEdit() {
        pText.value = "";
        pForm.action = "{{ postingAction }}";
        pStopEdit.style.display = 'none';
        pTitleCont.style.display = 'none';
        pMode.innerText = 'Preview';
        preview.style.display = 'none';
    }
</script>