Add preliminary report system

The report system is pretty low-tech. However the scaffolding is there
for a lot of new stuff. What we currently have:

* Users can create reports
* Staff can view reports
* Admins can create report templates

There's a post drop-down menu available on all posts now, too. This is
where "report post" menu item lives and other things like that can be
added too.

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

board/static/board/post.js

@@ -1,9 +1,81 @@
-function doQuote(sender) {
-    let id_text = $("#id_text");
-    let caret = id_text[0].selectionStart;
-    let text = id_text.val();
-    let to_add = ">>" + sender.target.innerText + "\n";
-    id_text.val(text.substring(0, caret) + to_add + text.substring(caret));
+const OPEN = "open";
+const CLOSED = "closed";
+
+function documentClick(e) {
+    let sender = e.target;
+    let id = sender.getAttribute("data-id");
+    if (!id) {
+        return;
+    }
+
+    switch (id) {
+        case "post_menu_button": {
+            openMenu(e);
+        }; break;
+    }
 }
 
-$(document).on("click", ".post_id", doQuote);
+function doQuote(e) {
+    let idText = $("#id_text");
+    let caret = idText[0].selectionStart;
+    let text = idText.val();
+    let toAdd = ">>" + e.target.innerText + "\n";
+    idText.val(text.substring(0, caret) + toAdd + text.substring(caret));
+}
+
+function closeMenu(e) {
+    $(document).off("click", closeMenu);
+    $(".post_menu").remove();
+}
+
+function openMenu(e) {
+    e.preventDefault();
+    let sender = e.target;
+    let reportButton = $("<a>")
+        .text("Report")
+        .attr("href", "#")
+        .on("click", (e) => { return openReportWindow(e, $(sender.parentElement)); });
+    let menuList = $("<ul></ul>")
+        .append($("<lh><strong>Actions</strong></lh>").addClass("post_menu_item"))
+        .append(
+            $('<li></li>')
+                .addClass("post_menu_item")
+                .append(reportButton)
+        )
+        .addClass("post_menu_items");
+    let rect = sender.getBoundingClientRect();
+    let menu = $("<div></div>")
+        .addClass("post_menu")
+        .css({
+            top: rect.bottom + 3 + window.pageYOffset + "px",
+            left: rect.left + 3 + window.pageXOffset + "px",
+        })
+        .append(menuList);
+    $("body").append(menu);
+    $(document).on("click", closeMenu);
+}
+
+function openReportWindow(e, postElement) {
+    e.preventDefault();
+    // If there's already a report window open, close it and open this one.
+    if (window.top.reportWindow) {
+        window.top.reportWindow.close();
+    }
+    //let postId = sender.parentElement.getAttribute("id").substring(1);
+    let reportUrl = postElement.attr("data-report-url");
+    window.reportWindow = new WinBox("New Report", {
+        url: reportUrl,
+        modal: true,
+        onclose: function (force) {
+            window.top.reportWindow = null;
+        }
+    });
+}
+
+function onLoad(e) {
+    window.reportWindow = null;
+}
+
+$(document).on("click", documentClick);
+$(document).on("click", ".post_id", doQuote);
+$(window).on("load", onLoad);

board/static/board/style.css

@@ -1,3 +1,7 @@
+body {
+    background-color: #ededed;
+}
+
 hr {
     color: #ededed;
 }
@@ -26,7 +30,29 @@ hr {
     text-align: center;
 }
 
-/* Posts */
+.post_menu {
+    position: absolute;
+    background: #ededed;
+    outline: 1px solid #555;
+}
+
+.post_menu_items {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+}
+
+.post_menu_item {
+    padding: 3px;
+}
+
+.post_menu_button {
+    text-decoration: none;
+}
+
+/*******************************************************************************
+ Posts
+********************************************************************************/
 /*.post_body { }*/
 .post_image_info {
     font-size: small;