127 lines
6.5 KiB
Text
127 lines
6.5 KiB
Text
<div id="response-templates-data" class="hidden"></div>
|
|
<%= javascript_packs_with_chunks_tag "validateFileInputs", "responseTemplates", defer: true %>
|
|
|
|
<% if @comment.errors.any? %>
|
|
<div class="crayons-notice crayons-notice--danger" role="alert">
|
|
<h2><%= t("views.comments.write.errors", count: @comment.errors.count) %></h2>
|
|
<ul>
|
|
<% @comment.errors.full_messages.each do |message| %>
|
|
<li><%= message %></li>
|
|
<% end %>
|
|
</ul>
|
|
</div>
|
|
<% end %>
|
|
|
|
<%= form_for(@comment, authenticity_token: false, html: { class: "comment-form print-hidden" }) do |f| %>
|
|
<% if @article&.comment_template.present? && @comment.new_record? %>
|
|
<div class="article-comment-form-preamble">
|
|
<%= t("views.comments.write.template.article") %>
|
|
</div>
|
|
<% end %>
|
|
|
|
<%# this is used by JS and it will be replaced with the CSRF token received from the server %>
|
|
<input type="hidden" name="authenticity_token" value="NOTHING" id="new_comment_authenticity_token">
|
|
|
|
<% unless @comment.persisted? %>
|
|
<%= f.hidden_field :commentable_id, value: commentable&.id %>
|
|
<%= f.hidden_field :commentable_type, value: commentable_type %>
|
|
<%= f.hidden_field :parent_id, value: @parent_comment.id if @parent_comment %>
|
|
<% end %>
|
|
|
|
<span class="crayons-avatar m:crayons-avatar--l mr-2 shrink-0">
|
|
<img src="<%= Images::Optimizer.call(Settings::General.logo_png, width: 256) %>" width="32" height="32" alt="pic" class="crayons-avatar__image overflow-hidden" id="comment-primary-user-profile--avatar" loading="lazy" />
|
|
</span>
|
|
<div class="comment-form__inner">
|
|
<div class="comment-form__field">
|
|
<%= f.text_area :body_markdown,
|
|
placeholder: t("views.comments.write.field.placeholder"),
|
|
onfocus: "handleFocus(event)",
|
|
onkeyup: "handleKeyUp(event)",
|
|
onkeydown: "handleKeyDown(event)",
|
|
oninput: "handleChange(event)",
|
|
id: "text-area",
|
|
required: true,
|
|
class: "crayons-textfield comment-textarea crayons-textfield--ghost",
|
|
"aria-label": t("views.comments.write.field.aria_label") %>
|
|
<div class="comment-form__toolbar">
|
|
<div class="editor-image-upload">
|
|
<input type="file" id="image-upload-main" name="file" accept="image/*" style="display:none">
|
|
<button type="button" class="crayons-btn crayons-btn--s crayons-btn--icon-left crayons-btn--ghost-dimmed" onclick="handleImageUpload(event,'main')">
|
|
<%= crayons_icon_tag(:image) %>
|
|
<span class="hidden s:inline-block" aria-hidden="false"><%= t("views.comments.write.field.upload") %></span>
|
|
</button>
|
|
<label class="image-upload-file-label" id="image-upload-file-label-main"></label>
|
|
<input type="submit" id='image-upload-submit-main' value="<%= t("views.comments.write.field.submit") %>" style="display:none">
|
|
<input class="hidden" id="uploaded-image-main" />
|
|
</div>
|
|
|
|
<button type="button" class="crayons-btn crayons-btn--s crayons-btn--icon-left crayons-btn--ghost-dimmed response-templates-button" title="<%= t("views.comments.write.field.use") %>" data-has-listener="false" data-form-id="new_comment">
|
|
<%= crayons_icon_tag(:templates) %>
|
|
<span class="hidden s:inline-block" aria-hidden="false"><%= t("views.comments.write.field.templates") %></span>
|
|
</button>
|
|
|
|
<a href="/p/editor_guide" class="crayons-btn crayons-btn--ghost-dimmed crayons-btn--icon crayons-btn--s ml-auto" target="_blank" rel="noopener" title="<%= t("views.comments.write.field.guide.title") %>">
|
|
<%= crayons_icon_tag(:info, title: t("views.comments.write.field.guide.icon")) %>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="response-templates-container crayons-card crayons-card--secondary p-4 mb-4 comment-form__templates fs-base hidden">
|
|
<header class="mb-3">
|
|
<button type="button" class="crayons-btn personal-template-button active" data-target-type="personal" data-form-id="new_comment"><%= t("views.comments.write.template.personal") %></button>
|
|
<button type="button" class="crayons-btn moderator-template-button hidden" data-target-type="moderator" data-form-id="new_comment"><%= t("views.comments.write.template.moderator") %></button>
|
|
</header>
|
|
|
|
<img class="loading-img hidden" src="<%= asset_path("loading-ellipsis.svg") %>" alt="loading" loading="lazy" />
|
|
|
|
<div class="personal-responses-container">
|
|
<%# filled by JS %>
|
|
</div>
|
|
<div class="moderator-responses-container hidden">
|
|
<%# filled by JS %>
|
|
</div>
|
|
|
|
<a target="_blank" rel="noopener nofollow" href="<%= user_settings_path(tab: "response-templates") %>">
|
|
<%= t("views.comments.write.template.create.subtitle") %>
|
|
</a>
|
|
<p><%= t("views.comments.write.template.create.desc") %></p>
|
|
</div>
|
|
|
|
<div class="comment-form__preview text-styles text-styles--secondary" id="preview-div"></div>
|
|
|
|
<div class="comment-form__buttons mb-4">
|
|
<button type="submit" class="crayons-btn mr-2 js-btn-enable" onclick="validateField(event)" disabled><%= t("views.comments.write.submit") %></button>
|
|
<button type="button" class="preview-toggle crayons-btn crayons-btn--secondary comment-action-preview js-btn-enable mr-2" disabled><%= t("views.comments.write.preview") %></button>
|
|
<a href="<%= @comment.path %>" class="dismiss-edit-comment crayons-btn crayons-btn--ghost js-btn-dismiss hidden"><%= t("views.comments.write.cancel") %></a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="code-of-conduct" id="toggle-code-of-conduct-checkbox"></div>
|
|
<% end %>
|
|
|
|
<% if @comment.persisted? %>
|
|
<script>
|
|
var editForm = document.getElementById("edit_comment_<%= @comment&.id %>");
|
|
if ( editForm ) {
|
|
editForm.onsubmit = function (e) {
|
|
e.preventDefault();
|
|
document.getElementsByClassName("comment-form")[0].classList.add("opacity-50");
|
|
var form = this;
|
|
var waitingOnCSRF = setInterval(function () {
|
|
var metaTag = document.querySelector("meta[name='csrf-token']")
|
|
if (metaTag) {
|
|
clearInterval(waitingOnCSRF);
|
|
authToken = metaTag.getAttribute("content");
|
|
document.getElementById("new_comment_authenticity_token").value = authToken;
|
|
form.submit();
|
|
}
|
|
}, 1);
|
|
}
|
|
|
|
editForm.getElementsByClassName("js-btn-dismiss")[0].classList.remove("hidden");
|
|
setTimeout(function(){
|
|
editForm.getElementsByClassName('comment-textarea')[0].focus();
|
|
}, 50);
|
|
}
|
|
</script>
|
|
<% end %>
|