From c2f26775d8a062118bc024611aac9dc08a00e500 Mon Sep 17 00:00:00 2001 From: yflory Date: Thu, 23 Apr 2020 13:47:03 +0200 Subject: [PATCH] Visual link between comments and commented content --- .../src/less2/include/comments.less | 11 ++++-- www/pad/comment.js | 37 ++++++++++++------- www/pad/comments.js | 23 ++++++++++-- 3 files changed, 49 insertions(+), 22 deletions(-) diff --git a/customize.dist/src/less2/include/comments.less b/customize.dist/src/less2/include/comments.less index a0412700e..3ec5de7f7 100644 --- a/customize.dist/src/less2/include/comments.less +++ b/customize.dist/src/less2/include/comments.less @@ -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; } diff --git a/www/pad/comment.js b/www/pad/comment.js index 914c8f53e..7dcd162fb 100644 --- a/www/pad/comment.js +++ b/www/pad/comment.js @@ -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'); diff --git a/www/pad/comments.js b/www/pad/comments.js index b5a680f0a..ea2a65f3a 100644 --- a/www/pad/comments.js +++ b/www/pad/comments.js @@ -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 () {