Displaying comments as icons if server-side setting is true

index.js

@@ -111,6 +111,7 @@ exports.eejsBlock_editbarMenuLeft = function (hook_name, args, cb) {
 
 exports.eejsBlock_scripts = function (hook_name, args, cb) {
   args.content = args.content + eejs.require("ep_comments_page/templates/comments.html", {}, module);
+  args.content = args.content + eejs.require("ep_comments_page/templates/commentIcons.html", {}, module);
   return cb();
 };
 

static/css/commentIcon.css

@@ -0,0 +1,34 @@
+#commentIcons {
+  position: relative;
+  display: block;
+  z-index: 1;
+  left: 760px;
+}
+
+.comment-icon-line {
+  position: absolute;
+}
+.comment-icon {
+  background-repeat: no-repeat;
+  display: inline-block;
+  height: 16px;
+  vertical-align: middle;
+  width: 16px;
+  margin-right: 5px;
+}
+.comment-icon:before {
+  font-family: "fontawesome-etherpad";
+  content: "\e829";
+  color:#666;
+  font-size:14px;
+  padding-top:2px;
+  line-height:17px;
+}
+
+.comment-icon.with-reply:before {
+  content: "\e828";
+}
+
+.comment-icon.active:before {
+  color:orange;
+}

static/js/commentBoxes.js

@@ -0,0 +1,75 @@
+// Easier access to outter pad
+var padOuter;
+var getPadOuter = function() {
+  padOuter = padOuter || $('iframe[name="ace_outer"]').contents();
+  return padOuter;
+}
+
+var getCommentsContainer = function() {
+  return getPadOuter().find("#comments");
+}
+
+/* ***** Public methods: ***** */
+
+var showComment = function(commentId, e) {
+  var commentElm = getCommentsContainer().find('#'+ commentId);
+  commentElm.show();
+
+  highlightComment(commentId, e);
+};
+
+var hideComment = function(commentId, hideCommentTitle) {
+  var commentElm = getCommentsContainer().find('#'+ commentId);
+  commentElm.removeClass('mouseover');
+
+  // hide even the comment title
+  if (hideCommentTitle) commentElm.hide();
+
+  getPadOuter().contents().find('.comment-modal').hide();
+};
+
+var hideOpenedComments = function() {
+  var openedComments = getCommentsContainer().find('.mouseover');
+  openedComments.removeClass('mouseover').hide();
+
+  getPadOuter().contents().find('.comment-modal').hide();
+}
+
+var hideAllComments = function() {
+  getCommentsContainer().children().hide();
+}
+
+var highlightComment = function(commentId, e){
+  var container       = getCommentsContainer();
+  var commentElm      = container.find('#'+ commentId);
+  var commentsVisible = container.is(":visible");
+  if(commentsVisible) {
+    // sidebar view highlight
+    commentElm.addClass('mouseover');
+  } else {
+    var commentElm = container.find('#'+ commentId);
+    getPadOuter().contents().find('.comment-modal').show().css({
+      left: e.clientX +"px",
+      top: e.clientY + 25 +"px"
+    });
+    // hovering comment view
+    getPadOuter().contents().find('.comment-modal-comment').html(commentElm.html());
+  }
+}
+
+// Adjust position of the comment detail on the container, to be on the same
+// height of the pad text associated to the comment, and return the affected element
+var adjustTopOf = function(commentId, baseTop) {
+  var commentElement = getPadOuter().find('#'+commentId);
+  var targetTop = baseTop - 5;
+  commentElement.css("top", targetTop+"px");
+
+  return commentElement;
+}
+
+exports.showComment = showComment;
+exports.hideComment = hideComment;
+exports.hideOpenedComments = hideOpenedComments;
+exports.hideAllComments = hideAllComments;
+exports.highlightComment = highlightComment;
+exports.adjustTopOf = adjustTopOf;

static/js/commentIcons.js

