add previewing and textile help to textile edit boxes

lib/philomena_web/controllers/post/preview_controller.ex

@@ -0,0 +1,23 @@
+defmodule PhilomenaWeb.Post.PreviewController do
+  use PhilomenaWeb, :controller
+
+  alias Philomena.Textile.Renderer
+  alias Philomena.Posts.Post
+  alias Philomena.Repo
+
+  def create(conn, params) do
+    user = preload_awards(conn.assigns.current_user)
+    body = to_string(params["body"])
+    anonymous = params["anonymous"] == true
+
+    post = %Post{user: user, body: body, anonymous: anonymous}
+    rendered = Renderer.render_one(post)
+
+    render(conn, "create.html", layout: false, post: post, body: rendered)
+  end
+
+  defp preload_awards(nil), do: nil
+  defp preload_awards(user) do
+    Repo.preload(user, awards: :badge)
+  end
+end

lib/philomena_web/router.ex

@@ -108,11 +108,18 @@ defmodule PhilomenaWeb.Router do
     resources "/filters", FilterController
     resources "/profiles", ProfileController, only: [:show]
     resources "/captchas", CaptchaController, only: [:create]
+    scope "/posts", Post, as: :post do
+      resources "/preview", PreviewController, only: [:create]
+    end
     resources "/posts", PostController, only: [:index]
     resources "/commissions", CommissionController, only: [:index, :show]
     resources "/galleries", GalleryController, only: [:index, :show]
 
     get "/:id", ImageController, :show
+    # get "/:forum_id", ForumController, :show # impossible to do without constraints
+    get "/:forum_id/:id", TopicController, :show
+    get "/:forum_id/:id/:page", TopicController, :show
+    get "/:forum_id/:id/posts/:post_id", TopicController, :show
   end
 
   # Other scopes may use custom stacks.

lib/philomena_web/templates/conversation/message/_form.html.slime

@@ -10,7 +10,12 @@
         | Preview
 
     .block__tab.communication-edit__tab.selected data-tab="write"
-      = textarea f, :body, class: "input input--wide input--text js-preview-input js-toolbar-input", placeholder: "Your message", required: true
+      = render PhilomenaWeb.TextileView, "_help.html", conn: @conn
+      = render PhilomenaWeb.TextileView, "_toolbar.html", conn: @conn
+
+      .field
+        = textarea f, :body, class: "input input--wide input--text js-preview-input js-toolbar-input", placeholder: "Your message", required: true
+        = error_tag f, :body
 
     .block__tab.communication-edit__tab.hidden data-tab="preview"
       | [Loading preview...]

lib/philomena_web/templates/image/comment/_form.html.slime

@@ -14,6 +14,9 @@
         ' Preview
 
     .block__tab.communication-edit__tab.selected data-tab="write"
+      = render PhilomenaWeb.TextileView, "_help.html", conn: @conn
+      = render PhilomenaWeb.TextileView, "_toolbar.html", conn: @conn
+
       .field
         = textarea f, :body, class: "input input--wide input--text js-preview-input js-toolbar-input", placeholder: "Please read the site rules before posting and use [spoiler][/spoiler] for above-rating stuff.", required: true
         = error_tag f, :body

lib/philomena_web/templates/image/new.html.slime

@@ -65,7 +65,9 @@
         = link "Preview", to: "#", data: [click_tab: "preview"]
 
       .block__tab.selected data-tab="write"
-        /= render partial: 'layouts/textile_toolbar'
+        = render PhilomenaWeb.TextileView, "_help.html", conn: @conn
+        = render PhilomenaWeb.TextileView, "_toolbar.html", conn: @conn
+
         = textarea f, :description, class: "input input--wide input--text js-preview-description js-image-input js-toolbar-input", placeholder: "Describe this image in plain words - this should generally be info about the image that doesn't belong in the tags or source."
       .block__tab.hidden data-tab="preview"
         | Loading preview...

lib/philomena_web/templates/post/preview/create.html.slime

@@ -0,0 +1,10 @@
+.block.flex
+  .flex__fixed.spacing-right
+    = render PhilomenaWeb.UserAttributionView, "_anon_user_avatar.html", object: @post, conn: @conn
+
+  .flex__grow.communication_body
+    span.communication__body__sender-name
+      = render PhilomenaWeb.UserAttributionView, "_anon_user.html", object: @post, conn: @conn, awards: true
+
+    .communication__body__text
+      == @body

