☰

jquery.fullscreen

jquery fullscreen plugin

Pada tanggal 27 Juni 2014. Lihat %(latest_version_link).

Skrip ini tidak untuk dipasang secara langsung. Ini adalah pustaka skrip lain untuk disertakan dengan direktif meta // @require https://update.greatest.deepsurf.us/scripts/2858/8037/jqueryfullscreen.js 

  1. // ==UserScript==
  2. // @name           jquery.fullscreen
  3. // @namespace      private-face
  4. // @description    jquery fullscreen plugin
  5. // @source         https://github.com/private-face/jquery.fullscreen
  6. // @copyright      Vladimir Zhuravlev
  7. // @version        0.4.0
  8. // @license        MIT
  9. // ==/UserScript==
  10.  
  11.  
  12. /*
  13.  * jQuery.fullscreen library v0.4.0
  14.  * Copyright (c) 2013 Vladimir Zhuravlev
  15.  *
  16.  * @license https://github.com/private-face/jquery.fullscreen/blob/master/LICENSE
  17.  *
  18.  * Date: Wed Dec 11 22:45:17 ICT 2013
  19.  **/
  20. ;(function($) {
  21.  
  22. function defined(a) {
  23. 	return typeof a !== 'undefined';
  24. }
  25.  
  26. function extend(child, parent, prototype) {
  27.     var F = function() {};
  28.     F.prototype = parent.prototype;
  29.     child.prototype = new F();
  30.     child.prototype.constructor = child;
  31. 	parent.prototype.constructor = parent;
  32.     child._super = parent.prototype;
  33.     if (prototype) {
  34.         $.extend(child.prototype, prototype);
  35.     }
  36. }
  37.  
  38. var SUBST = [
  39.     ['', ''],               // spec
  40.     ['exit', 'cancel'],     // firefox & old webkits expect cancelFullScreen instead of exitFullscreen
  41.     ['screen', 'Screen']    // firefox expects FullScreen instead of Fullscreen
  42. ];
  43.  
  44. var VENDOR_PREFIXES = ['', 'o', 'ms', 'moz', 'webkit', 'webkitCurrent'];
  45.  
  46. function native(obj, name) {
  47.     var prefixed;
  48.  
  49.     if (typeof obj === 'string') {
  50.         name = obj;
  51.         obj = document;
  52.     }
  53.  
  54.     for (var i = 0; i < SUBST.length; ++i) {
  55.         name = name.replace(SUBST[i][0], SUBST[i][1]);
  56.         for (var j = 0; j < VENDOR_PREFIXES.length; ++j) {
  57.             prefixed = VENDOR_PREFIXES[j];
  58.             prefixed += j === 0 ? name : name.charAt(0).toUpperCase() + name.substr(1);
  59.             if (defined(obj[prefixed])) {
  60.                 return obj[prefixed];
  61.             }
  62.         }
  63.     }
  64.  
  65.     return void 0;
  66. }var ua = navigator.userAgent;
  67. var fsEnabled = native('fullscreenEnabled');
  68. var IS_ANDROID_CHROME = ua.indexOf('Android') !== -1 && ua.indexOf('Chrome') !== -1; 
  69. var IS_NATIVELY_SUPPORTED = 
  70. 		!IS_ANDROID_CHROME &&
  71. 		 defined(native('fullscreenElement')) && 
  72. 		(!defined(fsEnabled) || fsEnabled === true);
  73.  
  74. var version = $.fn.jquery.split('.');
  75. var JQ_LT_17 = (parseInt(version[0]) < 2 && parseInt(version[1]) < 7);
  76.  
  77. var FullScreenAbstract = function() {
  78. 	this.__options = null;
  79. 	this._fullScreenElement = null;
  80. 	this.__savedStyles = {};
  81. };
  82.  
  83. FullScreenAbstract.prototype = {
  84. 	_DEFAULT_OPTIONS: {
  85. 		styles: {
  86. 			'boxSizing': 'border-box',
  87. 			'MozBoxSizing': 'border-box',
  88. 			'WebkitBoxSizing': 'border-box'
  89. 		},
  90. 		toggleClass: null
  91. 	},
  92. 	__documentOverflow: '',
  93. 	__htmlOverflow: '',
  94. 	_preventDocumentScroll: function() {
  95. 		this.__documentOverflow = $('body')[0].style.overflow;
  96. 		this.__htmlOverflow = $('html')[0].style.overflow;
  97. 		$('body, html').css('overflow', 'hidden');
  98. 	},
  99. 	_allowDocumentScroll: function() {
  100. 		$('body')[0].style.overflow = this.__documentOverflow;
  101. 		$('html')[0].style.overflow = this.__htmlOverflow;
  102. 	},
  103. 	_fullScreenChange: function() {
  104. 		if (!this.isFullScreen()) {
  105. 			this._allowDocumentScroll();
  106. 			this._revertStyles();
  107. 			this._triggerEvents();
  108. 			this._fullScreenElement = null;
  109. 		} else {
  110. 			this._preventDocumentScroll();
  111. 			this._triggerEvents();
  112. 		}
  113. 	},
  114. 	_fullScreenError: function(e) {
  115. 		this._revertStyles();
  116. 		this._fullScreenElement = null;
  117. 		if (e) {
  118. 			$(document).trigger('fscreenerror', [e]);
  119. 		}
  120. 	},
  121. 	_triggerEvents: function() {
  122. 		$(this._fullScreenElement).trigger(this.isFullScreen() ? 'fscreenopen' : 'fscreenclose');
  123. 		$(document).trigger('fscreenchange', [this.isFullScreen(), this._fullScreenElement]);
  124. 	},
  125. 	_saveAndApplyStyles: function() {
  126. 		var $elem = $(this._fullScreenElement);
  127. 		this.__savedStyles = {};
  128. 		for (var property in this.__options.styles) {
  129. 			// save
  130. 			this.__savedStyles[property] = this._fullScreenElement.style[property];
  131. 			// apply
  132. 			this._fullScreenElement.style[property] = this.__options.styles[property];
  133. 		}
  134. 		if (this.__options.toggleClass) {
  135. 			$elem.addClass(this.__options.toggleClass);
  136. 		}
  137. 	},
  138. 	_revertStyles: function() {
  139. 		var $elem = $(this._fullScreenElement);
  140. 		for (var property in this.__options.styles) {
  141. 			this._fullScreenElement.style[property] = this.__savedStyles[property];
  142. 		}
  143. 		if (this.__options.toggleClass) {
  144. 			$elem.removeClass(this.__options.toggleClass);
  145. 		}
  146. 	},
  147. 	open: function(elem, options) {
  148. 		// do nothing if request is for already fullscreened element
  149. 		if (elem === this._fullScreenElement) {
  150. 			return;
  151. 		}
  152. 		// exit active fullscreen before opening another one
  153. 		if (this.isFullScreen()) {
  154. 			this.exit();
  155. 		}
  156. 		// save fullscreened element
  157. 		this._fullScreenElement = elem;
  158. 		// apply options, if any
  159. 		this.__options = $.extend(true, {}, this._DEFAULT_OPTIONS, options);
  160. 		// save current element styles and apply new
  161. 		this._saveAndApplyStyles();
  162. 	},
  163. 	exit: null,
  164. 	isFullScreen: null,
  165. 	isNativelySupported: function() {
  166. 		return IS_NATIVELY_SUPPORTED;
  167. 	}
  168. };
  169. var FullScreenNative = function() {
  170. 	FullScreenNative._super.constructor.apply(this, arguments);
  171. 	this.exit = $.proxy(native('exitFullscreen'), document);
  172. 	this._DEFAULT_OPTIONS = $.extend(true, {}, this._DEFAULT_OPTIONS, {
  173. 		'styles': {
  174. 			'width': '100%',
  175. 			'height': '100%'
  176. 		}
  177. 	});
  178. 	$(document)
  179. 		.bind(this._prefixedString('fullscreenchange') + ' MSFullscreenChange', $.proxy(this._fullScreenChange, this))
  180. 		.bind(this._prefixedString('fullscreenerror') + ' MSFullscreenError', $.proxy(this._fullScreenError, this));
  181. };
  182.  
  183. extend(FullScreenNative, FullScreenAbstract, {
  184. 	VENDOR_PREFIXES: ['', 'o', 'moz', 'webkit'],
  185. 	_prefixedString: function(str) {
  186. 		return $.map(this.VENDOR_PREFIXES, function(s) {
  187. 			return s + str;
  188. 		}).join(' ');
  189. 	},
  190. 	open: function(elem, options) {
  191. 		FullScreenNative._super.open.apply(this, arguments);
  192. 		var requestFS = native(elem, 'requestFullscreen');
  193. 		requestFS.call(elem);
  194. 	},
  195. 	exit: $.noop,
  196. 	isFullScreen: function() {
  197. 		return native('fullscreenElement') !== null;
  198. 	},
  199. 	element: function() {
  200. 		return native('fullscreenElement');
  201. 	}
  202. });
  203. var FullScreenFallback = function() {
  204. 	FullScreenFallback._super.constructor.apply(this, arguments);
  205. 	this._DEFAULT_OPTIONS = $.extend({}, this._DEFAULT_OPTIONS, {
  206. 		'styles': {
  207. 			'position': 'fixed',
  208. 			'zIndex': '2147483647',
  209. 			'left': 0,
  210. 			'top': 0,
  211. 			'bottom': 0,
  212. 			'right': 0
  213. 		}
  214. 	});
  215. 	this.__delegateKeydownHandler();
  216. };
  217.  
  218. extend(FullScreenFallback, FullScreenAbstract, {
  219. 	__isFullScreen: false,
  220. 	__delegateKeydownHandler: function() {
  221. 		var $doc = $(document);
  222. 		$doc.delegate('*', 'keydown.fullscreen', $.proxy(this.__keydownHandler, this));
  223. 		var data = JQ_LT_17 ? $doc.data('events') : $._data(document).events;
  224. 		var events = data['keydown'];
  225. 		if (!JQ_LT_17) {
  226. 			events.splice(0, 0, events.splice(events.delegateCount - 1, 1)[0]);
  227. 		} else {
  228. 			data.live.unshift(data.live.pop());
  229. 		}
  230. 	},
  231. 	__keydownHandler: function(e) {
  232. 		if (this.isFullScreen() && e.which === 27) {
  233. 			this.exit();
  234. 			return false;
  235. 		}
  236. 		return true;
  237. 	},
  238. 	_revertStyles: function() {
  239. 		FullScreenFallback._super._revertStyles.apply(this, arguments);
  240. 		// force redraw (fixes bug in IE7 with content dissapearing)
  241. 		this._fullScreenElement.offsetHeight;
  242. 	},
  243. 	open: function(elem) {
  244. 		FullScreenFallback._super.open.apply(this, arguments);
  245. 		this.__isFullScreen = true;
  246. 		this._fullScreenChange();
  247. 	},
  248. 	exit: function() {
  249. 		this.__isFullScreen = false;
  250. 		this._fullScreenChange();
  251. 	},
  252. 	isFullScreen: function() {
  253. 		return this.__isFullScreen;
  254. 	},
  255. 	element: function() {
  256. 		return this.__isFullScreen ? this._fullScreenElement : null;
  257. 	}
  258. });$.fullscreen = IS_NATIVELY_SUPPORTED 
  259. 				? new FullScreenNative() 
  260. 				: new FullScreenFallback();
  261.  
  262. $.fn.fullscreen = function(options) {
  263. 	var elem = this[0];
  264.  
  265. 	options = $.extend({
  266. 		toggleClass: null,
  267. 		overflow: 'hidden'
  268. 	}, options);
  269. 	options.styles = {
  270. 		overflow: options.overflow
  271. 	};
  272. 	delete options.overflow;
  273.  
  274. 	if (elem) {
  275. 		$.fullscreen.open(elem, options);
  276. 	}
  277.  
  278. 	return this;
  279. };
  280. })(jQuery);