jQuery fullscreen plugin
by Deepak Kumar
HTML
<div id="toogle-fs" style="background:red;height:200px;width:200px;"> </div>
<p contenteditable> asdasda as a asd asda </p>
JavaScript
;
(function ($, window, document, undefined) {
var pluginName = "fullscreen",
defaults = {
propertyName: "value"
};
// The actual plugin constructor
function Plugin(element, options) {
this.element = element;
// jQuery has an extend method which merges the contents of two or
// more objects, storing the result in the first object. The first object
// is generally empty as we don't want to alter the default options for
// future instances of the plugin
this.options = $.extend({}, defaults, options);
this._defaults = defaults;
this._name = pluginName;
this.init();
}
Plugin.prototype = {
init: function () {
document.cancelFullScreen = document.webkitExitFullscreen || document.mozCancelFullScreen || document.exitFullscreen;
var elem = document.querySelector(document.webkitExitFullscreen ? "#" + this.element.id : "#" + this.element.id);
this.fullScreenAddEventListener(elem);
},
fullScreenAddEventListener: function (el) {
document.addEventListener('keydown', function (e) {
switch (e.keyCode) {
case 13:
// ENTER. ESC should also take you out of fullscreen by default.
e.preventDefault();
document.cancelFullScreen(); // explicitly go out of fs.
break;
case 70:
// f
Plugin.prototype.enterFullscreen(el);
break;
}
}, false);
},
toogleFullScreen: function (el) {
if (el.webkitEnterFullScreen) {
el.webkitEnterFullScreen();
} else {
if (el.mozRequestFullScreen) {
el.mozRequestFullScreen();
} else {
...