Trying out JSFrame for windows

Winbox has this annoying bug where you can't move the window below the
calculated area of the document, so you can't drag it over blank space.
JSFrame fixes this and does basically what we want as well. This has
been implemented for post replies and I am going to implement it for
reports and ban creation too.

Signed-off-by: Alek Ratzloff <alekratz@gmail.com>

board/templates/board/base.html

@@ -10,6 +10,7 @@
         {% block extrastyle %}{% endblock %}
         <script src="{% static 'board/jquery.js' %}"></script>
         <script src="{% static 'board/winbox.bundle.js' %}"></script>
+        <script src="{% static 'board/jsframe.min.js' %}"></script>
         <script src="{% static 'board/post.js' %}"></script>
         {% if perms.board.create_ban %}
             <script src="{% static 'board/ban_window.js' %}"></script>

board/templates/board/post_detail.html

@@ -22,6 +22,10 @@
 <div class="row">
     <div class="column">&nbsp;</div>
     <div class="column">
+        <h2>
+            <a id="create_reply" href="{% url 'board:reply_create' url=board.url id=post.id %}">{% translate "Reply to this thread" %}</a>
+        </h2>
+        {% comment %}
         <form method="post" action="{% url 'board:post_detail' url=board.url id=post.id %}" enctype="multipart/form-data">
             {% csrf_token %}
             <table>
@@ -36,6 +40,7 @@
             <tr><td>&nbsp;</td><td><input type="submit" value="Submit" /></td></tr>
             </table>
         </form>
+        {% endcomment %}
     </div>
     <div class="column">&nbsp;</div>
 </div>
@@ -51,4 +56,62 @@
     </div>
     {% endfor %}
 </div>
+
+<script>
+const REPLY_URL = "{% url 'board:reply_create' url=board.url id=post.id %}";
+const replyWindowName = "reply-window";
+
+function openReplyWindow() {
+    if(window.jsFrame.containsWindowName(replyWindowName)) {
+        // if there's already a new reply window, don't override it and just let
+        // it continue to exist.
+        return;
+    }
+
+    window.top.replyWindow = window.jsFrame.create({
+        title: "New Reply",
+        name: replyWindowName,
+        width: 385,
+        height: 350,
+        x: "center",
+        y: "center",
+        url: REPLY_URL,
+    });
+    window.top.replyWindow.show();
+    window.top.replyWindow.on("hid", (frame, info) => console.log("hidden"));
+}
+
+function replyTextbox() {
+    return $("iframe").contents().find("#id_text");
+}
+
+function replyAppend(toAdd) {
+    let textbox = replyTextbox();
+    if(textbox.length === 0) {
+        return;
+    }
+    let caret = textbox[0].selectionStart;
+    let text = textbox.val();
+    textbox.val(text.substring(0, caret) + toAdd + text.substring(caret));
+    textbox.focus();
+}
+
+$("#create_reply").on("click", (e) => {
+    e.preventDefault();
+    openReplyWindow();
+});
+$(window).on("load", () => { window.top.replyWindow = null; });
+$(window).on("quote", (e, postId) => {
+    openReplyWindow();
+    let toAdd = ">>" + postId + "\n";
+    let textbox = replyTextbox();
+    if (typeof textbox === "undefined" || textbox.length === 0) {
+        $("iframe").on("load", () => {
+            replyAppend(toAdd);
+        });
+    } else {
+        replyAppend(toAdd);
+    }
+});
+</script>
 {% endblock content %}

board/templates/board/post_success.html

@@ -0,0 +1,29 @@
+{% extends "board/base.html" %}
+{% load i18n %}
+
+{% block content %}
+{% blocktranslate %}
+Post created. Closing window in {{window_timeout}} second(s).
+{% endblocktranslate %}
+
+<script>
+function isIframe() {
+    try {
+        return window.self !== window.top;
+    } catch (_) {
+        return true;
+    }
+}
+
+setTimeout(function() {
+    if(isIframe()) {
+        // check for possible windows
+        if(typeof window.top.replyWindow !== "undefined" && window.top.replyWindow) {
+            window.top.replyWindow.closeFrame();
+        }
+    } else {
+        window.close();
+    }
+}, 1000 * {{window_timeout}});
+</script>
+{% endblock content %}

board/templates/board/reply_create_view.html

@@ -0,0 +1,19 @@
+{% extends "board/base.html" %}
+{% load i18n post_body %}
+
+{% block content %}
+<form method="post" action="{% url 'board:reply_create' url=board.url id=post.id %}" enctype="multipart/form-data">
+    {% csrf_token %}
+    <table>
+    {{ form.as_table }}
+    <tr>
+        <th>&nbsp;</th>
+        <td>
+            {% translate "Max image size" %}:
+            {{ max_upload_size|measure_bytes }}
+        </td>
+    </tr>
+    <tr><td>&nbsp;</td><td><input type="submit" value="Submit" /></td></tr>
+    </table>
+</form>
+{% endblock content %}