diff --git a/src/util/Ticker.js b/src/util/Ticker.js index be725f90..f163e9bb 100644 --- a/src/util/Ticker.js +++ b/src/util/Ticker.js @@ -10,7 +10,7 @@ * @param {Number} fps The fps of ticker. * @module hilo/util/Ticker * @requires hilo/core/Class - * @requires hilo/core/Hilo + * @requires hilo/util/browser */ /** * @language=zh @@ -18,7 +18,7 @@ * @param {Number} fps 指定定时器的运行帧率。 * @module hilo/util/Ticker * @requires hilo/core/Class - * @requires hilo/core/Hilo + * @requires hilo/util/browser */ var Ticker = Class.create(/** @lends Ticker.prototype */{ constructor: function(fps){ @@ -53,7 +53,7 @@ var Ticker = Class.create(/** @lends Ticker.prototype */{ var self = this, interval = this._interval, raf = window.requestAnimationFrame || - window[Hilo.browser.jsVendor + 'RequestAnimationFrame']; + window[browser.jsVendor + 'RequestAnimationFrame']; var runLoop; if(useRAF && raf && interval < 17){ @@ -84,7 +84,7 @@ var Ticker = Class.create(/** @lends Ticker.prototype */{ stop: function(){ if(this._useRAF){ var cancelRAF = window.cancelAnimationFrame || - window[Hilo.browser.jsVendor + 'CancelAnimationFrame']; + window[browser.jsVendor + 'CancelAnimationFrame']; cancelRAF(this._intervalId); } else{ diff --git a/src/util/browser.js b/src/util/browser.js new file mode 100644 index 00000000..fbc1e235 --- /dev/null +++ b/src/util/browser.js @@ -0,0 +1,168 @@ +/** + * Hilo + * Copyright 2015 alibaba.com + * Licensed under the MIT License + */ + +/** + * @language=en + * @class Browser feature set + * @static + * @module hilo/util/browser + */ +/** + * @language=zh + * @class 浏览器特性集合 + * @static + * @module hilo/util/browser + */ +var browser = (function(){ + var ua = navigator.userAgent; + var doc = document; + var win = window; + var docElem = doc.documentElement; + + var data = /** @lends browser */ { + /** + * 是否是iphone + * @type {Boolean} + */ + iphone: /iphone/i.test(ua), + + /** + * 是否是ipad + * @type {Boolean} + */ + ipad: /ipad/i.test(ua), + + /** + * 是否是ipod + * @type {Boolean} + */ + ipod: /ipod/i.test(ua), + + /** + * 是否是ios + * @type {Boolean} + */ + ios: /iphone|ipad|ipod/i.test(ua), + + /** + * 是否是android + * @type {Boolean} + */ + android: /android/i.test(ua), + + /** + * 是否是webkit + * @type {Boolean} + */ + webkit: /webkit/i.test(ua), + + /** + * 是否是chrome + * @type {Boolean} + */ + chrome: /chrome/i.test(ua), + + /** + * 是否是safari + * @type {Boolean} + */ + safari: /safari/i.test(ua), + + /** + * 是否是firefox + * @type {Boolean} + */ + firefox: /firefox/i.test(ua), + + /** + * 是否是ie + * @type {Boolean} + */ + ie: /msie/i.test(ua), + + /** + * 是否是opera + * @type {Boolean} + */ + opera: /opera/i.test(ua), + /** + * 是否支持触碰事件。 + * @type {String} + */ + supportTouch: 'ontouchstart' in win, + + /** + * 是否支持canvas元素。 + * @type {Boolean} + */ + supportCanvas: doc.createElement('canvas').getContext != null, + /** + * 是否支持本地存储localStorage。 + * @type {Boolean} + */ + supportStorage: false, + + /** + * 是否支持检测设备方向orientation。 + * @type {Boolean} + */ + supportOrientation: 'orientation' in win, + + /** + * 是否支持检测加速度devicemotion。 + * @type {Boolean} + */ + supportDeviceMotion: 'ondevicemotion' in win + }; + + //`localStorage` is null or `localStorage.setItem` throws error in some cases (e.g. localStorage is disabled) + try{ + var value = 'hilo'; + localStorage.setItem(value, value); + localStorage.removeItem(value); + data.supportStorage = true; + }catch(e){} + + /** + * 浏览器厂商CSS前缀的js值。比如:webkit。 + * @type {String} + */ + var jsVendor = data.jsVendor = data.webkit ? 'webkit' : data.firefox ? 'webkit' : data.opera ? 'o' : data.ie ? 'ms' : ''; + /** + * 浏览器厂商CSS前缀的css值。比如:-webkit-。 + * @type {String} + */ + var cssVendor = data.cssVendor = '-' + jsVendor + '-'; + + //css transform/3d feature dectection + var testElem = doc.createElement('div'), style = testElem.style; + /** + * 是否支持CSS Transform变换。 + * @type {Boolean} + */ + var supportTransform = style[jsVendor + 'Transform'] != undefined; + + /** + * 是否支持CSS Transform 3D变换。 + * @type {Boolean} + */ + var supportTransform3D = style[jsVendor + 'Perspective'] != undefined; + if(supportTransform3D){ + testElem.id = 'test3d'; + style = doc.createElement('style'); + style.textContent = '@media ('+ cssVendor +'transform-3d){#test3d{height:3px}}'; + doc.head.appendChild(style); + + docElem.appendChild(testElem); + supportTransform3D = testElem.offsetHeight == 3; + doc.head.removeChild(style); + docElem.removeChild(testElem); + } + data.supportTransform = supportTransform; + data.supportTransform3D = supportTransform3D; + + return data; +})(); \ No newline at end of file diff --git a/src/view/CacheMixin.js b/src/view/CacheMixin.js index d2059620..eca1b215 100644 --- a/src/view/CacheMixin.js +++ b/src/view/CacheMixin.js @@ -11,8 +11,8 @@ var _cacheCanvas, _cacheContext; * @static * @mixin * @module hilo/view/CacheMixin - * @requires hilo/core/Hilo * @requires hilo/view/Drawable + * @requires hilo/util/browser */ /** * @language=zh @@ -20,8 +20,8 @@ var _cacheCanvas, _cacheContext; * @static * @mixin * @module hilo/view/CacheMixin - * @requires hilo/core/Hilo * @requires hilo/view/Drawable + * @requires hilo/util/browser */ var CacheMixin = /** @lends CacheMixin# */ { _cacheDirty:true, @@ -49,7 +49,7 @@ var CacheMixin = /** @lends CacheMixin# */ { * 更新缓存 */ updateCache:function(){ - if(Hilo.browser.supportCanvas){ + if(browser.supportCanvas){ if(!_cacheCanvas){ _cacheCanvas = document.createElement('canvas'); _cacheContext = _cacheCanvas.getContext('2d'); diff --git a/src/view/Stage.js b/src/view/Stage.js index 1274b848..96a10b8c 100644 --- a/src/view/Stage.js +++ b/src/view/Stage.js @@ -33,6 +33,7 @@ * @requires hilo/renderer/CanvasRenderer * @requires hilo/renderer/DOMRenderer * @requires hilo/renderer/WebGLRenderer + * @requires hilo/util/browser * @property {HTMLCanvasElement|HTMLElement} canvas The canvas the Stage is related to. It can be a canvas or a div element, readonly! * @property {Renderer} renderer Stage renderer, readonly! * @property {Boolean} paused Paused Stage rendering. @@ -67,6 +68,7 @@ * @requires hilo/renderer/CanvasRenderer * @requires hilo/renderer/DOMRenderer * @requires hilo/renderer/WebGLRenderer + * @requires hilo/util/browser * @property {HTMLCanvasElement|HTMLElement} canvas 舞台所对应的画布。它可以是一个canvas或一个普通的div。只读属性。 * @property {Renderer} renderer 舞台渲染器。只读属性。 * @property {Boolean} paused 指示舞台是否暂停刷新渲染。 @@ -281,7 +283,7 @@ var Stage = Class.create(/** @lends Stage.prototype */{ } //fix android: `touchmove` fires only once - if(Hilo.browser.android && type === 'touchmove'){ + if(browser.android && type === 'touchmove'){ e.preventDefault(); } },