docs/source/PropertyHandler.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-fx-PropertyHandler'>/**
  19 </span> * @class Ext.fx.PropertyHandler
  20  * @ignore
  21  */
  22 Ext.define('Ext.fx.PropertyHandler', {
  23
  24     /* Begin Definitions */
  25
  26     requires: ['Ext.draw.Draw'],
  27
  28     statics: {
  29         defaultHandler: {
  30             pixelDefaults: ['width', 'height', 'top', 'left'],
  31             unitRE: /^(-?\d*\.?\d*){1}(em|ex|px|in|cm|mm|pt|pc|%)*$/,
  32
  33             computeDelta: function(from, end, damper, initial, attr) {
  34                 damper = (typeof damper == 'number') ? damper : 1;
  35                 var match = this.unitRE.exec(from),
  36                     start, units;
  37                 if (match) {
  38                     from = match[1];
  39                     units = match[2];
  40                     if (!units &amp;&amp; Ext.Array.contains(this.pixelDefaults, attr)) {
  41                         units = 'px';
  42                     }
  43                 }
  44                 from = +from || 0;
  45
  46                 match = this.unitRE.exec(end);
  47                 if (match) {
  48                     end = match[1];
  49                     units = match[2] || units;
  50                 }
  51                 end = +end || 0;
  52                 start = (initial != null) ? initial : from;
  53                 return {
  54                     from: from,
  55                     delta: (end - start) * damper,
  56                     units: units
  57                 };
  58             },
  59
  60             get: function(from, end, damper, initialFrom, attr) {
  61                 var ln = from.length,
  62                     out = [],
  63                     i, initial, res, j, len;
  64                 for (i = 0; i &lt; ln; i++) {
  65                     if (initialFrom) {
  66                         initial = initialFrom[i][1].from;
  67                     }
  68                     if (Ext.isArray(from[i][1]) &amp;&amp; Ext.isArray(end)) {
  69                         res = [];
  70                         j = 0;
  71                         len = from[i][1].length;
  72                         for (; j &lt; len; j++) {
  73                             res.push(this.computeDelta(from[i][1][j], end[j], damper, initial, attr));
  74                         }
  75                         out.push([from[i][0], res]);
  76                     }
  77                     else {
  78                         out.push([from[i][0], this.computeDelta(from[i][1], end, damper, initial, attr)]);
  79                     }
  80                 }
  81                 return out;
  82             },
  83
  84             set: function(values, easing) {
  85                 var ln = values.length,
  86                     out = [],
  87                     i, val, res, len, j;
  88                 for (i = 0; i &lt; ln; i++) {
  89                     val  = values[i][1];
  90                     if (Ext.isArray(val)) {
  91                         res = [];
  92                         j = 0;
  93                         len = val.length;
  94                         for (; j &lt; len; j++) {
  95                             res.push(val[j].from + (val[j].delta * easing) + (val[j].units || 0));
  96                         }
  97                         out.push([values[i][0], res]);
  98                     } else {
  99                         out.push([values[i][0], val.from + (val.delta * easing) + (val.units || 0)]);
 100                     }
 101                 }
 102                 return out;
 103             }
 104         },
 105         color: {
 106             rgbRE: /^rgb\(([0-9]+)\s*,\s*([0-9]+)\s*,\s*([0-9]+)\)$/i,
 107             hexRE: /^#?([0-9A-F]{2})([0-9A-F]{2})([0-9A-F]{2})$/i,
 108             hex3RE: /^#?([0-9A-F]{1})([0-9A-F]{1})([0-9A-F]{1})$/i,
 109
 110             parseColor : function(color, damper) {
 111                 damper = (typeof damper == 'number') ? damper : 1;
 112                 var base,
 113                     out = false,
 114                     match;
 115
 116                 Ext.each([this.hexRE, this.rgbRE, this.hex3RE], function(re, idx) {
 117                     base = (idx % 2 == 0) ? 16 : 10;
 118                     match = re.exec(color);
 119                     if (match &amp;&amp; match.length == 4) {
 120                         if (idx == 2) {
 121                             match[1] += match[1];
 122                             match[2] += match[2];
 123                             match[3] += match[3];
 124                         }
 125                         out = {
 126                             red: parseInt(match[1], base),
 127                             green: parseInt(match[2], base),
 128                             blue: parseInt(match[3], base)
 129                         };
 130                         return false;
 131                     }
 132                 });
 133                 return out || color;
 134             },
 135
 136             computeDelta: function(from, end, damper, initial) {
 137                 from = this.parseColor(from);
 138                 end = this.parseColor(end, damper);
 139                 var start = initial ? initial : from,
 140                     tfrom = typeof start,
 141                     tend = typeof end;
 142                 //Extra check for when the color string is not recognized.
 143                 if (tfrom == 'string' ||  tfrom == 'undefined'
 144                   || tend == 'string' || tend == 'undefined') {
 145                     return end || start;
 146                 }
 147                 return {
 148                     from:  from,
 149                     delta: {
 150                         red: Math.round((end.red - start.red) * damper),
 151                         green: Math.round((end.green - start.green) * damper),
 152                         blue: Math.round((end.blue - start.blue) * damper)
 153                     }
 154                 };
 155             },
 156
 157             get: function(start, end, damper, initialFrom) {
 158                 var ln = start.length,
 159                     out = [],
 160                     i, initial;
 161                 for (i = 0; i &lt; ln; i++) {
 162                     if (initialFrom) {
 163                         initial = initialFrom[i][1].from;
 164                     }
 165                     out.push([start[i][0], this.computeDelta(start[i][1], end, damper, initial)]);
 166                 }
 167                 return out;
 168             },
 169
 170             set: function(values, easing) {
 171                 var ln = values.length,
 172                     out = [],
 173                     i, val, parsedString, from, delta;
 174                 for (i = 0; i &lt; ln; i++) {
 175                     val = values[i][1];
 176                     if (val) {
 177                         from = val.from;
 178                         delta = val.delta;
 179                         //multiple checks to reformat the color if it can't recognized by computeDelta.
 180                         val = (typeof val == 'object' &amp;&amp; 'red' in val)?
 181                                 'rgb(' + val.red + ', ' + val.green + ', ' + val.blue + ')' : val;
 182                         val = (typeof val == 'object' &amp;&amp; val.length)? val[0] : val;
 183                         if (typeof val == 'undefined') {
 184                             return [];
 185                         }
 186                         parsedString = typeof val == 'string'? val :
 187                             'rgb(' + [
 188                                   (from.red + Math.round(delta.red * easing)) % 256,
 189                                   (from.green + Math.round(delta.green * easing)) % 256,
 190                                   (from.blue + Math.round(delta.blue * easing)) % 256
 191                               ].join(',') + ')';
 192                         out.push([
 193                             values[i][0],
 194                             parsedString
 195                         ]);
 196                     }
 197                 }
 198                 return out;
 199             }
 200         },
 201         object: {
 202             interpolate: function(prop, damper) {
 203                 damper = (typeof damper == 'number') ? damper : 1;
 204                 var out = {},
 205                     p;
 206                 for(p in prop) {
 207                     out[p] = parseInt(prop[p], 10) * damper;
 208                 }
 209                 return out;
 210             },
 211
 212             computeDelta: function(from, end, damper, initial) {
 213                 from = this.interpolate(from);
 214                 end = this.interpolate(end, damper);
 215                 var start = initial ? initial : from,
 216                     delta = {},
 217                     p;
 218
 219                 for(p in end) {
 220                     delta[p] = end[p] - start[p];
 221                 }
 222                 return {
 223                     from:  from,
 224                     delta: delta
 225                 };
 226             },
 227
 228             get: function(start, end, damper, initialFrom) {
 229                 var ln = start.length,
 230                     out = [],
 231                     i, initial;
 232                 for (i = 0; i &lt; ln; i++) {
 233                     if (initialFrom) {
 234                         initial = initialFrom[i][1].from;
 235                     }
 236                     out.push([start[i][0], this.computeDelta(start[i][1], end, damper, initial)]);
 237                 }
 238                 return out;
 239             },
 240
 241             set: function(values, easing) {
 242                 var ln = values.length,
 243                     out = [],
 244                     outObject = {},
 245                     i, from, delta, val, p;
 246                 for (i = 0; i &lt; ln; i++) {
 247                     val  = values[i][1];
 248                     from = val.from;
 249                     delta = val.delta;
 250                     for (p in from) {
 251                         outObject[p] = Math.round(from[p] + delta[p] * easing);
 252                     }
 253                     out.push([
 254                         values[i][0],
 255                         outObject
 256                     ]);
 257                 }
 258                 return out;
 259             }
 260         },
 261
 262         path: {
 263             computeDelta: function(from, end, damper, initial) {
 264                 damper = (typeof damper == 'number') ? damper : 1;
 265                 var start;
 266                 from = +from || 0;
 267                 end = +end || 0;
 268                 start = (initial != null) ? initial : from;
 269                 return {
 270                     from: from,
 271                     delta: (end - start) * damper
 272                 };
 273             },
 274
 275             forcePath: function(path) {
 276                 if (!Ext.isArray(path) &amp;&amp; !Ext.isArray(path[0])) {
 277                     path = Ext.draw.Draw.parsePathString(path);
 278                 }
 279                 return path;
 280             },
 281
 282             get: function(start, end, damper, initialFrom) {
 283                 var endPath = this.forcePath(end),
 284                     out = [],
 285                     startLn = start.length,
 286                     startPathLn, pointsLn, i, deltaPath, initial, j, k, path, startPath;
 287                 for (i = 0; i &lt; startLn; i++) {
 288                     startPath = this.forcePath(start[i][1]);
 289
 290                     deltaPath = Ext.draw.Draw.interpolatePaths(startPath, endPath);
 291                     startPath = deltaPath[0];
 292                     endPath = deltaPath[1];
 293
 294                     startPathLn = startPath.length;
 295                     path = [];
 296                     for (j = 0; j &lt; startPathLn; j++) {
 297                         deltaPath = [startPath[j][0]];
 298                         pointsLn = startPath[j].length;
 299                         for (k = 1; k &lt; pointsLn; k++) {
 300                             initial = initialFrom &amp;&amp; initialFrom[0][1][j][k].from;
 301                             deltaPath.push(this.computeDelta(startPath[j][k], endPath[j][k], damper, initial));
 302                         }
 303                         path.push(deltaPath);
 304                     }
 305                     out.push([start[i][0], path]);
 306                 }
 307                 return out;
 308             },
 309
 310             set: function(values, easing) {
 311                 var ln = values.length,
 312                     out = [],
 313                     i, j, k, newPath, calcPath, deltaPath, deltaPathLn, pointsLn;
 314                 for (i = 0; i &lt; ln; i++) {
 315                     deltaPath = values[i][1];
 316                     newPath = [];
 317                     deltaPathLn = deltaPath.length;
 318                     for (j = 0; j &lt; deltaPathLn; j++) {
 319                         calcPath = [deltaPath[j][0]];
 320                         pointsLn = deltaPath[j].length;
 321                         for (k = 1; k &lt; pointsLn; k++) {
 322                             calcPath.push(deltaPath[j][k].from + deltaPath[j][k].delta * easing);
 323                         }
 324                         newPath.push(calcPath.join(','));
 325                     }
 326                     out.push([values[i][0], newPath.join(',')]);
 327                 }
 328                 return out;
 329             }
 330         }
 331         /* End Definitions */
 332     }
 333 }, function() {
 334     Ext.each([
 335         'outlineColor',
 336         'backgroundColor',
 337         'borderColor',
 338         'borderTopColor',
 339         'borderRightColor',
 340         'borderBottomColor',
 341         'borderLeftColor',
 342         'fill',
 343         'stroke'
 344     ], function(prop) {
 345         this[prop] = this.color;
 346     }, this);
 347 });</pre>
 348 </body>
 349 </html>