infra
/
cryptpad
2
1
Fork 0
Code Issues Pull Requests Projects Releases 1 Activity

Visual link between comments and commented content

pull/1/head
yflory 2020-04-23 13:47:03 +02:00
parent 70545c64fc
commit c2f26775d8
3 changed files with 49 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
customize.dist/src/less2/include/comments.less
View File

@ -45,12 +45,13 @@
cursor: pointer;
.tools_unselectable();
}
&:not(:last-child) {
margin-bottom: 10px;
}
//&:not(:last-child) {
// margin-bottom: 10px;
//}
.cp-comment-form {
margin-top: 5px;
}
padding: 5px;
}
.cp-comment {
&:not(:first-child) {
@ -77,7 +78,8 @@
.cp-comment-content {
background-color: white;
padding: 10px 5px 5px;
display: pre-wrap;
white-space: pre-wrap;
word-break: break-all;
}
.cp-comment-actions {
display: none;
@ -88,6 +90,7 @@
}
}
.cp-comment-active {
background-color: rgba(0,0,0,0.2);
.cp-comment-actions {
display: block;
}

37
www/pad/comment.js
View File

@ -1,21 +1,23 @@
(function () {
var CKEDITOR = window.CKEDITOR;
function isUnstylable (el) {
console.log(el);
console.log(el.getAttribute('contentEditable'));
console.log(el.getAttribute('data-nostyle'));
var b = el.getAttribute( 'contentEditable' ) == 'false' ||
var b = el.getAttribute( 'contentEditable' ) === 'false' ||
el.getAttribute( 'data-nostyle' );
console.log(b);
return b;
}
var color1 = 'rgba(252, 165, 3, 0.8);';
var color2 = 'rgba(252, 231, 3, 0.8);';
CKEDITOR.plugins.add('comments', {
//requires: 'dialog,widget',
//icons: 'image',
//hidpi: true,
onLoad: function () {
CKEDITOR.addCss('comment { background-color: rgba(252, 165, 3, 0.8); }' +
CKEDITOR.addCss('comment { background-color: '+color1+' }' +
'@keyframes color { 0% { background-color: '+color2+' } 50% { background-color: '+color1+' } 100% { background-color: '+color2+' } }' +
'comment:focus { animation-name: color; animation-duration: 1s; animation-iteration-count: 2; background-color: '+color2+' outline: none;}' +
'comment * { background-color: transparent !important; }');
},
init: function (editor) {
@ -28,7 +30,8 @@
var styleDef = {
element: 'comment',
attributes: {
'data-uid': '#(uid)'
'data-uid': '#(uid)',
'tabindex': '1'
},
overrides: [ {
element: 'comment'
@ -71,7 +74,7 @@
});
// Uncomment provided element
editor.plugins.comments.uncomment = function (id) {
editor.plugins.comments.uncomment = function (id, els) {
if (editor.readOnly) { return; }
editor.fire('saveSnapshot');
@ -79,14 +82,20 @@
var style = new CKEDITOR.style({
element: 'comment',
attributes: {
'data-uid': id
'data-uid': id,
'tabindex': '1'
},
});
// Create range for the entire document
var range = editor.createRange();
range.selectNodeContents( editor.document.getBody() );
// Remove style for the document
style.removeFromRange(range, editor);
style.alwaysRemoveElement = true;
els.forEach(function (el) {
// Create range for the entire document
var node = new CKEDITOR.dom.node(el);
var range = editor.createRange();
range.setStart(node, 0);
range.setEnd(node, Number.MAX_SAFE_INTEGER);
// Remove style for the document
style.removeFromRange(range, editor);
});
setTimeout( function() {
editor.fire('saveSnapshot');

23
www/pad/comments.js
View File

@ -1,10 +1,11 @@
define([
'jquery',
'json.sortify',
'/common/common-util.js',
'/common/hyperscript.js',
'/common/common-interface.js',
'/customize/messages.js'
], function (Sortify, Util, h, UI, Messages) {
], function ($, Sortify, Util, h, UI, Messages) {
var Comments = {};
/*
@ -262,20 +263,27 @@ define([
}, function () {
// Delete the comment
delete Env.comments.data[key];
Env.editor.plugins.comments.uncomment(key);
var els = Env.$inner.find('comment[data-uid="'+key+'"]').toArray();
Env.editor.plugins.comments.uncomment(key, els);
// Send to chainpad
updateMetadata(Env);
Env.framework.localChange();
});
var focusContent = function () {
Env.$inner.find('comment[data-uid="'+key+'"]').focus();
};
$div.click(function () {
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();
// XXX highlight (and scroll to) the comment in the doc?
focusContent();
});
if ($oldInput && $oldInput.attr('data-uid') === key) {
@ -283,6 +291,7 @@ define([
$actions.hide();
$div.append($oldInput);
$oldInput.find('textarea').focus();
focusContent();
}
});
@ -338,7 +347,7 @@ define([
}
// Comment not in the metadata: uncomment (probably an undo)
if (comments.indexOf(id) === -1) {
Env.editor.plugins.comments.uncomment(id);
Env.editor.plugins.comments.uncomment(id, [el]);
changed = true;
return;
}
@ -459,6 +468,12 @@ sel.forEach(function (el) {
}
Env.$container.find('.cp-comment-active').removeClass('cp-comment-active');
});
Env.$inner.on('click', 'comment', function (e) {
var $comment = $(e.target);
var uid = $comment.attr('data-uid');
if (!uid) { return; }
Env.$container.find('.cp-comment-container[data-uid="'+uid+'"]').click();
});
var call = function (f) {
return function () {