Can I add a full screen button on mobile viewer?

[Justin Jung]

Q: Can I add a full screen button on mobile viewer?

A: To add a fullscreen button on mobile viewer, you can add the following in config.js:

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

  var fullScreenButton = $('<a id="fullScreenButton" data-transition="none" class="mobile-button1"><span class="glyphicons fullscreen"></span></a>');

  fullScreenButton.on('click', function() {

    var inFullScreenMode = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement;

    if (inFullScreenMode) {

      if (document.exitFullscreen) {

        document.exitFullscreen();

      } else if (document.msExitFullscreen) {

        document.msExitFullscreen();

      } else if (document.mozCancelFullScreen) {

        document.mozCancelFullScreen();

      } else if (document.webkitExitFullscreen) {

        document.webkitExitFullscreen();

      }

    } else {

      var docElm = document.documentElement;

      if (docElm.requestFullscreen) {

        docElm.requestFullscreen();

      } else if (docElm.msRequestFullscreen) {

        docElm.msRequestFullscreen();

      } else if (docElm.mozRequestFullScreen) {

        docElm.mozRequestFullScreen();

      } else if (docElm.webkitRequestFullScreen) {

        docElm.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);

        //Safari silently fails with the above, use workaround:

        setTimeout(function() {

          if (!document.webkitCurrentFullScreenElement) {

            docElm.webkitRequestFullScreen();

          }

        },200);

      }

    }

  });

  $('.ui-controlgroup-controls').append(fullScreenButton);

});

Please note that the code works for Android devices only, as iOS Safari doesn't support full screen on websites at the moment (you can refer to this post: https://bugs.webkit.org/show_bug.cgi?id=121496).