[Summary view] [Print] [Text view]

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