docs/source/FeatureDetector.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5   <title>The source code</title>
   6   <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   8   <style type="text/css">
   9     .highlight { display: block; background-color: #ddd; }
  10   </style>
  11   <script type="text/javascript">
  12     function highlight() {
  13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14     }
  15   </script>
  16 </head>
  17 <body onload="prettyPrint(); highlight();">
  18   <pre class="prettyprint lang-js"><span id='Ext-env-FeatureDetector'>/**
  19 </span> * Provides useful information about the current browser features.
  20  * Don't instantiate directly, but use the {@link Ext#features} property instead.
  21  */
  22 Ext.define('Ext.env.FeatureDetector', {
  23
  24     statics: {
  25         defaultTests: {
  26 <span id='Ext-env-FeatureDetector-property-Canvas'>            /**
  27 </span>             * @property {Boolean}
  28              * True if canvas element supported.
  29              */
  30             Canvas: function() {
  31                 var element = this.getTestElement('canvas');
  32                 return !!(element &amp;&amp; element.getContext &amp;&amp; element.getContext('2d'));
  33             },
  34 <span id='Ext-env-FeatureDetector-property-SVG'>            /**
  35 </span>             * @property {Boolean}
  36              * True if SVG supported.
  37              */
  38             SVG: function() {
  39                 var doc = Ext.global.document;
  40
  41                 return !!(doc.createElementNS &amp;&amp; !!doc.createElementNS(&quot;http:/&quot; + &quot;/www.w3.org/2000/svg&quot;, &quot;svg&quot;).createSVGRect);
  42             },
  43 <span id='Ext-env-FeatureDetector-property-VML'>            /**
  44 </span>             * @property {Boolean}
  45              * True if VML supported.
  46              */
  47             VML: function() {
  48                 var element = this.getTestElement(),
  49                     ret = false;
  50
  51                 element.innerHTML = &quot;&lt;!--[if vml]&gt;&lt;br&gt;&lt;br&gt;&lt;![endif]--&gt;&quot;;
  52                 ret = (element.childNodes.length === 2);
  53                 element.innerHTML = &quot;&quot;;
  54
  55                 return ret;
  56             },
  57 <span id='Ext-env-FeatureDetector-property-Touch'>            /**
  58 </span>             * @property {Boolean}
  59              * True if we're in Sencha Touch environment.
  60              */
  61             Touch: function() {
  62                 return ('ontouchstart' in Ext.global) &amp;&amp; !(Ext.platform &amp;&amp; Ext.platform.name.match(/Windows|MacOSX|Linux/));
  63             },
  64 <span id='Ext-env-FeatureDetector-property-Orientation'>            /**
  65 </span>             * @property {Boolean}
  66              * True if orientation API supported.
  67              */
  68             Orientation: function() {
  69                 return ('orientation' in Ext.global);
  70             },
  71 <span id='Ext-env-FeatureDetector-property-Geolocation'>            /**
  72 </span>             * @property {Boolean}
  73              * True if geolocation API supported.
  74              */
  75             Geolocation: function() {
  76                 return !!Ext.global.navigator.geolocation;
  77             },
  78 <span id='Ext-env-FeatureDetector-property-SqlDatabase'>            /**
  79 </span>             * @property {Boolean}
  80              * True if openDatabase API supported.
  81              */
  82             SqlDatabase: function() {
  83                 return !!Ext.global.openDatabase;
  84             },
  85 <span id='Ext-env-FeatureDetector-property-Websockets'>            /**
  86 </span>             * @property {Boolean}
  87              * True if WebSocket API supported.
  88              */
  89             Websockets: function() {
  90                 return 'WebSocket' in Ext.global;
  91             },
  92 <span id='Ext-env-FeatureDetector-property-History'>            /**
  93 </span>             * @property {Boolean}
  94              * True if history.pushState supported.
  95              */
  96             History: function() {
  97                 return !!(Ext.global.history &amp;&amp; Ext.global.history.pushState);
  98             },
  99 <span id='Ext-env-FeatureDetector-property-CSSTransforms'>            /**
 100 </span>             * @property {Boolean}
 101              * True if CSS transforms supported.
 102              */
 103             CSSTransforms: function() {
 104                 return this.isStyleSupported('transform');
 105             },
 106 <span id='Ext-env-FeatureDetector-property-CSS3DTransforms'>            /**
 107 </span>             * @property {Boolean}
 108              * True if CSS 3D transforms supported.
 109              */
 110             CSS3DTransforms: function() {
 111                 return this.has('csstransforms') &amp;&amp; this.isStyleSupported('perspective');
 112             },
 113 <span id='Ext-env-FeatureDetector-property-CSSAnimations'>            /**
 114 </span>             * @property {Boolean}
 115              * True if CSS animations supported.
 116              */
 117             CSSAnimations: function() {
 118                 return this.isStyleSupported('animationName');
 119             },
 120 <span id='Ext-env-FeatureDetector-property-CSSTransitions'>            /**
 121 </span>             * @property {Boolean}
 122              * True if CSS transitions supported.
 123              */
 124             CSSTransitions: function() {
 125                 return this.isStyleSupported('transitionProperty');
 126             },
 127 <span id='Ext-env-FeatureDetector-property-Audio'>            /**
 128 </span>             * @property {Boolean}
 129              * True if audio element supported.
 130              */
 131             Audio: function() {
 132                 return !!this.getTestElement('audio').canPlayType;
 133             },
 134 <span id='Ext-env-FeatureDetector-property-Video'>            /**
 135 </span>             * @property {Boolean}
 136              * True if video element supported.
 137              */
 138             Video: function() {
 139                 return !!this.getTestElement('video').canPlayType;
 140             }
 141         },
 142
 143         stylePrefixes: ['Webkit', 'Moz', 'O', 'ms']
 144     },
 145
 146     constructor: function() {
 147         this.tests = {};
 148
 149         this.testElements = {};
 150
 151         this.registerTests(this.self.defaultTests, true);
 152
 153         return this;
 154     },
 155
 156     has: function(name) {
 157         if (!this.hasTest(name)) {
 158             return false;
 159         }
 160         else if (this.has.hasOwnProperty(name)) {
 161             return this.has[name];
 162         }
 163         else {
 164             return this.getTestResult(name);
 165         }
 166     },
 167
 168     getTestResult: function(name) {
 169         return !!this.getTest(name).call(this);
 170     },
 171
 172     getTestElement: function(tag) {
 173         if (!tag) {
 174             tag = 'div';
 175         }
 176
 177         if (!this.testElements[tag]) {
 178             this.testElements[tag] = Ext.global.document.createElement(tag);
 179         }
 180
 181         return this.testElements[tag];
 182     },
 183
 184     registerTest: function(name, fn, isDefault) {
 185         //&lt;debug&gt;
 186         if (this.hasTest(name)) {
 187             Ext.Error.raise({
 188                 sourceClass: &quot;Ext.env.FeatureDetector&quot;,
 189                 sourceMethod: &quot;registerTest&quot;,
 190                 msg: &quot;Test name &quot; + name + &quot; has already been registered&quot;
 191             });
 192         }
 193         //&lt;debug&gt;
 194
 195         this.tests[name] = fn;
 196
 197         if (isDefault) {
 198             this.has[name] = this.getTestResult(name);
 199         }
 200
 201         return this;
 202     },
 203
 204     registerTests: function(tests, isDefault) {
 205         Ext.Object.each(tests, function(name, fn) {
 206             this.registerTest(name, fn, isDefault);
 207         }, this);
 208
 209         return this;
 210     },
 211
 212     hasTest: function(name) {
 213         return this.tests.hasOwnProperty(name);
 214     },
 215
 216     getTest: function(name) {
 217         //&lt;debug&gt;
 218         if (!this.hasTest(name)) {
 219             Ext.Error.raise({
 220                 sourceClass: &quot;Ext.env.FeatureDetector&quot;,
 221                 sourceMethod: &quot;getTest&quot;,
 222                 msg: &quot;Test name &quot; + name + &quot; does not exist&quot;
 223             });
 224         }
 225         //&lt;debug&gt;
 226
 227         return this.tests[name];
 228     },
 229
 230     getTests: function() {
 231         return this.tests;
 232     },
 233
 234     isStyleSupported: function(name, tag) {
 235         var elementStyle = this.getTestElement(tag).style,
 236             cName = Ext.String.capitalize(name),
 237             i = this.self.stylePrefixes.length;
 238
 239         if (elementStyle[name] !== undefined) {
 240             return true;
 241         }
 242
 243         while (i--) {
 244             if (elementStyle[this.self.stylePrefixes[i] + cName] !== undefined) {
 245                 return true;
 246             }
 247         }
 248
 249         return false;
 250     },
 251
 252     isEventSupported: function(name, tag) {
 253         var element = this.getTestElement(tag),
 254             eventName = 'on' + name,
 255             isSupported = false;
 256
 257         // When using `setAttribute`, IE skips &quot;unload&quot;, WebKit skips
 258         // &quot;unload&quot; and &quot;resize&quot;, whereas `in` &quot;catches&quot; those
 259         isSupported = (eventName in element);
 260
 261         if (!isSupported) {
 262             if (element.setAttribute &amp;&amp; element.removeAttribute) {
 263                 element.setAttribute(eventName, '');
 264                 isSupported = typeof element[eventName] === 'function';
 265
 266                 // If property was created, &quot;remove it&quot; (by setting value to `undefined`)
 267                 if (typeof element[eventName] !== 'undefined') {
 268                     element[eventName] = undefined;
 269                 }
 270
 271                 element.removeAttribute(eventName);
 272             }
 273         }
 274
 275         return isSupported;
 276     }
 277
 278 }, function() {
 279
 280 <span id='Ext-property-features'>    /**
 281 </span>     * @property {Ext.env.FeatureDetector} features
 282      * @member Ext
 283      * Global convenient instance of {@link Ext.env.FeatureDetector}.
 284      */
 285     Ext.features = new Ext.env.FeatureDetector();
 286
 287 });
 288 </pre>
 289 </body>
 290 </html>