Appending Watermark (DOM element) to WebViewer

[Support]

Q: I am looking to append a div to the webviewer in a certain position using the following code in ReaderControl.js:

 

me.docViewer.SetLinkReadyCallback(function(linkElement, link) {

            if (link instanceof CoreControls.Hyperlink) {

                linkElement.onclick = function() {

                    //external link clicked

                    //window.open(link.target);

                    if (link.target.indexOf("mike://") != -1) {

                        var pageContainer = me.getPageContainer(window.readerControl.GetCurrentPage());

                        //pageContainer.append('<div style="position:relative; z-index:1; top:100px; left:100px;"><iframe src="../videoplayer.aspx"></iframe></div>');

                        pageContainer.append('<div style="position:relative; float:right">Watermark Text</div>');

                    }

                    else

                        window.open(link.target, windowName, windowFeatures);

                };

 

            } else if (link instanceof CoreControls.Link) {

                linkElement.parentClick = linkElement.onclick;

                linkElement.onclick = function() {

                    this.parentClick();

                    //override the default behavior of internal links

                };

            }

        });

 

        ////Example of inserting custom content on top of a page

        ////==============================================================

        me.docViewer.SetPageCompleteCallback(function(pageIndex) {

            alert("hello");

            var pageContainer = me.getPageContainer(pageIndex);

            pageContainer.append('<div style="position:relative; float:right">Watermark Text</div>');

            //note that dom elements appended need to have the position:relative style to show up correctly

            //also by default, text selection on div elements is disabled

        });

 

The 1st function is called when a hyperlinked image is clicked, but doesnt add the div to the page (i cant see it at least) and the 2nd function gets called onload, but also doesnt add the div? what is wrong here?

 

--------

A:

 

You'll need to add a z-index over 30 to the div's style so that it appears above the page.  One other thing that might be causing you trouble is that window.readerControl.GetCurrentPage() returns a page number that starts at 1 whereas getPageContainer expects a page number that starts at 0.

[ch...@cwfent.com]

This worked great for me except in IE in the Flash viewer. Adding "params.wmode = "transparent"; in Webviewer.js in the createFlash function did the trick so IE respected the zindex (in case anyone has the same problem).

[Matt Parizeau]

For the mobile viewer you can use the following code:

$(document).on('viewerLoaded', function() {
  readerControl.docViewer.on('pageComplete', function(e, pageIndex) {
    var container = $('#pageContainer' + pageIndex).parent();
    var location = readerControl.displayMode.pageToWindow({x: 100, y: 100}, pageIndex);
    var pageTransform = readerControl.displayMode.getPageTransform(pageIndex);
    var pageOffset = readerControl.displayMode.getPageOffset(pageIndex);

    var offset = {
        left: pageOffset.x - pageTransform.x,
        top: pageOffset.y - pageTransform.y
    };

    var div = $('<div>')
        .css({
            'position': 'absolute',
            'z-index': 100,
            'top': location.y + offset.top,
            'left': location.x + offset.left
        })
        .text('Some Text');

    var button = $('<button>Open Popup</button>')
        .on('click', function() {
            alert("Opening my popup");
        });

    div.append(button);
    container.append(div);
  });
});

[Matt Parizeau]

For the desktop viewer you could instead have:

WebViewer(...).then(function(instance) {
  var docViewer = instance.docViewer;
  var iframeDoc = instance.iframeWindow.document;

  docViewer.on('pageComplete', function(pageIndex) {
    var zoom = docViewer.getPageZoom(pageIndex);
    var container = iframeDoc.getElementById('pageWidgetContainer' + pageIndex);
    var location = {
      x: 100 * zoom,
      y: 100 * zoom
    };

    var div = document.createElement('div');
    div.style.position = 'absolute';
    div.style.zIndex = 100;
    div.style.top = location.y + 'px';
    div.style.left = location.x + 'px';
    div.textContent = 'Some Text';

    var button = document.createElement('button');
    button.textContent = 'Open Popup';
    button.addEventListener('click', function() {

      alert('Opening my popup');
    });

    div.appendChild(button);
    container.appendChild(div);
  });
});

On Thursday, June 12, 2014 4:45:42 PM UTC-7, Matt Parizeau wrote:

For the mobile viewer you can place the following in the pageComplete handler:

var container = $('#pageContainer' + pageIndex).parent();

var location = me.displayMode.PageToWindow({x: 100, y: 100}, pageIndex);
var pageTransform = me.displayMode.GetPageTransform(pageIndex);
var pageOffset = me.displayMode.GetPageOffset(pageIndex);

var offset = {
    left: pageOffset.x - pageTransform.x,
    top: pageOffset.y - pageTransform.y
};

var div = $('<div>')
    .css({
        'position': 'absolute',
        'z-index': 100,
        'top': location.y + offset.top,
        'left': location.x + offset.left
    })
    .text('Some Text');


var button = $('<button>Open Popup</button>')
    .on('click', function() {
        alert("Opening my popup");
    });

div.append(button);
container.append(div);