add fullscreen controller

source/Ox.UI/js/Core/Fullscreen.js

@@ -0,0 +1,139 @@
+'use strict';
+
+/*@
+Ox.Fullscreen <o> Fullscreen controller
+    bind <f> Add a fullscreen event handler
+        event <s> Event name ('change', 'enter' or 'exit')
+        handler <f> Event handler
+            state <b> Fullscreen state (present in case of a 'change' event)
+    bindOnce <f> Add a fullscreen event handler that will run only once
+        event <s> Event name ('change', 'enter' or 'exit')
+        handler <f> Event handler
+            state <b> Fullscreen state (present in case of a 'change' event)
+    enter <f> Enter fullscreen
+    exit <f> Exit fullscreen
+    getState <f> Get fullscreen state (true, false or undefined)
+    toggle <f> Toggle fullscreen
+    unbind <f> Remove a fullscreen event handler
+        event <s> Event name ('change', 'enter' or 'exit')
+        handler <f> 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;
+
+}());