StructureJS
0.15.2A class based utility library for building modular and scalable web platform applications. Features opt-in classes and utilities which provide a solid foundation and toolset to build your next project.
- import EventDispatcher from '../event/EventDispatcher';
- import BaseEvent from '../event/BaseEvent';
- import Util from '../util/Util';
- /**
- * A helper class to detect OS and browsers.
- *
- * @class BrowserUtil
- * @module StructureJS
- * @submodule util
- * @author Robert S. (www.codeBelt.com)
- * @static
- */
- class BrowserUtil
- {
- /**
- * A reference to the EventDispatcher object.
- *
- * @property _eventDispatcher
- * @type {EventDispatcher}
- * @private
- * @static
- */
- private static _eventDispatcher:EventDispatcher = new EventDispatcher();
- /**
- * A reference to the browser window object.
- *
- * @property _window
- * @type {Window}
- * @private
- * @static
- */
- private static _window:Window = window;
- /**
- * A reference to the getComputedStyle method.
- *
- * @property _styleDeclaration
- * @type {any}
- * @private
- * @static
- */
- private static _styleDeclaration:any = window.getComputedStyle(document.querySelector('body'), ':after');
- /**
- * TODO: YUIDoc_comment
- *
- * @property _onBreakpointChangeHandler
- * @type {any}
- * @private
- * @static
- */
- private static _onBreakpointChangeHandler:any = null;
- /**
- * The delay in milliseconds for the Util.{{#crossLink "Util/debounce:method"}}{{/crossLink}} method that dispatches
- * the BaseEvent.RESIZE event to get the your browser breakpoints. See {{#crossLink "BrowserUtil/getBreakpoint:method"}}{{/crossLink}}.
- *
- * @property debounceDelay
- * @type {number}
- * @default 250
- * @public
- * @static
- */
- public static debounceDelay:number = 250;
- /**
- * The isEnabled property is used to keep track of the enabled state of listening for Breakpoint changes.
- *
- * @property isEnabled
- * @type {boolean}
- * @public
- * @static
- */
- public static isEnabled:boolean = false;
- constructor()
- {
- throw new Error('[BrowserUtil] Do not instantiate the BrowserUtil class because it is a static class.');
- }
- /**
- * Dispatches a breakpoint event.
- *
- * @method enable
- * @public
- * @static
- */
- public static enable():void
- {
- if (BrowserUtil.isEnabled === true)
- {
- return;
- }
- BrowserUtil._onBreakpointChangeHandler = Util.debounce(BrowserUtil._onBreakpointChange, BrowserUtil.debounceDelay, false, BrowserUtil);
- BrowserUtil._window.addEventListener('resize', BrowserUtil._onBreakpointChangeHandler);
- BrowserUtil.isEnabled = true;
- }
- /**
- * @overridden EventDispatcher.disable
- */
- public static disable():void
- {
- if (BrowserUtil.isEnabled === false)
- {
- return;
- }
- BrowserUtil._window.removeEventListener('resize', BrowserUtil._onBreakpointChangeHandler);
- BrowserUtil.isEnabled = false;
- }
- /**
- * Returns the name of the browser.
- *
- * @method browserName
- * @return {string}
- * @public
- * @static
- * @example
- * BrowserUtil.browserName();
- * // 'Chrome'
- */
- public static browserName():string
- {
- return BrowserUtil.getBrowser()[0];
- }
- /**
- * Returns the version of the browser.
- *
- * @method browserVersion
- * @param [majorVersion=true] {boolean}
- * @return {number|string}
- * @public
- * @static
- * @example
- * BrowserUtil.browserVersion();
- * // 39
- *
- * BrowserUtil.browserVersion(false);
- * // '39.0.2171.99'
- */
- public static browserVersion(majorVersion:boolean = true):any
- {
- const version:string = BrowserUtil.getBrowser()[1];
- if (majorVersion === true)
- {
- return parseInt(version, 10);
- }
- else
- {
- return version;
- }
- }
- /**
- * Gets the browser name a user agent.
- *
- * @method getBrowser
- * @public
- * @return {Array.<string>}
- * @static
- * @example
- * BrowserUtil.getBrowser();
- * // ["Chrome", "39.0.2171.99"]
- */
- public static getBrowser():Array<string>
- {
- const N = navigator.appName;
- const ua = navigator.userAgent;
- const tem = ua.match(/version\/([\.\d]+)/i);
- let M = ua.match(/(opera|chrome|safari|firefox|msie)\/?\s*(\.?\d+(\.\d+)*)/i);
- if (M && tem != null)
- {
- M[2] = tem[1];
- }
- M = M ? [M[1], M[2]] : [N, navigator.appVersion, '-?'];
- return M;
- }
- /**
- * Determines if the device OS is Android.
- *
- * @method isAndroid
- * @returns {boolean}
- * @public
- * @static
- * @example
- * BrowserUtil.isAndroid();
- * // false
- */
- public static isAndroid():boolean
- {
- return !!navigator.userAgent.match(/Android/i);
- }
- /**
- * Determines if the device OS is Android.
- *
- * @method isBlackBerry
- * @returns {boolean}
- * @public
- * @static
- * @example
- * BrowserUtil.isBlackBerry();
- * // false
- */
- public static isBlackBerry():boolean
- {
- return Boolean(!!navigator.userAgent.match(/BlackBerry/i) || navigator.userAgent.match(/BB10; Touch/));
- }
- /**
- * Determines if the device OS is IOS.
- *
- * @method isIOS
- * @returns {boolean}
- * @public
- * @static
- * @example
- * BrowserUtil.isIOS();
- * // false
- */
- public static isIOS():boolean
- {
- return !!navigator.userAgent.match(/iPhone|iPad|iPod/i);
- }
- /**
- * Determines if the device OS is Opera Mini.
- *
- * @method isOperaMini
- * @returns {boolean}
- * @public
- * @static
- * @example
- * BrowserUtil.isOperaMini();
- * // false
- */
- public static isOperaMini():boolean
- {
- return !!navigator.userAgent.match(/Opera Mini/i);
- }
- /**
- * Determines if the device OS is IE Mobile.
- *
- * @method isIEMobile
- * @returns {boolean}
- * @public
- * @static
- * @example
- * BrowserUtil.isIEMobile();
- * // false
- */
- public static isIEMobile():boolean
- {
- return !!navigator.userAgent.match(/IEMobile/i);
- }
- /**
- * Determines if the it is run on a mobile or desktop device.
- *
- * @method isMobile
- * @returns {boolean}
- * @public
- * @static
- * @example
- * BrowserUtil.isMobile();
- * // false
- */
- public static isMobile():boolean
- {
- return (BrowserUtil.isAndroid() || BrowserUtil.isBlackBerry() || BrowserUtil.isIOS() || BrowserUtil.isOperaMini() || BrowserUtil.isIEMobile());
- }
- /**
- * Determines if the browser can you Browser History push states.
- *
- * @method hasBrowserHistory
- * @returns {boolean}
- * @public
- * @static
- * @example
- * BrowserUtil.hasBrowserHistory();
- * // true
- */
- public static hasBrowserHistory():boolean
- {
- return !!(window.history && history.pushState);
- }
- /**
- * Determines if the browser can you Local Storage.
- *
- * @method hasLocalStorage
- * @returns {boolean}
- * @public
- * @static
- * @example
- * BrowserUtil.hasLocalStorage();
- * // true
- */
- public static hasLocalStorage():boolean
- {
- try
- {
- return ('localStorage' in window) && window.localStorage !== null;
- }
- catch (error)
- {
- return false;
- }
- }
- /**
- * Determines if the browser can you Session Storage.
- *
- * @method hasSessionStorage
- * @returns {boolean}
- * @public
- * @static
- * @example
- * BrowserUtil.hasSessionStorage();
- * // true
- */
- public static hasSessionStorage():boolean
- {
- try
- {
- return ('sessionStorage' in window) && window.sessionStorage !== null;
- }
- catch (error)
- {
- return false;
- }
- }
- /**
- * Get the current breakpoint from the style sheets. You must add a body:after property with a specific content
- * in each of your style sheets for this functionality to work.
- *
- * @method getBreakpoint
- * @returns {string} The string value of the current style sheet.
- * @public
- * @static
- * @example
- * // For each of your different style sheets add something like below:
- * // screen_lg.css
- * body:after {
- * content: 'screen_lg'; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; position: absolute; clip: rect(0 0 0 0); overflow: hidden;
- * }
- * // screen_sm.css
- * body:after {
- * content: 'screen_sm'; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; position: absolute; clip: rect(0 0 0 0); overflow: hidden;
- * }
- *
- * BrowserUtil.getBreakpoint();
- * // 'screen_lg'
- *
- * // Add a listener to get notified when the browser is resized:
- * BrowserUtil.addEventListener(BaseEvent.RESIZE, this._onBreakpointChange, this);
- * ...
- * _onBreakpointChange(baseEvent) {
- * console.log(baseEvent.data);
- * // 'screen_sm'
- * }
- */
- public static getBreakpoint()
- {
- return BrowserUtil._styleDeclaration.getPropertyValue('content').replace(/["']/g, '');
- }
- /**
- * TODO: YUIDoc_comment
- *
- * @method addEventListener
- * @public
- * @static
- */
- public static addEventListener(type:string, callback:Function, scope:any, priority:number = 0):void
- {
- BrowserUtil._eventDispatcher.addEventListener(type, callback, scope, priority);
- BrowserUtil.enable();
- }
- /**
- * TODO: YUIDoc_comment
- *
- * @method removeEventListener
- * @public
- * @static
- */
- public static removeEventListener(type:string, callback:Function, scope:any):void
- {
- BrowserUtil._eventDispatcher.removeEventListener(type, callback, scope);
- }
- /**
- * TODO: YUIDoc_comment
- *
- * @method dispatchEvent
- * @public
- * @static
- */
- public static dispatchEvent(type:any, data:any = null):void
- {
- let event:any = type;
- if (typeof event === 'string')
- {
- event = new BaseEvent(type, false, false, data);
- }
- event.target = BrowserUtil;
- event.currentTarget = BrowserUtil;
- BrowserUtil._eventDispatcher.dispatchEvent(event);
- }
- /**
- * Dispatches a breakpoint event.
- *
- * @method _onBreakpointChange
- * @private
- * @static
- */
- private static _onBreakpointChange(event)
- {
- BrowserUtil.dispatchEvent(new BaseEvent(BaseEvent.RESIZE, true, false, BrowserUtil.getBreakpoint()));
- }
- }
- export default BrowserUtil;