61 lines
5.7 KiB
Text
61 lines
5.7 KiB
Text
function buildCommentFormHTML(commentableId, commentableType, parentId) {
|
|
var authToken = document.querySelector("meta[name='csrf-token']").getAttribute('content');
|
|
var user = userData();
|
|
var codeOfConductHTML = ""
|
|
if (user && !user.codeOfConduct && user.commentCount < 1){
|
|
codeOfConductHTML = '<div class="code-of-conduct sub-comment-code-of-conduct" style="display:block" id="toggle-code-of-conduct-checkbox">\
|
|
<input class="checkbox" type="checkbox" name="checked_code_of_conduct" required />\
|
|
<label for="checked_code_of_conduct">I\'ve read the <a href="/code-of-conduct">code of conduct</a></label>\
|
|
</div>'
|
|
}
|
|
var randomIdNumber = Math.floor(Math.random() * 1991);
|
|
|
|
return `<form class="comment-form pt-4" onsubmit="handleCommentSubmit.bind(this)(event)" id="new-comment-${parentId}" action="/comments" accept-charset="UTF-8" method="post" data-comment-id="${parentId}">
|
|
<input name="utf8" type="hidden" value="✓" />
|
|
<input type="hidden" name="authenticity_token" value="${authToken}">
|
|
<input value="${commentableId}" type="hidden" name="comment[commentable_id]" id="comment_commentable_id" />
|
|
<input value="${commentableType}" type="hidden" name="comment[commentable_type]" id="comment_commentable_type" />
|
|
<input value="${parentId}" type="hidden" name="comment[parent_id]" id="comment_parent_id" />
|
|
<div class="comment-form__inner">
|
|
<div class="comment-form__field">
|
|
<textarea id="textarea-for-${parentId}" class="crayons-textfield crayons-textfield--ghost comment-textarea" name="comment[body_markdown]" placeholder="Reply..." aria-label="Reply to a comment..." required="required" onkeydown="handleKeyDown(event)" onfocus="handleFocus(event)" oninput="handleChange(event)" onkeykup="handleKeyUp(event)"></textarea>
|
|
<div class="comment-form__toolbar">
|
|
<div class="editor-image-upload">
|
|
<input type="file" id="image-upload-${randomIdNumber}" 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, ${randomIdNumber})" id="image-upload-button-${randomIdNumber}">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="crayons-icon"><path d="M20 5H4v14l9.292-9.294a1 1 0 011.414 0L20 15.01V5zM2 3.993A1 1 0 012.992 3h18.016c.548 0 .992.445.992.993v16.014a1 1 0 01-.992.993H2.992A.993.993 0 012 20.007V3.993zM8 11a2 2 0 110-4 2 2 0 010 4z"/></svg>
|
|
<span class="hidden s:inline-block">Upload image</span>
|
|
</button>
|
|
<label class="image-upload-file-label" id="image-upload-file-label-${randomIdNumber}"></label>
|
|
<input type="submit" id="image-upload-submit-${randomIdNumber}" value="Upload" style="display:none">
|
|
<input class="crayons-textfield fs-s w-auto uploaded-image hidden" type="text" id="uploaded-image-${randomIdNumber}" />
|
|
</div>
|
|
<button type="button" class="crayons-btn crayons-btn--s crayons-btn--icon-left crayons-btn--ghost-dimmed response-templates-button" title="Use a response template" data-has-listener="false">
|
|
<svg width="24" height="24" class="crayons-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3 18.5V5a3 3 0 013-3h14a1 1 0 011 1v18a1 1 0 01-1 1H6.5A3.5 3.5 0 013 18.5zM19 20v-3H6.5a1.5 1.5 0 100 3H19zM10 4H6a1 1 0 00-1 1v10.337A3.485 3.485 0 016.5 15H19V4h-2v8l-3.5-2-3.5 2V4z"/></svg>
|
|
<span class="hidden s:inline-block">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="Markdown Guide">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" class="crayons-icon"><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 100-16 8 8 0 000 16zM11 7h2v2h-2V7zm0 4h2v6h-2v-6z"/></svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="response-templates-container crayons-card crayons-card--secondary p-4 mb-4 fs-base comment-form__templates hidden">
|
|
<header>
|
|
<button type="button" class="personal-template-button active" data-target-type="personal" data-form-id="new_comment">Personal</button>
|
|
<button type="button" class="moderator-template-button hidden" data-target-type="moderator" data-form-id="new_comment">Moderator</button>
|
|
</header>
|
|
<img class="loading-img hidden" src="<%= asset_path("loading-ellipsis.svg") %>" alt="loading">
|
|
<div class="personal-responses-container"></div>
|
|
<div class="moderator-responses-container hidden"></div>
|
|
<a target="_blank" rel="noopener nofollow" href="/settings/response-templates">Create template</a>
|
|
<p>Templates let you quickly answer FAQs or store snippets for re-use.</p>
|
|
</div>
|
|
<div class="comment-form__preview text-styles text-styles--secondary"></div>
|
|
<div class="comment-form__buttons mb-4 whitespace-nowrap">
|
|
<button type="submit" class="crayons-btn comment-action-button mr-2 js-btn-enable" name="submit" disabled>Submit</button>
|
|
<button type="button" class="preview-toggle crayons-btn crayons-btn--secondary comment-action-button comment-action-preview mr-2 js-btn-enable" onclick="handleCommentPreview(event)" disabled>Preview</button>
|
|
<button type="button" class="crayons-btn crayons-btn--ghost" onclick="handleFormClose(event)">Dismiss</button>
|
|
</div>
|
|
</div>
|
|
</form>`;
|
|
}
|