Mobile viewer: default to single page view, zoom to full page width, allow swipe-to-next-page

[Donald Gordon]

When we load up the Mobile webviewer on a device in landscape orientation, it shows two pages side by size.  When you zoom in, you can't swipe to switch to the next page.

How do we

* default to single-page view, even in landscape view

* default to zooming in so that the document takes up the full horizontal width of the screen

* allow swipe-to-next-page in that zoomed in state

[Matt Parizeau]

Hi Donald,

To default to single page view please see this link: https://groups.google.com/d/msg/pdfnet-webviewer/ExGMoifqb2M/nQxp9R4Aa6MJ

To implement fit width please see this link: https://groups.google.com/d/msg/pdfnet-webviewer/nr7iX_UA6ek/yhBbZw8mhqEJ

To allow swiping to the next page when the viewer is zoomed in please see this link: https://groups.google.com/d/msg/pdfnet-webviewer/NnJRgdvvAFc/Sf3Jbuz1YsMJ

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[Donald Gordon]

Thanks Matt.  How would we get that fit width code to apply to all pages when in single page view?  Is there somewhere to hook in to when the page is being loaded?

[Matt Parizeau]

Hi Donald,

I realized there's a simpler way to do this which would be to just add the following code to your config file which replaces the getFitPageZoom function:

ReaderControl.prototype.getFitPageZoom = function(pageIndex) {

  var me = this;

  var totalPageWidth = 0;

  me.forEachPageInWrapper(pageIndex, function(i) {

      var page = me.doc.getPageInfo(i);

      totalPageWidth += page.width;

  });

  return window.innerWidth / totalPageWidth;

};

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[Donald Gordon]

Hi

I tried that code -- it disables vertical scrolling in the document, at least with the mobile viewer which is the one I care about.

Regards

Donald

[Donald Gordon]

Hi Matt,

When I add that to my config file, in mobile mode, I can't zoom out, or scroll vertically (in landscape mode).

Regards

Donald

[Matt Parizeau]

Hi Donald,

Sorry you're right, the change mentioned above will have that side effect of not allowing you to zoom lower than the initial zoom level. You could use this code instead:

$(document).on('viewerLoaded', function() {
  var docViewer = readerControl.docViewer;

  docViewer.on('pageNumberUpdated', function(e, pageNumber) {
    setPageFitWidth(pageNumber);
  });

  docViewer.on('documentLoaded', function() {
    setPageFitWidth(1);
  });
});

function setPageFitWidth(pageNumber) {
  var docViewer = readerControl.docViewer;
  var totalPageWidth = 0;
  var currentZoom = docViewer.getZoom();
  var doc = docViewer.getDocument();

  readerControl.forEachPageInWrapper(pageNumber - 1, function(i) {
      var page = doc.getPageInfo(i);

      totalPageWidth += page.width * currentZoom;
  });

  var zoomChange = window.innerWidth / totalPageWidth;

  readerControl.setZoomLevel(zoomChange * currentZoom, false);
}

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[Donald Gordon]

That works, thanks!

Is it possible to get the webviewer to align the top of the page to the top of the browser window when a new page is shown?  With that patch, it zooms in to full-width, centred on the middle of the document -- not the best if you're trying to read the document.

Regards

Donald Gordon

[Matt Parizeau]

Hi Donald,

I modified the code in this post (https://groups.google.com/d/msg/pdfnet-webviewer/F5qaOiFLmL8/wQLMnOqteoAJ) slightly to get this to work:

$(document).on('viewerLoaded', function() {
  var docViewer = readerControl.docViewer;

  docViewer.on('pageNumberUpdated', function(e, pageNumber) {

    zoomToFitWidth(pageNumber, 0, 0);

  });

  docViewer.on('documentLoaded', function() {

    zoomToFitWidth(1, 0, 0);
  });
});

function getFitWidth(pageNumber) {

  var docViewer = readerControl.docViewer;
  var totalPageWidth = 0;
  var currentZoom = docViewer.getZoom();
  var doc = docViewer.getDocument();

  readerControl.forEachPageInWrapper(pageNumber - 1, function(i) {
      var page = doc.getPageInfo(i);

      totalPageWidth += page.width * currentZoom;
  });

  var zoomChange = window.innerWidth / totalPageWidth;

  return zoomChange * currentZoom;
}

function zoomToFitWidth(pageNumber, x, y) {
  var pageIndex = pageNumber - 1;
  var currentZoom = readerControl.docViewer.getPageZoom(pageIndex);
  var newPageZoom = getFitWidth(pageNumber);

  var offset = readerControl.c.$e.offset();
  var width = readerControl.c.$e.width();
  var height = readerControl.c.$e.height();

  var locX = (x - offset.left) - width / 2;
  var locY = (y - offset.top) - height / 2;

  var scaledLocX = locX * (newPageZoom / currentZoom);
  var scaledLocY = locY * (newPageZoom / currentZoom);

  var offsetX = locX - scaledLocX;
  var offsetY = locY - scaledLocY;

  readerControl.c.tX += offsetX;
  readerControl.c.tY += offsetY;

  readerControl.setZoomLevel(newPageZoom, false);
}

Matt Parizeau

Software Developer

PDFTron Systems Inc.