scinote-web/app/assets/javascripts/sitewide/comments_sidebar.js

170 lines
5.3 KiB
JavaScript
Raw Normal View History

2020-11-21 03:25:28 +08:00
/* global SmartAnnotation */
2020-11-18 23:26:01 +08:00
var CommentsSidebar = (function() {
const SIDEBAR = '.comments-sidebar';
var commentsCounter;
2022-05-25 21:04:14 +08:00
var closeCallback;
2020-11-18 23:26:01 +08:00
2020-11-20 19:29:40 +08:00
function loadCommentsList() {
var commentsUrl = $(SIDEBAR).data('comments-url');
$.get(commentsUrl, {
object_type: $(SIDEBAR).data('object-type'),
object_id: $(SIDEBAR).data('object-id')
}, function(result) {
$(SIDEBAR).removeClass('loading');
$(SIDEBAR).find('.comments-subject-title').text(result.object_name);
2022-05-25 21:04:14 +08:00
$(SIDEBAR).find('.comments-subject-url').html(result.object_url);
2020-11-20 19:29:40 +08:00
$(SIDEBAR).find('.comments-list').html(result.comments);
2022-05-25 21:04:14 +08:00
if (result.comment_addable) {
$(SIDEBAR).find('.comment-input-container').removeClass('hidden');
} else {
$(SIDEBAR).find('.comment-input-container').addClass('hidden');
}
2020-11-20 19:29:40 +08:00
});
}
function updateCounter() {
var commentsAmount = $(SIDEBAR).find('.comments-list .comment-container').length;
if (commentsCounter.length) {
// Replace the number in comment element
commentsCounter.text(commentsCounter.text().replace(/\d+/g, commentsAmount));
}
}
function initOpenButton() {
2022-05-25 21:04:14 +08:00
$(document).on('click', '.open-comments-sidebar', function(e) {
commentsCounter = $(`#comment-count-${$(this).data('objectId')}`);
2022-05-25 21:04:14 +08:00
closeCallback = $(this).data('closeCallback');
CommentsSidebar.open($(this).data('objectType'), $(this).data('objectId'));
2022-05-25 21:04:14 +08:00
e.preventDefault();
});
}
function initCloseButton() {
$(document).on('click', `${SIDEBAR} .close-btn`, function() {
CommentsSidebar.close();
2022-05-25 21:04:14 +08:00
if (closeCallback) closeCallback();
});
}
function initScrollButton() {
$(document).on('click', `${SIDEBAR} .scroll-page-with-anchor`, function(e) {
e.preventDefault();
$($(this).attr('href'))[0].scrollIntoView();
2022-07-12 19:54:10 +08:00
window.scrollBy(0, -130);
});
}
2020-11-21 03:25:28 +08:00
function initSendButton() {
$(document).on('click', `${SIDEBAR} .send-comment, ${SIDEBAR} .update-comment`, function() {
var requestUrl;
var requestType;
var updateMode = $(SIDEBAR).find('.sidebar-footer').hasClass('update');
var inputField = $(SIDEBAR).find('.comment-input-field');
if (updateMode) {
requestType = 'PATCH';
requestUrl = inputField.data('update-url');
} else {
requestType = 'POST';
requestUrl = $(SIDEBAR).data('comments-url');
}
$.ajax({
url: requestUrl,
type: requestType,
dataType: 'json',
data: {
object_type: $(SIDEBAR).data('object-type'),
object_id: $(SIDEBAR).data('object-id'),
message: inputField.val()
},
success: (result) => {
if (updateMode) {
$('.comment-container.edit').replaceWith(result.html);
} else {
$(result.html).appendTo(`${SIDEBAR} .comments-list`);
}
$(SIDEBAR).find('.comment-input-field').val('');
$(SIDEBAR).find('.sidebar-footer').removeClass('update');
2020-11-21 19:31:49 +08:00
$('.error-container').empty();
updateCounter();
2020-11-21 19:31:49 +08:00
},
error: (result) => {
$('.error-container').text(result.responseJSON.errors.message);
2020-11-21 03:25:28 +08:00
}
});
});
}
function initCancelButton() {
$(document).on('click', `${SIDEBAR} .cancel-button`, function() {
$(SIDEBAR).find('.comment-input-field').val('');
$(SIDEBAR).find('.sidebar-footer').removeClass('update');
});
}
function initDeleteButton() {
$(document).on('click', `${SIDEBAR} .delete-comment`, function(e) {
var deleteUrl = $(this).data('delete-url');
var commentContainer = $(this).closest('.comment-container');
e.preventDefault();
$.ajax({
url: deleteUrl,
type: 'DELETE',
dataType: 'json',
success: () => {
2020-11-21 03:25:28 +08:00
commentContainer.remove();
updateCounter();
2020-11-21 03:25:28 +08:00
}
});
});
}
function initEditButton() {
$(document).on('click', `${SIDEBAR} .edit-comment`, function(e) {
e.preventDefault();
$('.comment-container').removeClass('edit');
$(this).closest('.comment-container').addClass('edit');
$(SIDEBAR).find('.sidebar-footer').addClass('update');
$(SIDEBAR).find('.comment-input-field')
.val($(this).data('comment-raw'))
.data('update-url', $(this).data('update-url'));
});
}
function initInputField() {
if ($(SIDEBAR).find('.comment-input-field').length) {
2020-11-21 03:25:28 +08:00
SmartAnnotation.init($(SIDEBAR).find('.comment-input-field'));
}
2020-11-21 03:25:28 +08:00
}
2020-11-18 23:26:01 +08:00
return {
init: function() {
initOpenButton();
2020-11-18 23:26:01 +08:00
initCloseButton();
2020-11-21 03:25:28 +08:00
initSendButton();
initDeleteButton();
initEditButton();
initCancelButton();
2022-05-25 21:04:14 +08:00
initScrollButton();
2020-11-18 23:26:01 +08:00
},
2020-11-20 19:29:40 +08:00
open: function(objectType, objectId) {
2020-11-18 23:26:01 +08:00
$(SIDEBAR).find('.comments-subject-title').empty();
$(SIDEBAR).find('.comments-list').empty();
2020-11-21 03:25:28 +08:00
$(SIDEBAR).find('.comment-input-field').val('');
2020-11-21 19:31:49 +08:00
$('.error-container').empty();
2020-11-21 03:25:28 +08:00
$(SIDEBAR).find('.sidebar-footer').removeClass('update');
2020-11-20 19:29:40 +08:00
$(SIDEBAR).data('object-type', objectType).data('object-id', objectId);
2020-11-18 23:26:01 +08:00
$(SIDEBAR).addClass('open loading');
initInputField();
2020-11-20 19:29:40 +08:00
loadCommentsList();
2020-11-18 23:26:01 +08:00
},
close: function() {
$(SIDEBAR).removeClass('open');
}
};
}());
CommentsSidebar.init();