Notes panel do not update itself on changing from read only mode to markup mode

[prakhar jaiswal]

Hi,

We have a scenario where viewer gets instantiated in readonly mode:

new PDFTron.WebViewer({enableReadOnlyMode: true,...}, someElement)

And on some user action, the viewer is brought to edit mode, at some point long after the document has loaded using this snippet:

               

window.readerControl.setReadOnly(true);
 window.readerControl.setToolMode(window.PDFTron.WebViewer.ToolMode.Pan);
 $('.editButtonsContainer,.replyContainer').addClass('noteHidden').hide();
 $('.noteContents').hide(); $('.staticNoteContents').show();

The annotation tools respect the change in document mode and display appropriate alerts on being clicked while in read only mode and are editable in markup mode. But, the notes panel does not behave in sync as:
1. Annotations are not reply-able even in markup mode

Going by the snippet in notespanel.js

_createNote method creates the note (at the time of documentLoaded to instantiate respective notes for each annotation, and whenever annotation is created) as:

var replyable = !this.annotManager.getReadOnly();
var editable = this.annotManager.canModify(annotation);

....
note = new RootNote(annotation, editable, replyable);

whereas in notes method:

var Note = function(annotation, editable, replyable) {
        this._editable = editable;
        this._replyable = replyable;
        this._isEditing = false;
        this._stayUncollapsed = false;
        this._annotation = annotation;
        this._parent = null;


        this.$container = $('<div class="noteContainer">');


        this.createContainer();
    };

the value passed for editable, replyable are being saved at this point of time and are never refreshed.


Now, if the value is altered:

 window.readerControl.setReadOnly(false);
 window.readerControl.setToolMode(window.PDFTron.WebViewer.ToolMode.Pan);

The value this._replyable inside notes panel are not refreshed, and hence the methods like these:

 

showReplyBox: function() {
            if (this._replyable) {
                this.$replyContainer.show();
                this._setFlexible(this.$replyTextarea);
                // if the textarea is focused then show the buttons as well
                var textareaFocused = document.activeElement === this.$replyTextarea[0];
                if (textareaFocused) {
                    this.$replyButtonsContainer.show();
                }
            }
}

won't work as the if condition will evaluate as false.


So, is there a way to keep notes panel and notes in sync with document mode?

[Matt Parizeau]

We'll be adding this in future WebViewer versions but for now you can modify NotesPanel to handle this.

Underneath $document.on('startAddingReply' ...) you can add a new event handler 

$document.on('updateAnnotationPermission', function(e, annotation) {
    if (annotation) {
        noteManager.updateNotePermission(annotation);
    } else {
        noteManager.updateAllNotePermissions();
    }
});

Then on the NoteManager prototype add the following functions:

updateNotePermission: function(annotation) {
    var note = this._getNote(annotation);
    if (note) {
        var newEditable = this.annotManager.canModify(annotation);
        var newReplyable = !this.annotManager.getReadOnly();
        note.setEditable(newEditable);
        note.setReplyable(newReplyable);
    }
},

updateAllNotePermissions: function() {
    var me = this;
    this.annotManager.getAnnotationsList().forEach(function(annotation) {
        if (annotation.Listable) {
            me.updateNotePermission(annotation);
        }
    });
    this.updateAllPositions();
}

Then on the Note prototype adding the following functions:

setEditable: function(isEditable) {
    this._editable = isEditable;
    if (isEditable) {
        this.$editButtonsContainer.show();
    } else {
        if (this._isEditing) {
            this.showTextBox();
        }
        this.$editButtonsContainer.hide();
    }
},

setReplyable: function(isReplyable) {
    this._replyable = isReplyable;
    if (!isReplyable) {
        this.$replyContainer.hide();
    }
},

Then after you call setReadOnly or change users you would call readerControl.fireEvent('updateAnnotationPermission')

Matt Parizeau

Software Developer

PDFTron Systems Inc.