Customizing the Notes Panel

[Matt Parizeau]

Q:

I would like to be able to update the notes in the notes panel so that each user has their own color. Is it possible to do this? I would also like to have a down arrow at the bottom of the notes panel if there are annotations on the following pages.

A:

If you want to customize the notes in the panel you can listen to the noteCreated event which will give you access to the note DOM element. For example:

$(document).on('noteCreated', function(e, annotation, element) {
    var userName = element.find('.noteAuthor').text();
    console.log(userName);
});

Depending on what you want to do exactly the implementation might be different but the following code should get you started. Basically it will return true if there is a note outside of the view. You'll probably want to update it to take into account the current scroll position of the notes panel [e.g. $('#notesPanel').scrollTop()] depending on how you want to use it:

function shouldShowArrow() {
  var showArrow = false;
  var panelElements = $('#notesPanel').find('.panelElement');
  var viewportHeight = $('#DocumentViewer').height();

  if (panelElements.length > 0) {
    panelElements.each(function(index, ele) {
      if (parseFloat(ele.style.top) > viewportHeight) {
        showArrow = true;
        return false;
      }
    });
  }
  return showArrow;
}