Source/Element/Element.Style.js

   1 /*
   2 ---
   3
   4 name: Element.Style
   5
   6 description: Contains methods for interacting with the styles of Elements in a fashionable way.
   7
   8 license: MIT-style license.
   9
  10 requires: Element
  11
  12 provides: Element.Style
  13
  14 ...
  15 */
  16
  17 Element.Properties.styles = {set: function(styles){
  18         this.setStyles(styles);
  19 }};
  20
  21 Element.Properties.opacity = {
  22
  23         set: function(opacity, novisibility){
  24                 if (!novisibility){
  25                         if (opacity == 0){
  26                                 if (this.style.visibility != 'hidden') this.style.visibility = 'hidden';
  27                         } else {
  28                                 if (this.style.visibility != 'visible') this.style.visibility = 'visible';
  29                         }
  30                 }
  31                 if (!this.currentStyle || !this.currentStyle.hasLayout) this.style.zoom = 1;
  32                 if (Browser.Engine.trident) this.style.filter = (opacity == 1) ? '' : 'alpha(opacity=' + opacity * 100 + ')';
  33                 this.style.opacity = opacity;
  34                 this.store('opacity', opacity);
  35         },
  36
  37         get: function(){
  38                 return this.retrieve('opacity', 1);
  39         }
  40
  41 };
  42
  43 Element.implement({
  44
  45         setOpacity: function(value){
  46                 return this.set('opacity', value, true);
  47         },
  48
  49         getOpacity: function(){
  50                 return this.get('opacity');
  51         },
  52
  53         setStyle: function(property, value){
  54                 switch (property){
  55                         case 'opacity': return this.set('opacity', parseFloat(value));
  56                         case 'float': property = (Browser.Engine.trident) ? 'styleFloat' : 'cssFloat';
  57                 }
  58                 property = property.camelCase();
  59                 if (typeOf(value) != 'string'){
  60                         var map = (Element.Styles.get(property) || '@').split(' ');
  61                         value = Array.from(value).map(function(val, i){
  62                                 if (!map[i]) return '';
  63                                 return (typeOf(val) == 'number') ? map[i].replace('@', Math.round(val)) : val;
  64                         }).join(' ');
  65                 } else if (value == String(Number(value))){
  66                         value = Math.round(value);
  67                 }
  68                 this.style[property] = value;
  69                 return this;
  70         },
  71
  72         getStyle: function(property){
  73                 switch (property){
  74                         case 'opacity': return this.get('opacity');
  75                         case 'float': property = (Browser.Engine.trident) ? 'styleFloat' : 'cssFloat';
  76                 }
  77                 property = property.camelCase();
  78                 var result = this.style[property];
  79                 if (!$chk(result)){
  80                         result = [];
  81                         for (var style in Element.ShortStyles){
  82                                 if (property != style) continue;
  83                                 for (var s in Element.ShortStyles[style]) result.push(this.getStyle(s));
  84                                 return result.join(' ');
  85                         }
  86                         result = this.getComputedStyle(property);
  87                 }
  88                 if (result){
  89                         result = String(result);
  90                         var color = result.match(/rgba?\([\d\s,]+\)/);
  91                         if (color) result = result.replace(color[0], color[0].rgbToHex());
  92                 }
  93                 if (Browser.Engine.presto || (Browser.Engine.trident && !$chk(parseInt(result, 10)))){
  94                         if (property.test(/^(height|width)$/)){
  95                                 var values = (property == 'width') ? ['left', 'right'] : ['top', 'bottom'], size = 0;
  96                                 values.each(function(value){
  97                                         size += this.getStyle('border-' + value + '-width').toInt() + this.getStyle('padding-' + value).toInt();
  98                                 }, this);
  99                                 return this['offset' + property.capitalize()] - size + 'px';
 100                         }
 101                         if ((Browser.Engine.presto) && String(result).test('px')) return result;
 102                         if (property.test(/(border(.+)Width|margin|padding)/)) return '0px';
 103                 }
 104                 return result;
 105         },
 106
 107         setStyles: function(styles){
 108                 for (var style in styles) this.setStyle(style, styles[style]);
 109                 return this;
 110         },
 111
 112         getStyles: function(){
 113                 var result = {};
 114                 Array.flatten(arguments).each(function(key){
 115                         result[key] = this.getStyle(key);
 116                 }, this);
 117                 return result;
 118         }
 119
 120 });
 121
 122 Element.Styles = new Hash({
 123         left: '@px', top: '@px', bottom: '@px', right: '@px',
 124         width: '@px', height: '@px', maxWidth: '@px', maxHeight: '@px', minWidth: '@px', minHeight: '@px',
 125         backgroundColor: 'rgb(@, @, @)', backgroundPosition: '@px @px', color: 'rgb(@, @, @)',
 126         fontSize: '@px', letterSpacing: '@px', lineHeight: '@px', clip: 'rect(@px @px @px @px)',
 127         margin: '@px @px @px @px', padding: '@px @px @px @px', border: '@px @ rgb(@, @, @) @px @ rgb(@, @, @) @px @ rgb(@, @, @)',
 128         borderWidth: '@px @px @px @px', borderStyle: '@ @ @ @', borderColor: 'rgb(@, @, @) rgb(@, @, @) rgb(@, @, @) rgb(@, @, @)',
 129         zIndex: '@', 'zoom': '@', fontWeight: '@', textIndent: '@px', opacity: '@'
 130 });
 131
 132 Element.ShortStyles = {margin: {}, padding: {}, border: {}, borderWidth: {}, borderStyle: {}, borderColor: {}};
 133
 134 ['Top', 'Right', 'Bottom', 'Left'].each(function(direction){
 135         var Short = Element.ShortStyles;
 136         var All = Element.Styles;
 137         ['margin', 'padding'].each(function(style){
 138                 var sd = style + direction;
 139                 Short[style][sd] = All[sd] = '@px';
 140         });
 141         var bd = 'border' + direction;
 142         Short.border[bd] = All[bd] = '@px @ rgb(@, @, @)';
 143         var bdw = bd + 'Width', bds = bd + 'Style', bdc = bd + 'Color';
 144         Short[bd] = {};
 145         Short.borderWidth[bdw] = Short[bd][bdw] = All[bdw] = '@px';
 146         Short.borderStyle[bds] = Short[bd][bds] = All[bds] = '@';
 147         Short.borderColor[bdc] = Short[bd][bdc] = All[bdc] = 'rgb(@, @, @)';
 148 });