|
|
|
|
@ -25,9 +25,11 @@ define([
|
|
|
|
|
u: id,
|
|
|
|
|
m: "str", // comment
|
|
|
|
|
t: +new Date,
|
|
|
|
|
v: "str" // value of the commented content
|
|
|
|
|
v: "str", // value of the commented content
|
|
|
|
|
e: undefined/1, // edited
|
|
|
|
|
d: undefined/1, // deleted
|
|
|
|
|
}],
|
|
|
|
|
(deleted: undefined/true,)
|
|
|
|
|
d: undefined/1,
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@ -66,14 +68,24 @@ define([
|
|
|
|
|
return uid || authorUid(existing);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
var updateAuthorData = function (Env) {
|
|
|
|
|
// Return the author ID and add/update the data for registered users
|
|
|
|
|
// Return the username for unregistered users
|
|
|
|
|
var updateAuthorData = function (Env, onChange) {
|
|
|
|
|
var userData = Env.metadataMgr.getUserData();
|
|
|
|
|
if (!Env.common.isLoggedIn()) {
|
|
|
|
|
return userData.name;
|
|
|
|
|
}
|
|
|
|
|
var myAuthorId = getAuthorId(Env, userData.curvePublic);
|
|
|
|
|
var data = Env.comments.authors[myAuthorId] = Env.comments.authors[myAuthorId] || {};
|
|
|
|
|
var old = Sortify(data);
|
|
|
|
|
data.name = userData.name;
|
|
|
|
|
data.avatar = userData.avatar;
|
|
|
|
|
data.profile = userData.profile;
|
|
|
|
|
data.curvePublic = userData.curvePublic;
|
|
|
|
|
data.notifications = userData.notifications;
|
|
|
|
|
if (typeof(onChange) === "function" && Sortify(data) !== old) {
|
|
|
|
|
onChange();
|
|
|
|
|
}
|
|
|
|
|
return myAuthorId;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
@ -83,17 +95,82 @@ define([
|
|
|
|
|
Env.metadataMgr.updateMetadata(md);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
var sendReplyNotification = function (Env, uid) {
|
|
|
|
|
if (!Env.comments || !Env.comments.data || !Env.comments.authors) { return; }
|
|
|
|
|
if (!Env.common.isLoggedIn()) { return; }
|
|
|
|
|
var thread = Env.comments.data[uid];
|
|
|
|
|
if (!thread || !Array.isArray(thread.m)) { return; }
|
|
|
|
|
var userData = Env.metadataMgr.getUserData();
|
|
|
|
|
var privateData = Env.metadataMgr.getPrivateData();
|
|
|
|
|
var others = {};
|
|
|
|
|
// Get all the other registered users with a mailbox
|
|
|
|
|
thread.m.forEach(function (obj) {
|
|
|
|
|
var u = obj.u;
|
|
|
|
|
if (typeof(u) !== "number") { return; }
|
|
|
|
|
var author = Env.comments.authors[u];
|
|
|
|
|
if (!author || others[u] || !author.notifications || !author.curvePublic) { return; }
|
|
|
|
|
if (author.curvePublic === userData.curvePublic) { return; } // don't send to yourself
|
|
|
|
|
others[u] = {
|
|
|
|
|
curvePublic: author.curvePublic,
|
|
|
|
|
comment: obj.m,
|
|
|
|
|
content: obj.v,
|
|
|
|
|
notifications: author.notifications
|
|
|
|
|
};
|
|
|
|
|
});
|
|
|
|
|
// Send the notification
|
|
|
|
|
Object.keys(others).forEach(function (id) {
|
|
|
|
|
var data = others[id];
|
|
|
|
|
Env.common.mailbox.sendTo("COMMENT_REPLY", {
|
|
|
|
|
channel: privateData.channel,
|
|
|
|
|
comment: data.comment,
|
|
|
|
|
content: data.content
|
|
|
|
|
}, {
|
|
|
|
|
channel: data.notifications,
|
|
|
|
|
curvePublic: data.curvePublic
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
var cleanMentions = function ($el) {
|
|
|
|
|
$el.html('');
|
|
|
|
|
var el = $el[0];
|
|
|
|
|
var allowed = ['data-profile', 'data-name', 'data-avatar', 'class'];
|
|
|
|
|
// Remove unnecessary/unsafe attributes
|
|
|
|
|
for (var i=el.attributes.length-1; i>0; i--) {
|
|
|
|
|
var name = el.attributes[i] && el.attributes[i].name;
|
|
|
|
|
if (allowed.indexOf(name) === -1) {
|
|
|
|
|
$el.removeAttr(name);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// Seletc all text of a contenteditable element
|
|
|
|
|
var selectAll = function (element) {
|
|
|
|
|
var selection = window.getSelection();
|
|
|
|
|
var range = document.createRange();
|
|
|
|
|
range.selectNodeContents(element);
|
|
|
|
|
selection.removeAllRanges();
|
|
|
|
|
selection.addRange(range);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
Messages.comments_deleted = "Comment deleted by its author"; // XXX
|
|
|
|
|
Messages.comments_edited = "Edited"; // XXX
|
|
|
|
|
Messages.comments_submit = "Submit"; // XXX
|
|
|
|
|
Messages.comments_reply = "Reply"; // XXX
|
|
|
|
|
Messages.comments_resolve = "Resolve"; // XXX
|
|
|
|
|
|
|
|
|
|
var getCommentForm = function (Env, reply, _cb) {
|
|
|
|
|
var getCommentForm = function (Env, reply, _cb, editContent) {
|
|
|
|
|
var cb = Util.once(_cb);
|
|
|
|
|
var userData = Env.metadataMgr.getUserData();
|
|
|
|
|
var name = Util.fixHTML(userData.name || Messages.anonymous);
|
|
|
|
|
var avatar = h('span.cp-avatar');
|
|
|
|
|
var textarea = h('textarea', {
|
|
|
|
|
tabindex: 1
|
|
|
|
|
var textarea = h('div.cp-textarea', {
|
|
|
|
|
tabindex: 1,
|
|
|
|
|
role: 'textbox',
|
|
|
|
|
'aria-multiline': true,
|
|
|
|
|
'aria-labelledby': 'cp-comments-label',
|
|
|
|
|
'aria-required': true,
|
|
|
|
|
contenteditable: true,
|
|
|
|
|
});
|
|
|
|
|
Env.common.displayAvatar($(avatar), userData.avatar, name);
|
|
|
|
|
|
|
|
|
|
@ -110,31 +187,106 @@ define([
|
|
|
|
|
Messages.comments_submit
|
|
|
|
|
]);
|
|
|
|
|
|
|
|
|
|
// List of allowed attributes in mentions
|
|
|
|
|
$(submit).click(function (e) {
|
|
|
|
|
e.stopPropagation();
|
|
|
|
|
cb(textarea.value);
|
|
|
|
|
var clone = textarea.cloneNode(true);
|
|
|
|
|
var notify = {};
|
|
|
|
|
var $clone = $(clone);
|
|
|
|
|
$clone.find('span.cp-mentions').each(function (i, el) {
|
|
|
|
|
var $el = $(el);
|
|
|
|
|
var curve = $el.attr('data-curve');
|
|
|
|
|
var notif = $el.attr('data-notifications');
|
|
|
|
|
cleanMentions($el, true);
|
|
|
|
|
if (!curve || !notif) { return; }
|
|
|
|
|
notify[curve] = notif;
|
|
|
|
|
});
|
|
|
|
|
$clone.find('br').replaceWith("\n");
|
|
|
|
|
$clone.find('> *:not(.cp-mentions)').remove();
|
|
|
|
|
var content = clone.innerHTML.trim();
|
|
|
|
|
if (!content) { return; }
|
|
|
|
|
|
|
|
|
|
// Send notification
|
|
|
|
|
var privateData = Env.metadataMgr.getPrivateData();
|
|
|
|
|
var userData = Env.metadataMgr.getUserData();
|
|
|
|
|
Object.keys(notify).forEach(function (curve) {
|
|
|
|
|
if (curve === userData.curvePublic) { return; }
|
|
|
|
|
Env.common.mailbox.sendTo("MENTION", {
|
|
|
|
|
channel: privateData.channel,
|
|
|
|
|
}, {
|
|
|
|
|
channel: notify[curve],
|
|
|
|
|
curvePublic: curve
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Push the content
|
|
|
|
|
cb(content);
|
|
|
|
|
});
|
|
|
|
|
$(cancel).click(function (e) {
|
|
|
|
|
e.stopPropagation();
|
|
|
|
|
cb();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
$(textarea).keydown(function (e) {
|
|
|
|
|
var $text = $(textarea).keydown(function (e) {
|
|
|
|
|
e.stopPropagation();
|
|
|
|
|
if (e.which === 27) {
|
|
|
|
|
$(cancel).click();
|
|
|
|
|
e.stopImmediatePropagation();
|
|
|
|
|
}
|
|
|
|
|
if (e.which === 13 && !e.shiftKey) {
|
|
|
|
|
// Submit form on Enter is the autocompelte menu is not visible
|
|
|
|
|
try {
|
|
|
|
|
var visible = $text.autocomplete("instance").menu.activeMenu.is(':visible');
|
|
|
|
|
if (visible) { return; }
|
|
|
|
|
} catch (err) {}
|
|
|
|
|
$(submit).click();
|
|
|
|
|
e.stopImmediatePropagation();
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
}
|
|
|
|
|
}).click(function (e) {
|
|
|
|
|
e.stopPropagation();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (Env.common.isLoggedIn()) {
|
|
|
|
|
var authors = {};
|
|
|
|
|
Object.keys((Env.comments && Env.comments.authors) || {}).forEach(function (id) {
|
|
|
|
|
var obj = Util.clone(Env.comments.authors[id]);
|
|
|
|
|
authors[obj.curvePublic] = obj;
|
|
|
|
|
});
|
|
|
|
|
Env.common.addMentions({
|
|
|
|
|
$input: $text,
|
|
|
|
|
contenteditable: true,
|
|
|
|
|
type: 'contacts',
|
|
|
|
|
sources: authors
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var deleteButton;
|
|
|
|
|
// Edit? start with the old content
|
|
|
|
|
// Add a space to make sure we won't end with a mention and a bad cursor
|
|
|
|
|
if (editContent) {
|
|
|
|
|
textarea.innerHTML = editContent + " ";
|
|
|
|
|
deleteButton = h('button.btn.btn-danger', {
|
|
|
|
|
tabindex: 1
|
|
|
|
|
}, [
|
|
|
|
|
h('i.fa.fa-times'),
|
|
|
|
|
Messages.kanban_delete
|
|
|
|
|
]);
|
|
|
|
|
$(deleteButton).click(function (e) {
|
|
|
|
|
e.stopPropagation();
|
|
|
|
|
cb(false);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
setTimeout(function () {
|
|
|
|
|
$(textarea).focus();
|
|
|
|
|
selectAll(textarea);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
return h('div.cp-comment-form' + (reply ? '.cp-comment-reply' : ''), {
|
|
|
|
|
'data-uid': reply || undefined
|
|
|
|
|
'data-uid': reply || ''
|
|
|
|
|
}, [
|
|
|
|
|
h('div.cp-comment-form-input', [
|
|
|
|
|
avatar,
|
|
|
|
|
@ -142,49 +294,90 @@ define([
|
|
|
|
|
]),
|
|
|
|
|
h('div.cp-comment-form-actions', [
|
|
|
|
|
cancel,
|
|
|
|
|
deleteButton,
|
|
|
|
|
submit
|
|
|
|
|
])
|
|
|
|
|
]);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
var isVisible = function (el, $container) {
|
|
|
|
|
var size = $container.outerHeight();
|
|
|
|
|
var pos = el.getBoundingClientRect();
|
|
|
|
|
return (pos.bottom < size) && (pos.y > 0);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
var redrawComments = function (Env) {
|
|
|
|
|
// Don't redraw if there were no change
|
|
|
|
|
var str = Sortify((Env.comments || {}).data || {});
|
|
|
|
|
|
|
|
|
|
var str = Sortify(Env.comments || {});
|
|
|
|
|
if (str === Env.oldComments) { return; }
|
|
|
|
|
Env.oldComments = str;
|
|
|
|
|
|
|
|
|
|
// Store the cursor position if it's located in this form
|
|
|
|
|
var oldSelection = window.getSelection();
|
|
|
|
|
var oldRangeObj;
|
|
|
|
|
if ($(oldSelection.anchorNode).closest('.cp-comment-form').length) {
|
|
|
|
|
var oldRange = oldSelection.getRangeAt && oldSelection.getRangeAt(0);
|
|
|
|
|
oldRangeObj = {
|
|
|
|
|
start: oldRange.startContainer,
|
|
|
|
|
startO: oldRange.startOffset,
|
|
|
|
|
end: oldRange.endContainer,
|
|
|
|
|
endO: oldRange.endOffset
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
// Store existing input form in memory
|
|
|
|
|
var $oldInput = Env.$container.find('.cp-comment-form').detach();
|
|
|
|
|
if ($oldInput.length !== 1) { $oldInput = undefined; }
|
|
|
|
|
|
|
|
|
|
// Remove everything
|
|
|
|
|
Env.$container.html('');
|
|
|
|
|
|
|
|
|
|
// "show" tells us if we need to display the "comments" column or not
|
|
|
|
|
var show = false;
|
|
|
|
|
|
|
|
|
|
// Add invisible label for accessibility tools
|
|
|
|
|
var label = h('label#cp-comments-label', Messages.comments_comment);
|
|
|
|
|
Env.$container.append(label);
|
|
|
|
|
|
|
|
|
|
// If we were adding a new comment, redraw our form
|
|
|
|
|
if ($oldInput && !$oldInput.attr('data-uid')) {
|
|
|
|
|
show = true;
|
|
|
|
|
Env.$container.append($oldInput);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var order = Env.$inner.find('comment').map(function (i, el) {
|
|
|
|
|
var userData = Env.metadataMgr.getUserData();
|
|
|
|
|
|
|
|
|
|
// Get all the comment threads in their order in the pad
|
|
|
|
|
var threads = Env.$inner.find('comment').map(function (i, el) {
|
|
|
|
|
return el.getAttribute('data-uid');
|
|
|
|
|
}).toArray();
|
|
|
|
|
var done = [];
|
|
|
|
|
|
|
|
|
|
order.forEach(function (key) {
|
|
|
|
|
// Avoir duplicates
|
|
|
|
|
if (done.indexOf(key) !== -1) { return; }
|
|
|
|
|
done.push(key);
|
|
|
|
|
|
|
|
|
|
// Draw all comment threads
|
|
|
|
|
Util.deduplicateString(threads).forEach(function (key) {
|
|
|
|
|
// Get thread data
|
|
|
|
|
var obj = Env.comments.data[key];
|
|
|
|
|
if (!obj || obj.deleted || !Array.isArray(obj.m) || !obj.m.length) {
|
|
|
|
|
if (!obj || obj.d || !Array.isArray(obj.m) || !obj.m.length) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// If at least one thread is visible, display the "comments" column
|
|
|
|
|
show = true;
|
|
|
|
|
|
|
|
|
|
var content = [];
|
|
|
|
|
obj.m.forEach(function (msg, i) {
|
|
|
|
|
var author = (Env.comments.authors || {})[msg.u] || {};
|
|
|
|
|
var $div;
|
|
|
|
|
var $actions;
|
|
|
|
|
|
|
|
|
|
// Draw all messages for this thread
|
|
|
|
|
(obj.m || []).forEach(function (msg, i) {
|
|
|
|
|
var replyCls = i === 0 ? '' : '.cp-comment-reply';
|
|
|
|
|
if (msg.d) {
|
|
|
|
|
|
|
|
|
|
content.push(h('div.cp-comment.cp-comment-deleted'+replyCls,
|
|
|
|
|
Messages.comments_deleted));
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
var author = typeof(msg.u) === "number" ?
|
|
|
|
|
((Env.comments.authors || {})[msg.u] || {}) :
|
|
|
|
|
{ name: msg.u };
|
|
|
|
|
var name = Util.fixHTML(author.name || Messages.anonymous);
|
|
|
|
|
var date = new Date(msg.t);
|
|
|
|
|
var avatar = h('span.cp-avatar');
|
|
|
|
|
@ -196,17 +389,109 @@ define([
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
content.push(h('div.cp-comment'+(i === 0 ? '' : '.cp-comment-reply'), [
|
|
|
|
|
// Build sanitized html with mentions
|
|
|
|
|
var m = h('div.cp-comment-content');
|
|
|
|
|
m.innerHTML = msg.m;
|
|
|
|
|
var $m = $(m);
|
|
|
|
|
$m.find('> *:not(span.cp-mentions)').remove();
|
|
|
|
|
$m.find('span.cp-mentions').each(function (i, el) {
|
|
|
|
|
var $el = $(el);
|
|
|
|
|
var name = $el.attr('data-name');
|
|
|
|
|
var avatarUrl = $el.attr('data-avatar');
|
|
|
|
|
var profile = $el.attr('data-profile');
|
|
|
|
|
if (!name && !avatarUrl && !profile) {
|
|
|
|
|
$el.remove();
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
cleanMentions($el);
|
|
|
|
|
var avatar = h('span.cp-avatar');
|
|
|
|
|
Env.common.displayAvatar($(avatar), avatarUrl, name);
|
|
|
|
|
$el.append([
|
|
|
|
|
avatar,
|
|
|
|
|
h('span.cp-mentions-name', name)
|
|
|
|
|
]);
|
|
|
|
|
if (profile) {
|
|
|
|
|
$el.attr('tabindex', 1);
|
|
|
|
|
$el.addClass('cp-mentions-clickable').click(function (e) {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
e.stopPropagation();
|
|
|
|
|
Env.common.openURL(Hash.hashToHref(profile, 'profile'));
|
|
|
|
|
}).focus(function (e) {
|
|
|
|
|
e.stopPropagation();
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// edited state
|
|
|
|
|
var edited;
|
|
|
|
|
if (msg.e) {
|
|
|
|
|
edited = h('div.cp-comment-edited', Messages.comments_edited);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var container;
|
|
|
|
|
|
|
|
|
|
// Add edit button when applicable (last message of the thread, written by ourselves)
|
|
|
|
|
var edit;
|
|
|
|
|
if (i === (obj.m.length -1) && author.curvePublic === userData.curvePublic) {
|
|
|
|
|
edit = h('span.cp-comment-edit', {
|
|
|
|
|
tabindex:1,
|
|
|
|
|
title: Messages.clickToEdit
|
|
|
|
|
}, h('i.fa.fa-pencil'));
|
|
|
|
|
$(edit).click(function (e) {
|
|
|
|
|
Env.$container.find('.cp-comment-active').removeClass('cp-comment-active');
|
|
|
|
|
$div.addClass('cp-comment-active');
|
|
|
|
|
e.stopPropagation();
|
|
|
|
|
Env.$container.find('.cp-comment-form').remove();
|
|
|
|
|
if ($actions) { $actions.hide(); }
|
|
|
|
|
var form = getCommentForm(Env, key, function (val) {
|
|
|
|
|
// Show the "reply" and "resolve" buttons again
|
|
|
|
|
$(form).closest('.cp-comment-container')
|
|
|
|
|
.find('.cp-comment-actions').css('display', '');
|
|
|
|
|
$(form).remove();
|
|
|
|
|
|
|
|
|
|
if (typeof(val) === "undefined") { return; }
|
|
|
|
|
|
|
|
|
|
var obj = Env.comments.data[key];
|
|
|
|
|
if (!obj || !Array.isArray(obj.m)) { return; }
|
|
|
|
|
var msg = obj.m[i];
|
|
|
|
|
if (!msg) { return; }
|
|
|
|
|
// i is our index
|
|
|
|
|
if (val === false) {
|
|
|
|
|
msg.d = 1;
|
|
|
|
|
if (container) {
|
|
|
|
|
$(container).addClass('cp-comment-deleted')
|
|
|
|
|
.html(Messages.comments_deleted);
|
|
|
|
|
}
|
|
|
|
|
if (obj.m.length === 1) {
|
|
|
|
|
delete Env.comments.data[key];
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
msg.e = 1;
|
|
|
|
|
msg.m = val;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Send to chainpad
|
|
|
|
|
updateMetadata(Env);
|
|
|
|
|
Env.framework.localChange();
|
|
|
|
|
}, m.innerHTML);
|
|
|
|
|
|
|
|
|
|
if (!$div) { return; }
|
|
|
|
|
$div.append(form);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Add the comment
|
|
|
|
|
content.push(container = h('div.cp-comment'+replyCls, [
|
|
|
|
|
h('div.cp-comment-header', [
|
|
|
|
|
avatar,
|
|
|
|
|
h('span.cp-comment-metadata', [
|
|
|
|
|
h('span.cp-comment-author', name),
|
|
|
|
|
h('span.cp-comment-time', date.toLocaleString())
|
|
|
|
|
])
|
|
|
|
|
]),
|
|
|
|
|
edit
|
|
|
|
|
]),
|
|
|
|
|
h('div.cp-comment-content', [
|
|
|
|
|
msg.m
|
|
|
|
|
])
|
|
|
|
|
m,
|
|
|
|
|
edited
|
|
|
|
|
]));
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
@ -229,22 +514,23 @@ define([
|
|
|
|
|
reply,
|
|
|
|
|
resolve
|
|
|
|
|
]));
|
|
|
|
|
var $actions = $(actions);
|
|
|
|
|
$actions = $(actions);
|
|
|
|
|
|
|
|
|
|
var div;
|
|
|
|
|
Env.$container.append(div = h('div.cp-comment-container', {
|
|
|
|
|
'data-uid': key,
|
|
|
|
|
tabindex: 1
|
|
|
|
|
}, content));
|
|
|
|
|
var $div = $(div);
|
|
|
|
|
$div = $(div);
|
|
|
|
|
|
|
|
|
|
$(reply).click(function (e) {
|
|
|
|
|
e.stopPropagation();
|
|
|
|
|
$actions.hide();
|
|
|
|
|
var form = getCommentForm(Env, key, function (val) {
|
|
|
|
|
$(form).remove();
|
|
|
|
|
// Show the "reply" and "resolve" buttons again
|
|
|
|
|
$(form).closest('.cp-comment-container')
|
|
|
|
|
.find('.cp-comment-actions').css('display', '');
|
|
|
|
|
$(form).remove();
|
|
|
|
|
|
|
|
|
|
if (!val) { return; }
|
|
|
|
|
var obj = Env.comments.data[key];
|
|
|
|
|
@ -257,23 +543,36 @@ define([
|
|
|
|
|
}).join('\n');
|
|
|
|
|
|
|
|
|
|
// Push the reply
|
|
|
|
|
var myId = updateAuthorData(Env);
|
|
|
|
|
var user = updateAuthorData(Env);
|
|
|
|
|
obj.m.push({
|
|
|
|
|
u: myId,
|
|
|
|
|
u: user, // id (number) or name (string)
|
|
|
|
|
t: +new Date(),
|
|
|
|
|
m: val,
|
|
|
|
|
v: value
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Notify other users
|
|
|
|
|
sendReplyNotification(Env, key);
|
|
|
|
|
|
|
|
|
|
// Send to chainpad
|
|
|
|
|
updateMetadata(Env);
|
|
|
|
|
Env.framework.localChange();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
$div.append(form);
|
|
|
|
|
|
|
|
|
|
// Make sure the submit button is visible: scroll by the height of the form
|
|
|
|
|
setTimeout(function () {
|
|
|
|
|
var yContainer = Env.$container[0].getBoundingClientRect().bottom;
|
|
|
|
|
var yActions = form.getBoundingClientRect().bottom;
|
|
|
|
|
if (yActions > yContainer) {
|
|
|
|
|
Env.$container.scrollTop(Env.$container.scrollTop() + 55);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
UI.confirmButton(resolve, {
|
|
|
|
|
classes: 'btn-danger-alt'
|
|
|
|
|
classes: 'btn-danger'
|
|
|
|
|
}, function () {
|
|
|
|
|
// Delete the comment
|
|
|
|
|
delete Env.comments.data[key];
|
|
|
|
|
@ -291,21 +590,24 @@ define([
|
|
|
|
|
|
|
|
|
|
// Scroll into view
|
|
|
|
|
if (!$last.length) { return; }
|
|
|
|
|
var size = Env.$inner.outerHeight();
|
|
|
|
|
var pos = $last[0].getBoundingClientRect();
|
|
|
|
|
var visible = (pos.y + pos.height) < size;
|
|
|
|
|
var visible = isVisible($last[0], Env.$inner);
|
|
|
|
|
if (!visible) { $last[0].scrollIntoView(); }
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
$div.on('click focus', function () {
|
|
|
|
|
$div.on('click focus', function (e) {
|
|
|
|
|
// Prevent the click event to propagate if we're already selected
|
|
|
|
|
// The propagation to #cp-app-pad-inner would trigger the "unselect" handler
|
|
|
|
|
e.stopPropagation();
|
|
|
|
|
if ($div.hasClass('cp-comment-active')) { return; }
|
|
|
|
|
Env.$container.find('.cp-comment-active').removeClass('cp-comment-active');
|
|
|
|
|
$div.addClass('cp-comment-active');
|
|
|
|
|
div.scrollIntoView();
|
|
|
|
|
$actions.css('display', '');
|
|
|
|
|
Env.$container.find('.cp-comment-form').remove();
|
|
|
|
|
|
|
|
|
|
focusContent();
|
|
|
|
|
|
|
|
|
|
var visible = isVisible(div, Env.$container);
|
|
|
|
|
if (!visible) { div.scrollIntoView(); }
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
if ($oldInput && $oldInput.attr('data-uid') === key) {
|
|
|
|
|
@ -317,6 +619,19 @@ define([
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Restore selection
|
|
|
|
|
if (oldRangeObj) {
|
|
|
|
|
setTimeout(function () {
|
|
|
|
|
if (!oldRangeObj) { return; }
|
|
|
|
|
var range = document.createRange();
|
|
|
|
|
range.setStart(oldRangeObj.start, oldRangeObj.startO);
|
|
|
|
|
range.setEnd(oldRangeObj.end, oldRangeObj.endO);
|
|
|
|
|
var sel = window.getSelection();
|
|
|
|
|
sel.removeAllRanges();
|
|
|
|
|
sel.addRange(range);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (show) {
|
|
|
|
|
Env.$container.show();
|
|
|
|
|
} else {
|
|
|
|
|
@ -334,10 +649,22 @@ define([
|
|
|
|
|
}
|
|
|
|
|
if (Env.ready === 0) {
|
|
|
|
|
Env.ready = true;
|
|
|
|
|
updateAuthorData(Env, function () {
|
|
|
|
|
changed = true;
|
|
|
|
|
});
|
|
|
|
|
// On ready, if our user data have changed or if we've added the initial structure
|
|
|
|
|
// of the comments, push the changes
|
|
|
|
|
if (changed) {
|
|
|
|
|
updateMetadata(Env);
|
|
|
|
|
Env.framework.localChange();
|
|
|
|
|
}
|
|
|
|
|
} else if (Env.ready) {
|
|
|
|
|
// Everytime there is a metadata change, check if our user data have changed
|
|
|
|
|
// and push the updates if necessary
|
|
|
|
|
updateAuthorData(Env, function () {
|
|
|
|
|
updateMetadata(Env);
|
|
|
|
|
Env.framework.localChange();
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
redrawComments(Env);
|
|
|
|
|
};
|
|
|
|
|
@ -353,7 +680,7 @@ define([
|
|
|
|
|
|
|
|
|
|
// If there is no comment stored in the metadata, abort
|
|
|
|
|
var comments = Object.keys(Env.comments.data || {}).filter(function (id) {
|
|
|
|
|
return !Env.comments.data[id].deleted;
|
|
|
|
|
return !Env.comments.data[id].d;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
var changed = false;
|
|
|
|
|
@ -378,8 +705,8 @@ define([
|
|
|
|
|
}
|
|
|
|
|
// If this comment was deleted, we're probably using "undo" to restore it:
|
|
|
|
|
// remove the "deleted" state and continue
|
|
|
|
|
if (obj.deleted) {
|
|
|
|
|
delete obj.deleted;
|
|
|
|
|
if (obj.d) {
|
|
|
|
|
delete obj.d;
|
|
|
|
|
changed = true;
|
|
|
|
|
}
|
|
|
|
|
return id;
|
|
|
|
|
@ -397,7 +724,7 @@ define([
|
|
|
|
|
// comment has been deleted
|
|
|
|
|
var data = Env.comments.data[uid];
|
|
|
|
|
if (!data) { return; }
|
|
|
|
|
data.deleted = true;
|
|
|
|
|
data.d = 1;
|
|
|
|
|
//delete Env.comments.data[uid];
|
|
|
|
|
changed = true;
|
|
|
|
|
});
|
|
|
|
|
@ -440,7 +767,8 @@ define([
|
|
|
|
|
node: node,
|
|
|
|
|
button: button
|
|
|
|
|
};
|
|
|
|
|
$(button).click(function () {
|
|
|
|
|
$(button).click(function (e) {
|
|
|
|
|
e.stopPropagation();
|
|
|
|
|
Env.editor.execCommand('comment');
|
|
|
|
|
Env.bubble = undefined;
|
|
|
|
|
});
|
|
|
|
|
@ -462,6 +790,8 @@ define([
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Remove active class on other comments
|
|
|
|
|
Env.$container.find('.cp-comment-active').removeClass('cp-comment-active');
|
|
|
|
|
Env.$container.find('.cp-comment-form').remove();
|
|
|
|
|
var form = getCommentForm(Env, false, function (val) {
|
|
|
|
|
$(form).remove();
|
|
|
|
|
@ -477,10 +807,10 @@ define([
|
|
|
|
|
// Don't override existing data
|
|
|
|
|
if (Env.comments.data[uid]) { return; }
|
|
|
|
|
|
|
|
|
|
var myId = updateAuthorData(Env);
|
|
|
|
|
var user = updateAuthorData(Env);
|
|
|
|
|
Env.comments.data[uid] = {
|
|
|
|
|
m: [{
|
|
|
|
|
u: myId,
|
|
|
|
|
u: user, // Id or name
|
|
|
|
|
t: +new Date(),
|
|
|
|
|
m: val,
|
|
|
|
|
v: canonicalize(Env.editor.getSelection().getSelectedText())
|
|
|
|
|
@ -533,7 +863,7 @@ define([
|
|
|
|
|
// Clear data
|
|
|
|
|
var data = (Env.comments && Env.comments.data) || {};
|
|
|
|
|
Object.keys(data).forEach(function (uid) {
|
|
|
|
|
if (data[uid].deleted) { delete data[uid]; }
|
|
|
|
|
if (data[uid].d) { delete data[uid]; }
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Commit
|
|
|
|
|
@ -545,21 +875,39 @@ define([
|
|
|
|
|
var Env = cfg;
|
|
|
|
|
Env.comments = Util.clone(COMMENTS);
|
|
|
|
|
|
|
|
|
|
var ro = cfg.framework.isReadOnly();
|
|
|
|
|
var onEditableChange = function (unlocked) {
|
|
|
|
|
Env.$container.removeClass('cp-comments-readonly');
|
|
|
|
|
if (ro || !unlocked) {
|
|
|
|
|
Env.$container.addClass('cp-comments-readonly');
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
cfg.framework.onEditableChange(onEditableChange);
|
|
|
|
|
onEditableChange();
|
|
|
|
|
|
|
|
|
|
addAddCommentHandler(Env);
|
|
|
|
|
|
|
|
|
|
// Unselect comment when clicking outside
|
|
|
|
|
$(window).click(function (e) {
|
|
|
|
|
if ($(e.target).closest('.cp-comment-container').length) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
var $target = $(e.target);
|
|
|
|
|
if (!$target.length) { return; }
|
|
|
|
|
if ($target.is('.cp-comment-container')) { return; }
|
|
|
|
|
if ($target.closest('.cp-comment-container').length) { return; }
|
|
|
|
|
if ($target.closest('.ui-autocomplete').length) { return; }
|
|
|
|
|
// Add comment button? don't remove anything because this handler is called after
|
|
|
|
|
// the button action
|
|
|
|
|
if ($target.is('.cke_button__comment')) { return; }
|
|
|
|
|
if ($target.closest('.cke_button__comment').length) { return; }
|
|
|
|
|
Env.$container.find('.cp-comment-active').removeClass('cp-comment-active');
|
|
|
|
|
Env.$inner.find('comment.active').removeClass('active');
|
|
|
|
|
Env.$container.find('.cp-comment-form').remove();
|
|
|
|
|
});
|
|
|
|
|
// Unselect comment when clicking on another part of the doc
|
|
|
|
|
Env.$inner.on('click', function (e) {
|
|
|
|
|
if ($(e.target).closest('comment').length) { return; }
|
|
|
|
|
Env.$container.find('.cp-comment-active').removeClass('cp-comment-active');
|
|
|
|
|
Env.$inner.find('comment.active').removeClass('active');
|
|
|
|
|
Env.$container.find('.cp-comment-form').remove();
|
|
|
|
|
});
|
|
|
|
|
Env.$inner.on('click', 'comment', function (e) {
|
|
|
|
|
var $comment = $(e.target);
|
|
|
|
|
|
ansuz
5 years ago
