Support.html
24.6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The source code</title>
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
<style type="text/css">
.highlight { display: block; background-color: #ddd; }
</style>
<script type="text/javascript">
function highlight() {
document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
}
</script>
</head>
<body onload="prettyPrint(); highlight();">
<pre class="prettyprint lang-js"><span id='Ext-is'>/**
</span> * @class Ext.is
*
* Determines information about the current platform the application is running on.
*
* @singleton
*/
Ext.is = {
init : function(navigator) {
var platforms = this.platforms,
ln = platforms.length,
i, platform;
navigator = navigator || window.navigator;
for (i = 0; i < ln; i++) {
platform = platforms[i];
this[platform.identity] = platform.regex.test(navigator[platform.property]);
}
<span id='Ext-is-property-Desktop'> /**
</span> * @property Desktop True if the browser is running on a desktop machine
* @type {Boolean}
*/
this.Desktop = this.Mac || this.Windows || (this.Linux && !this.Android);
<span id='Ext-is-property-Tablet'> /**
</span> * @property Tablet True if the browser is running on a tablet (iPad)
*/
this.Tablet = this.iPad;
<span id='Ext-is-property-Phone'> /**
</span> * @property Phone True if the browser is running on a phone.
* @type {Boolean}
*/
this.Phone = !this.Desktop && !this.Tablet;
<span id='Ext-is-property-iOS'> /**
</span> * @property iOS True if the browser is running on iOS
* @type {Boolean}
*/
this.iOS = this.iPhone || this.iPad || this.iPod;
<span id='Ext-is-property-Standalone'> /**
</span> * @property Standalone Detects when application has been saved to homescreen.
* @type {Boolean}
*/
this.Standalone = !!window.navigator.standalone;
},
<span id='Ext-is-property-iPhone'> /**
</span> * @property iPhone True when the browser is running on a iPhone
* @type {Boolean}
*/
platforms: [{
property: 'platform',
regex: /iPhone/i,
identity: 'iPhone'
},
<span id='Ext-is-property-iPod'> /**
</span> * @property iPod True when the browser is running on a iPod
* @type {Boolean}
*/
{
property: 'platform',
regex: /iPod/i,
identity: 'iPod'
},
<span id='Ext-is-property-iPad'> /**
</span> * @property iPad True when the browser is running on a iPad
* @type {Boolean}
*/
{
property: 'userAgent',
regex: /iPad/i,
identity: 'iPad'
},
<span id='Ext-is-property-Blackberry'> /**
</span> * @property Blackberry True when the browser is running on a Blackberry
* @type {Boolean}
*/
{
property: 'userAgent',
regex: /Blackberry/i,
identity: 'Blackberry'
},
<span id='Ext-is-property-Android'> /**
</span> * @property Android True when the browser is running on an Android device
* @type {Boolean}
*/
{
property: 'userAgent',
regex: /Android/i,
identity: 'Android'
},
<span id='Ext-is-property-Mac'> /**
</span> * @property Mac True when the browser is running on a Mac
* @type {Boolean}
*/
{
property: 'platform',
regex: /Mac/i,
identity: 'Mac'
},
<span id='Ext-is-property-Windows'> /**
</span> * @property Windows True when the browser is running on Windows
* @type {Boolean}
*/
{
property: 'platform',
regex: /Win/i,
identity: 'Windows'
},
<span id='Ext-is-property-Linux'> /**
</span> * @property Linux True when the browser is running on Linux
* @type {Boolean}
*/
{
property: 'platform',
regex: /Linux/i,
identity: 'Linux'
}]
};
Ext.is.init();
<span id='Ext-supports'>/**
</span> * @class Ext.supports
*
* Determines information about features are supported in the current environment
*
* @singleton
*/
(function(){
// this is a local copy of certain logic from (Abstract)Element.getStyle
// to break a dependancy between the supports mechanism and Element
// use this instead of element references to check for styling info
var getStyle = function(element, styleName){
var view = element.ownerDocument.defaultView,
style = (view ? view.getComputedStyle(element, null) : element.currentStyle) || element.style;
return style[styleName];
};
Ext.supports = {
<span id='Ext-supports-method-init'> /**
</span> * Runs feature detection routines and sets the various flags. This is called when
* the scripts loads (very early) and again at {@link Ext#onReady}. Some detections
* are flagged as `early` and run immediately. Others that require the document body
* will not run until ready.
*
* Each test is run only once, so calling this method from an onReady function is safe
* and ensures that all flags have been set.
* @markdown
* @private
*/
init : function() {
var me = this,
doc = document,
tests = me.tests,
n = tests.length,
div = n && Ext.isReady && doc.createElement('div'),
test, notRun = [];
if (div) {
div.innerHTML = [
'<div style="height:30px;width:50px;">',
'<div style="height:20px;width:20px;"></div>',
'</div>',
'<div style="width: 200px; height: 200px; position: relative; padding: 5px;">',
'<div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></div>',
'</div>',
'<div style="position: absolute; left: 10%; top: 10%;"></div>',
'<div style="float:left; background-color:transparent;"></div>'
].join('');
doc.body.appendChild(div);
}
while (n--) {
test = tests[n];
if (div || test.early) {
me[test.identity] = test.fn.call(me, doc, div);
} else {
notRun.push(test);
}
}
if (div) {
doc.body.removeChild(div);
}
me.tests = notRun;
},
<span id='Ext-supports-property-PointerEvents'> /**
</span> * @property PointerEvents True if document environment supports the CSS3 pointer-events style.
* @type {Boolean}
*/
PointerEvents: 'pointerEvents' in document.documentElement.style,
<span id='Ext-supports-property-CSS3BoxShadow'> /**
</span> * @property CSS3BoxShadow True if document environment supports the CSS3 box-shadow style.
* @type {Boolean}
*/
CSS3BoxShadow: 'boxShadow' in document.documentElement.style || 'WebkitBoxShadow' in document.documentElement.style || 'MozBoxShadow' in document.documentElement.style,
<span id='Ext-supports-property-ClassList'> /**
</span> * @property ClassList True if document environment supports the HTML5 classList API.
* @type {Boolean}
*/
ClassList: !!document.documentElement.classList,
<span id='Ext-supports-property-OrientationChange'> /**
</span> * @property OrientationChange True if the device supports orientation change
* @type {Boolean}
*/
OrientationChange: ((typeof window.orientation != 'undefined') && ('onorientationchange' in window)),
<span id='Ext-supports-property-DeviceMotion'> /**
</span> * @property DeviceMotion True if the device supports device motion (acceleration and rotation rate)
* @type {Boolean}
*/
DeviceMotion: ('ondevicemotion' in window),
<span id='Ext-supports-property-Touch'> /**
</span> * @property Touch True if the device supports touch
* @type {Boolean}
*/
// is.Desktop is needed due to the bug in Chrome 5.0.375, Safari 3.1.2
// and Safari 4.0 (they all have 'ontouchstart' in the window object).
Touch: ('ontouchstart' in window) && (!Ext.is.Desktop),
<span id='Ext-supports-property-TimeoutActualLateness'> /**
</span> * @property TimeoutActualLateness True if the browser passes the "actualLateness" parameter to
* setTimeout. See: https://developer.mozilla.org/en/DOM/window.setTimeout
* @type {Boolean}
*/
TimeoutActualLateness: (function(){
setTimeout(function(){
Ext.supports.TimeoutActualLateness = arguments.length !== 0;
}, 0);
}()),
tests: [
<span id='Ext-supports-property-Transitions'> /**
</span> * @property Transitions True if the device supports CSS3 Transitions
* @type {Boolean}
*/
{
identity: 'Transitions',
fn: function(doc, div) {
var prefix = [
'webkit',
'Moz',
'o',
'ms',
'khtml'
],
TE = 'TransitionEnd',
transitionEndName = [
prefix[0] + TE,
'transitionend', //Moz bucks the prefixing convention
prefix[2] + TE,
prefix[3] + TE,
prefix[4] + TE
],
ln = prefix.length,
i = 0,
out = false;
for (; i < ln; i++) {
if (getStyle(div, prefix[i] + "TransitionProperty")) {
Ext.supports.CSS3Prefix = prefix[i];
Ext.supports.CSS3TransitionEnd = transitionEndName[i];
out = true;
break;
}
}
return out;
}
},
<span id='Ext-supports-property-RightMargin'> /**
</span> * @property RightMargin True if the device supports right margin.
* See https://bugs.webkit.org/show_bug.cgi?id=13343 for why this is needed.
* @type {Boolean}
*/
{
identity: 'RightMargin',
fn: function(doc, div) {
var view = doc.defaultView;
return !(view && view.getComputedStyle(div.firstChild.firstChild, null).marginRight != '0px');
}
},
<span id='Ext-supports-property-DisplayChangeInputSelectionBug'> /**
</span> * @property DisplayChangeInputSelectionBug True if INPUT elements lose their
* selection when their display style is changed. Essentially, if a text input
* has focus and its display style is changed, the I-beam disappears.
*
* This bug is encountered due to the work around in place for the {@link #RightMargin}
* bug. This has been observed in Safari 4.0.4 and older, and appears to be fixed
* in Safari 5. It's not clear if Safari 4.1 has the bug, but it has the same WebKit
* version number as Safari 5 (according to http://unixpapa.com/js/gecko.html).
*/
{
identity: 'DisplayChangeInputSelectionBug',
early: true,
fn: function() {
var webKitVersion = Ext.webKitVersion;
// WebKit but older than Safari 5 or Chrome 6:
return 0 < webKitVersion && webKitVersion < 533;
}
},
<span id='Ext-supports-property-DisplayChangeTextAreaSelectionBug'> /**
</span> * @property DisplayChangeTextAreaSelectionBug True if TEXTAREA elements lose their
* selection when their display style is changed. Essentially, if a text area has
* focus and its display style is changed, the I-beam disappears.
*
* This bug is encountered due to the work around in place for the {@link #RightMargin}
* bug. This has been observed in Chrome 10 and Safari 5 and older, and appears to
* be fixed in Chrome 11.
*/
{
identity: 'DisplayChangeTextAreaSelectionBug',
early: true,
fn: function() {
var webKitVersion = Ext.webKitVersion;
/*
Has bug w/textarea:
(Chrome) Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_7; en-US)
AppleWebKit/534.16 (KHTML, like Gecko) Chrome/10.0.648.127
Safari/534.16
(Safari) Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_7; en-us)
AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5
Safari/533.21.1
No bug:
(Chrome) Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_7)
AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.57
Safari/534.24
*/
return 0 < webKitVersion && webKitVersion < 534.24;
}
},
<span id='Ext-supports-property-TransparentColor'> /**
</span> * @property TransparentColor True if the device supports transparent color
* @type {Boolean}
*/
{
identity: 'TransparentColor',
fn: function(doc, div, view) {
view = doc.defaultView;
return !(view && view.getComputedStyle(div.lastChild, null).backgroundColor != 'transparent');
}
},
<span id='Ext-supports-property-ComputedStyle'> /**
</span> * @property ComputedStyle True if the browser supports document.defaultView.getComputedStyle()
* @type {Boolean}
*/
{
identity: 'ComputedStyle',
fn: function(doc, div, view) {
view = doc.defaultView;
return view && view.getComputedStyle;
}
},
<span id='Ext-supports-property-Svg'> /**
</span> * @property Svg True if the device supports SVG
* @type {Boolean}
*/
{
identity: 'Svg',
fn: function(doc) {
return !!doc.createElementNS && !!doc.createElementNS( "http:/" + "/www.w3.org/2000/svg", "svg").createSVGRect;
}
},
<span id='Ext-supports-property-Canvas'> /**
</span> * @property Canvas True if the device supports Canvas
* @type {Boolean}
*/
{
identity: 'Canvas',
fn: function(doc) {
return !!doc.createElement('canvas').getContext;
}
},
<span id='Ext-supports-property-Vml'> /**
</span> * @property Vml True if the device supports VML
* @type {Boolean}
*/
{
identity: 'Vml',
fn: function(doc) {
var d = doc.createElement("div");
d.innerHTML = "<!--[if vml]><br/><br/><![endif]-->";
return (d.childNodes.length == 2);
}
},
<span id='Ext-supports-property-Float'> /**
</span> * @property Float True if the device supports CSS float
* @type {Boolean}
*/
{
identity: 'Float',
fn: function(doc, div) {
return !!div.lastChild.style.cssFloat;
}
},
<span id='Ext-supports-property-AudioTag'> /**
</span> * @property AudioTag True if the device supports the HTML5 audio tag
* @type {Boolean}
*/
{
identity: 'AudioTag',
fn: function(doc) {
return !!doc.createElement('audio').canPlayType;
}
},
<span id='Ext-supports-property-History'> /**
</span> * @property History True if the device supports HTML5 history
* @type {Boolean}
*/
{
identity: 'History',
fn: function() {
var history = window.history;
return !!(history && history.pushState);
}
},
<span id='Ext-supports-property-CSS3DTransform'> /**
</span> * @property CSS3DTransform True if the device supports CSS3DTransform
* @type {Boolean}
*/
{
identity: 'CSS3DTransform',
fn: function() {
return (typeof WebKitCSSMatrix != 'undefined' && new WebKitCSSMatrix().hasOwnProperty('m41'));
}
},
<span id='Ext-supports-property-CSS3LinearGradient'> /**
</span> * @property CSS3LinearGradient True if the device supports CSS3 linear gradients
* @type {Boolean}
*/
{
identity: 'CSS3LinearGradient',
fn: function(doc, div) {
var property = 'background-image:',
webkit = '-webkit-gradient(linear, left top, right bottom, from(black), to(white))',
w3c = 'linear-gradient(left top, black, white)',
moz = '-moz-' + w3c,
opera = '-o-' + w3c,
options = [property + webkit, property + w3c, property + moz, property + opera];
div.style.cssText = options.join(';');
return ("" + div.style.backgroundImage).indexOf('gradient') !== -1;
}
},
<span id='Ext-supports-property-CSS3BorderRadius'> /**
</span> * @property CSS3BorderRadius True if the device supports CSS3 border radius
* @type {Boolean}
*/
{
identity: 'CSS3BorderRadius',
fn: function(doc, div) {
var domPrefixes = ['borderRadius', 'BorderRadius', 'MozBorderRadius', 'WebkitBorderRadius', 'OBorderRadius', 'KhtmlBorderRadius'],
pass = false,
i;
for (i = 0; i < domPrefixes.length; i++) {
if (document.body.style[domPrefixes[i]] !== undefined) {
return true;
}
}
return pass;
}
},
<span id='Ext-supports-property-GeoLocation'> /**
</span> * @property GeoLocation True if the device supports GeoLocation
* @type {Boolean}
*/
{
identity: 'GeoLocation',
fn: function() {
return (typeof navigator != 'undefined' && typeof navigator.geolocation != 'undefined') || (typeof google != 'undefined' && typeof google.gears != 'undefined');
}
},
<span id='Ext-supports-property-MouseEnterLeave'> /**
</span> * @property MouseEnterLeave True if the browser supports mouseenter and mouseleave events
* @type {Boolean}
*/
{
identity: 'MouseEnterLeave',
fn: function(doc, div){
return ('onmouseenter' in div && 'onmouseleave' in div);
}
},
<span id='Ext-supports-property-MouseWheel'> /**
</span> * @property MouseWheel True if the browser supports the mousewheel event
* @type {Boolean}
*/
{
identity: 'MouseWheel',
fn: function(doc, div) {
return ('onmousewheel' in div);
}
},
<span id='Ext-supports-property-Opacity'> /**
</span> * @property Opacity True if the browser supports normal css opacity
* @type {Boolean}
*/
{
identity: 'Opacity',
fn: function(doc, div){
// Not a strict equal comparison in case opacity can be converted to a number.
if (Ext.isIE6 || Ext.isIE7 || Ext.isIE8) {
return false;
}
div.firstChild.style.cssText = 'opacity:0.73';
return div.firstChild.style.opacity == '0.73';
}
},
<span id='Ext-supports-property-Placeholder'> /**
</span> * @property Placeholder True if the browser supports the HTML5 placeholder attribute on inputs
* @type {Boolean}
*/
{
identity: 'Placeholder',
fn: function(doc) {
return 'placeholder' in doc.createElement('input');
}
},
<span id='Ext-supports-property-Direct2DBug'> /**
</span> * @property Direct2DBug True if when asking for an element's dimension via offsetWidth or offsetHeight,
* getBoundingClientRect, etc. the browser returns the subpixel width rounded to the nearest pixel.
* @type {Boolean}
*/
{
identity: 'Direct2DBug',
fn: function() {
return Ext.isString(document.body.style.msTransformOrigin);
}
},
<span id='Ext-supports-property-BoundingClientRect'> /**
</span> * @property BoundingClientRect True if the browser supports the getBoundingClientRect method on elements
* @type {Boolean}
*/
{
identity: 'BoundingClientRect',
fn: function(doc, div) {
return Ext.isFunction(div.getBoundingClientRect);
}
},
{
identity: 'IncludePaddingInWidthCalculation',
fn: function(doc, div){
return div.childNodes[1].firstChild.offsetWidth == 210;
}
},
{
identity: 'IncludePaddingInHeightCalculation',
fn: function(doc, div){
return div.childNodes[1].firstChild.offsetHeight == 210;
}
},
<span id='Ext-supports-property-ArraySort'> /**
</span> * @property ArraySort True if the Array sort native method isn't bugged.
* @type {Boolean}
*/
{
identity: 'ArraySort',
fn: function() {
var a = [1,2,3,4,5].sort(function(){ return 0; });
return a[0] === 1 && a[1] === 2 && a[2] === 3 && a[3] === 4 && a[4] === 5;
}
},
<span id='Ext-supports-property-Range'> /**
</span> * @property Range True if browser support document.createRange native method.
* @type {Boolean}
*/
{
identity: 'Range',
fn: function() {
return !!document.createRange;
}
},
<span id='Ext-supports-property-CreateContextualFragment'> /**
</span> * @property CreateContextualFragment True if browser support CreateContextualFragment range native methods.
* @type {Boolean}
*/
{
identity: 'CreateContextualFragment',
fn: function() {
var range = Ext.supports.Range ? document.createRange() : false;
return range && !!range.createContextualFragment;
}
},
<span id='Ext-supports-property-WindowOnError'> /**
</span> * @property WindowOnError True if browser supports window.onerror.
* @type {Boolean}
*/
{
identity: 'WindowOnError',
fn: function () {
// sadly, we cannot feature detect this...
return Ext.isIE || Ext.isGecko || Ext.webKitVersion >= 534.16; // Chrome 10+
}
},
<span id='Ext-supports-property-TextAreaMaxLength'> /**
</span> * @property TextAreaMaxLength True if the browser supports maxlength on textareas.
* @type {Boolean}
*/
{
identity: 'TextAreaMaxLength',
fn: function(){
var el = document.createElement('textarea');
return ('maxlength' in el);
}
},
<span id='Ext-supports-property-GetPositionPercentage'> /**
</span> * @property GetPositionPercentage True if the browser will return the left/top/right/bottom
* position as a percentage when explicitly set as a percentage value.
* @type {Boolean}
*/
// Related bug: https://bugzilla.mozilla.org/show_bug.cgi?id=707691#c7
{
identity: 'GetPositionPercentage',
fn: function(doc, div){
return getStyle(div.childNodes[2], 'left') == '10%';
}
}
]
};
}());
Ext.supports.init(); // run the "early" detections now
</pre>
</body>
</html>