Auto save ALL annotation types

[Jack Brown]

How can I auto save ALL annotation types without it being obnoxious for my users? For example see the code below I use in my config file...

am.on('annotationChanged', function(e, annotation, action) {
    if (action === "add") {
readerControl.saveAnnotations();
    } else if (action === "modify") {
readerControl.saveAnnotations();
    } else if (action === "delete") {
readerControl.saveAnnotations();
    }
});

When I use this code, it auto save's at every possible moment (which is fine) but it's too obnoxious and the save message keeps popping up.
What is the code needed to disable the save button popup message? Also is there a more refined way to enable auto save features that won't bog down the webviewer for my users? Like something that can just auto save in the background.

I don't want to use the code I pasted above, it's not efficient.

[Matt Parizeau]

Hi Jack,

To disable the message whenever annotations are saved you'll need to make a small modification to ReaderControl.js. Find the saveAnnotations function and just comment out or remove anything to do with overlayMessage.

If you want to just auto save in the background you could use setInterval and call saveAnnotations every fixed period of time. However a more efficient way would be to use the underscore.js throttle function and then call this throttled function inside the annotationChanged event handler. Underscore.js is already included by WebViewer so you don't have to import anything new. For example: 

var throttledSave = _.throttle(function() {
    readerControl.saveAnnotations();
}, 5000, {
    leading: false
});

am.on('annotationChanged', function(e) {
    // check whether the annotation change is triggered because of an import (e.g. because of ImportAnnotations)
    if (!e.imported) {
        throttledSave();
    }
});

In this example whenever throttledSave is called nothing will actually happen until 5 seconds later even if there are many other annotation changes in that time frame. It also won't unnecessarily save the annotations when nothing has changed like the setInterval solution will. You can increase/decrease the amount of time to wait before saving by changing the value 5000 in the example.

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[Jack Brown]

I pasted the throttled code in my config file as is and it doesn't work. It instead disabled all my webviewer customizations.

And what is the code so that I can change the comment reply arrow color on annotations?

And what is the code needed so that the right webviewer scroll bar can be disabled and instead be controlled by the main browser window scroll bar. Does that make sense? I attached an image to give you an idea of what I mean.

[Matt Parizeau]

If it disabled all your customization that probably means there was an error when executing the code and so nothing after it was executed. Since you were referring to your config file code about am.on('annotationChanged') I assume you have somewhere where am is defined and that's where you should put the annotationChanged handler. If it's still not working then add a debugger; statement to the top of your config file and step through to see where the config file stops executing.

Since that button has a class of replyButton you could add a css style like this:

.popup-comment-container .replyButton:before {
    color: green;
}

To change the scroll position of a scrollbar after a different scrollbar changes you can refer to this question: http://stackoverflow.com/questions/9236314/how-do-i-synchronize-the-scroll-position-of-two-divs

To be able to select the scrolling element inside WebViewer you can use this code: $('iframe')[0].contentWindow.$('#DocumentViewer')

Matt Parizeau

Software Developer

PDFTron Systems Inc.

On Friday, January 9, 2015 at 5:27:04 PM UTC-8, Jack Brown wrote:

I pasted the throttled code in my config file as is and it doesn't work. It instead disabled all my webviewer customizations.

And what is the code so that I can change the comment reply arrow color on annotations?

And what is the code needed so that the right webviewer scroll bar can be disabled and instead be controlled by the main browser window scroll bar. Does that make sense? I attached an image to give you an idea of what I mean.

On Friday, January 9, 2015 at 11:01:10 AM UTC-6, Jack Brown wrote:

[Jack Brown]

I got the auto save to work thanks.

This isn't working based on what you've said...

var am = readerControl.docViewer.GetAnnotationManager();
    am.on('annotationPopupCreated', function(e, annotation, $popupel) {
    $popupel.find('.popup-comment-container .replyButton:before').css('color', 'yellow');
  });

[Matt Parizeau]

Apparently the before and after pseudo elements can't be selected like that. To make this change you could modify ReaderControl.css and add that style at the bottom.

Matt Parizeau

Software Developer

PDFTron Systems Inc.