JQuery js / Fullscreen.js

/**
 * 全屏显示API兼容浏览器封装
 * 方法定义参考：https://github.com/martinaglv/jQuery-FullScreen/blob/master/fullscreen/jquery.fullscreen.js
 *
 * @name		Fullscreen
 * @author      linfei<clfsw0201@gmail.com>
 * @version 	1.0
 * @url			
 * @license		MIT License
 * @date        2012/6/6 
 *
 * 原理：
 *   element是要全屏显示的元素，fullscreen时：
 *     1. 给element添加.fullscreen
 *     2. 用一个空div包裹element，options.css中的定义用在这个div上，
 *        以便使这个div中的内容（即element）足够长时可以滚动显示
 *     3. 对这个div调用requestFullscreen()
 *
 * 应用示例：
 *   var fs = new Fullscreen( {
 *	 	element: $( '#fullscreenElementSelector' ),
 *      callback: function( isFullscreen ) {
 *			if ( isFullscreen ) {
 *				alert( '现在已经进入全屏模式' );
 *			}
 *			else {
 *				alert( '退出了全屏状态' );
 *			}
 *		}
 *	 } );
 *
 *   $( '#buttonToggleFullscreen' ).click( function(){
 *	 	fs.toggleFullscreen();
 *   } );
 *    
 *
 * 特别注意：
 *   1. win7下（其他windows未测），ESC退出全屏后会马上触发ESC的key事件
 *      mac下，ESC退出全屏，不会再出发ESC的键盘事件
 *      因此，如果需要监视ESC的键盘事件，一定要注意两个系统的区别
 *   2. 使用element.requestFullscreen()时，element在chrome中是任意的，
 *      哪怕element只是一个没有被添加到文档的 $("<div/>") 空元素；
 * 		但是在firefox中必须是要全屏显示的元素本身，否则不能全屏显示。
 *
 */
( function( $ ) {

	function Fullscreen( options ) {
		this.options = $.extend( true, {
				'element'    : $( 'body' ),
				'css'        : {
					'background' : '#000',
					'width'      : '100%',
					'height'     : '100%',
					'position'   : 'fixed',
					'top'        : 0,
					'left'       : 0,
					'z-index'    : 1000,
					'overflow' : 'auto'
				},
				'callback'   : $.noop,
				'noSafari'	 : false
			}, options );

		//必须要全屏输入时，将safari排除
		if ( this.options.noSafari && this._browser.safari ) {
			this.fullscreenEnabled = false;
		}

		this._initEvents();
	}

	$.extend( Fullscreen.prototype, {

		/**
		 * 执行全屏状态切换
		 */
		toggleFullscreen: function() {
			if ( !this.fullscreenEnabled ) {
				return;
			}

			if ( this.fullscreen() ) {
				this.exitFullscreen();
			}
			else {
				var wp = $( '<div/>' ).css( this.options.css ),
					el = this.options.element.addClass( 'fullscreen' );

				el.wrap( wp ); // 虽然wp包围el，但变量wp中的内容不会变，仍然是一个空的div

				// 下面参数在chrome下用 `wp.get(0)` 是正常的，但firefox不行
				this.requestFullscreen( el.parent().get( 0 ) );
			}
		},

		/**
		 * 注册事件，监视fullscreenchange
		 */
		_initEvents: function() {
			if ( !this.fullscreenEnabled ) {
				return;
			}
			var me = this,
				doc = $( document );

			doc.unbind( 'fullscreenchange webkitfullscreenchange mozfullscreenchange' )
				.bind(
					'fullscreenchange webkitfullscreenchange mozfullscreenchange',
					function( evt ) {
						if ( !me.fullscreen() ) {
							me.options.element.removeClass( 'fullscreen' ).unwrap();
						}
						me.options.callback.call( me, me.fullscreen() );
					}
				);
		},

		/**
		 * 判断浏览器类型
		 */
		_browser: ( function() {
			var ua = window.navigator.userAgent.toUpperCase(),
				v = {};

			v.chrome = /CHROME/.test( ua );
			v.safari = !v.chrome && /SAFARI/.test( ua );

			return v;
		} )(),

		/**
		 * 判断当前全屏状态
		 */
		fullscreen: function() {
			return document.fullscreen ||
				   document.webkitIsFullScreen ||
				   document.mozFullScreen ||
				   false;
		},

		/**
		 * W3 draft
		 * document.fullscreenElement
		 *     Returns the element that is displayed fullscreen,
		 *     or null if there is no such element.
		 *
		 * @return {DOM/null} 全屏显示的元素或是null
		 */
		fullscreenElement: function() {
			return document.fullscreenElement ||
				   document.webkitCurrentFullScreenElement ||
				   document.mozFullScreenElement ||
				   null;
		},

		/**
		 * W3 draft:
		 *     document.fullscreenEnabled
		 *     Returns true if document has the ability to display elements fullscreen,
		 *     or false otherwise.
		 */
		fullscreenEnabled: ( function() {
			var doc = document.documentElement;

			return	( 'requestFullscreen' in doc ) ||
					( 'webkitRequestFullScreen' in doc ) ||
					( 'mozRequestFullScreen' in doc && document.mozFullScreenEnabled ) ||
					false;
		} )(),

		/**
		 * W3 draft:
		 *     element.requestFullscreen()
		 *     Displays element fullscreen.
		 *
		 * @param {DOM} elem 要全屏显示的元素
		 */
		requestFullscreen: function( elem ) {
			if (elem.requestFullscreen) {
				elem.requestFullscreen();
			}
			else if (elem.webkitRequestFullScreen) {
				if ( this._browser.chrome ) {
					elem.webkitRequestFullScreen( Element.ALLOW_KEYBOARD_INPUT );
				}
				else {
					elem.webkitRequestFullScreen();
				}
			}
			else if (elem.mozRequestFullScreen) {
				elem.mozRequestFullScreen();
			}
		},

		/**
		 * W3 draft:
		 *     document.exitFullscreen()
		 *	   Stops any elements within document from being displayed fullscreen.
		 */
		exitFullscreen: function() {
			if (document.exitFullscreen) {
				document.exitFullscreen();
			}
			else if (document.webkitCancelFullScreen) {
				document.webkitCancelFullScreen();
			}
			else if (document.mozCancelFullScreen) {
				document.mozCancelFullScreen();
			}
		}
	} );

	window.Fullscreen = Fullscreen;

} )( jQuery );