I want to rearrange the top ToolbarControl and display it how I want while disabling the features that I don't need.
I want to enable multiple users to collaborate on one document.
I want to disable all the annotation tools EXCEPT the sticky note tool. And with the sticky note tool I want to bind it with the highlight tool with a custom highlight color based on a user's choice (specifically the stroke color options you guys already have in place on the sticky note tool).
Lastly, I want users to be able to add their own comments onto a sticky note already put in place by someone. Essentially creating a commenting thread.
Smaller additions:
Is there a way to fix the size of the sticky note popup? We don't want users to morph the size like it's done in the default.
var am = readerControl.docViewer.GetAnnotationManager();
am.on('annotationPopupCreated', function(e, annotation, $popupel) {
$popupel.resizable('disable');
$popupel.removeClass('ui-state-disabled');
$popupel.find('.ui-resizable-handle').css('display', 'none');
});
Hi Jason,We provide access to the HTML and JavaScript source of ReaderControl so you can make your modifications to the toolbar directly there if you like. The div with id "control" contains the entire toolbar. Alternatively you could do all of your modifications through JavaScript in a separate config file. This should make it easier to upgrade to newer WebViewer versions in the future. You can take a look at config.js in the various samples in the WebViewer download that change the toolbar (e.g. http://www.pdftron.com/webviewer/demo/samples/customization/config.js). For very simple changes you could take a look at ReaderControlConfig.js.For collaboration Kevin just added a general post outlining some tips: https://groups.google.com/forum/#!topic/pdfnet-webviewer/_QeJeSPVpeYTo modify the annotation tools you can take a look at AnnotationPanel.html and make the changes there or alternatively put them in your config file. As for your other comment, I'm not 100% sure this is what you mean, however all annotations have a note associated with them. You can view the note by double clicking on any annotation. So if I understand correctly you would just want to show the highlight tool, but maybe show the note by default when creating it?Currently we don't support a commenting thread on notes, but we're working on it and it should be available for the next version.You can add an event handler for annotationPopupCreated to modify the sticky note. The following code is to make it unresizable, but you have access to the element so you could change the size, color or add your own fields.
var am = readerControl.docViewer.GetAnnotationManager();
am.on('annotationPopupCreated', function(e, annotation, $popupel) {
$popupel.resizable('disable');
$popupel.removeClass('ui-state-disabled');
$popupel.find('.ui-resizable-handle').css('display', 'none');
});Matt ParizeauSoftware DeveloperPDFTron Systems Inc.
On Tuesday, January 28, 2014 6:04:01 PM UTC-8, Jason Smith wrote:
$(document).on('viewerLoaded', function() {
var am = readerControl.docViewer.GetAnnotationManager();
am.on('annotationPopupCreated', function(e, annotation, $popupel) {
$popupel.resizable('disable');
$popupel.removeClass('ui-state-disabled');
$popupel.find('.ui-resizable-handle').css('display', 'none');
});
});
$popupel.css('background', '#00FFFF');
$popupel.find('.popup-subject').text("Custom Title");
Annotations.SelectionModel.prototype.drawPopupTail = function(ctx, annotation, zoom, rect, targetPoint) {
var center = {x: (rect.x1 + rect.x2) * 0.5, y: (rect.y1 + rect.y2) * 0.5};
var corner = {x: rect.x1, y: rect.y1};
if (targetPoint.x > center.x) {
corner.x = rect.x2;
}
if (targetPoint.y > center.y) {
corner.y = rect.y2;
}
ctx.beginPath();
ctx.moveTo(corner.x, corner.y);
ctx.lineTo(targetPoint.x, targetPoint.y);
ctx.strokeStyle = "rgba(255, 0, 0, 0.5)";
ctx.stroke();
};
<body style="width:100%;height:100%;margin:0px;padding:0px;overflow:hidden">
<div id="viewer" style="height: 100%; width:90%; overflow: hidden;"></div>
<div id="rightContainer" style="width: 10%">Right</div>
</body>
am.on('annotationChanged', function(e, annotation, action) {
if (action === "add") {
// annotation added
} else if (action === "modify") {
// annotation modified
} else if (action === "delete") {
// annotation deleted
}
}
myAnnotation.replyTo = myOtherAnnotation;
annotManager.JumpToAnnotation(annotation.replyTo);
var iframeWindow = $('iframe')[0].contentWindow;
var annotManager = iframeWindow.readerControl.docViewer.GetAnnotationManager();
var annotationList = annotManager.GetAnnotationsList();
for (var i = 0; i < annotationList.length; ++i) {
if (annotationList[i].Id === myLinkedId) {
annotManager.JumpToAnnotation(annotationList[i]);
return;
}
}