What is the proper process to exit WebViewer's mobile full screen mode?

[Steve Buck]

When the WebViewer is set to mobile mode (type: html5Mobile), it displays full screen. I really like this feature especially for small mobile devices. However, what is the proper process for exiting this full screen mode? The WebViewer's toolbar doesn't have a "close" button. I have seen other posts that discuss adding a custom "back" button to the toolbar. This seems like a great idea and I was able to change MobileReaderControl.html to add my button. However, I am new to JavaScript and I am lost on what to do next. I am using Cordova and Ionic's side-menu. How do I handle my button click within the WebViewer so I can navigate back to the previous page? This seems especially confusing since there is a mix of Ionic/Angular and jQuery. Also, how do I then tell the WebViewer to exit from full screen mode (I don't see a function).

[Anatoly Kudrevatukh]

Hello Steve,

You can toggle to show top&bot bars for mobile viewer by calling readerControl.reshowMenu() and then readerControl.setMenuTapToggle(false);

For example in external config.js file add the following code:

(function() {
    "use strict";
    $(document).on('documentLoaded', function() {
    readerControl.reshowMenu();
    readerControl.setMenuTapToggle(false);
    });
})();

(Here you can find a tutorial on how to use config files https://www.pdftron.com/webviewer/demo/tutorials/getting-started-config-files.html)

Alternatively you could remove data-visible-on-page-show="false" from MobileReaderControl.html

Let me know if that answers your question. 

[Steve Buck]

Hi Anatoly,

First, thanks for the help.  However, that is not the question that I am asking.

With the WebViewer set to full screen mobile mode (type:html5Mobile and mobileRedirect:true), it consumes my entire mobile device screen.  Your built in menu (which you mention controlling above) does not have a 'close', 'back', etc. button.  Therefore, what is the process for me to add this button so that I can navigate away from my full screen document and back to the rest of my application?

Today I was able to get it to work with MobileReaderControl in type:html5Mobile and mobileRedirect:false mode (so not full screen).  Here is what I did:

1.  I added the following to MobileReaderControl.html to add my own toolbar button:

   <a id="btnBack" data-transition="none" class="mobile-button">

      <span class="glyphicons chevron-left">Back</span>

   </a>

2.  I created a new event named backPressed in WebViewer.js in _viewerLoaded:

   viewerWindow.$(iframe.contentDocument).bind

      ('backPressed displayModeChanged layoutModeChanged zoomChanged pageChanged fitModeChanged toolModeChanged printProgressChanged error',

3.  I added the following to MobileReaderControl.js at the beginning of "exports.ReaderControl = function(options) {":

   $("#btnBack").click(function () {

      alert("Your Code!);

      me.fireEvent('backPressed');

   });

4.  Then in my controller I bind to the event after I create my viewer:

    $(function () {

        var viewerElement = document.getElementById('pdftronWebViewer');

        var myWebViewer = new PDFTron.WebViewer({

            ...

            type: "html5",

            mobileRedirect: false,

            ...

        }, viewerElement);

    });

    $('#pdftronWebViewer').bind('backPressed', function (event, data) {

        alert("My Code!!!");

        history.back(-1);

    });

This works great.  I see "Your Code!", then "My Code!", and then it navigates back one page.  However, it does not work when I change to "mobileRedirect:true".  "Your Code!" appears, but "My Code!" does NOT appear.

I keep thinking that there is something fundamental that I'm still not understanding:

1.  Others must also be using this full screen mode.  How do they handle navigating out of full screen?

2.  Should I not be using events?  If so, how do you recommend doing this so it works with full screen mode?

Thanks,

Steve

[Anatoly Kudrevatukh]

1. On Mobile devices navigation between apps is usually performed with the help of hardware buttons, whereas navigation withing the app is application specific, so there is no recommended way as it's up to developer.

2. The recommended way to modify WebViewer is through a config file: 

https://www.pdftron.com/webviewer/demo/tutorials/getting-started-config-files.html

In the config file you should be listening to documentLoaded event, like this

$(document).on('documentLoaded', function() {
  $('#yourButton').bind(....
});

As you have noticed the reason why your code didn't bind, is mobile redirect. Binding on documentLoaded event will help you set up callbacks after the redirect has occurred.

[Steve Buck]

Some of my required platforms don't have hardware back buttons (iPads, browsers, etc.).  Therefore, I now understand that I must implement my own custom software solution.  My function was being called within MobileReaderControl.js, but I also now understand why it is better to put it within the config file.  I have moved it there.

I tried using your function first, but it did not work with 'bind'.  I had to switch it to 'click'.  Do you know why?

Also, I am still a little confused on how to properly back out of the full screen (mobileRedirect: true) mode.  In my 'click' function, I currently call window.history.go(-2) which navigates my app back to the proper page.  I previously tried '-1' but the document just seemed to refresh.  My guess is that my previous page is actually my WebViewer page and it was re-displaying my document.  The only issue with this solution is that the Ionic "< Back" title bar button does not get displayed.

Given that I want to navigate back to the previous page, what is the recommended process?  Can you recommend something better then what I'm doing?  I apologize if the question is still application specific.  My JavaScript is rusty.

[Anatoly Kudrevatukh]

I believe due to redirect the history object contains two entries. First is the initial page that conducts the redirect and the second entry is the actual page you see. Therefore going back just one page brings you back to the initial page that performs redirect again.

If your goal is to navigate to a certain page in your app, then you could use pushState:

https://developer.mozilla.org/en-US/docs/Web/API/History/pushState

You can refer to this article about history API for additional details.

https://developer.mozilla.org/en-US/docs/Web/API/History_API