docs/source/Element.static.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="../prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../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-core-Element'>/**
  19 </span> * @class Ext.core.Element
  20  */
  21 Ext.applyIf(Ext.core.Element, {
  22     unitRe: /\d+(px|em|%|en|ex|pt|in|cm|mm|pc)$/i,
  23     camelRe: /(-[a-z])/gi,
  24     opacityRe: /alpha\(opacity=(.*)\)/i,
  25     cssRe: /([a-z0-9-]+)\s*:\s*([^;\s]+(?:\s*[^;\s]+)*);?/gi,
  26     propertyCache: {},
  27     defaultUnit : &quot;px&quot;,
  28     borders: {l: 'border-left-width', r: 'border-right-width', t: 'border-top-width', b: 'border-bottom-width'},
  29     paddings: {l: 'padding-left', r: 'padding-right', t: 'padding-top', b: 'padding-bottom'},
  30     margins: {l: 'margin-left', r: 'margin-right', t: 'margin-top', b: 'margin-bottom'},
  31
  32     // Reference the prototype's version of the method. Signatures are identical.
  33     addUnits : Ext.core.Element.prototype.addUnits,
  34
  35 <span id='Ext-core-Element-method-parseBox'>    /**
  36 </span>     * Parses a number or string representing margin sizes into an object. Supports CSS-style margin declarations
  37      * (e.g. 10, &quot;10&quot;, &quot;10 10&quot;, &quot;10 10 10&quot; and &quot;10 10 10 10&quot; are all valid options and would return the same result)
  38      * @static
  39      * @param {Number|String} box The encoded margins
  40      * @return {Object} An object with margin sizes for top, right, bottom and left
  41      */
  42     parseBox : function(box) {
  43         if (Ext.isObject(box)) {
  44             return {
  45                 top: box.top || 0,
  46                 right: box.right || 0,
  47                 bottom: box.bottom || 0,
  48                 left: box.left || 0
  49             };
  50         } else {
  51             if (typeof box != 'string') {
  52                 box = box.toString();
  53             }
  54             var parts  = box.split(' '),
  55                 ln = parts.length;
  56
  57             if (ln == 1) {
  58                 parts[1] = parts[2] = parts[3] = parts[0];
  59             }
  60             else if (ln == 2) {
  61                 parts[2] = parts[0];
  62                 parts[3] = parts[1];
  63             }
  64             else if (ln == 3) {
  65                 parts[3] = parts[1];
  66             }
  67
  68             return {
  69                 top   :parseFloat(parts[0]) || 0,
  70                 right :parseFloat(parts[1]) || 0,
  71                 bottom:parseFloat(parts[2]) || 0,
  72                 left  :parseFloat(parts[3]) || 0
  73             };
  74         }
  75
  76     },
  77
  78 <span id='Ext-core-Element-method-unitizeBox'>    /**
  79 </span>     * Parses a number or string representing margin sizes into an object. Supports CSS-style margin declarations
  80      * (e.g. 10, &quot;10&quot;, &quot;10 10&quot;, &quot;10 10 10&quot; and &quot;10 10 10 10&quot; are all valid options and would return the same result)
  81      * @static
  82      * @param {Number|String} box The encoded margins
  83      * @param {String} units The type of units to add
  84      * @return {String} An string with unitized (px if units is not specified) metrics for top, right, bottom and left
  85      */
  86     unitizeBox : function(box, units) {
  87         var A = this.addUnits,
  88             B = this.parseBox(box);
  89
  90         return A(B.top, units) + ' ' +
  91                A(B.right, units) + ' ' +
  92                A(B.bottom, units) + ' ' +
  93                A(B.left, units);
  94
  95     },
  96
  97     // private
  98     camelReplaceFn : function(m, a) {
  99         return a.charAt(1).toUpperCase();
 100     },
 101
 102 <span id='Ext-core-Element-method-normalize'>    /**
 103 </span>     * Normalizes CSS property keys from dash delimited to camel case JavaScript Syntax.
 104      * For example:
 105      * &lt;ul&gt;
 106      *  &lt;li&gt;border-width -&gt; borderWidth&lt;/li&gt;
 107      *  &lt;li&gt;padding-top -&gt; paddingTop&lt;/li&gt;
 108      * &lt;/ul&gt;
 109      * @static
 110      * @param {String} prop The property to normalize
 111      * @return {String} The normalized string
 112      */
 113     normalize : function(prop) {
 114         if (prop == 'float') {
 115             prop = Ext.supports.Float ? 'cssFloat' : 'styleFloat';
 116         }
 117         return this.propertyCache[prop] || (this.propertyCache[prop] = prop.replace(this.camelRe, this.camelReplaceFn));
 118     },
 119
 120 <span id='Ext-core-Element-method-getDocumentHeight'>    /**
 121 </span>     * Retrieves the document height
 122      * @static
 123      * @return {Number} documentHeight
 124      */
 125     getDocumentHeight: function() {
 126         return Math.max(!Ext.isStrict ? document.body.scrollHeight : document.documentElement.scrollHeight, this.getViewportHeight());
 127     },
 128
 129 <span id='Ext-core-Element-method-getDocumentWidth'>    /**
 130 </span>     * Retrieves the document width
 131      * @static
 132      * @return {Number} documentWidth
 133      */
 134     getDocumentWidth: function() {
 135         return Math.max(!Ext.isStrict ? document.body.scrollWidth : document.documentElement.scrollWidth, this.getViewportWidth());
 136     },
 137
 138 <span id='Ext-core-Element-method-getViewportHeight'>    /**
 139 </span>     * Retrieves the viewport height of the window.
 140      * @static
 141      * @return {Number} viewportHeight
 142      */
 143     getViewportHeight: function(){
 144         return window.innerHeight;
 145     },
 146
 147 <span id='Ext-core-Element-method-getViewportWidth'>    /**
 148 </span>     * Retrieves the viewport width of the window.
 149      * @static
 150      * @return {Number} viewportWidth
 151      */
 152     getViewportWidth : function() {
 153         return window.innerWidth;
 154     },
 155
 156 <span id='Ext-core-Element-method-getViewSize'>    /**
 157 </span>     * Retrieves the viewport size of the window.
 158      * @static
 159      * @return {Object} object containing width and height properties
 160      */
 161     getViewSize : function() {
 162         return {
 163             width: window.innerWidth,
 164             height: window.innerHeight
 165         };
 166     },
 167
 168 <span id='Ext-core-Element-method-getOrientation'>    /**
 169 </span>     * Retrieves the current orientation of the window. This is calculated by
 170      * determing if the height is greater than the width.
 171      * @static
 172      * @return {String} Orientation of window: 'portrait' or 'landscape'
 173      */
 174     getOrientation : function() {
 175         if (Ext.supports.OrientationChange) {
 176             return (window.orientation == 0) ? 'portrait' : 'landscape';
 177         }
 178
 179         return (window.innerHeight &gt; window.innerWidth) ? 'portrait' : 'landscape';
 180     },
 181
 182 <span id='Ext-core-Element-method-fromPoint'>    /**
 183 </span>     * Returns the top Element that is located at the passed coordinates
 184      * @static
 185      * @param {Number} x The x coordinate
 186      * @param {Number} x The y coordinate
 187      * @return {String} The found Element
 188      */
 189     fromPoint: function(x, y) {
 190         return Ext.get(document.elementFromPoint(x, y));
 191     },
 192
 193 <span id='Ext-core-Element-method-parseStyles'>    /**
 194 </span>     * Converts a CSS string into an object with a property for each style.
 195      * &lt;p&gt;
 196      * The sample code below would return an object with 2 properties, one
 197      * for background-color and one for color.&lt;/p&gt;
 198      * &lt;pre&gt;&lt;code&gt;
 199 var css = 'background-color: red;color: blue; ';
 200 console.log(Ext.core.Element.parseStyles(css));
 201      * &lt;/code&gt;&lt;/pre&gt;
 202      * @static
 203      * @param {String} styles A CSS string
 204      * @return {Object} styles
 205      */
 206     parseStyles: function(styles){
 207         var out = {},
 208             cssRe = this.cssRe,
 209             matches;
 210
 211         if (styles) {
 212             // Since we're using the g flag on the regex, we need to set the lastIndex.
 213             // This automatically happens on some implementations, but not others, see:
 214             // http://stackoverflow.com/questions/2645273/javascript-regular-expression-literal-persists-between-function-calls
 215             // http://blog.stevenlevithan.com/archives/fixing-javascript-regexp
 216             cssRe.lastIndex = 0;
 217             while ((matches = cssRe.exec(styles))) {
 218                 out[matches[1]] = matches[2];
 219             }
 220         }
 221         return out;
 222     }
 223 });
 224 </pre>
 225 </body>
 226 </html>