Better representation of active comments

www/pad/comment.js

@@ -17,7 +17,7 @@
         onLoad: function () {
             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.active { animation-name: color; animation-duration: 1s; animation-iteration-count: 2; background-color: '+color2+' outline: none;}' +
                 'comment * { background-color: transparent !important; }');
         },
         init: function (editor) {
@@ -27,7 +27,6 @@
                 element: 'comment',
                 attributes: {
                     'data-uid': '#(uid)',
-                    'tabindex': '1'
                 },
                 overrides: [ {
                     element: 'comment'
@@ -79,17 +78,17 @@
                     element: 'comment',
                     attributes: {
                         'data-uid': id,
-                        'tabindex': '1'
                     },
                 });
                 style.alwaysRemoveElement = true;
                 els.forEach(function (el) {
-                    // Create range for the entire document
+                    // Create range for this element
+                    el.removeAttribute('class');
                     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
+                    // Remove style for the comment
                     style.removeFromRange(range, editor);
                 });
 

www/pad/comments.js

@@ -270,7 +270,17 @@ define([
             });
 
             var focusContent = function () {
-                Env.$inner.find('comment[data-uid="'+key+'"]').focus();
+                // Add class "active"
+                Env.$inner.find('comment.active').removeClass('active');
+                Env.$inner.find('comment[data-uid="'+key+'"]').addClass('active');
+                var $last = Env.$inner.find('comment[data-uid="'+key+'"]').last();
+
+                // Scroll into view
+                if (!$last.length) { return; }
+                var size = Env.$inner.outerHeight();
+                var pos = $last[0].getBoundingClientRect();
+                var visible = (pos.y + pos.height) < size;
+                if (!visible) { $last[0].scrollIntoView(); }
             };
 
             $div.click(function () {
@@ -382,30 +392,6 @@ define([
                 return;
             }
 
-/*
-sel.forEach(function (el) {
-    // For each comment ID, check if the comment will be deleted
-    // if we add a comment on our selection
-    var id = el.getAttribute('data-uid');
-
-    // Get all nodes for this comment
-    var all = Env.$inner.find('comment[data-uid="'+id+'"]');
-    // Get our selection
-    var sel = Env.ifrWindow.getSelection();
-    if (!sel.containsNode) {
-        // IE doesn't support this method, always allow comments for them...
-        sel.containsNode = function () { return false; };
-    }
-
-    var notDeleted = all.some(function (i, el) {
-        // If this node is completely outside of the selection, continue
-        if (!sel.containsNode(el, true)) { return true; }
-    });
-
-    // only continue if notDeleted is true (at least one node for
-    // this comment won't be deleted)
-});
-*/
             Env.$container.find('.cp-comment-form').remove();
             var form = getCommentForm(Env, false, function (val) {
                 $(form).remove();
@@ -460,11 +446,21 @@ sel.forEach(function (el) {
 
         addAddCommentHandler(Env);
 
+        // Unselect comment when clicking outside
         $(window).click(function (e) {
             if ($(e.target).closest('.cp-comment-container').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);

www/pad/inner.js

@@ -155,8 +155,13 @@ define([
             if (hj[0] === 'MEDIA-TAG') { hj[2] = []; }
             return hj;
         };
+        var commentActiveFilter = function (hj) {
+            if (hj[0] === 'COMMENT') { delete (hj[1] || {}).class; }
+            return hj;
+        };
         brFilter(hj);
         mediatagContentFilter(hj);
+        commentActiveFilter(hj);
         widgetFilter(hj);
         return hj;
     };
@@ -280,6 +285,14 @@ define([
                     }
                 }
 
+                // Don't remote the "active" class of our comments
+                if (info.node && info.node.tagName === 'COMMENT') {
+                    if (info.diff.action === 'removeAttribute' &&
+                        ['class'].indexOf(info.diff.name) !== -1) {
+                        return true;
+                    }
+                }
+
                 if (info.node && info.node.tagName === 'BODY') {
                     if (info.diff.action === 'removeAttribute' &&
                         ['class', 'spellcheck'].indexOf(info.diff.name) !== -1) {