ep_comments_page - npm Package Compare versions

Comparing version 0.0.31 to 0.0.32

package.json

 {
   "description": "Adds comments on sidebar and link it to the text.  Support for Page View, requires ep_page_view",
   "name": "ep_comments_page",
-  "version": "0.0.31",
+  "version": "0.0.32",
   "author": {
@@ -6,0 +6,0 @@ "name": "Nicolas Lescop",

static/js/commentIcons.js

@@ -19,3 +19,3 @@ var $ = require('ep_etherpad-lite/static/js/rjquery').$;
 var calculateIfScreenHasSpaceForIcons = function() {
-  var firstElementOnPad = getPadInner().contents().find("#innerdocbody > div").first();
+  var firstElementOnPad = getPadInner().find("#innerdocbody > div").first();
   var rightMargin       = firstElementOnPad.css("margin-right");
@@ -36,3 +36,3 @@
 var getPadInner = function() {
-  padInner = padInner || getPadOuter().find('iframe[name="ace_inner"]');
+  padInner = padInner || getPadOuter().find('iframe[name="ace_inner"]').contents();
   return padInner;
@@ -64,7 +64,7 @@ }
 var highlightTargetTextOf = function(commentId) {
-  getPadInner().contents().find("head").append("<style>."+commentId+"{ color:orange }</style>");
+  getPadInner().find("head").append("<style>."+commentId+"{ color:orange }</style>");
 }
 
 var removeHighlightOfTargetTextOf = function(commentId) {
-  getPadInner().contents().find("head").append("<style>."+commentId+"{ color:black }</style>");
+  getPadInner().find("head").append("<style>."+commentId+"{ color:black }</style>");
   // TODO this could potentially break ep_font_color
@@ -115,2 +115,41 @@ }
 
+// Listen to clicks on the page to be able to close comment when clicking
+// outside of it
+var addListenersToCloseOpenedComment = function() {
+  // we need to add listeners to the different iframes of the page
+  $(document).on("click", function(e){
+    closeOpenedCommentIfNotOnSelectedElements(e);
+  });
+  getPadOuter().find('html').on("click", function(e){
+    closeOpenedCommentIfNotOnSelectedElements(e);
+  });
+  getPadInner().find('html').on("click", function(e){
+    closeOpenedCommentIfNotOnSelectedElements(e);
+  });
+}
+
+// Close comment if event target was outside of comment or on a comment icon
+var closeOpenedCommentIfNotOnSelectedElements = function(e) {
+  // Don't do anything if clicked on the following elements:
+  if ($(e.target).closest('.comment-icon').length // any of the comment icons
+    || $(e.target).closest('.sidebar-comment').length // a comment box
+    || $(e.target).closest('.comment-modal').length) { // the comment modal
+    return;
+  }
+
+  // All clear, can close the comment
+  var openedComment = findOpenedComment();
+  if (openedComment) {
+    toggleActiveCommentIcon($(openedComment));
+
+    var commentId = openedComment.getAttribute("data-commentid")
+    commentBoxes.hideComment(commentId, true);
+  }
+}
+
+// Search on the page for an opened comment
+var findOpenedComment = function() {
+  return getPadOuter().find('#commentIcons .comment-icon.active').get(0);
+}
+
 /* ***** Public methods: ***** */
@@ -127,2 +166,3 @@
   addListenersToCommentIcons();
+  addListenersToCloseOpenedComment();
   addListenersToPageView();
@@ -136,3 +176,3 @@ }
 
-  var inlineComment = getPadInner().contents().find(".comment."+commentId);
+  var inlineComment = getPadInner().find(".comment."+commentId);
   var top = inlineComment.get(0).offsetTop + 5;
@@ -139,0 +179,0 @@ var iconsAtLine = getOrCreateIconsContainerAt(top);

static/js/index.js

@@ -172,5 +172,5 @@ /* TODO:
       $(this).parent().parent().find(".reply-comment-changeFrom-value").html(currentString);
-      $(this).parent().parent().find('.reply-suggestion').show();
+      $(this).parent().parent().find('.reply-suggestion').addClass("active");
     }else{
-      $(this).parent().parent().find('.reply-suggestion').hide();
+      $(this).parent().parent().find('.reply-suggestion').removeClass("active");
     }
@@ -177,0 +177,0 @@ });

static/tests/frontend/specs/commentIcons.js

@@ -5,3 +5,9 @@ describe("Comment icons", function() {
     helper.newPad(function() {
-      createComment(cb);
+      // make sure Etherpad has enough space to display comment icons
+      enlargeScreen(function() {
+        // force sidebar comments to be shown
+        chooseToShowComments(true, function() {
+          createComment(cb);
+        });
+      });
     });
@@ -11,2 +17,8 @@ this.timeout(60000);
 
+  after(function(cb) {
+    // undo frame resize that was done on before()
+    $('#iframe-container iframe').css("max-width", "");
+    cb();
+  });
+
   it("adds a comment icon on the same height of commented text", function(done) {
@@ -102,82 +114,92 @@ // we only run test if icons are enabled
 
-  it("shows comment modal when user clicks on comment icon", function(done) {
+  it("shows comment when user clicks on comment icon", function(done) {
     // we only run test if icons are enabled
     finishTestIfIconsAreNotEnabled(done, function(){
-      // force modal to be displayed, otherwise tests will fail on very large screens
-      chooseToShowComments(false, function() {
-        var inner$ = helper.padInner$;
-        var outer$ = helper.padOuter$;
-        var commentId = getCommentId();
+      var outer$ = helper.padOuter$;
+      var commentId = getCommentId();
 
-        // click on the icon
-        var $commentIcon = outer$("#commentIcons #icon-"+commentId).first();
-        $commentIcon.click();
+      // click on the icon
+      var $commentIcon = outer$("#commentIcons #icon-"+commentId).first();
+      $commentIcon.click();
 
-        // check modal is visible
-        var $commentModal = outer$(".comment-modal");
-        expect($commentModal.is(":visible")).to.be(true);
+      // check sidebar comment is visible
+      var $openedSidebarComments = outer$("#comments .sidebar-comment:visible");
+      expect($openedSidebarComments.length).to.be(1);
 
-        done();
-      });
+      done();
     });
   });
 
-  it("hides comment modal when user clicks on comment icon twice", function(done) {
+  it("hides comment when user clicks on comment icon twice", function(done) {
     // we only run test if icons are enabled
     finishTestIfIconsAreNotEnabled(done, function(){
-      // force modal to be displayed, otherwise tests will fail on very large screens
-      chooseToShowComments(false, function() {
-        var inner$ = helper.padInner$;
-        var outer$ = helper.padOuter$;
-        var commentId = getCommentId();
+      var outer$ = helper.padOuter$;
+      var commentId = getCommentId();
 
-        // click on the icon to open, then click again to close
-        var $commentIcon = outer$("#commentIcons #icon-"+commentId).first();
-        $commentIcon.click();
-        $commentIcon.click();
+      // click on the icon to open, then click again to close
+      var $commentIcon = outer$("#commentIcons #icon-"+commentId).first();
+      $commentIcon.click();
+      $commentIcon.click();
 
-        // check modal is not visible
-        var $commentModal = outer$(".comment-modal");
-        expect($commentModal.is(":visible")).to.be(false);
+      // check sidebar comment is not visible
+      var $openedSidebarComments = outer$("#comments .sidebar-comment:visible");
+      expect($openedSidebarComments.length).to.be(0);
 
-        done();
-      });
+      done();
     });
   });
 
+  it("hides comment when user clicks outside of comment box", function(done) {
+    // we only run test if icons are enabled
+    finishTestIfIconsAreNotEnabled(done, function(){
+      var outer$ = helper.padOuter$;
+      var commentId = getCommentId();
+
+      // click on the icon to open
+      var $commentIcon = outer$("#commentIcons #icon-"+commentId).first();
+      $commentIcon.click();
+
+      // click outside the comment to hide it
+      outer$("#outerdocbody").click();
+
+      // check sidebar comment is not visible
+      var $openedSidebarComments = outer$("#comments .sidebar-comment:visible");
+      expect($openedSidebarComments.length).to.be(0);
+
+      done();
+    });
+  });
+
   it("hides first comment and shows second comment when user clicks on one icon then on another icon", function(done) {
     // we only run test if icons are enabled
     finishTestIfIconsAreNotEnabled(done, function(){
-      // force modal to be displayed, otherwise tests will fail on very large screens
-      chooseToShowComments(false, function() {
-        var inner$ = helper.padInner$;
-        var outer$ = helper.padOuter$;
+      var inner$ = helper.padInner$;
+      var outer$ = helper.padOuter$;
 
-        // add a second line...
-        var $lastTextElement = inner$("div").last();
-        $lastTextElement.sendkeys('Second line');
+      // add a second line...
+      var $lastTextElement = inner$("div").last();
+      $lastTextElement.sendkeys('Second line{enter}');
 
-        // wait until the new line is split into a separated .ace-line
-        helper.waitFor(function() {
-          return inner$("div").length > 2;
-        })
-        .done(function() {
-          // ... then add a comment to second line
-          var $secondLine = inner$("div").eq(1);
-          $secondLine.sendkeys('{selectall}');
-          addComment("Second Comment", function() {
-            // click on the icon of first comment...
-            var $firstCommentIcon = outer$("#commentIcons #icon-"+getCommentId(0)).first();
-            $firstCommentIcon.click();
-            // ... then click on the icon of last comment
-            var $secondCommentIcon = outer$("#commentIcons #icon-"+getCommentId(1)).first();
-            $secondCommentIcon.click();
+      // wait until the new line is split into a separated .ace-line
+      helper.waitFor(function() {
+        return inner$("div").length > 2;
+      })
+      .done(function() {
+        // ... then add a comment to second line
+        var $secondLine = inner$("div").eq(1);
+        $secondLine.sendkeys('{selectall}');
+        addComment("Second Comment", function() {
+          // click on the icon of first comment...
+          var $firstCommentIcon = outer$("#commentIcons #icon-"+getCommentId(0)).first();
+          $firstCommentIcon.click();
+          // ... then click on the icon of last comment
+          var $secondCommentIcon = outer$("#commentIcons #icon-"+getCommentId(1)).first();
+          $secondCommentIcon.click();
 
-            // check modal is visible
-            var $commentModalText = outer$(".comment-modal .comment-text").text();
-            expect($commentModalText).to.be("Second Comment");
+          // check modal is visible
+          var $commentText = outer$("#comments .sidebar-comment:visible .comment-text").text();
+          expect($commentText).to.be("Second Comment");
 
-            done();
+          done();
 
-          });
         });
@@ -199,3 +221,3 @@ });
     $firstTextElement.sendkeys('{del}'); // clear the first line
-    $firstTextElement.sendkeys('This content will receive a comment'); // insert text
+    $firstTextElement.sendkeys('This content will receive a comment{enter}'); // insert text
     // wait until the two lines are split into two .ace-line's
@@ -294,2 +316,7 @@ helper.waitFor(function() {
 
+  var enlargeScreen = function(callback) {
+    $('#iframe-container iframe').css("max-width", "1000px");
+    callback();
+  }
+
 });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

155701

increased by1.44%

Lines of code

3578

increased by1.71%

No dependency changes