Merge pull request #165 from jcass77/fix/53_fullscreen_scrolling

Fix scrolling in full screen for Chrome and Safari.

README.rst

@@ -73,6 +73,7 @@ v2.2.0 (UNRELEASED)
 **Fixes**
 
 - Prevent mobile devices from scaling when used in landscape mode. (Fixes: `#157 <https://github.com/pimusicbox/mopidy-musicbox-webclient/issues/157>`_).
+- Scrolling now works in full screen mode for Chrome and Safari as well. (Fixes: `#53 <https://github.com/pimusicbox/mopidy-musicbox-webclient/issues/53>`_).
 
 v2.1.1 (2016-02-04)
 -------------------

mopidy_musicbox_webclient/static/index.html

@@ -97,13 +97,9 @@
                 <a href="/alarmclock/">
                 <span class="navtxt"> Alarm Clock </span><i class="fa fa-clock-o"></i></a>
         </li>
-        <li id="navEnterFullscreen" data-icon="false">
+        <li id="navToggleFullscreen" data-icon="false">
                 <a href="#">
-                <span class="navtxt"> Fullscreen </span><i class="fa  fa-desktop"></i></a>
+                <span class="navtxt" id="toggletxt"> Fullscreen </span><i class="fa fa-desktop"></i></a>
-        </li>
-        <li id="navExitFullscreen" class="hidden" data-icon="false">
-            <a href="#">
-                <span class="navtxt"> Exit Fullscreen </span><i class="fa  fa-desktop"></i></a>
         </li>
         <li id="navSettings" data-icon="false">
                 <a href="/settings/">

mopidy_musicbox_webclient/static/js/gui.js

@@ -308,42 +308,34 @@ $(document).bind("pageinit", function() {
 /**************
  * gui stuff  *
  **************/
-function enterFullscreen() {
+function toggleFullscreen() {
     if (isMobileSafari) { alert ("To get this app in Full Screen, you have to add it to your home-screen using the Share button."); exit(); }
-    var elem = document.querySelector("#page");
+    if (!document.fullscreenElement &&    // alternative standard method
-    elem.onwebkitfullscreenchange = onFullScreenEnter;
+        !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {  // current working methods
-    elem.onmozfullscreenchange = onFullScreenEnter;
+        var docElm = document.documentElement;
-    elem.onfullscreenchange = onFullScreenEnter;
+        if (docElm.requestFullscreen) {
-    if (elem.webkitRequestFullscreen) {
+            docElm.requestFullscreen();
-        elem.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
+        } else if (docElm.msRequestFullscreen) {
+            docElm.msRequestFullscreen();
+        } else if (docElm.mozRequestFullScreen) {
+            docElm.mozRequestFullScreen();
+        } else if (docElm.webkitRequestFullScreen) {
+            docElm.webkitRequestFullScreen();
+        }
+        document.getElementById("toggletxt").innerHTML = "Exit Fullscreen";
     } else {
-        if (elem.mozRequestFullScreen) {
+        if (document.exitFullscreen) {
-            elem.mozRequestFullScreen();
-        } else {
-            elem.requestFullscreen();
-        }
-    }
-}
-
-function exitFullscreen() {
-    document.webkitExitFullscreen();
-    document.mozCancelFullscreen();
             document.exitFullscreen();
+        } else if (document.msExitFullscreen) {
+            document.msExitFullscreen();
+        } else if (document.mozCancelFullScreen) {
+            document.mozCancelFullScreen();
+        } else if (document.webkitCancelFullScreen) {
+            document.webkitCancelFullScreen();
+        }
+        document.getElementById("toggletxt").innerHTML = "Fullscreen";
+    }
 }
-
-function onFullScreenEnter() {
-    var elem = document.querySelector("#page");
-    $('#navExitFullscreen').show();
-    $('#navEnterFullscreen').hide();
-    elem.onwebkitfullscreenchange = onFullScreenExit;
-    elem.onmozfullscreenchange = onFullScreenExit;
-};
-
-// Called whenever the browser exits fullscreen.
-function onFullScreenExit() {
-    $('#navExitFullscreen').hide();
-    $('#navEnterFullscreen').show();
-};
 
 function switchContent(divid, uri) {
     var hash = divid;
@@ -521,11 +513,8 @@ $(document).ready(function(event) {
     $('#controlspopupimage').click(
 	function() {
 	    return switchContent('current')}   );
-    $('#navEnterFullscreen').click(function(){
+    $('#navToggleFullscreen').click(function(){
-        enterFullscreen();
+        toggleFullscreen();
-    });
-    $('#navExitFullscreen').click(function(){
-        exitFullscreen();
     });
 
 // remove buttons only for MusicBox
@@ -575,11 +564,6 @@ $(document).ready(function(event) {
         $("#panel").panel("open");
     }
 
-    //hide fullscreen button if in UIWebview
-    if (window.navigator.standalone) {
-        $('#navExitFullscreen').hide();
-    }
-
     $.event.special.swipe.horizontalDistanceThreshold = 125; // (default: 30px)  Swipe horizontal displacement must be more than this.
     $.event.special.swipe.verticalDistanceThreshold = 50; // (default: 75px)  Swipe vertical displacement must be less than this.
     $.event.special.swipe.durationThreshold = 500;

mopidy_musicbox_webclient/static/mb.manifest

@@ -1,6 +1,6 @@
 CACHE MANIFEST
 
-# 2016-02-06:v1
+# 2016-02-14:v1
 
 NETWORK:
 *