@@ -0,0 +1,178 @@
+var $ = require('ep_etherpad-lite/static/js/rjquery').$;
+var _ = require('ep_etherpad-lite/static/js/underscore');
+var commentBoxes = require('ep_comments_page/static/js/commentBoxes');
+
+// Easier access to outer pad
+var padOuter;
+var getPadOuter = function() {
+  padOuter = padOuter || $('iframe[name="ace_outer"]').contents();
+  return padOuter;
+}
+
+// easier access to inner pad
+var padInner;
+var getPadInner = function() {
+  padInner = padInner || getPadOuter().find('iframe[name="ace_inner"]');
+  return padInner;
+}
+
+var getOrCreateIconsContainerAt = function(top) {
+  var iconContainer = getPadOuter().find('#commentIcons');
+  var iconClass = "icon-at-"+top;
+
+  // is this the 1st comment on that line?
+  var iconsAtLine = iconContainer.find("."+iconClass);
+  var isFirstIconAtLine = iconsAtLine.length === 0;
+
+  // create container for icons at target line, if it does not exist yet
+  if (isFirstIconAtLine) {
+    iconContainer.append('<div class="comment-icon-line '+iconClass+'"></div>');
+    iconsAtLine = iconContainer.find("."+iconClass);
+    iconsAtLine.css("top", top+"px");
+  }
+
+  return iconsAtLine;
+}
+
+var targetCommentIdOf = function(e) {
+  return e.currentTarget.getAttribute("data-commentid");
+}
+
+var highlightTargetTextOf = function(commentId) {
+  getPadInner().contents().find("head").append("<style>."+commentId+"{ color:orange }</style>");
+}
+
+var removeHighlightOfTargetTextOf = function(commentId) {
+  getPadInner().contents().find("head").append("<style>."+commentId+"{ color:black }</style>");
+  // TODO this could potentially break ep_font_color
+}
+
+var toggleActiveCommentIcon = function(target) {
+  target.toggleClass("active").toggleClass("inactive");
+}
+
+var addListeners = function() {
+  getPadOuter().find('#commentIcons').on("mouseover", ".comment-icon", function(e){
+    var commentId = targetCommentIdOf(e);
+    highlightTargetTextOf(commentId);
+  }).on("mouseout", ".comment-icon", function(e){
+    var commentId = targetCommentIdOf(e);
+    removeHighlightOfTargetTextOf(commentId);
+  }).on("click", ".comment-icon.active", function(e){
+    toggleActiveCommentIcon($(this));
+
+    var commentId = targetCommentIdOf(e);
+    commentBoxes.hideComment(commentId, true);
+  }).on("click", ".comment-icon.inactive", function(e){
+    // deactivate/hide other comment boxes that are opened, so we have only
+    // one comment box opened at a time
+    commentBoxes.hideOpenedComments();
+    var allActiveIcons = getPadOuter().find('#commentIcons').find(".comment-icon.active");
+    toggleActiveCommentIcon(allActiveIcons);
+
+    // activate/show only target comment
+    toggleActiveCommentIcon($(this));
+    var commentId = targetCommentIdOf(e);
+    commentBoxes.showComment(commentId, e);
+  });
+}
+
+/* ***** Public methods: ***** */
+
+// Create container to hold comment icons
+var insertContainer = function() {
+  // we're only doing something if icons will be displayed at all
+  if (!clientVars.displayCommentAsIcon) return;
+
+  getPadInner().before('<div id="commentIcons"></div>');
+
+  addListeners();
+}
+
+// Create a new comment icon
+var addIcon = function(commentId, comment){
+  // we're only doing something if icons will be displayed at all
+  if (!clientVars.displayCommentAsIcon) return;
+
+  var inlineComment = getPadInner().contents().find(".comment."+commentId);
+  var top = inlineComment.get(0).offsetTop + 5;
+  var iconsAtLine = getOrCreateIconsContainerAt(top);
+  var icon = $('#commentIconTemplate').tmpl(comment);
+
+  icon.appendTo(iconsAtLine);
+}
+
+// Hide comment icons from container
+var hideIcons = function() {
+  // we're only doing something if icons will be displayed at all
+  if (!clientVars.displayCommentAsIcon) return;
+
+  getPadOuter().find('#commentIcons').children().children().each(function(){
+    $(this).hide();
+  });
+}
+
+// Adjust position of the comment icon on the container, to be on the same
+// height of the pad text associated to the comment, and return the affected icon
+var adjustTopOf = function(commentId, baseTop) {
+  // we're only doing something if icons will be displayed at all
+  if (!clientVars.displayCommentAsIcon) return;
+
+  var icon = getPadOuter().find('#icon-'+commentId);
+  var targetTop = baseTop+5;
+  var iconsAtLine = getOrCreateIconsContainerAt(targetTop);
+
+  // move icon from one line to the other
+  if (iconsAtLine != icon.parent()) icon.appendTo(iconsAtLine);
+
+  icon.show();
+
+  return icon;
+}
+
+// Indicate if comment detail currently opened was shown by a click on
+// comment icon.
+var isCommentOpenedByClickOnIcon = function() {
+  // we're only doing something if icons will be displayed at all
+  if (!clientVars.displayCommentAsIcon) return false;
+
+  var iconClicked = getPadOuter().find('#commentIcons').find(".comment-icon.active");
+  var commentOpenedByClickOnIcon = iconClicked.length !== 0;
+
+  return commentOpenedByClickOnIcon;
+}
+
+// Mark comment as a comment-with-reply, so it can be displayed with a
+// different icon
+var commentHasReply = function(commentId) {
+  // we're only doing something if icons will be displayed at all
+  if (!clientVars.displayCommentAsIcon) return;
+
+  // change comment icon
+  var iconForComment = getPadOuter().find('#commentIcons').find("#icon-"+commentId);
+  iconForComment.addClass("with-reply");
+}
+
+// Indicate if comment should be shown, checking if it had the characteristics
+// of a comment that was being displayed on the screen
+var shouldShow = function(commentElement) {
+  var shouldShowComment = false;
+
+  if (!clientVars.displayCommentAsIcon) {
+    // if icons are not being displayed, we always show comments
+    shouldShowComment = true;
+  } else if (commentElement.hasClass("mouseover")) {
+    // if icons are being displayed, we only show comments clicked by user
+    shouldShowComment = true;
+  }
+
+  return shouldShowComment;
+}
+
+exports.insertContainer = insertContainer;
+exports.addIcon = addIcon;
+exports.hideIcons = hideIcons;
+exports.adjustTopOf = adjustTopOf;
+exports.isCommentOpenedByClickOnIcon = isCommentOpenedByClickOnIcon;
+exports.commentHasReply = commentHasReply;
+exports.shouldShow = shouldShow;