JQuery js / Fullscreen.js

/**
 * 全屏顯示API兼容瀏覽器封裝
 * 方法定義參考：https://github.com/martinaglv/jQuery-FullScreen/blob/master/fullscreen/jquery.fullscreen.js
 *
 * @name		Fullscreen
 * @author      linfei<[email protected]>
 * @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 );