From 83fed839adff70e080c73b92442e83049dc5bd04 Mon Sep 17 00:00:00 2001 From: "byte[]" Date: Wed, 27 Nov 2019 21:06:41 -0500 Subject: [PATCH] add previewing and textile help to textile edit boxes --- .../controllers/post/preview_controller.ex | 23 ++++++++++++ lib/philomena_web/router.ex | 7 ++++ .../conversation/message/_form.html.slime | 7 +++- .../templates/image/comment/_form.html.slime | 3 ++ .../templates/image/new.html.slime | 4 ++- .../templates/post/preview/create.html.slime | 10 ++++++ .../templates/textile/_help.html.slime | 35 +++++++++++++++++++ .../templates/textile/_toolbar.html.slime | 34 ++++++++++++++++++ .../templates/topic/post/_form.html.slime | 3 ++ lib/philomena_web/views/post/preview_view.ex | 3 ++ lib/philomena_web/views/textile_view.ex | 3 ++ .../views/user_attribution_view.ex | 1 + 12 files changed, 131 insertions(+), 2 deletions(-) create mode 100644 lib/philomena_web/controllers/post/preview_controller.ex create mode 100644 lib/philomena_web/templates/post/preview/create.html.slime create mode 100644 lib/philomena_web/templates/textile/_help.html.slime create mode 100644 lib/philomena_web/templates/textile/_toolbar.html.slime create mode 100644 lib/philomena_web/views/post/preview_view.ex create mode 100644 lib/philomena_web/views/textile_view.ex diff --git a/lib/philomena_web/controllers/post/preview_controller.ex b/lib/philomena_web/controllers/post/preview_controller.ex new file mode 100644 index 00000000..0d1bedd5 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/lib/philomena_web/router.ex b/lib/philomena_web/router.ex index a2fb115f..12af60c5 100644 --- a/lib/philomena_web/router.ex +++ b/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. diff --git a/lib/philomena_web/templates/conversation/message/_form.html.slime b/lib/philomena_web/templates/conversation/message/_form.html.slime index d8de7f2a..979070d7 100644 --- a/lib/philomena_web/templates/conversation/message/_form.html.slime +++ b/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...] diff --git a/lib/philomena_web/templates/image/comment/_form.html.slime b/lib/philomena_web/templates/image/comment/_form.html.slime index 1b918f70..57b43f99 100644 --- a/lib/philomena_web/templates/image/comment/_form.html.slime +++ b/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 diff --git a/lib/philomena_web/templates/image/new.html.slime b/lib/philomena_web/templates/image/new.html.slime index 528500b7..c0b3a894 100644 --- a/lib/philomena_web/templates/image/new.html.slime +++ b/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... diff --git a/lib/philomena_web/templates/post/preview/create.html.slime b/lib/philomena_web/templates/post/preview/create.html.slime new file mode 100644 index 00000000..62f2d4e0 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/lib/philomena_web/templates/textile/_help.html.slime b/lib/philomena_web/templates/textile/_help.html.slime new file mode 100644 index 00000000..83fb4c74 --- /dev/null +++ b/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" + ' … + + 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: + ' >>1 — link to image, >>1t — embed image thumbnail (>>1p — large preview, >>1s — small thumbnail) + br + + ins> External images: + ' !http://some-image!, !http://some-clickable-image!:http://some-link + br + + strong> Remember to use embeds (>>) for booru images as these let users filter content they don't want to see \ No newline at end of file diff --git a/lib/philomena_web/templates/textile/_toolbar.html.slime b/lib/philomena_web/templates/textile/_toolbar.html.slime new file mode 100644 index 00000000..b1e7f202 --- /dev/null +++ b/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 diff --git a/lib/philomena_web/templates/topic/post/_form.html.slime b/lib/philomena_web/templates/topic/post/_form.html.slime index ae39f0ea..f9ca116c 100644 --- a/lib/philomena_web/templates/topic/post/_form.html.slime +++ b/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 diff --git a/lib/philomena_web/views/post/preview_view.ex b/lib/philomena_web/views/post/preview_view.ex new file mode 100644 index 00000000..3df2af84 --- /dev/null +++ b/lib/philomena_web/views/post/preview_view.ex @@ -0,0 +1,3 @@ +defmodule PhilomenaWeb.Post.PreviewView do + use PhilomenaWeb, :view +end \ No newline at end of file diff --git a/lib/philomena_web/views/textile_view.ex b/lib/philomena_web/views/textile_view.ex new file mode 100644 index 00000000..0ebbdea0 --- /dev/null +++ b/lib/philomena_web/views/textile_view.ex @@ -0,0 +1,3 @@ +defmodule PhilomenaWeb.TextileView do + use PhilomenaWeb, :view +end diff --git a/lib/philomena_web/views/user_attribution_view.ex b/lib/philomena_web/views/user_attribution_view.ex index c1c155f0..7c7912b1 100644 --- a/lib/philomena_web/views/user_attribution_view.ex +++ b/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