'
form.replaceWith(newDiv);
}
else {
window.location.replace(newComment.url)
}
warmNewCommentsArea();
initializeCommentsPage();
initializeCommentDate();
initializeCommentDropdown();
})
} else {
response.json().then(function parseError(errorReponse) {
form.classList.remove('submitting');
window.alert(errorReponse.error); // eslint-disable-line no-alert
return false;
});
}
return false;
});
return false;
}
function handleFocus(event) {
var userStatus = document.getElementsByTagName('body')[0].getAttribute('data-user-status');
var area = event.target;
if (userStatus == 'logged-out') {
event.preventDefault();
showModal('reply-to-comment');
area.blur();
setTimeout(function () {
area.blur();
showModal('reply-to-comment');
}, 100);
} else {
handleSizeChange(event);
}
}
function handleBlur(event) {
setTimeout(function () {
var el = document.getElementById('text-area');
if (el.value.length == 0) {
el.className = '';
}
}, 100);
}
function handleKeyUp(event) {
handleSizeChange(event);
}
// Handler for when Ctrl+Enter OR Command+Enter is pressed
function handleSubmit(event) {
// Get user details and extract code of conduct & comment count
var user = userData();
if (!user) {
return;
}
var commentCount = user.number_of_comments;
// var codeOfConduct = user.checked_code_of_conduct;
// Code of conduct is false the first time even if the user has accepted it
// so we are not using it in the check below
// It also seems unnecessary if comment count >= 1 indicates that
// it was previously accepted
// Ensure that user has commented at least once
// and we have a non-empty comment to post
if (commentCount >= 1 &&
event.target.value.trim() !== '') {
// get a reference to the submit button for the text area (first level comment vs. reply comment)
var parentFormId = event.target.parentElement.parentElement.id || event.target.parentElement.id;
var submitButton = document.querySelector('#' + parentFormId + ' input[type="submit"].comment-action-button');
submitButton.click();
}
}
// Handler when Ctrl+B/I OR Command+B/I is pressed
function handleBoldAndItalic(event) {
var textArea = event.target;
var selection = textArea.value.substring(textArea.selectionStart, textArea.selectionEnd);
var selectionStart = textArea.selectionStart;
var surroundingStr = event.keyCode === KEY_CODE_B ? "**" : "_";
replaceSelectedText(textArea, `${surroundingStr}${selection}${surroundingStr}`);
var selectionStartWithOffset = selectionStart + surroundingStr.length;
textArea.setSelectionRange(selectionStartWithOffset, selectionStartWithOffset + selection.length);
}
// Handler when Ctrl+K OR Command+K is pressed
function handleLink(event) {
var textArea = event.target;
var selection = textArea.value.substring(textArea.selectionStart, textArea.selectionEnd);
var selectionStart = textArea.selectionStart;
replaceSelectedText(textArea, `[${selection}](url)`);
// start position + length of selection + [](
var startOffset = selectionStart + selection.length + 3;
// start offset + 'url'.length
var endOffset = startOffset + 3;
textArea.setSelectionRange(startOffset, endOffset);
}
function replaceSelectedText(textArea, text) {
// Chrome and other modern browsers (except FF and IE 8,9,10,11)
if (document.execCommand('insertText', false, text)) {
}
// Firefox (non-standard method)
else if (typeof textArea.setRangeText === "function") {
textArea.setRangeText(text);
}
/*
Disabling IE 8-11 for now as there's no easy way to verify all this
We can revisit this if it's really needed and find a jQuery plugin to use
// IE 8-10
else if(document.selection) {
const ieRange = document.selection.createRange();
ieRange.text = text;
// Move cursor after the inserted text
ieRange.collapse(false); // to the end
ieRange.select();
}
else {
// Does not support IE 11 yet
}
*/
}
var KEY_CODE_B = 66;
var KEY_CODE_I = 73;
var KEY_CODE_K = 75;
var ENTER_KEY_CODE = 13;
function handleKeyDown(event) {
if (event.ctrlKey || event.metaKey) {
switch (event.keyCode) {
case KEY_CODE_B:
event.preventDefault();
handleBoldAndItalic(event);
break;
case KEY_CODE_I:
event.preventDefault();
handleBoldAndItalic(event);
break;
case KEY_CODE_K:
event.preventDefault();
handleLink(event);
break;
case ENTER_KEY_CODE:
event.preventDefault();
handleSubmit(event);
break;
default:
break;
}
}
}
function handleSizeChange(event) {
var lines = event.target.value.split(/\r*\n/);
var lineCount = lines.length;
if (lineCount > 11) {
document.getElementById('text-area').className = 'embiggened-max';
} else if (lineCount > 6) {
document.getElementById('text-area').className = 'embiggened-more';
} else {
document.getElementById('text-area').className = 'embiggened';
}
}
function validateField(event) {
if (document.getElementById('text-area')) {
var commentField = document.getElementById('text-area').value;
if (commentField == '') {
event.preventDefault();
}
}
}
function generateUploadFormdata(image) {
var token = document.querySelector("meta[name='csrf-token']").content;
var formData = new FormData();
formData.append('authenticity_token', token);
formData.append('image', image[0]);
return formData;
}
function handleImageUpload(event, randomIdNumber) {
var commentableId = document.getElementById('comments-container').dataset.commentableId;
event.preventDefault();
document.getElementById('image-upload-' + randomIdNumber).click();
document.getElementById('image-upload-' + randomIdNumber).onchange = function (e) {
var image = document.getElementById('image-upload-' + randomIdNumber).files;
if (image.length > 0) {
document.getElementById("image-upload-file-label-" + randomIdNumber).style.color = '#888888';
document.getElementById("image-upload-file-label-" + randomIdNumber).innerHTML = "Uploading...";
document.getElementById("image-upload-submit-" + randomIdNumber).value = "uploading";
setTimeout(function () {
document.getElementById("image-upload-submit-" + randomIdNumber).click(function () { });
}, 50)
}
}
document.getElementById("image-upload-submit-" + randomIdNumber).onclick = function (e) {
e.preventDefault();
var image = document.getElementById('image-upload-' + randomIdNumber).files;
if (image.length > 0) {
getCsrfToken()
.then(sendFetch("image-upload", generateUploadFormdata(image)))
.then(function (response) {
if (response.status === 200) {
response.json().then(
function uploadImageCb(json) {
var address = document.getElementById("uploaded-image-" + randomIdNumber);
var button = document.getElementById("image-upload-button-" + randomIdNumber);
var messageContainer = document.getElementById("image-upload-file-label-" + randomIdNumber)
// button.style.display = "none";
messageContainer.style.display = "none";
address.value = json.links[0];
address.classList.add("showing");
address.select();
var uploadedMessage = 'Uploaded! Paste into editor';
messageContainer.innerHTML = uploadedMessage;
messageContainer.style.color = '#00c673';
messageContainer.style.position = "relative"
messageContainer.style.top = "5px";
}
);
} else {
response.json().then(function(responseBody) {
var errorMessage = responseBody.error || 'Invalid file!';
document.getElementById("image-upload-file-label-" + randomIdNumber).innerHTML = errorMessage;
document.getElementById("image-upload-file-label-" + randomIdNumber).style.color = '#e05252';
document.getElementById("image-upload-submit-" + randomIdNumber).style.display = 'none';
});
}
})
.catch(function (err) {
// there's currently no error handling
})
}
}
}
function listenForDetailsToggle() {
var detailItems = document.getElementsByTagName("DETAILS");
for (var i = 0; i < detailItems.length; i++) {
detailItems[i].addEventListener("toggle", event => {
var item = event.target
var itemSummaryContent = item.getElementsByTagName("SPAN")[0]
var usernames = item.getElementsByClassName("comment-username")
var number = "";
if (usernames.length > 1) {
number = " + " + (usernames.length - 1) + " replies"
}
var itemUsername = usernames[0].textContent + number
if (item.open) {
itemSummaryContent.innerHTML = " "
} else {
itemSummaryContent.innerHTML = itemUsername;
}
item.getElementsByTagName("SUMMARY")[0].blur();
});
}
}