lib/philomena_web/templates/textile/_help.html.slime

@@ -0,0 +1,35 @@
+.textile-syntax-reference
+  strong<> Syntax quick reference:
+
+  span
+    strong>
+      ' *bold*
+    em> _italic_
+    span.spoiler>
+      | [spoiler]hide text[/spoiler]
+    code> @code@
+    ins> +underline+
+    del> -strike-
+    sup> ^sup^
+    sub ~sub~
+
+  button< class="button" type="button" data-click-toggle="button:hover + .textile_help, button:focus + .textile_help"
+    ' &hellip;
+
+  p.hidden.textile_help
+    ' [==stuff you don't want textile to parse==]
+    br
+
+    ins> Links:
+    ' "On-site link":/some-link, "External link":http://some-link
+    br
+
+    ins> Images:
+    ' &gt;&gt;1 — link to image, &gt;&gt;1t — embed image thumbnail (&gt;&gt;1p — large preview, &gt;&gt;1s &mdash; small thumbnail)
+    br
+
+    ins> External images:
+    ' !http://some-image!, !http://some-clickable-image!:http://some-link
+    br
+
+    strong> Remember to use embeds (&gt;&gt;) for booru images as these let users filter content they don't want to see

lib/philomena_web/templates/textile/_toolbar.html.slime

@@ -0,0 +1,34 @@
+.communication__toolbar.flex.flex--wrap
+  button.communication__toolbar__button type="button" title="bold (ctrl+b)" data-syntax-id="bold"
+    strong
+      | B
+  button.communication__toolbar__button type="button" title="italics (ctrl+i)" data-syntax-id="italics"
+    em
+      | i
+  button.communication__toolbar__button type="button" title="underline (ctrl+u)" data-syntax-id="under"
+    ins
+      | U
+  button.communication__toolbar__button type="button" title="mark as spoiler (ctrl+s)" data-syntax-id="spoiler"
+    span.spoiler-revealed
+      | spoiler
+  button.communication__toolbar__button type="button" title="code formatting (ctrl+e)" data-syntax-id="code"
+    code
+      | code
+  button.communication__toolbar__button type="button" title="strikethrough" data-syntax-id="strike"
+    del
+      | strike
+  button.communication__toolbar__button type="button" title="superscript" data-syntax-id="superscript"
+    sup
+      | sup
+  button.communication__toolbar__button type="button" title="subscript" data-syntax-id="subscript"
+    sub
+      | sub
+  button.communication__toolbar__button type="button" title="insert blockquote" data-syntax-id="quote"
+    i.fa.fa-quote-right
+  button.communication__toolbar__button type="button" title="insert hyperlink (ctrl+l)" data-syntax-id="link"
+    i.fa.fa-link
+  button.communication__toolbar__button type="button" title="insert image (ctrl+k)" data-syntax-id="image"
+    i.fa.fa-image
+  button.communication__toolbar__button type="button" title="Text you want the parser to ignore" data-syntax-id="noParse"
+    span
+      | no parse

lib/philomena_web/templates/topic/post/_form.html.slime

@@ -14,6 +14,9 @@
         ' Preview
 
     .block__tab.communication-edit__tab.selected data-tab="write"
+      = render PhilomenaWeb.TextileView, "_help.html", conn: @conn
+      = render PhilomenaWeb.TextileView, "_toolbar.html", conn: @conn
+
       .field
         = textarea f, :body, class: "input input--wide input--text js-preview-input js-toolbar-input", placeholder: "Please read the site rules before posting and use [spoiler][/spoiler] for NSFW stuff in SFW forums.", required: true
         = error_tag f, :body

lib/philomena_web/views/post/preview_view.ex

@@ -0,0 +1,3 @@
+defmodule PhilomenaWeb.Post.PreviewView do
+  use PhilomenaWeb, :view
+end

lib/philomena_web/views/textile_view.ex

@@ -0,0 +1,3 @@
+defmodule PhilomenaWeb.TextileView do
+  use PhilomenaWeb, :view
+end

lib/philomena_web/views/user_attribution_view.ex

@@ -15,6 +15,7 @@ defmodule PhilomenaWeb.UserAttributionView do
     hash =
       (:erlang.crc32(salt <> id <> user_id) &&& 0xffff)
       |> Integer.to_string(16)
+      |> String.pad_leading(4, "0")
 
     "Background Pony ##{hash}"
   end