Add Save Annotations button to top ribbon

[Skip Gaede]

I would like to expose the Save Annotations function on the top ribbon if annotations are enabled. How can this be done?

Thanks,
Skip

[Matt Parizeau]

Hi Skip,

You could use code like the following in a config file:

$(document).on('viewerLoaded', function() {
    if (readerControl.enableAnnotations) {
        var $button = $('<button type="button">Save Annotations</button>');
        $button.on('click', function() {
            readerControl.saveAnnotations();
        });
        $('#control').append($button);
    }
});

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[Skip Gaede]

Thanks!

[Gloogle Inc]

This is very nice, but could you add a way to understand when the saving is finished in the next version of the viewer?

Something like returning a promise or triggering an event.

That would be handy. :)

Also, some unrelated stuff that would be nice to have:

- Use a CSS class for hiding elements instead of "display:none" on the HTML element. This would help A LOT, customizing the viewer to one's needs using CSS.

- I have the impression that after you add some annotations and you save them, the annotations' IsModified property is not updated to false. In one case I had to update it myself after save (which of course I could not be sure if when it had finished or if it succeeded or failed...).

- Add a way to make some annotations not-selectable by the user (I have managed to do this with some custom code that de-selects immediately after selection, but maybe you could make it a built-in feature).

- Add a way to hide some annotations from the right panel and from the vertical stripe that contains the annotations markers without hiding them on the page (I have also managed to do this, but I had to modify `notespanel.js` which is not ideal when you upgrade frequently). We use some custom watermarks and that's why we want that functionality.

I like your viewer! :)

Best Regards,

Kostas

[Matt Parizeau]

Hi Kostas,

Thanks for the suggestions! We'll consider them for future versions.

For your question about isModified, this property is only reset after calling getAnnotCommand, not when exporting annotations, so this is expected.

For your question about not listing annotations in the right panel, assuming that you're making a custom annotation for your watermark you could add this.Listable = false inside the constructor. If it's an existing annotation you could do it similar to this post https://groups.google.com/d/msg/pdfnet-webviewer/RvM5mthKEFQ/J7wJKszwPAAJ.

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[Gloogle Inc]

Thank you for the information. :)

The this.Listable = false seemed to work at first, but for some watermarks (I think those that are surrounded by other annotations, but I can't tell for sure) when I double click on the watermark the watermark becomes listed on the right panel. I am not sure if any of my customizations is causing this, but I doubt it. (I am using the 2.2.0 version)

Also, another suggestion:

I think it would be good to make the readerControl.docViewer.getAnnotationManager().toggleAnnotations() accept an optional argument saying whether to toggle the annotations on or off. Also returning the new state in the form of true/false would be nice for when calling it with no arguments. I have a bit of a problem figuring out the active state of the annotations display (whether toggled on or off). As far as I can tell there is no easy way to do this without using the annotationToggled event. :)

Best Regards,

Kostas

[Matt Parizeau]

Hi Kostas,

For double clicking you can modify the annotationDoubleClicked handler in NotesPanel.js so that it ignores non-listable annotations. This change will be included in future releases.

if (!(annotation instanceof Annotations.FreeTextAnnotation) && annotation.Listable) {
  noteManager.editNote(annotation);
}

Thanks for the suggestions. To get the toggled state you can call the getMarkupOff function on AnnotationManager http://www.pdftron.com/webviewer/demo/lib/html5/doc/symbols/CoreControls.AnnotationManager.html#getMarkupOff

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[Gloogle Inc]

Thank you very much for the info. :)

One more idea/suggestion for improvement:

Right now, the mobile viewer and the normal viewer use different date formats for displaying the annotations dates (in the listing area).

Maybe it would be nice to allow someone to easily customize the date format with a custom function?

E.g. define somewhere on the `BaseReaderControl` a `formatDate` function that one could override?

I say `function` and not `format string`, because this will allow special decision making, similar to the one present on the normal viewer:

var dateFormat = "h:mm A MMM D";
if (new Date().getFullYear() !== annotation.DateCreated.getFullYear()) {
    dateFormat = "h:mm A MMM D YYYY";
}

Thanks. :)