From be0aaa2db6f8a7476d8bc20c1b967e8defd3d183 Mon Sep 17 00:00:00 2001 From: rlx <0x0073@0x2620.org> Date: Thu, 1 Nov 2012 14:20:28 +0000 Subject: [PATCH] add fullscreen controller --- source/Ox.UI/js/Core/Fullscreen.js | 139 +++++++++++++++++++++++++++++ 1 file changed, 139 insertions(+) create mode 100644 source/Ox.UI/js/Core/Fullscreen.js diff --git a/source/Ox.UI/js/Core/Fullscreen.js b/source/Ox.UI/js/Core/Fullscreen.js new file mode 100644 index 00000000..40b4c867 --- /dev/null +++ b/source/Ox.UI/js/Core/Fullscreen.js @@ -0,0 +1,139 @@ +'use strict'; + +/*@ +Ox.Fullscreen Fullscreen controller + bind Add a fullscreen event handler + event Event name ('change', 'enter' or 'exit') + handler Event handler + state Fullscreen state (present in case of a 'change' event) + bindOnce Add a fullscreen event handler that will run only once + event Event name ('change', 'enter' or 'exit') + handler Event handler + state Fullscreen state (present in case of a 'change' event) + enter Enter fullscreen + exit Exit fullscreen + getState Get fullscreen state (true, false or undefined) + toggle Toggle fullscreen + unbind Remove a fullscreen event handler + event Event name ('change', 'enter' or 'exit') + handler Event handler +@*/ + +Ox.Fullscreen = (function() { + + var documentElement = document.documentElement, + enter = document.documentElement.requestFullscreen + || document.documentElement.mozRequestFullScreen + || document.documentElement.webkitRequestFullscreen, + exit = document.exitFullscreen + || document.mozCancelFullScreen + || document.webkitExitFullscreen, + state = 'fullscreen' in document ? 'fullscreen' + : 'mozFullScreen' in document ? 'mozFullScreen' + : 'webkitIsFullScreen' in document ? 'webkitIsFullScreen' + : void 0, + handlers = { + '': {'change': [], 'enter': [], 'exit': []}, + 'once': {'change': [], 'enter': [], 'exit': []} + }, + types = Object.keys(handlers), + that = {}; + + [ + 'fullscreenchange', 'mozfullscreenchange', 'webkitfullscreenchange' + ].forEach(function(originalEvent) { + document.addEventListener(originalEvent, change); + }); + + function bind(event, handler, once) { + var type = once ? 'once' : ''; + if ( + handlers[type][event] + && handlers[type][event].indexOf(handler) == -1 + ) { + handlers[type][event].push(handler); + } + } + + function change() { + var state = that.getState(), + events = ['change'].concat(state ? 'enter' : 'exit'), + unbind = []; + types.forEach(function(type) { + events.forEach(function(event) { + handlers[type][event].forEach(function(handler) { + event == 'change' ? handler(state) : handler(); + type == 'once' && unbind.push( + {event: event, handler: handler} + ); + }); + }); + }); + unbind.forEach(function(value) { + that.unbind(value.event, value.handler, true); + }); + }; + + function unbind(event, handler, once) { + var index; + [once ? ['once'] : types].forEach(function(type) { + if (handlers[type][event]) { + while ((index = handlers[type][event].indexOf(handler)) > -1) { + handlers[type][event].splice(index, 1); + } + } + }); + } + + that.bind = function(event, handler) { + bind(event, handler); + }; + + that.bindOnce = function(event, handler) { + bind(event, handler, true); + }; + + that.enter = function() { + if (document.documentElement.requestFullscreen) { + document.documentElement.requestFullscreen(); + } else if (document.documentElement.mozRequestFullScreen) { + document.documentElement.mozRequestFullScreen(); + } else if (document.documentElement.webkitRequestFullscreen) { + document.documentElement.webkitRequestFullscreen(); + } + // FIXME: Why does storing the function in a variable not work? + // enter && enter(); + }; + + that.exit = function() { + if (document.exitFullscreen) { + document.exitFullscreen(); + } else if (document.mozCancelFullScreen) { + document.mozCancelFullscreen(); + } else if (document.webkitExitFullscreen) { + document.webkitExitFullscreen() + } + // FIXME: Why does storing the function in a variable not work? + // exit && exit(); + }; + + that.getState = function() { + return document[state]; + }; + + that.toggle = function() { + var state = that.getState(); + if (state === false) { + that.enter(); + } else if (state === true) { + that.exit(); + } + }; + + that.unbind = function(event, handler) { + unbind(event, handler); + }; + + return that; + +}()); \ No newline at end of file