3 This file is part of Ext JS 4
5 Copyright (c) 2011 Sencha Inc
7 Contact: http://www.sencha.com/contact
9 GNU General Public License Usage
10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file. Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
18 Ext.applyIf(Ext.Element, {
19 unitRe: /\d+(px|em|%|en|ex|pt|in|cm|mm|pc)$/i,
20 camelRe: /(-[a-z])/gi,
21 opacityRe: /alpha\(opacity=(.*)\)/i,
22 cssRe: /([a-z0-9-]+)\s*:\s*([^;\s]+(?:\s*[^;\s]+)*);?/gi,
25 borders: {l: 'border-left-width', r: 'border-right-width', t: 'border-top-width', b: 'border-bottom-width'},
26 paddings: {l: 'padding-left', r: 'padding-right', t: 'padding-top', b: 'padding-bottom'},
27 margins: {l: 'margin-left', r: 'margin-right', t: 'margin-top', b: 'margin-bottom'},
29 // Reference the prototype's version of the method. Signatures are identical.
30 addUnits : Ext.Element.prototype.addUnits,
33 * Parses a number or string representing margin sizes into an object. Supports CSS-style margin declarations
34 * (e.g. 10, "10", "10 10", "10 10 10" and "10 10 10 10" are all valid options and would return the same result)
36 * @param {Number/String} box The encoded margins
37 * @return {Object} An object with margin sizes for top, right, bottom and left
39 parseBox : function(box) {
40 if (Ext.isObject(box)) {
43 right: box.right || 0,
44 bottom: box.bottom || 0,
48 if (typeof box != 'string') {
51 var parts = box.split(' '),
55 parts[1] = parts[2] = parts[3] = parts[0];
66 top :parseFloat(parts[0]) || 0,
67 right :parseFloat(parts[1]) || 0,
68 bottom:parseFloat(parts[2]) || 0,
69 left :parseFloat(parts[3]) || 0
76 * Parses a number or string representing margin sizes into an object. Supports CSS-style margin declarations
77 * (e.g. 10, "10", "10 10", "10 10 10" and "10 10 10 10" are all valid options and would return the same result)
79 * @param {Number/String} box The encoded margins
80 * @param {String} units The type of units to add
81 * @return {String} An string with unitized (px if units is not specified) metrics for top, right, bottom and left
83 unitizeBox : function(box, units) {
84 var A = this.addUnits,
85 B = this.parseBox(box);
87 return A(B.top, units) + ' ' +
88 A(B.right, units) + ' ' +
89 A(B.bottom, units) + ' ' +
95 camelReplaceFn : function(m, a) {
96 return a.charAt(1).toUpperCase();
100 * Normalizes CSS property keys from dash delimited to camel case JavaScript Syntax.
103 * <li>border-width -> borderWidth</li>
104 * <li>padding-top -> paddingTop</li>
107 * @param {String} prop The property to normalize
108 * @return {String} The normalized string
110 normalize : function(prop) {
111 if (prop == 'float') {
112 prop = Ext.supports.Float ? 'cssFloat' : 'styleFloat';
114 return this.propertyCache[prop] || (this.propertyCache[prop] = prop.replace(this.camelRe, this.camelReplaceFn));
118 * Retrieves the document height
120 * @return {Number} documentHeight
122 getDocumentHeight: function() {
123 return Math.max(!Ext.isStrict ? document.body.scrollHeight : document.documentElement.scrollHeight, this.getViewportHeight());
127 * Retrieves the document width
129 * @return {Number} documentWidth
131 getDocumentWidth: function() {
132 return Math.max(!Ext.isStrict ? document.body.scrollWidth : document.documentElement.scrollWidth, this.getViewportWidth());
136 * Retrieves the viewport height of the window.
138 * @return {Number} viewportHeight
140 getViewportHeight: function(){
141 return window.innerHeight;
145 * Retrieves the viewport width of the window.
147 * @return {Number} viewportWidth
149 getViewportWidth : function() {
150 return window.innerWidth;
154 * Retrieves the viewport size of the window.
156 * @return {Object} object containing width and height properties
158 getViewSize : function() {
160 width: window.innerWidth,
161 height: window.innerHeight
166 * Retrieves the current orientation of the window. This is calculated by
167 * determing if the height is greater than the width.
169 * @return {String} Orientation of window: 'portrait' or 'landscape'
171 getOrientation : function() {
172 if (Ext.supports.OrientationChange) {
173 return (window.orientation == 0) ? 'portrait' : 'landscape';
176 return (window.innerHeight > window.innerWidth) ? 'portrait' : 'landscape';
180 * Returns the top Element that is located at the passed coordinates
182 * @param {Number} x The x coordinate
183 * @param {Number} y The y coordinate
184 * @return {String} The found Element
186 fromPoint: function(x, y) {
187 return Ext.get(document.elementFromPoint(x, y));
191 * Converts a CSS string into an object with a property for each style.
193 * The sample code below would return an object with 2 properties, one
194 * for background-color and one for color.</p>
196 var css = 'background-color: red;color: blue; ';
197 console.log(Ext.Element.parseStyles(css));
200 * @param {String} styles A CSS string
201 * @return {Object} styles
203 parseStyles: function(styles){
209 // Since we're using the g flag on the regex, we need to set the lastIndex.
210 // This automatically happens on some implementations, but not others, see:
211 // http://stackoverflow.com/questions/2645273/javascript-regular-expression-literal-persists-between-function-calls
212 // http://blog.stevenlevithan.com/archives/fixing-javascript-regexp
214 while ((matches = cssRe.exec(styles))) {
215 out[matches[1]] = matches[2];