Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Merge pull request #4 from m-abs/master

Validate through JSHint and fixes problem with multiple event bindings
  • Loading branch information...
commit ba88d53b8c500efe16f227753657bfb7a48a190a 2 parents 337546e + f409b89
Martin Angelov authored
Showing with 88 additions and 89 deletions.
  1. +88 −89 fullscreen/jquery.fullscreen.js
177 fullscreen/jquery.fullscreen.js
View
@@ -1,145 +1,144 @@
/**
- * @name jQuery FullScreen Plugin
- * @author Martin Angelov
- * @version 1.0
- * @url http://tutorialzine.com/2012/02/enhance-your-website-fullscreen-api/
- * @license MIT License
+ * @name jQuery FullScreen Plugin
+ * @author Martin Angelov, Morten Sjøgren
+ * @version 1.1
+ * @url http://tutorialzine.com/2012/02/enhance-your-website-fullscreen-api/
+ * @license MIT License
*/
+/*jshint browser: true, jquery: true */
(function($){
-
+ "use strict";
+
+ // These helper functions available only to our plugin scope.
+ function supportFullScreen(){
+ var doc = document.documentElement;
+
+ return ('requestFullscreen' in doc) ||
+ ('mozRequestFullScreen' in doc && document.mozFullScreenEnabled) ||
+ ('webkitRequestFullScreen' in doc);
+ }
+
+ function requestFullScreen(elem){
+ if (elem.requestFullscreen) {
+ elem.requestFullscreen();
+ } else if (elem.mozRequestFullScreen) {
+ elem.mozRequestFullScreen();
+ } else if (elem.webkitRequestFullScreen) {
+ elem.webkitRequestFullScreen();
+ }
+ }
+
+ function fullScreenStatus(){
+ return document.fullscreen ||
+ document.mozFullScreen ||
+ document.webkitIsFullScreen ||
+ false;
+ }
+
+ function cancelFullScreen(){
+ if (document.exitFullscreen) {
+ document.exitFullscreen();
+ } else if (document.mozCancelFullScreen) {
+ document.mozCancelFullScreen();
+ } else if (document.webkitCancelFullScreen) {
+ document.webkitCancelFullScreen();
+ }
+ $(document).off( 'fullscreenchange mozfullscreenchange webkitfullscreenchange' );
+ }
+
+ function onFullScreenEvent(callback){
+ $(document).on("fullscreenchange mozfullscreenchange webkitfullscreenchange", function(){
+ // The full screen status is automatically
+ // passed to our callback as an argument.
+ callback(fullScreenStatus());
+ });
+ }
+
// Adding a new test to the jQuery support object
$.support.fullscreen = supportFullScreen();
-
+
// Creating the plugin
$.fn.fullScreen = function(props){
-
- if(!$.support.fullscreen || this.length != 1){
-
+ if(!$.support.fullscreen || this.length !== 1) {
// The plugin can be called only
// on one element at a time
-
+
return this;
}
-
+
if(fullScreenStatus()){
// if we are already in fullscreen, exit
cancelFullScreen();
return this;
}
-
+
// You can potentially pas two arguments a color
// for the background and a callback function
-
+
var options = $.extend({
- 'background' : '#111',
- 'callback' : function(){}
- }, props);
-
+ 'background' : '#111',
+ 'callback' : $.noop( ),
+ 'fullscreenClass' : 'fullScreen'
+ }, props),
+
+ elem = this,
+
// This temporary div is the element that is
// actually going to be enlarged in full screen
-
- var fs = $('<div>',{
+
+ fs = $('<div>', {
'css' : {
'overflow-y' : 'auto',
'background' : options.background,
- 'width' : '100%',
- 'height' : '100%'
+ 'width' : '100%',
+ 'height' : '100%'
}
- });
-
- var elem = this;
+ })
+ .insertBefore(elem)
+ .append(elem);
// You can use the .fullScreen class to
// apply styling to your element
- elem.addClass('fullScreen');
-
+ elem.addClass( options.fullscreenClass );
+
// Inserting our element in the temporary
// div, after which we zoom it in fullscreen
- fs.insertBefore(elem);
- fs.append(elem);
+
requestFullScreen(fs.get(0));
-
+
fs.click(function(e){
if(e.target == this){
// If the black bar was clicked
cancelFullScreen();
}
});
-
+
elem.cancel = function(){
cancelFullScreen();
return elem;
};
-
+
onFullScreenEvent(function(fullScreen){
-
if(!fullScreen){
-
// We have exited full screen.
// Remove the class and destroy
// the temporary div
-
- elem.removeClass('fullScreen').insertBefore(fs);
+
+ elem.removeClass( options.fullscreenClass ).insertBefore(fs);
fs.remove();
}
-
+
// Calling the user supplied callback
options.callback(fullScreen);
});
-
+
return elem;
};
-
-
- // These helper functions available only to our plugin scope.
-
-
- function supportFullScreen(){
- var doc = document.documentElement;
-
- return ('requestFullscreen' in doc) ||
- ('mozRequestFullScreen' in doc && document.mozFullScreenEnabled) ||
- ('webkitRequestFullScreen' in doc);
- }
-
- function requestFullScreen(elem){
-
- if (elem.requestFullscreen) {
- elem.requestFullscreen();
- }
- else if (elem.mozRequestFullScreen) {
- elem.mozRequestFullScreen();
- }
- else if (elem.webkitRequestFullScreen) {
- elem.webkitRequestFullScreen();
- }
- }
-
- function fullScreenStatus(){
- return document.fullscreen ||
- document.mozFullScreen ||
- document.webkitIsFullScreen;
- }
-
- function cancelFullScreen(){
- if (document.exitFullscreen) {
- document.exitFullscreen();
- }
- else if (document.mozCancelFullScreen) {
- document.mozCancelFullScreen();
- }
- else if (document.webkitCancelFullScreen) {
- document.webkitCancelFullScreen();
- }
- }
- function onFullScreenEvent(callback){
- $(document).on("fullscreenchange mozfullscreenchange webkitfullscreenchange", function(){
- // The full screen status is automatically
- // passed to our callback as an argument.
- callback(fullScreenStatus());
- });
- }
+ $.fn.cancelFullScreen = function( ) {
+ cancelFullScreen();
-})(jQuery);
+ return this;
+ };
+}(jQuery));
Please sign in to comment.
Something went wrong with that request. Please try again.