From 0ad36ac1430e676f41cc503e7b0e68b4d832466f Mon Sep 17 00:00:00 2001
From: Bauke <me@bauke.xyz>
Date: Sun, 2 Feb 2020 15:12:35 +0100
Subject: [PATCH] Add a View Markdown option for topics and comments

---
 tildes/package.json                           |  1 +
 tildes/scss/modules/_comment.scss             |  4 ++
 tildes/scss/modules/_dropdown.scss            |  9 ++++
 tildes/scss/modules/_topic.scss               |  2 -
 tildes/scss/themes/_theme_base.scss           |  8 ++--
 tildes/static/js/behaviors/copy-button.js     | 44 +++++++++++++++++++
 tildes/static/js/behaviors/dropdown-toggle.js | 22 ++++++++--
 .../intercooler/markdown_source.jinja2        | 30 +++++++++++++
 .../tildes/templates/macros/comments.jinja2   | 22 ++++++++++
 tildes/tildes/templates/topic.jinja2          | 23 ++++++++++
 tildes/tildes/views/api/web/comment.py        | 12 +++++
 tildes/tildes/views/api/web/topic.py          | 12 +++++
 12 files changed, 179 insertions(+), 10 deletions(-)
 create mode 100644 tildes/static/js/behaviors/copy-button.js
 create mode 100644 tildes/tildes/templates/intercooler/markdown_source.jinja2

diff --git a/tildes/package.json b/tildes/package.json
index 5f78985..d311fcc 100644
--- a/tildes/package.json
+++ b/tildes/package.json
@@ -28,6 +28,7 @@
     "globals": {
       "$": "readonly",
       "Intercooler": "readonly",
+      "Promise": "readonly",
       "Tildes": "readonly"
     }
   },
diff --git a/tildes/scss/modules/_comment.scss b/tildes/scss/modules/_comment.scss
index 567ff2f..0526e0e 100644
--- a/tildes/scss/modules/_comment.scss
+++ b/tildes/scss/modules/_comment.scss
@@ -174,6 +174,10 @@
   }
 }
 
+.comment .form-markdown-source {
+  padding-left: 0.4rem;
+}
+
 .is-comment-by-op {
   > .comment-itself {
     margin-left: -2px;
diff --git a/tildes/scss/modules/_dropdown.scss b/tildes/scss/modules/_dropdown.scss
index 05a8d43..1e758d4 100644
--- a/tildes/scss/modules/_dropdown.scss
+++ b/tildes/scss/modules/_dropdown.scss
@@ -4,5 +4,14 @@
 .dropdown {
   .menu {
     animation: none;
+
+    .btn-post-action {
+      justify-content: left;
+      width: 100%;
+    }
+  }
+
+  &-toggle.btn-post-action {
+    height: auto;
   }
 }
diff --git a/tildes/scss/modules/_topic.scss b/tildes/scss/modules/_topic.scss
index d0fdc93..6f126b2 100644
--- a/tildes/scss/modules/_topic.scss
+++ b/tildes/scss/modules/_topic.scss
@@ -89,8 +89,6 @@
   }
 
   .btn-post-action {
-    width: 100%;
-    justify-content: left;
     font-weight: normal;
   }
 
diff --git a/tildes/scss/themes/_theme_base.scss b/tildes/scss/themes/_theme_base.scss
index 338bd49..7b64d6b 100644
--- a/tildes/scss/themes/_theme_base.scss
+++ b/tildes/scss/themes/_theme_base.scss
@@ -340,6 +340,10 @@
     }
   }
 
+  .dropdown .menu .btn-post-action:hover {
+    background-color: map-get($theme, "background-secondary");
+  }
+
   .empty-subtitle {
     color: map-get($theme, "foreground-secondary");
   }
