fixed multiple fullscreen issue

GalleriaJS · Apr 11, 2012 · 4208c87 · 4208c87
1 parent 7bf1449
commit 4208c87
Show file tree

Hide file tree

Showing 2 changed files with 84 additions and 69 deletions.
diff --git a/docs/getting_started/beginners_guide.rst b/docs/getting_started/beginners_guide.rst
@@ -126,17 +126,16 @@ A theme is included using a javascript function called ``Galleria.loadTheme``. I
         Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
 
 
-Set dimensions and fire up the gallery
-======================================
+Activate the gallery
+====================
 
-All we need to do now is set dimensions and apply Galleria.
+All we need to do now is to activate Galleria.
 Add the following script after the loadTheme function we just inserted::
 
         Galleria.run('#galleria');
     </script>
 
-As you can see, we just applied galleria to the '#gallery' container where the images are, and set dimensions to 500x500 pixels.
-You can change the width & height to any dimensions you see fit for your design.
+As you can see, we just applied galleria to the '#gallery' container where the images are. That’s it!
 
 .. _complete_code:
 
@@ -164,4 +163,4 @@ The complete code example:
         </body>
     </html>
 
-Reload the page. Ta-da! You should see the very basic version of Galleria up and running.
+Reload the page and you should see the very basic version of Galleria up and running.
diff --git a/src/galleria.js b/src/galleria.js
@@ -1,5 +1,5 @@
 /**
- * Galleria v 1.2.7 2012-04-04
+ * Galleria v 1.2.8a 2012-04-11
  * http://galleria.io
  *
  * Licensed under the MIT license
@@ -22,7 +22,7 @@ var undef,
     protoArray = Array.prototype,
 
 // internal constants
-    VERSION = 1.27,
+    VERSION = 1.28,
     DEBUG = true,
     TIMEOUT = 30000,
     DUMMY = false,
@@ -178,6 +178,76 @@ var undef,
         return false;
     },
 
+    // native fullscreen handler
+    _nativeFullscreen = {
+
+        support: (function() {
+            var html = DOM().html;
+            return html.requestFullscreen || html.mozRequestFullScreen || html.webkitRequestFullScreen;
+        }()),
+
+        callback: F,
+
+        enter: function( instance, callback ) {
+
+            this.instance = instance;
+
+            this.callback = callback || F;
+
+            var html = DOM().html;
+            if ( html.requestFullscreen ) {
+                html.requestFullscreen();
+            }
+            else if ( html.mozRequestFullScreen ) {
+                html.mozRequestFullScreen();
+            }
+            else if ( html.webkitRequestFullScreen ) {
+                html.webkitRequestFullScreen();
+            }
+        },
+
+        exit: function( callback ) {
+
+            this.callback = callback || F;
+
+            if ( doc.exitFullscreen ) {
+                doc.exitFullscreen();
+            }
+            else if ( doc.mozCancelFullScreen ) {
+                doc.mozCancelFullScreen();
+            }
+            else if ( doc.webkitCancelFullScreen ) {
+                doc.webkitCancelFullScreen();
+            }
+        },
+
+        instance: null,
+
+        listen: function() {
+
+            if ( !this.support ) {
+                return;
+            }
+
+            var handler = function() {
+
+                if ( !_nativeFullscreen.instance ) {
+                    return;
+                }
+                var fs = _nativeFullscreen.instance._fullscreen;
+
+                if ( doc.fullscreen || doc.mozFullScreen || doc.webkitIsFullScreen ) {
+                    fs._enter( _nativeFullscreen.callback );
+                } else {
+                    fs._exit( _nativeFullscreen.callback );
+                }
+            };
+            doc.addEventListener( 'fullscreenchange', handler, false );
+            doc.addEventListener( 'mozfullscreenchange', handler, false );
+            doc.addEventListener( 'webkitfullscreenchange', handler, false );
+        }
+    },
+
     // the internal timeouts object
     // provides helper methods for controlling timeouts
     _timeouts = {
@@ -1047,6 +1117,8 @@ var undef,
         };
     }());
 
+_nativeFullscreen.listen();
+
 /**
     The main Galleria class
 
@@ -1533,63 +1605,10 @@ Galleria = function() {
 
         keymap: self._keyboard.map,
 
-        // The native fullscreen handler
-        os: {
-
-            callback: F,
-
-            support: (function() {
-                var html = DOM().html;
-                return html.requestFullscreen || html.mozRequestFullScreen || html.webkitRequestFullScreen;
-            }()),
-
-            enter: function( callback ) {
-                fullscreen.os.callback = callback || F;
-                var html = DOM().html;
-                if ( html.requestFullscreen ) {
-                    html.requestFullscreen();
-                }
-                else if ( html.mozRequestFullScreen ) {
-                    html.mozRequestFullScreen();
-                }
-                else if ( html.webkitRequestFullScreen ) {
-                    html.webkitRequestFullScreen();
-                }
-            },
-
-            exit: function( callback ) {
-                fullscreen.os.callback = callback || F;
-                if ( doc.exitFullscreen ) {
-                    doc.exitFullscreen();
-                }
-                else if ( doc.mozCancelFullScreen ) {
-                    doc.mozCancelFullScreen();
-                }
-                else if ( doc.webkitCancelFullScreen ) {
-                    doc.webkitCancelFullScreen();
-                }
-            },
-
-            listen: function() {
-                if ( !fullscreen.os.support ) {
-                    return;
-                }
-                var handler = function() {
-                    if ( doc.fullscreen || doc.mozFullScreen || doc.webkitIsFullScreen ) {
-                        fullscreen._enter( fullscreen.os.callback );
-                    } else {
-                        fullscreen._exit( fullscreen.os.callback );
-                    }
-                };
-                doc.addEventListener( 'fullscreenchange', handler, false );
-                doc.addEventListener( 'mozfullscreenchange', handler, false );
-                doc.addEventListener( 'webkitfullscreenchange', handler, false );
-            }
-        },
-
         enter: function( callback ) {
-            if ( self._options.trueFullscreen && fullscreen.os.support ) {
-                fullscreen.os.enter( callback );
+
+            if ( self._options.trueFullscreen && _nativeFullscreen.support ) {
+                _nativeFullscreen.enter( self, callback );
             } else {
                 fullscreen._enter( callback );
             }
@@ -1714,8 +1733,8 @@ Galleria = function() {
         },
 
         exit: function( callback ) {
-            if ( self._options.trueFullscreen && fullscreen.os.support ) {
-                fullscreen.os.exit( callback );
+            if ( self._options.trueFullscreen && _nativeFullscreen.support ) {
+                _nativeFullscreen.exit( callback );
             } else {
                 fullscreen._exit( callback );
             }
@@ -1778,9 +1797,6 @@ Galleria = function() {
         }
     };
 
-    // invoke the native listeners
-    fullscreen.os.listen();
-
     // the internal idle object for controlling idle states
     var idle = this._idle = {