Programmatically set mobile viewer to single page mode

[Matt Parizeau]

Q:

I wish I could set the mobile reader to "Single Page" programatically, (As it happens when the user manually taps the top-right gear and then "Landscape Display" => "Single Page")

But if I call setLayoutMode, or setFitMode, right after creating the WebViewer, it gives me an error

"getInstance().set..." is not a function

And if I call these methods on the "on_document_load" callback it gives me a warning

"Unsupported method for this viewer type"

(Or something like that)

A:

To set to "Single Page" programmatically you can use code like this:

$(viewerElement).bind('ready', function(e) {
    var viewerInstance = myWebViewer.getInstance();
    viewerInstance.pageDisplay = viewerInstance.pageDisplayModes.Single;
    viewerInstance.setPageMode();
}

Alternatively you could trigger the "Single Page" button's click event:

$(viewerElement).bind('documentLoaded', function(e) {

    $('iframe')[0].contentWindow.$('#displaySingle').trigger('click');

}

[Juan Pedro Casillas Chavez]

I know only a little of javascript, so my question is where a put this line of code?

On Wednesday, May 21, 2014 2:11:30 PM UTC-5, Matt Parizeau wrote:

Q:

I wish I could set the mobile reader to "Single Page" programatically, (As it happens when the user manually taps the top-right gear and then "Landscape Display" => "Single Page")

But if I call setLayoutMode, or setFitMode, right after creating the WebViewer, it gives me an error

"getInstance().set..." is not a function

And if I call these methods on the "on_document_load" callback it gives me a warning

"Unsupported method for this viewer type"

(Or something like that)

A:

To set to "Single Page" programmatically you can use code like this:

$(viewerElement).bind('ready', function(e) {
    var viewerInstance = myWebViewer.getInstance();
    viewerInstance.pageDisplay = viewerInstance.pageDisplayModes.Single;
    viewerInstance.setPageMode();
}

Alternatively you could trigger the "Single Page" button's click event:

[Matt Parizeau]

You would just put either of them right after creating your PDFTron.WebViewer object. viewerElement is the DOM element that you pass as the second parameter to the WebViewer constructor.

You can take a look at the html page of the webviewer-controls sample to see basic example code.

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[Vladimir Knobel]

Hi


I was trying to implement this in an hybrid app running over the Cordova framework (actually Ionic), and the events are not firing at all.
We thing the problem is rooted in the redirection that takes place to html5/MobileReaderControl.html

Is there and alternative method to achieve this when the type for the WebViewer is html5Mobile?

Thanks in advance for any hints

Regards

Vlad

On Wednesday, May 21, 2014 at 9:11:30 PM UTC+2, Matt Parizeau wrote:
Q:


I wish I could set the mobile reader to "Single Page" programatically, (As it happens when the user manually taps the top-right gear and then "Landscape Display" => "Single Page")



But if I call setLayoutMode, or setFitMode, right after creating the WebViewer, it gives me an error


"getInstance().set..." is not a function


And if I call these methods on the "on_document_load" callback it gives me a warning


"Unsupported method for this viewer type"
(Or something like that)


A:


To set to "Single Page" programmatically you can use code like this:



$(viewerElement).bind('ready', function(e) {
var viewerInstance = myWebViewer.getInstance();
viewerInstance.pageDisplay = viewerInstance.pageDisplayModes.Single;
viewerInstance.setPageMode();
}


Alternatively you could trigger the "Single Page" button's click event:

$(viewerElement).bind('documentLoaded', function(e) {

[Matt Parizeau]

Hi Vlad,

You're right, viewerElement won't be around after the mobile viewer performs the redirect. What you can do instead is have a config file and inside there have the following code:

$(document).on('viewerLoaded', function() {
    readerControl.pageDisplay = readerControl.pageDisplayModes.Single;
    readerControl.setPageMode();
});

If you want to take the other approach then just remove $('iframe')[0].contentWindow because you can just select the button directly since the config file is executed in the context of the page.

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[Vladimir Knobel]

Hi Matt,

Excellent thank you! I'll try your proposed solution.

best regards

Vlad

[tp]

Hi Matt, can you please provide a detailed step by step instruction in how to deploy the code and possibly an example demo of the code will look.
Similar to this: https://groups.google.com/d/msg/pdfnet-webviewer/PQ9i6UvmelI/Ul9AXe5CZD0J

I tried several method based on the conversation and still no luck.

Thank you

[Matt Parizeau]

Hi,

First note that the code listed here is only applicable to the mobile viewer. This won't do anything for the desktop viewer.

The description of where to put the code is my second post which I'll copy here: 

You would just put either of them right after creating your PDFTron.WebViewer object. viewerElement is the DOM element that you pass as the second parameter to the WebViewer constructor.
You can take a look at the html page of the webviewer-controls sample to see basic example code.

One thing to note about this is that it will only work when the mobileRedirect option is set to false. So if you are redirecting (which is the default and you probably should) then you'll want to have the code in a config file. So you'll have a new JavaScript file and when you create your PDFTron.WebViewer you'll pass the option config: path/to/your/config-file.js. Inside the config file the code will have to be a little bit different.

$(document).on('viewerLoaded', function(e) {

    readerControl.pageDisplay = readerControl.pageDisplayModes.Single;
    readerControl.setPageMode();
});

or

$(document).on('documentLoaded', function() {
     $('#displaySingle').trigger('click');
});

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[tp]

Hi,

Thanks for the note. Im getting error with your above instruction. Im using the default mobileviewer that was provided in the package with its orginal paths etc.

Here are the steps I had taken:

1)

-created a config2.js inside the following path with the above code

lib > html5 > config2.js

http://paramexstudio.com/carr/lib/html5/config2.js

2)

-added the following snippet inside the following file: MobileReaderControl.html

<script src="config2.js" type="text/javascript"></script>

http://paramexstudio.com/carr/samples/offline/

Please advise. Thanks

[Matt Parizeau]

Hi,

Thanks for including a link to your page. In your sample it looks like you've removed some of the included scripts from MobileReaderControl.html including jQuery. I see that jQuery mobile is still included however you also need to include external/jquery-2.1.0.min.js. So basically everything is failing because jQuery isn't included and it's required for the viewer. Please refer to the scripts included in the default MobileReaderControl.html to see what should be included.

Matt Parizeau

Software Developer

PDFTron Systems Inc.