@@ -528,10 +532,6 @@
   .topic-actions {
     .btn-post-action {
       color: map-get($theme, "link");
-
-      &:hover {
-        background-color: map-get($theme, "background-secondary");
-      }
     }
 
     .btn-post-action-used {
diff --git a/tildes/static/js/behaviors/copy-button.js b/tildes/static/js/behaviors/copy-button.js
new file mode 100644
index 0000000..076ee91
--- /dev/null
+++ b/tildes/static/js/behaviors/copy-button.js
@@ -0,0 +1,44 @@
+// Copyright (c) 2020 Tildes contributors <code@tildes.net>
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+$.onmount("[data-js-copy-button]", function() {
+    $(this).click(function(event) {
+        event.preventDefault();
+
+        var textToCopy;
+        // If there are multiple inputs or textareas in a form with a copy button, you
+        // can use `data-js-copy-target="#selector"` to specify which element should
+        // get copied for that button. If this isn't defined, whatever input/textarea
+        // element jQuery finds first in the form will be copied instead.
+        if ($(this).attr("data-js-copy-target")) {
+            var $targetField = $($(this).attr("data-js-copy-target"));
+            $targetField.select();
+            textToCopy = $targetField.val();
+        } else {
+            var $parentForm = $(this).closest("form");
+            var $firstFoundField = $parentForm.find("input,textarea").first();
+            $firstFoundField.select();
+            textToCopy = $firstFoundField.val();
+        }
+
+        Tildes.writeToClipboard(textToCopy);
+    });
+});
+
+Tildes.writeToClipboard = function(text) {
+    // Minimal polyfill for writing to clipboard, by Lucas Garron
+    // https://gist.github.com/lgarron/d1dee380f4ed9d825ca7
+    return new Promise(function(resolve, reject) {
+        var success = false;
+        function listener(event) {
+            event.clipboardData.setData("text/plain", text);
+            event.preventDefault();
+            success = true;
+        }
+
+        document.addEventListener("copy", listener);
+        document.execCommand("copy");
+        document.removeEventListener("copy", listener);
+        success ? resolve() : reject();
+    });
+};
diff --git a/tildes/static/js/behaviors/dropdown-toggle.js b/tildes/static/js/behaviors/dropdown-toggle.js
index 98d3dd8..b1cd5a6 100644
--- a/tildes/static/js/behaviors/dropdown-toggle.js
+++ b/tildes/static/js/behaviors/dropdown-toggle.js
@@ -6,20 +6,34 @@
 // with the dropdown-toggle class so that this behavior is always applied to dropdowns.
 $.onmount(".dropdown-toggle", function() {
     $(this).click(function() {
+        var $this = $(this);
+
         // Spectre.css's dropdown menus use the focus event to display the menu,
         // but Safari and Firefox on OSX don't give focus to a <button> when it's
         // clicked. More info:
         // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
         // This should make the behavior consistent across all browsers
-        $(this).focus();
+        $this.focus();
 
-        $(this).toggleClass("active");
+        $this.toggleClass("active");
 
         // If toggleClass removed the class, that means that the click was on an
         // already-active button, so we should hide the menu (via losing focus).
-        if (!$(this).hasClass("active")) {
-            $(this).blur();
+        if (!$this.hasClass("active")) {
+            $this.blur();
+            return;
         }
+
+        // If the menu ends up off the left edge of the screen, remove the
+        // .dropdown-right class so that it's aligned to the left edge of the button
+        // instead of the right edge
+        var $menu = $this.siblings(".menu").first();
+        $this
+            .parent()
+            .toggleClass(
+                "dropdown-right",
+                $this.offset().left + $this.width() - $menu.width() > 0
+            );
     });
 
     $(this).blur(function() {
diff --git a/tildes/tildes/templates/intercooler/markdown_source.jinja2 b/tildes/tildes/templates/intercooler/markdown_source.jinja2
new file mode 100644
index 0000000..11fbb54
--- /dev/null
+++ b/tildes/tildes/templates/intercooler/markdown_source.jinja2
@@ -0,0 +1,30 @@
+{# Copyright (c) 2020 Tildes contributors <code@tildes.net> #}
+{# SPDX-License-Identifier: AGPL-3.0-or-later #}
+
+<form class="form-markdown-source">
+  <label class="form-label" for="markdown-source">
+    {% if post is topic %}
+      Topic Markdown (read-only)
+    {% elif post is comment %}
+      Comment Markdown (read-only)
+    {% endif %}
+  </label>
+  <textarea
+    class="form-input"
+    name="markdown-source"
+    placeholder="Text (Markdown)"
+    readonly
+  >{{ post.markdown }}</textarea>
+  <div class="form-buttons">
+    <button
+      class="btn btn-primary"
+      data-js-copy-button
+      type="button"
+    >Copy Markdown</button>
+    <button
+      class="btn btn-link"
+      data-js-cancel-button
+      type="button"
+    >Hide</button>
+  </div>
+</form>
diff --git a/tildes/tildes/templates/macros/comments.jinja2 b/tildes/tildes/templates/macros/comments.jinja2
index 6d553d0..f5c65f4 100644
--- a/tildes/tildes/templates/macros/comments.jinja2
+++ b/tildes/tildes/templates/macros/comments.jinja2
@@ -201,7 +201,29 @@
             >Reply</button>
           </li>
         {% endif %}
+
+        <li>
+          <div class="dropdown dropdown-right">
+            <button class="btn-post-action dropdown-toggle">
+              More...
+              <i class="icon icon-caret"></i>
+            </button>
+            <menu class="menu">
+              <li>
+                <button class="btn-post-action" name="markdown-source"
+                  data-ic-get-from="{{ request.route_url(
+                    'ic_comment',
+                    comment_id36=comment.comment_id36,
+                  ) }}"
+                  data-ic-swap-style="replace"
+                  data-ic-target="#comment-{{ comment.comment_id36 }} .btn-post:first + .btn-post-settings"
+                >View Markdown</button>
+              </li>
+            </menu>
+          </div>
+        </li>
       </menu>
+      <div class="btn-post-settings"></div>
     {% endif %}
   </div>
 {% endmacro %}
diff --git a/tildes/tildes/templates/topic.jinja2 b/tildes/tildes/templates/topic.jinja2
index 504dbec..99dc818 100644
--- a/tildes/tildes/templates/topic.jinja2
+++ b/tildes/tildes/templates/topic.jinja2
@@ -172,6 +172,29 @@
     {% if request.has_permission("remove", topic) %}
       {{ post_action_toggle_button("remove", topic, topic.is_removed) }}
     {% endif %}
+
+    {% if topic.is_text_type and request.has_permission("view_content", topic) %}
+      <li>
+        <div class="dropdown dropdown-right">
+          <button class="btn-post-action dropdown-toggle">
+            More...
+            <i class="icon icon-caret"></i>
+          </button>
+          <menu class="menu">
+            <li>
+              <button class="btn-post-action" name="markdown-source"
+                data-ic-get-from="{{ request.route_url(
+                  'ic_topic',
+                  topic_id36=topic.topic_id36,
+                ) }}"
+                data-ic-swap-style="replace"
+                data-ic-target=".topic-full .btn-post:first + .btn-post-settings"
+              >View Markdown</button>
+            </li>
+          </menu>
+        </div>
+      </li>
+    {% endif %}
   </menu>
   <div class="btn-post-settings"></div>
 
diff --git a/tildes/tildes/views/api/web/comment.py b/tildes/tildes/views/api/web/comment.py
index 0125b5c..71fc941 100644
--- a/tildes/tildes/views/api/web/comment.py
+++ b/tildes/tildes/views/api/web/comment.py
@@ -428,3 +428,15 @@ def delete_comment_bookmark(request: Request) -> dict:
     _mark_comment_read_from_interaction(request, comment)
 
     return {"name": "bookmark", "subject": comment, "is_toggled": False}
+
+
+@ic_view_config(
+    route_name="comment",
+    request_method="GET",
+    request_param="ic-trigger-name=markdown-source",
+    renderer="markdown_source.jinja2",
+    permission="view",
+)
+def get_comment_markdown_source(request: Request) -> dict:
+    """Get the Markdown source for a comment with Intercooler."""
+    return {"post": request.context}
diff --git a/tildes/tildes/views/api/web/topic.py b/tildes/tildes/views/api/web/topic.py
index 1e62c34..64f4138 100644
--- a/tildes/tildes/views/api/web/topic.py
+++ b/tildes/tildes/views/api/web/topic.py
@@ -482,3 +482,15 @@ def delete_topic_ignore(request: Request) -> dict:
     ).delete(synchronize_session=False)
 
     return {"name": "ignore", "subject": topic, "is_toggled": False}
+
+
+@ic_view_config(
+    route_name="topic",
+    request_method="GET",
+    request_param="ic-trigger-name=markdown-source",
+    renderer="markdown_source.jinja2",
+    permission="view_content",
+)
+def get_topic_markdown_source(request: Request) -> dict:
+    """Get the Markdown source for a topic with Intercooler."""
+    return {"post": request.context}