{% extends "layout.html" %} {% import 'utils.html' as utils %} {% block title %}New - {{ config.NAME }}{% endblock %} {% block headers %} {% endblock %} {% block content %} <div id="container"> {% include "header.html" %} <div id="new"> {% if thread %} <h3 style="padding-bottom: 30px">Replying to {{ content }}</h3> {{ utils.display_thread(thread) }} {% else %} {% if request.args.get("question") == "1" %} <h3 style="padding-bottom:20px;">New question <small><a href="/admin/new">make it a note?</a></small></h3> {% else %} <h3 style="padding-bottom:20px;">New note <small><a href="/admin/new?question=1">make it a question?</a></small></h3> {% endif %} {% endif %} <form action="/api/new_{% if request.args.get("question") == "1" %}question{%else%}note{%endif%}" method="POST" enctype="multipart/form-data"> <input type="hidden" name="redirect" value="/"> <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"> {% if reply %}<input type="hidden" name="reply" value="{{reply}}">{% endif %} <p> {% for emoji in emojis %} <span class="ji">{{ emoji | emojify | safe }}</span> {% endfor %} </p> <textarea name="content" rows="10" cols="50" autofocus="autofocus" designMode="on">{{ content }}</textarea> <input type="file" name="file"> {% if request.args.get("question") == "1" %} <div style="margin-top:20px;"> <p>Open for: <select name="open_for"> <option value="1">1 minutes</option> <option value="30">30 minutes</option> <option value="60">1 hour</option> <option value="360">6 hour</option> <option value="1440" selected>1 day</option> <option value="4320">3 days</option> <option value="10080">7 days</option> </select></p> <input type="hidden" name="of" value="oneOf" /> <!-- <p><select name="of"> <option value="oneOf">Single choice</option> <option value="anyOf">Multiple choices</option> </select></p>--> {% for i in range(4) %} <p><input type="text" name="answer{{i}}" placeholder="Answer #{{i+1}}"></p> {% endfor %} </div> {% endif %} <input type="submit" value="post"> </div> </form> </div> </div> <script> // The new post textarea var ta = document.getElementsByTagName("textarea")[0]; // Helper for inserting text (emojis) in the textarea function insertAtCursor (textToInsert) { ta.focus(); const isSuccess = document.execCommand("insertText", false, textToInsert); // Firefox (non-standard method) if (!isSuccess) { // Credits to https://www.everythingfrontend.com/posts/insert-text-into-textarea-at-cursor-position.html // get current text of the input const value = ta.value; // save selection start and end position const start = ta.selectionStart; const end = ta.selectionEnd; // update the value with our text inserted ta.value = value.slice(0, start) + textToInsert + value.slice(end); // update cursor to be at the end of insertion ta.selectionStart = ta.selectionEnd = start + textToInsert.length; } } // Emoji click callback func var ji = function (ev) { insertAtCursor(ev.target.attributes.alt.value + " "); ta.focus() //console.log(document.execCommand('insertText', false /*no UI*/, ev.target.attributes.alt.value)); } // Enable the click for each emojis var items = document.getElementsByClassName("ji") for (var i = 0; i < items.length; i++) { items[i].addEventListener('click', ji); } </script>{% endblock %}