resources/jquery/jquery.fullscreen.js

   1 /**
   2  * jQuery fullscreen plugin v2.0.0
   3  * https://github.com/theopolisme/jquery-fullscreen/tree/v2.0.0
   4  *
   5  * Documentation at <https://github.com/theopolisme/jquery-fullscreen/blob/v2.0.0/README.md>
   6  *
   7  * Copyright (c) 2013 Theopolisme <theopolismewiki@gmail.com>
   8  *
   9  * This program is free software; you can redistribute it and/or modify
  10  * it under the terms of the GNU General Public License as published by
  11  * the Free Software Foundation; either version 2 of the License, or
  12  * (at your option) any later version.
  13  *
  14  * This program is distributed in the hope that it will be useful,
  15  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  16  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  17  * GNU General Public License for more details.
  18  *
  19  * You should have received a copy of the GNU General Public License along
  20  * with this program; if not, write to the Free Software Foundation, Inc.,
  21  * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
  22  */
  23 ( function ( $ ) {
  24         var setupFullscreen,
  25                 fsClass = 'jq-fullscreened';
  26
  27         /**
  28          * On fullscreenchange, trigger a jq-fullscreen-change event
  29          * The event is given an object, which contains the fullscreened DOM element (element), if any
  30          * and a boolean value (fullscreen) indicating if we've entered or exited fullscreen mode
  31          * Also remove the 'fullscreened' class from elements that are no longer fullscreen
  32          */
  33         function handleFullscreenChange () {
  34                 var fullscreenElement = document.fullscreenElement ||
  35                         document.mozFullScreenElement ||
  36                         document.webkitFullscreenElement ||
  37                         document.msFullscreenElement;
  38
  39                 if ( !fullscreenElement ) {
  40                         $( '.' + fsClass ).data( 'isFullscreened', false ).removeClass( fsClass );
  41                 }
  42
  43                 $( document ).trigger( $.Event( 'jq-fullscreen-change', { element: fullscreenElement, fullscreen: !!fullscreenElement } ) );
  44         }
  45
  46         /**
  47          * Enters full screen with the "this" element in focus.
  48          * Check the .data( 'isFullscreened' ) of the return value to check
  49          * success or failure, if you're into that sort of thing.
  50          * @chainable
  51          * @return {jQuery}
  52          */
  53         function enterFullscreen () {
  54                 var element = this.get(0),
  55                         $element = this.first();
  56                 if ( element ) {
  57                         if ( element.requestFullscreen ) {
  58                                 element.requestFullscreen();
  59                         } else if ( element.mozRequestFullScreen ) {
  60                                 element.mozRequestFullScreen();
  61                         } else if ( element.webkitRequestFullscreen ) {
  62                                 element.webkitRequestFullscreen();
  63                         } else if ( element.msRequestFullscreen ) {
  64                                 element.msRequestFullscreen();
  65                         } else {
  66                                 // Unable to make fullscreen
  67                                 $element.data( 'isFullscreened', false );
  68                                 return this;
  69                         }
  70                         // Add the fullscreen class and data attribute to `element`
  71                         $element.addClass( fsClass ).data( 'isFullscreened', true );
  72                         return this;
  73                 } else {
  74                         $element.data( 'isFullscreened', false );
  75                         return this;
  76                 }
  77         }
  78
  79         /**
  80          * Brings the "this" element out of fullscreen.
  81          * Check the .data( 'isFullscreened' ) of the return value to check
  82          * success or failure, if you're into that sort of thing.
  83          * @chainable
  84          * @return {jQuery}
  85          */
  86         function exitFullscreen () {
  87                 var fullscreenElement = ( document.fullscreenElement ||
  88                                 document.mozFullScreenElement ||
  89                                 document.webkitFullscreenElement ||
  90                                 document.msFullscreenElement );
  91
  92                 // Ensure that we only exit fullscreen if exitFullscreen() is being called on the same element that is currently fullscreen
  93                 if ( fullscreenElement && this.get(0) === fullscreenElement ) {
  94                         if ( document.exitFullscreen ) {
  95                                 document.exitFullscreen();
  96                         } else if ( document.mozCancelFullScreen ) {
  97                                 document.mozCancelFullScreen();
  98                         } else if ( document.webkitCancelFullScreen ) {
  99                                 document.webkitCancelFullScreen();
 100                         } else if ( document.msCancelFullScreen ) {
 101                                 document.msCancelFullScreen();
 102                         } else {
 103                                 // Unable to cancel fullscreen mode
 104                                 return this;
 105                         }
 106                         // We don't need to remove the fullscreen class here,
 107                         // because it will be removed in handleFullscreenChange.
 108                         // But we should change the data on the element so the
 109                         // caller can check for success.
 110                         this.first().data( 'isFullscreened', false );
 111                 }
 112
 113                 return this;
 114         }
 115
 116         /**
 117          * Set up fullscreen handling and install necessary event handlers.
 118          * Return false if fullscreen is not supported.
 119          */
 120         setupFullscreen = function () {
 121                 if ( document.fullscreenEnabled ||
 122                                 document.mozFullScreenEnabled ||
 123                                 document.webkitFullscreenEnabled ||
 124                                 document.msFullscreenEnabled
 125                 ) {
 126                         // When the fullscreen mode is changed, trigger the
 127                         // fullscreen events (and when exiting,
 128                         // also remove the fullscreen class)
 129                         $( document ).on( 'fullscreenchange webkitfullscreenchange mozfullscreenchange msfullscreenchange', handleFullscreenChange);
 130                         // Convenience wrapper so that one only needs to listen for
 131                         // 'fullscreenerror', not all of the prefixed versions
 132                         $( document ).on( 'webkitfullscreenerror mozfullscreenerror msfullscreenerror', function () {
 133                                 $( document ).trigger( $.Event( 'fullscreenerror' ) );
 134                         } );
 135                         // Fullscreen has been set up, so always return true
 136                         setupFullscreen = function () { return true; };
 137                         return true;
 138                 } else {
 139                         // Always return false from now on, since fullscreen is not supported
 140                         setupFullscreen = function() { return false; };
 141                         return false;
 142                 }
 143         };
 144
 145         /**
 146          * Set up fullscreen handling if necessary, then make the first element
 147          * matching the given selector fullscreen
 148          * @chainable
 149          * @return {jQuery}
 150          */
 151         $.fn.enterFullscreen = function () {
 152                 if ( setupFullscreen() ) {
 153                         $.fn.enterFullscreen = enterFullscreen;
 154                         return this.enterFullscreen();
 155                 } else {
 156                         $.fn.enterFullscreen = function () { return this; };
 157                         return this;
 158                 }
 159         };
 160
 161         /**
 162          * Set up fullscreen handling if necessary, then cancel fullscreen mode
 163          * for the first element matching the given selector.
 164          * @chainable
 165          * @return {jQuery}
 166          */
 167         $.fn.exitFullscreen = function () {
 168                 if ( setupFullscreen() ) {
 169                         $.fn.exitFullscreen = exitFullscreen;
 170                         return this.exitFullscreen();
 171                 } else {
 172                         $.fn.exitFullscreen = function () { return this; };
 173                         return this;
 174                 }
 175         };
 176 }( jQuery ) );