crossbrowdy
Version:
A Multimedia JavaScript framework to create real cross-platform and hybrid game engines, games, emulators, multimedia libraries and apps.
1,057 lines (916 loc) • 97.1 kB
JavaScript
/**
* @file Screen management. Contains the {@link CB_Screen} static class.
* @author Joan Alba Maldonado <workindalian@gmail.com>
* @license Creative Commons Attribution 4.0 International. See more at {@link https://crossbrowdy.com/about#what_is_the_crossbrowdy_copyright_and_license}.
*/
/**
* Static class to manage the screen. It will return itself if it is tried to be instantiated. It can use [detect-zoom]{@link https://github.com/tombigel/detect-zoom} and [NoSleep.js]{@link https://github.com/richtr/NoSleep.js?utm_source=recordnotfound.com}.
* @namespace
*/
var CB_Screen = function() { return CB_Screen; };
{
CB_Screen._screenWidth = 0; //Screen width resolution.
CB_Screen._screenHeight = 0; //Screen height resolution.
CB_Screen._previousScreenWidth = 0; //Previous screen width resolution.
CB_Screen._previousScreenHeight = 0; //Previous screen height resolution.
CB_Screen._screenAvailableWidth = 0; //Screen available width resolution.
CB_Screen._screenAvailableHeight = 0; //Screen available height resolution.
CB_Screen._previousScreenAvailableWidth = 0; //Previous screen available width resolution.
CB_Screen._previousScreenAvailableHeight = 0; //Previous screen available height resolution.
CB_Screen._windowWidth = 0; //Window width resolution.
CB_Screen._windowHeight = 0; //Window height resolution.
CB_Screen._previousWindowWidth = 0; //Previous window width resolution.
CB_Screen._previousWindowHeight = 0; //Previous window height resolution.
CB_Screen._screenColorDepth = 0; //Screen color depth.
CB_Screen._scrollLeft = null; //Left scroll value.
CB_Screen._scrollTop = null; //Top scroll value.
CB_Screen._previousScrollLeft = null; //Previous left scroll value.
CB_Screen._previousScrollTop = null; //Previous top scroll value.
CB_Screen._zoom = 1; //Zoom applied to the web.
CB_Screen._pixelRatio = 1; //Pixel ratio multiplied by the zoom.
CB_Screen._previousZoom = 0; //Zoom applied to the web.
CB_Screen._previousPixelRatio = 0; //Pixel ratio multiplied by the zoom.
CB_Screen._isLandscape = null; //Tells whether web is displayed in landscape or portrait position.
CB_Screen._isVisible = null; //Tells whether web is visible or not.
CB_Screen._isFocused = null; //Tells whether web is focused or not (has lost the focus).
CB_Screen._isFullScreen = null; //Tells whether full screen mode is enabled or not.
CB_Screen._screenLock = null; //Keeps the MozWakeLock object to be able to release the lock related with the screen (so far, only works in Firefox/Firefox OS).
CB_Screen._noSleep = null; //Keeps the last NoSleep object for the NoSleep.js library.
CB_Screen._noSleepEnabled = false; //Boolean to keeps the status of the noSleep.js object (enabled or disabled).
CB_Screen._eventsHolder = {}; //Keeps the functions to fire for every special event (if any).
/*
CB_Screen.onResizeFunction; //Function that is executed when window is resized (onResize event).
CB_Screen.onScrollLeftFunction; //Function that is executen when scroll left is changed.
CB_Screen.onScrollTopFunction; //Function that is executen when scroll top is changed.
CB_Screen.onVisibilityChangeFunction; //Function that is executed when window gets or losts the visibility.
CB_Screen.onFocusChangeFunction; //Function that is executed when window gets or losts the focus.
CB_Screen.onResizeOrZoomFunction; //Function that is executed when window is resized or zoom is applied.
CB_Screen.onOrientationChangeFunction; //Function that is executed when orientation changes (landscape or portrait).
CB_Screen.onFullScreenChangeFunction; //Function that is executed when full screen mode changes.
*/
CB_Screen._storedScreenWidth = 0; //Old screen available width resolution (internal use only).
CB_Screen._storedScreenHeight = 0; //Old screen available height resolution (internal use only).
CB_Screen._storedScreenAvailableWidth = 0; //Old screen available width resolution (internal use only).
CB_Screen._storedScreenAvailableHeight = 0; //Old screen available height resolution (internal use only).
CB_Screen._storedWindowWidth = 0; //Old window width resolution (internal use only).
CB_Screen._storedWindowHeight = 0; //Old window height resolution (internal use only).
CB_Screen._storedZoom = 0; //Zoom applied to the web.
CB_Screen._storedPixelRatio = 0; //Pixel ratio multiplied by the zoom.
CB_Screen._refreshTimeout = null; //It will store the timeout that refresh screen properties all the time.
CB_Screen.initialized = false; //It will tells whether the object has been initialized or not.
//Initializes all values:
CB_Screen.init = function()
{
if (CB_Screen.initialized) { return CB_Screen; }
//Sets that the object has already been initialized:
CB_Screen.initialized = true;
//Stores first values for both old window width and height:
CB_Screen._storedScreenWidth = CB_Screen._screenWidth;
CB_Screen._storedScreenHeight = CB_Screen._screenHeight;
CB_Screen._storedScreenAvailableWidth = CB_Screen._screenAvailableWidth;
CB_Screen._storedScreenAvailableHeight = CB_Screen._screenAvailableHeight;
CB_Screen._storedWindowWidth = CB_Screen._windowWidth;
CB_Screen._storedWindowHeight = CB_Screen._windowHeight;
//It also stores for both zoom level and pixel ratio:
CB_Screen._storedZoom = CB_Screen._zoom;
CB_Screen._storedPixelRatio = CB_Screen._pixelRatio;
//Sets the handler for the scroll event:
CB_Events.add(window, "scroll", function() { CB_Screen.getScrollTop(); CB_Screen.getScrollLeft(); }, true, true, false);
//It will check all the time if visibility changes:
CB_Screen._isVisible = true; //By default, window is visible. NOTE: this can produce a false positive if the script is loading being not visible.
if ("hidden" in document) { CB_Events.add(document, "visibilitychange", CB_Screen._visibilityChanged, true, true, false); } //document.addEventListener("visibilitychange", CB_Screen._visibilityChanged); }
else if ("mozHidden" in document) { CB_Events.add(document, "mozvisibilitychange", CB_Screen._visibilityChanged, true, true, false); } //document.addEventListener("mozvisibilitychange", CB_Screen._visibilityChanged); }
else if ("webkitHidden" in document) { CB_Events.add(document, "webkitvisibilitychange", CB_Screen._visibilityChanged, true, true, false); } //document.addEventListener("webkitvisibilitychange", CB_Screen._visibilityChanged); }
else if ("msHidden" in document) { CB_Events.add(document, "msvisibilitychange", CB_Screen._visibilityChanged, true, true, false); } // document.addEventListener("msvisibilitychange", CB_Screen._visibilityChanged); }
//else if ("onfocusin" in document) { document.onfocusin = document.onfocusout = CB_Screen._visibilityChanged; }
//else if ("onfocusin" in document) { document.onfocusin = document.onfocusout = function() { CB_Screen._visibilityChanged(); CB_Screen._focusChanged(); } }
//else { window.onfocus = window.onblur = CB_Screen._visibilityChanged; }
//else { window.onfocus = window.onblur = function() { CB_Screen._visibilityChanged(); CB_Screen._focusChanged(); } }
//It will check all the time if focus changes:
CB_Screen._isFocused = true; //By default, window is focused. NOTE: this can produce a false positive if the script is loading being not visible.
var focusOrBlurEventWorks = false;
try //Using catch due some web clients doesn't allow to manipulate the window object of parent iframes:
{
CB_Events.add(CB_Client.getWindow(), "focus", function() { focusOrBlurEventWorks = true; CB_Screen._focusChanged(true); }, true, true, false);
CB_Events.add(CB_Client.getWindow(), "blur", function() { focusOrBlurEventWorks = true; CB_Screen._focusChanged(false); }, true, true, false);
}
catch(E)
{
CB_Events.add(window, "focus", function() { focusOrBlurEventWorks = true; CB_Screen._focusChanged(true); }, true, true, false);
CB_Events.add(window, "blur", function() { focusOrBlurEventWorks = true; CB_Screen._focusChanged(false); }, true, true, false);
}
CB_Events.add(document, "mousedown", function() { if (focusOrBlurEventWorks) { return; } CB_Screen._focusChanged(true); }, true, true, false); //Mouse click will set focus too (IE8 fix).
CB_Events.add(document, "click", function() { if (focusOrBlurEventWorks) { return; } CB_Screen._focusChanged(true); }, true, true, false); //Click will set focus too (IE8 fix).
//CB_Events.add(document, "keydown", function() { if (focusOrBlurEventWorks) { return; } CB_Screen._focusChanged(true); }, true, true, false); //Key down event will set focus too (IE8 fix).
//CB_Events.add(document, "mousemove", function() { if (focusOrBlurEventWorks) { return; } CB_Screen._focusChanged(true); }, true, true, false); //Mouse movemenet will set focus too (IE8 fix).
//Starts running the loop:
CB_Screen._mainLoop();
return CB_Screen;
}
//Loop to watch the screen changes:
CB_Screen._mainLoop = function()
{
//Cancels the timeout (if any):
clearTimeout(CB_Screen._refreshTimeout);
CB_Screen.getWidth(); //Defines screen width resolution.
CB_Screen.getHeight(); //Defines screen height resolution.
CB_Screen.getWidthPrevious(); //Defines previous window width resolution.
CB_Screen.getHeightPrevious(); //Defines previous window height resolution.
CB_Screen.getAvailableWidth(); //Defines screen available width resolution.
CB_Screen.getAvailableHeight(); //Defines screen available height resolution.
CB_Screen.getAvailableWidthPrevious(); //Defines previous window width resolution.
CB_Screen.getAvailableHeightPrevious(); //Defines previous window height resolution.
CB_Screen.getWindowWidth(); //Defines window width resolution.
CB_Screen.getWindowHeight(); //Defines window height resolution.
CB_Screen.getWindowWidthPrevious(); //Defines previous window width resolution.
CB_Screen.getWindowHeightPrevious(); //Defines previous window height resolution.
CB_Screen.getColorDepth(); //Defines screen color depth.
//CB_Screen.getScrollLeft(); //Defines scroll left (and executes defined function if it changes).
//CB_Screen.getScrollTop(); //Defines scroll top (and executes defined function if it changes).
CB_Screen.getZoom(); //Defines zoom level.
CB_Screen.getPixelRatio(); //Defines pixel ratio multiplied by the zoom level.
CB_Screen.isLandscape(); //Defines whether device is in landscape or portrait position (and executes defined function if it changes).
CB_Screen.isFullScreen(); //Defines whether it's in full screen mode or not (and executes defined function if it changes).
//Executes the function defined for Resize and Zoom events (if any):
CB_Screen._processOnResizeOrZoomFunction();
//Executes the function defined for Full screen change event (if any):
//CB_Screen.onFullScreenChangeFunction(CB_Screen.onFullScreenChangeFunction, false);
//Executes the function again:
CB_Screen._refreshTimeout = setTimeout(CB_Screen._mainLoop, 1); //Calls itself again to update values all the time.
}
/**
* Gets the current screen width (horizontal resolution). Uses the [window.screen.width]{@link https://developer.mozilla.org/en-US/docs/Web/API/Screen/width} property internally, when possible.
* @function
* @returns {number} Returns the current screen width (horizontal resolution) in pixels.
*/
CB_Screen.getWidth = function()
{
if (screen && screen.width && !isNaN(screen.width))
{
CB_Screen._screenWidth = screen.width;
}
return CB_Screen._screenWidth;
}
/**
* Gets the current screen height (vertical resolution). Uses the [window.screen.height]{@link https://developer.mozilla.org/en-US/docs/Web/API/Screen/height} property internally, when possible.
* @function
* @returns {number} Returns the current screen height (vertical resolution) in pixels.
*/
CB_Screen.getHeight = function()
{
if (screen && screen.height && !isNaN(screen.height))
{
CB_Screen._screenHeight = screen.height;
}
return CB_Screen._screenHeight;
}
/**
* Gets the previous screen width (horizontal resolution). Calculated through the [window.screen.width]{@link https://developer.mozilla.org/en-US/docs/Web/API/Screen/width} property internally, when possible. Useful when the resolution (screen size and/or orientation) changed.
* @function
* @returns {number} Returns the previous screen width (horizontal resolution) in pixels.
*/
CB_Screen.getWidthPrevious = function()
{
if (CB_Screen._previousScreenWidth === 0) { CB_Screen._previousScreenWidth = CB_Screen.getWidth(); }
return CB_Screen._previousScreenWidth;
}
/**
* Gets the previous screen height (vertical resolution). Calculated through the [window.screen.height]{@link https://developer.mozilla.org/en-US/docs/Web/API/Screen/height} property internally, when possible. Useful when the resolution (screen size and/or orientation) changed.
* @function
* @returns {number} Returns the previous screen height (vertical resolution) in pixels.
*/
CB_Screen.getHeightPrevious = function()
{
if (CB_Screen._previousScreenHeight === 0) { CB_Screen._previousScreenHeight = CB_Screen.getHeight(); }
return CB_Screen._previousScreenHeight;
}
/**
* Gets the current available screen width (horizontal resolution). Uses the [window.screen.availWidth]{@link https://developer.mozilla.org/en-US/docs/Web/API/Screen/availWidth} property internally, when possible.
* @function
* @returns {number} Returns the current available screen width (horizontal resolution) in pixels.
*/
CB_Screen.getAvailableWidth = function()
{
if (screen && screen.availWidth && !isNaN(screen.availWidth))
{
CB_Screen._screenAvailableWidth = screen.availWidth;
}
return CB_Screen._screenAvailableWidth;
}
/**
* Gets the current available screen height (vertical resolution). Uses the [window.screen.availHeight]{@link https://developer.mozilla.org/en-US/docs/Web/API/Screen/availHeight} property internally, when possible.
* @function
* @returns {number} Returns the current available screen height (vertical resolution) in pixels.
*/
CB_Screen.getAvailableHeight = function()
{
if (screen && screen.availHeight && !isNaN(screen.availHeight))
{
CB_Screen._screenAvailableHeight = screen.availHeight;
}
return CB_Screen._screenAvailableHeight;
}
/**
* Gets the previous available screen width (horizontal resolution). Useful when the resolution (screen size and/or orientation) changed. Uses the [window.screen.availWidth]{@link https://developer.mozilla.org/en-US/docs/Web/API/Screen/availWidth} property internally, when possible.
* @function
* @returns {number} Returns the previous available screen width (horizontal resolution) in pixels.
*/
CB_Screen.getAvailableWidthPrevious = function()
{
if (CB_Screen._previousScreenAvailableWidth === 0) { CB_Screen._previousScreenAvailableWidth = CB_Screen.getAvailableWidth(); }
return CB_Screen._previousScreenAvailableWidth;
}
/**
* Gets the previous available screen height (vertical resolution). Useful when the resolution (screen size and/or orientation) changed. Uses the [window.screen.availHeight]{@link https://developer.mozilla.org/en-US/docs/Web/API/Screen/availHeight} property internally, when possible.
* @function
* @returns {number} Returns the previous available screen height (vertical resolution) in pixels.
*/
CB_Screen.getAvailableHeightPrevious = function()
{
if (CB_Screen._previousScreenAvailableHeight === 0) { CB_Screen._previousScreenAvailableHeight = CB_Screen.getAvailableHeight(); }
return CB_Screen._previousScreenAvailableHeight;
}
/**
* Gets the current window width (horizontal resolution). Internally, uses the [window.innerWidth]{@link https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth} if possible and fallbacks to [document.documentElement.clientWidth]{@link https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth} or [document.body.clientWidth]{@link https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth} property otherwise, when possible.
* @function
* @returns {number} Returns the current window width (horizontal resolution) in pixels.
*/
CB_Screen.getWindowWidth = function()
{
if (window && window.innerWidth && !isNaN(window.innerWidth))
{
CB_Screen._windowWidth = window.innerWidth;
}
else if (document && document.documentElement && document.documentElement.clientWidth && !isNaN(document.documentElement.clientWidth) && document.documentElement.clientWidth > 0)
{
CB_Screen._windowWidth = document.documentElement.clientWidth;
}
else if (document && document.body && document.body.clientWidth && !isNaN(document.body.clientWidth) && document.body.clientWidth > 0)
{
CB_Screen._windowWidth = document.body.clientWidth;
}
return CB_Screen._windowWidth;
}
/**
* Gets the current window height (vertical resolution). Internally, uses the [window.innerHeight]{@link https://developer.mozilla.org/en-US/docs/Web/API/Window/innerHeight} if possible and fallbacks to [document.documentElement.clientHeight]{@link https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight} or [document.body.clientHeight]{@link https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight} property otherwise, when possible.
* @function
* @returns {number} Returns the current window height (vertical resolution) in pixels.
*/
CB_Screen.getWindowHeight = function()
{
if (window && window.innerHeight && !isNaN(window.innerHeight))
{
CB_Screen._windowHeight = window.innerHeight;
}
else if (document && document.documentElement && document.documentElement.clientHeight && !isNaN(document.documentElement.clientHeight) && document.documentElement.clientHeight > 0)
{
CB_Screen._windowHeight = document.documentElement.clientHeight;
}
else if (document && document.body && document.body.clientHeight && !isNaN(document.body.clientHeight) && document.body.clientHeight > 0)
{
CB_Screen._windowHeight = document.body.clientHeight;
}
return CB_Screen._windowHeight;
}
/**
* Gets the previous window width (horizontal resolution). Useful when the resolution (screen size and/or orientation) or window size changed. Internally, uses the [window.innerWidth]{@link https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth} if possible and fallbacks to [document.documentElement.clientWidth]{@link https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth} or [document.body.clientWidth]{@link https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth} property otherwise, when possible.
* @function
* @returns {number} Returns the previous window width (horizontal resolution) in pixels.
*/
CB_Screen.getWindowWidthPrevious = function()
{
if (CB_Screen._previousWindowWidth === 0) { CB_Screen._previousWindowWidth = CB_Screen.getWindowWidth(); }
return CB_Screen._previousWindowWidth;
}
/**
* Gets the previous window height (vertical resolution). Useful when the resolution (screen size and/or orientation) or window size changed. Internally, uses the [window.innerHeight]{@link https://developer.mozilla.org/en-US/docs/Web/API/Window/innerHeight} if possible and fallbacks to [document.documentElement.clientHeight]{@link https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight} or [document.body.clientHeight]{@link https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight} property otherwise, when possible.
* @function
* @returns {number} Returns the previous window height (vertical resolution) in pixels.
*/
CB_Screen.getWindowHeightPrevious = function()
{
if (CB_Screen._previousWindowHeight === 0) { CB_Screen._previousWindowHeight = CB_Screen.getWindowHeight(); }
return CB_Screen._previousWindowHeight;
}
/**
* Gets the current color depth. Uses the [window.screen.colorDepth]{@link https://developer.mozilla.org/en-US/docs/Web/API/Screen/colorDepth} property internally, when possible.
* @function
* @returns {number} Returns the current color depth.
*/
CB_Screen.getColorDepth = function()
{
if (screen && screen.colorDepth && !isNaN(screen.colorDepth))
{
CB_Screen._screenColorDepth = screen.colorDepth;
}
return CB_Screen._screenColorDepth;
}
/**
* Gets the current scroll left position (horizontal scroll) of the screen (main window). Uses the {@link CB_Elements.getScrollLeftById} function internally.
* @function
* @returns {number|null} Returns the current scroll left position (horizontal scroll) of the screen (main window). It could return null if something fails.
*/
CB_Screen.getScrollLeft = function()
{
CB_Screen._previousScrollLeft = CB_Screen._scrollLeft;
return CB_Elements.getScrollLeftById
(
window, //elementId
function(scrollLeft, scrollLeftPrevious, scrollWidth, visiblePixels, scrollRelative, scrollRelativePrevious) //onScrollLeftChanges:
{
//If there is any defined function:
if (typeof(CB_Screen._eventsHolder["onScrollLeft"]) === "function")
{
//Sets the new and old positions (just in case the function needs it):
CB_Screen._previousScrollLeft = CB_Screen._scrollLeft;
CB_Screen._scrollLeft = scrollLeft;
//Executes the function:
CB_Screen._eventsHolder["onScrollLeft"]();
}
},
true, //fireFirstTime
false, //fireAlways
null, //timeoutMs
true, //returnNullOnFail
undefined //timeout
);
}
/**
* Gets the current scroll top position (vertical scroll) of the screen (main window). Uses the {@link CB_Elements.getScrollTopById} function internally.
* @function
* @returns {number|null} Returns the current scroll top position (vertical scroll) of the screen (main window). It could return null if something fails.
*/
CB_Screen.getScrollTop = function()
{
CB_Screen._previousScrollTop = CB_Screen._scrollTop;
return CB_Elements.getScrollTopById
(
window, //elementId
function(scrollTop, scrollTopPrevious, scrollHeight, visiblePixels, scrollRelative, scrollRelativePrevious) //onScrollTopChanges:
{
//If there is any defined function:
if (typeof(CB_Screen._eventsHolder["onScrollTop"]) === "function")
{
//Sets the new and old positions (just in case the function needs it):
CB_Screen._previousScrollTop = CB_Screen._scrollTop;
CB_Screen._scrollTop = scrollTop;
//Executes the function:
CB_Screen._eventsHolder["onScrollTop"]();
}
},
true, //fireFirstTime
false, //fireAlways
null, //timeoutMs
true, //returnNullOnFail
undefined //timeout
);
}
/**
* Gets the current zoom level of the screen (main window). Uses [detect-zoom]{@link https://github.com/tombigel/detect-zoom} internally.
* @function
* @returns {number} Returns the current zoom level of the screen (main window). Default zoom level is 1 (one) even when it fails.
* @todo Find a better and more-compatible way to detect zoom which supports as many web clients as possible.
*/
CB_Screen.getZoom = function()
{
//if (typeof(detectZoom) !== "undefined" && detectZoom !== null && detectZoom && typeof(detectZoom.zoom) !== "undefined" && detectZoom.zoom !== null && detectZoom.zoom && typeof(detectZoom.zoom) === "function")
if (typeof(detectZoom) !== "undefined" && detectZoom !== null && typeof(detectZoom.zoom) === "function")
{
CB_Screen._zoom = detectZoom.zoom();
//if (CB_Screen._zoom === null || CB_Screen._zoom === 0 || !CB_Screen._zoom) { CB_Screen._zoom = 1; }
if (!CB_Screen._zoom) { CB_Screen._zoom = 1; }
//} else { CB_Screen._zoom = CB_Screen._previousZoom = 0; }
} else { CB_Screen._zoom = CB_Screen._previousZoom = 1; }
return CB_Screen._zoom;
}
/**
* Gets the previous zoom level of the screen (main window). Useful when the zoom changed. Uses [detect-zoom]{@link https://github.com/tombigel/detect-zoom} internally.
* @function
* @returns {number} Returns the previous zoom level of the screen (main window). Default previous zoom level is 0 (zero) even when it fails.
*/
CB_Screen.getZoomPrevious = function()
{
return CB_Screen._previousZoom;
}
/**
* Gets the current pixel ratio of the screen (main window). Uses [detect-zoom]{@link https://github.com/tombigel/detect-zoom} internally.
* @function
* @returns {number} Returns the current pixel ratio of the screen (main window). Default pixel ratio is 1 (one) even when it fails.
* @todo Find a better and more-compatible way to detect pixel ratio which supports as many web clients as possible.
*/
CB_Screen.getPixelRatio = function()
{
//if (typeof(detectZoom) !== "undefined" && detectZoom !== null && detectZoom && typeof(detectZoom.device) !== "undefined" && detectZoom.device !== null && detectZoom.device && typeof(detectZoom.device) === "function")
if (typeof(detectZoom) !== "undefined" && detectZoom !== null && typeof(detectZoom.device) === "function")
{
CB_Screen._pixelRatio = detectZoom.device();
//} else { CB_Screen._pixelRatio = CB_Screen._previousPixelRatio = 0; }
//if (CB_Screen._pixelRatio === null || CB_Screen._pixelRatio === 0 || !CB_Screen._pixelRatio) { CB_Screen._pixelRatio = 1; }
if (!CB_Screen._pixelRatio) { CB_Screen._pixelRatio = 1; }
} else { CB_Screen._pixelRatio = CB_Screen._previousPixelRatio = 1; }
return CB_Screen._pixelRatio;
}
/**
* Gets the previous pixel ratio of the screen (main window). Useful when the zoom/pixel-ratio changed. Uses [detect-zoom]{@link https://github.com/tombigel/detect-zoom} internally.
* @function
* @returns {number} Returns the previous pixel ratio of the screen (main window). Default previous pixel ratio is 0 (zero) even when it fails.
* @todo Find a better and more-compatible way to detect pixel ratio which supports as many web clients as possible.
*/
CB_Screen.getPixelRatioPrevious = function()
{
return CB_Screen._previousPixelRatio;
}
/**
* Tells whether the screen (main window) is in landscape position.
* @function
* @returns {boolean} Returns whether the screen is in landscape position.
*/
CB_Screen.isLandscape = function()
{
var isLandscape = false;
if (CB_Screen.getWindowWidth() > CB_Screen.getWindowHeight())
{
isLandscape = true;
}
//If it's not the first time and position has been changed, calls the onOrientationChange function (if any):
if (CB_Screen._isLandscape !== null && CB_Screen._isLandscape !== isLandscape)
{
//If there is any defined function:
if (typeof(CB_Screen._eventsHolder["onOrientationChange"]) === "function")
{
//Sets the new position (just in case the function needs it):
CB_Screen._isLandscape = isLandscape;
//Executes the function:
CB_Screen._eventsHolder["onOrientationChange"]();
}
}
//Sets the new position:
CB_Screen._isLandscape = isLandscape;
return CB_Screen._isLandscape;
}
//Sets whether the web is visible (called every time that visibility changes):
CB_Screen._visibilityChanged = function(e)
{
var isVisible = true; //By default is visible.
//if (!e) { e = window.event; }
e = CB_Events.normalize(e);
// if (e.type === "focus" || e.type === "focusin")
{
// isVisible = true;
}
// else if (e.type === "blur" || e.type === "focusout")
{
// isVisible = false;
}
// else
{
var hidden = "";
if (typeof(document.hidden) !== "undefined")
{
hidden = "hidden";
}
else if (typeof(document.mozHidden) !== "undefined")
{
hidden = "mozHidden";
}
else if (typeof document.msHidden !== "undefined")
{
hidden = "msHidden";
}
else if (typeof document.webkitHidden !== "undefined")
{
hidden = "webkitHidden";
}
//if (hidden !== "") { isVisible = document[hidden] ? false : true; }
if (hidden !== "") { isVisible = !document[hidden]; }
}
//Calls the onVisibilityChange function (if any):
if (typeof(CB_Screen._eventsHolder["onVisibilityChange"]) === "function")
{
//Sets the new visibility (just in case the function needs it):
CB_Screen._isVisible = isVisible;
//Executes the function:
CB_Screen._eventsHolder["onVisibilityChange"]();
}
//Sets the new visibility:
CB_Screen._isVisible = isVisible;
}
/**
* Tells whether the main window is visible or not.
* @function
* @returns {boolean} Returns whether the main window is visible or not.
*/
CB_Screen.isVisible = function()
{
return CB_Screen._isVisible;
}
/*
//Called every time that focus is lost:
CB_Screen.focusLost = function()
{
//Focus has not been recovered (yet):
CB_Screen.focusRecovered = false;
//If focus is not recovered, set as not focused:
setTimeout(
function()
{
if (!CB_Screen.focusRecovered)
{
CB_Screen._focusChanged(false);
}
}, 500);
return;
}
*/
//Sets whether the web is focused (called every time that focus changes):
CB_Screen._focusChanged = function(isFocused)
{
//If is focused, the focus has been recovered:
//if (isFocused) { CB_Screen.focusRecovered = true; }
//Calls the onFocusChange function (if any):
if (typeof(CB_Screen._eventsHolder["onFocusChange"]) === "function")
{
//Sets whether is focused or not (just in case the function needs it):
CB_Screen._isFocused = isFocused;
//Executes the function:
CB_Screen._eventsHolder["onFocusChange"]();
}
//Sets whether is focused or not:
CB_Screen._isFocused = isFocused;
}
/**
* Tells whether the main window is focused or not.
* @function
* @returns {boolean} Returns whether the main window is focused or not.
*/
CB_Screen.isFocused = function()
{
return CB_Screen._isFocused;
}
/**
* Sets the focus to the main window (if possible).
* @function
*/
CB_Screen.focus = function()
{
//try { CB_Client.getWindow(true).focus(); } catch(E) {}
CB_Client.getWindow(false).focus();
}
/**
* Sets a function to execute when the left scroll position (horizontal scroll) is changed in the screen (main window) or removes it.
* @function
* @param {function|null} callbackFunction - The function (event listener) that we want to execute when the event is fired, with no parameters. If a null value is used, the event will be removed.
* @param {boolean} [keepOldFunction=true] - Defines whether we want to keep any possible previous event listener for the same target and event name or not.
*/
CB_Screen.onScrollLeft = function(callbackFunction, keepOldFunction)
{
return CB_Screen._setSpecialEventFunction("onScrollLeft", callbackFunction, keepOldFunction);
}
/**
* Sets a function to execute when the top scroll position (vertical scroll) is changed in the screen (main window) or removes it.
* @function
* @param {function|null} callbackFunction - The function (event listener) that we want to execute when the event is fired, with no parameters. If a null value is used, the event will be removed.
* @param {boolean} [keepOldFunction=true] - Defines whether we want to keep any possible previous event listener for the same target and event name or not.
*/
CB_Screen.onScrollTop = function(callbackFunction, keepOldFunction)
{
return CB_Screen._setSpecialEventFunction("onScrollTop", callbackFunction, keepOldFunction);
}
/**
* Sets a function to execute when the screen (main window) orientation is changed (portrait or landscape) or removes it.
* @function
* @param {function|null} callbackFunction - The function (event listener) that we want to execute when the event is fired, with no parameters. If a null value is used, the event will be removed.
* @param {boolean} [keepOldFunction=true] - Defines whether we want to keep any possible previous event listener for the same target and event name or not.
*/
CB_Screen.onOrientationChange = function(callbackFunction, keepOldFunction)
{
return CB_Screen._setSpecialEventFunction("onOrientationChange", callbackFunction, keepOldFunction);
}
/**
* Sets a function to execute when the screen (main window) visibility is changed or removes it.
* @function
* @param {function|null} callbackFunction - The function (event listener) that we want to execute when the event is fired, with no parameters. If a null value is used, the event will be removed.
* @param {boolean} [keepOldFunction=true] - Defines whether we want to keep any possible previous event listener for the same target and event name or not.
*/
CB_Screen.onVisibilityChange = function(callbackFunction, keepOldFunction)
{
return CB_Screen._setSpecialEventFunction("onVisibilityChange", callbackFunction, keepOldFunction);
}
/**
* Sets a function to execute when the screen (main window) focus is changed or removes it.
* @function
* @param {function|null} callbackFunction - The function (event listener) that we want to execute when the event is fired, with no parameters. If a null value is used, the event will be removed.
* @param {boolean} [keepOldFunction=true] - Defines whether we want to keep any possible previous event listener for the same target and event name or not.
*/
CB_Screen.onFocusChange = function(callbackFunction, keepOldFunction)
{
return CB_Screen._setSpecialEventFunction("onFocusChange", callbackFunction, keepOldFunction);
}
/**
* Sets a function to execute when the screen (main window) is resized ([onResize]{@link https://developer.mozilla.org/en-US/docs/Web/Events/resize} event) or removes it.
* @function
* @param {function|null} callbackFunction - The function (event listener) that we want to execute when the event is fired, with no parameters. If a null value is used, the event will be removed.
* @param {boolean} [keepOldFunction=true] - Defines whether we want to keep any possible previous event listener for the same target and event name or not.
*/
CB_Screen.onResize = function(callbackFunction, keepOldFunction, useCapture)
{
//If they are not set, use default values for optional parameters:
if (typeof(keepOldFunction) === "undefined" || keepOldFunction === null) { keepOldFunction = true; } //If not set, it keeps old function by default.
//If a function has been sent:
if (typeof(callbackFunction) === "function")
{
//If able, adds the function given to the event:
var functionToAdd =
function()
{
CB_Screen.init(); //Updates screen properties.
if (typeof(callbackFunction) === "function") { return callbackFunction(); }
return true;
};
///////CB_Screen._eventsHolder["onResize"] = functionToAdd;
CB_Events.add(window, "resize", functionToAdd, useCapture, keepOldFunction, true);
}
//...but if the function given is null, it will cancel the event:
else if (callbackFunction === null)/////// && CB_Screen._eventsHolder["onResize"] !== null)
{
//CB_Events.remove(window, "resize", CB_Screen._eventsHolder["onResize"], useCapture);
CB_Events.removeByName(window, "resize");
////////CB_Screen._eventsHolder["onResize"] = null;
}
}
//Sets a function to execute when window is resized or zoom is applied:
CB_Screen._processOnResizeOrZoomFunction = function()
{
//If there is no function to process, exits:
if (typeof(CB_Screen._eventsHolder["onResizeOrZoom"]) !== "function") { return; }
//If this is the first time, set stored values:
if (CB_Screen._storedScreenWidth === 0) { CB_Screen._storedScreenWidth = CB_Screen.getWidth(); }
if (CB_Screen._storedScreenHeight === 0) { CB_Screen._storedScreenHeight = CB_Screen.getHeight(); }
if (CB_Screen._storedScreenAvailableWidth === 0) { CB_Screen._storedScreenAvailableWidth = CB_Screen.getAvailableWidth(); }
if (CB_Screen._storedScreenAvailableHeight === 0) { CB_Screen._storedScreenAvailableHeight = CB_Screen.getAvailableHeight(); }
if (CB_Screen._storedWindowWidth === 0) { CB_Screen._storedWindowWidth = CB_Screen.getWindowWidth(); }
if (CB_Screen._storedWindowHeight === 0) { CB_Screen._storedWindowHeight = CB_Screen.getWindowHeight(); }
if (CB_Screen._storedZoom === 0) { CB_Screen._storedZoom = CB_Screen.getZoom(); }
if (CB_Screen._storedPixelRatio === 0) { CB_Screen._storedPixelRatio = CB_Screen.getPixelRatio(); }
//If the window has been resized or zoomed, stores the previous values:
var windowResizedOrZoomed = false;
if (CB_Screen._storedWindowWidth !== CB_Screen.getWindowWidth() || CB_Screen._storedWindowHeight !== CB_Screen.getWindowHeight() || CB_Screen._storedZoom !== CB_Screen.getZoom() || CB_Screen._storedPixelRatio !== CB_Screen.getPixelRatio())
{
//Window has been resized or zoomed:
windowResizedOrZoomed = true;
//Stores the previous width and height:
CB_Screen._previousWindowWidth = CB_Screen._storedWindowWidth;
CB_Screen._previousWindowHeight = CB_Screen._storedWindowHeight;
CB_Screen._previousScreenWidth = CB_Screen._storedScreenWidth;
CB_Screen._previousScreenHeight = CB_Screen._storedScreenHeight;
CB_Screen._previousScreenAvailableWidth = CB_Screen._storedScreenAvailableWidth;
CB_Screen._previousScreenAvailableHeight = CB_Screen._storedScreenAvailableHeight;
//If the zoom has been changed, stores the previous zoom and pixel ratio:
if (CB_Screen._storedZoom !== CB_Screen.getZoom() || CB_Screen._storedPixelRatio !== CB_Screen.getPixelRatio())
{
CB_Screen._previousZoom = CB_Screen._storedZoom;
CB_Screen._previousPixelRatio = CB_Screen._storedPixelRatio;
}
//Stores the current window width and height:
CB_Screen._storedScreenWidth = CB_Screen.getWidth();
CB_Screen._storedScreenHeight = CB_Screen.getHeight();
CB_Screen._storedScreenAvailableWidth = CB_Screen.getAvailableWidth();
CB_Screen._storedScreenAvailableHeight = CB_Screen.getAvailableHeight();
CB_Screen._storedWindowWidth = CB_Screen.getWindowWidth();
CB_Screen._storedWindowHeight = CB_Screen.getWindowHeight();
//Stores the current zoom and pixel ratio:
CB_Screen._storedZoom = CB_Screen.getZoom();
CB_Screen._storedPixelRatio = CB_Screen.getPixelRatio();
}
//If the window has been resized or zoomed, executes the function:
if (windowResizedOrZoomed)
{
CB_Screen.init(); //It also refresh CB_Screen properties before calling the function.
CB_Screen._eventsHolder["onResizeOrZoom"](); //Executes the function.
}
}
/**
* Sets a function to execute when the screen (main window) is resized or the zoom is changed, or removes it.
* @function
* @param {function|null} callbackFunction - The function (event listener) that we want to execute when the event is fired, with no parameters. If a null value is used, the event will be removed.
* @param {boolean} [keepOldFunction=true] - Defines whether we want to keep any possible previous event listener for the same target and event name or not.
*/
CB_Screen.onResizeOrZoom = function(onResizeOrZoomFunction, keepOldFunction)
{
return CB_Screen._setSpecialEventFunction("onResizeOrZoom", onResizeOrZoomFunction, keepOldFunction);
}
/**
* Sets a function to execute when full screen mode is changed (enabled or disabled) or removes it.
* @function
* @param {function|null} callbackFunction - The function (event listener) that we want to execute when the event is fired, with no parameters. If a null value is used, the event will be removed.
* @param {boolean} [keepOldFunction=true] - Defines whether we want to keep any possible previous event listener for the same target and event name or not.
*/
CB_Screen.onFullScreenChange = function(onFullScreenChangeFunction, keepOldFunction)
{
return CB_Screen._setSpecialEventFunction("onFullScreenChange", onFullScreenChangeFunction, keepOldFunction);
}
//Sets a function to execute when an event happens (a non-existing event on JavaScript):
CB_Screen._setSpecialEventFunction = function(eventName, eventFunction, keepOldFunction)
{
//If no function has been sent, cancel all previous functions and exits:
if (typeof(eventFunction) !== "function")
{
if (eventFunction === null) { CB_Screen._eventsHolder[eventName] = null; }
return;
}
//If not set, it keeps old function by default:
if (typeof(keepOldFunction) === "undefined" || keepOldFunction === null) { keepOldFunction = true; }
//If we don't want to keep the old function:
if (!keepOldFunction)
{
CB_Screen._eventsHolder[eventName] = eventFunction;
}
//...otherwise if we want to keep the old function, we keep it:
else
{
//Stores old function:
var eventFunctionOld = CB_Screen._eventsHolder[eventName]; //Stores old function of eventFunctionHolder.
CB_Screen._eventsHolder[eventName] =
function() //TODO: remember to use "e" in the case it uses parameters in the future.
{
if (typeof(eventFunctionOld) === "function") { eventFunctionOld(); }
eventFunction();
};
}
}
/**
* Tells whether the web client is compatible with the [FullScreen API]{@link https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API} or not.
* @function
* @returns {boolean} Returns whether the web client is compatible with the [FullScreen API]{@link https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API} or not.
*/
CB_Screen.isFullScreenAPICompatible = function()
{
if (document.documentElement) { element = document.documentElement; }
else { element = document.body; }
var isFullScreenAPICompatible = false;
//Gets the function compatible with Fullscreen API (if any):
var callFullScreen = element.requestFullscreen || element.mozRequestFullScreen || element.webkitRequestFullscreen
|| element.oRequestFullScreen || element.msRequestFullscreen || element.msRequestFullScreen || element.webkitEnterFullScreen
|| element.webkitEnterFullscreen;
if (typeof(callFullScreen) !== "undefined" && callFullScreen) { isFullScreenAPICompatible = true; }
return isFullScreenAPICompatible;
}
/**
* Toggles between full screen and normal mode. Uses the [Fullscreen API]{@link https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API} and fallbacks to other methods internally, including [NW.js (formerly node-webkit)]{@link https://nwjs.io/} and [Electron (Electron.js)]{@link https://electronjs.org/} ones, when not available. Recommended to be called through an event fired by the user as onclick or ontouchstart, etc.
* @function
* @param {boolean} [useFullScreen=true] - If set to true, it will try to enable full screen mode. Otherwise, it will try to enable normal mode.
* @param {Element} [element=document.documentElement|document.body] - Element which we want to use in full screen mode. By default uses the whole document body. Only used when the "useFullScreen" parameter is set to true. If an element is provided, it will use neither [NW.js (formerly node-webkit)]{@link https://nwjs.io/} nor [Electron (Electron.js)]{@link https://electronjs.org/} methods.
* @param {boolean} [allowReload=false] - If set to true and "useFullScreen" is set to true but it fails to enable full screen normally, it will try to reload the entire current document again in a new bigger window. Useful for very old web clients. Only used when the "useFullScreen" parameter is set to true.
*/
CB_Screen.setFullScreen = function(useFullScreen, element, allowReload)
{
var documentBase = CB_Client.getDocumentBase();
//Defines default parameters:
if (typeof(useFullScreen) === "undefined" || useFullScreen === null) { useFullScreen = true; } //By default, full screen mode will be used:
var elementGiven = true; //Tells whether an element was given or not (useful for NW.js and Electron).
if (typeof(element) === "undefined" || element === null)
{
//if (documentBase.documentElement) { element = documentBase.documentElement; }
//else { element = documentBase.body; }
if (document.documentElement) { element = document.documentElement; }
else { element = document.body; }
elementGiven = false;
}
//If we want full screen mode:
if (useFullScreen)
{
var fullScreenApplied = false;
if (!elementGiven)
{
//Tries to use NW.js (node-webkit) if available to enter full screen:
if (CB_Client.isRunningOnNWjs())
{
if (typeof(nw) !== "undefined" && nw !== null && nw.Window && typeof(nw.Window.get) === "function")
{
try
{
var win = nw.Window.get();
if (win !== null)
{
win.enterFullscreen();
fullScreenApplied = win.isFullscreen;
if (!fullScreenApplied)
{
win.enterKioskMode();
fullScreenApplied = win.isKioskMode;
}
}
} catch(E) { fullScreenApplied = false; }
}
if (!fullScreenApplied && typeof(require) === "function")
{
var gui = require("nw.gui");
if (typeof(gui) !== "undefined" && gui !== null && typeof(gui.Window) !== "undefined" && gui.Window !== null && typeof(gui.Window.get) === "function")
{
try
{
var win = gui.Window.get();
if (win !== null)
{
win.enterFullscreen();
fullScreenApplied = win.isFullscreen;
if (!fullScreenApplied)
{
win.enterKioskMode();
fullScreenApplied = win.isKioskMode;
}
}
} catch(E) { fullScreenApplied = false; }
}
}
}
//Tries to use Electron (Electron.js) if available to enter full screen:
if (CB_Client.isRunningOnElectron() && typeof(require) === "function")
{
try
{
fullScreenApplied = require("electron").remote.getCurrentWindow().setFullScreen(true);
}
catch(E)
{
try
{
fullScreenApplied = require("electron").remote.getCurrentWindow().setSimpleFullScreen(true);
}
catch(E) { fullScreenApplied = false; }
}
}
}
if (!fullScreenApplied)
{
//Gets the function compatible with Fullscreen API (if any):
var callFullScreen = element.requestFullscreen || element.mozRequestFullScreen || element.webkitRequestFullscreen
|| element.oRequestFullScreen || element.msRequestFullscreen || element.msRequestFullScreen || element.webkitEnterFullScreen
|| element.webkitEnterFullscreen;
//If there is any function compatible with Fullscreen API, we call it:
if (typeof(callFullScreen) !== "undefined" && callFullScreen)
{
try
{
try { element.fullscreenEnabled = true; } catch (E) { }
if (Element.ALLOW_KEYBOARD_INPUT)
{
var promiseReturned = callFullScreen.call(element, Element.ALLOW_KEYBOARD_INPUT); //For Webkit.
}
else { var promiseReturned = callFullScreen.call(element); }
if (promiseReturned && typeof(promiseReturned.then) === "function")
{
promiseReturned.then
(
//Fullscreen request performed correctly:
function() { fullScreenApplied = true; },
//Fullscreen request failed:
function()
{
//As the full screen mode is still not applied, we try to reload the web in a new window (if allowed):
if (allowReload) { fullScreenApplied = CB_Screen._reloadContentNewFullScreenWindow(); }
else { fullScreenApplied = false; }
}
);
return;
}
else { fullScreenApplied = true; }
} catch(E) { fullScreenApplied = false; }
}
//..otherwise, we try to use ActiveX (if it's not already in full screen):
else if (typeof(window.ActiveXObject) !== "undefined")
{
try
{
var wscript = new ActiveXObject("WScript.Shell");
//If ActiveX object has been created:
if (wscript !== null)
{
//ActiveX object working, so we press the key:
wscript.SendKeys("{F11}");
fullScreenApplied = true;
}
}
//If ActiveX is not enabled or has not been accepted:
catch(E) { fullScreenApplied = false; }
}
}
//If the full screen mode has not been applied, we try to resize the window:
if (!fullScreenApplied)
{
/*
if (typeof(window.fullscreen) !== "undefined")
{
try { window.fullscreen = true; }
catch(E) { }
}
*/
//if (typeof(top.window.outerWidth) !== "undefined" && typeof(screen.availWidth) !== "undefined" && top.window.outerWidth !== null && screen.availWidth !== null)
var screenAvailableWidth = CB_Screen.getAvailableWidth();
if (typeof(top.window.outerWidth) !== "undefined" && top.window.outerWidth !== null && screenAvailableWidth > 0)
{
//top.window.outerWidth = screen.availWidth;
top.window.outerWidth = screenAvailableWidth;
}
//if (typeof(top.window.outerHeight) !== "undefined" && typeof(screen.availHeight) !== "undefined" && top.window.outerHeight !== null && screen.availHeight !== null)
var screenAvailableHeight = CB_Screen.getAvailableHeight()