Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

Major refactoring. Cleaned up getStyles by moving each special case t…

…o its own getter. Added todos for things to test for.
  • Loading branch information...
commit b687daa97cd57951c7e3cdf4707caa1f05bdc270 1 parent d8c0495
Olmo Maldonado authored August 21, 2012

Showing 1 changed file with 77 additions and 34 deletions. Show diff stats Hide diff stats

  1. 111  Source/Element/Element.Style.js
111  Source/Element/Element.Style.js
@@ -122,45 +122,29 @@ Element.implement({
122 122
 	},
123 123
 
124 124
 	getStyle: function(property){
125  
-		if (property == 'opacity') return getOpacity(this);
126  
-		property = (property == 'float' ? floatName : property).camelCase();
  125
+
  126
+		property = (property == 'float') ? floatName : property.camelCase();
  127
+
  128
+		var getter = getGetter(property);
  129
+		if (getter) return getter(property);
  130
+
127 131
 		var result = this.style[property];
128  
-		if (!result || property == 'zIndex'){
129  
-			if (Element.ShortStyles.hasOwnProperty(property)){
130  
-				result = [];
131  
-				for (var s in Element.ShortStyles[property]) result.push(this.getStyle(s));
132  
-				return result.join(' ');
133  
-			}
  132
+
  133
+		if (!result && Element.ShortStyles.hasOwnProperty(property)){
  134
+			result = [];
  135
+			for (var s in Element.ShortStyles[property]) result.push(this.getStyle(s));
  136
+			return result.join(' ');
  137
+		} else {
134 138
 			result = this.getComputedStyle(property);
135 139
 		}
136  
-		if (hasBackgroundPositionXY && /^backgroundPosition[XY]?$/.test(property)){
137  
-			return result.replace(/(top|right|bottom|left)/g, function(position){
138  
-				return namedPositions[position];
139  
-			}) || '0px';
140  
-		}
141  
-		if (!result && property == 'backgroundPosition') return '0px 0px';
  140
+
  141
+		// todo(ibolmo): normalization is needed for which properties? and when
142 142
 		if (result){
143 143
 			result = String(result);
144 144
 			var color = result.match(/rgba?\([\d\s,]+\)/);
145 145
 			if (color) result = result.replace(color[0], color[0].rgbToHex());
146 146
 		}
147  
-		if (Browser.opera || Browser.ie){
148  
-			if ((/^(height|width)$/).test(property) && !(/px$/.test(result))){
149  
-				var values = (property == 'width') ? ['left', 'right'] : ['top', 'bottom'], size = 0;
150  
-				values.each(function(value){
151  
-					size += this.getStyle('border-' + value + '-width').toInt() + this.getStyle('padding-' + value).toInt();
152  
-				}, this);
153  
-				return this['offset' + property.capitalize()] - size + 'px';
154  
-			}
155  
-			if ((/^border(.+)Width|margin|padding/).test(property) && isNaN(parseFloat(result))){
156  
-				return '0px';
157  
-			}
158  
-			//<ltIE9>
159  
-			if (returnsBordersInWrongOrder && /^border(Top|Right|Bottom|Left)?$/.test(property) && /^#/.test(result)){
160  
-				return result.replace(/^(.+)\s(.+)\s(.+)$/, '$2 $3 $1');
161  
-			}
162  
-			//</ltIE9>
163  
-		}
  147
+
164 148
 		return result;
165 149
 	},
166 150
 
@@ -226,11 +210,19 @@ Element.Styles = {
226 210
 	letterSpacing: {map: '@px'},
227 211
 	lineHeight: {map: '@px'},
228 212
 	clip: {map: 'rect(@px @px @px @px)'},
229  
-	zIndex: {map: '@'},
  213
+	zIndex: {
  214
+		map: '@',
  215
+		get: function(element){
  216
+			return element.getComputedStyle('zIndex');
  217
+		}
  218
+	},
230 219
 	'zoom': {map: '@'},
231 220
 	textIndent: {map: '@px'},
232 221
 	opacity: {
233 222
 		map: '@',
  223
+		get: function(element){
  224
+			return getOpacity(this);
  225
+		},
234 226
 		set: function(element, value){
235 227
 			if (value != null) value = parseFloat(value);
236 228
 			setOpacity(this, value);
@@ -246,7 +238,12 @@ Element.Styles = {
246 238
 	minHeight: {map: '@px'},
247 239
 
248 240
 	backgroundColor: {map: 'rgb(@, @, @)'},
249  
-	backgroundPosition: {map: '@px @px'},
  241
+	backgroundPosition: {
  242
+		map: '@px @px',
  243
+		get: function(element){
  244
+			return element.getComputedStyle('backgroundPosition') || '0px 0px';
  245
+		}
  246
+	},
250 247
 
251 248
 	fontWeight: {map: '@'},
252 249
 	fontSize: {map: '@px'},
@@ -384,5 +381,51 @@ Element.ShortStyles = {
384 381
 	}
385 382
 };
386 383
 
387  
-if (hasBackgroundPositionXY) Element.ShortStyles.backgroundPosition = {backgroundPositionX: '@', backgroundPositionY: '@'};
  384
+
  385
+// todo(ibolmo): collisions?
  386
+
  387
+if (hasBackgroundPositionXY){
  388
+	['backgroundPositionX', 'backgroundPositionY'].forEach(function(property){
  389
+		Element.Styles[property] = {get: function(element){
  390
+			return element.getComputedStyle(property).replace(/(top|right|bottom|left)/g, function(position){
  391
+				return namedPosition[position];
  392
+			}) || '0px';
  393
+		}};
  394
+	});
  395
+	Element.ShortStyles.backgroundPosition = {backgroundPositionX: '@', backgroundPositionY: '@'};
  396
+}
  397
+
  398
+if (Browser.opera || Browser.ie){
  399
+	Object.each({
  400
+		width: ['borderTopWidth', 'borderBottomWidth', 'paddingTop', 'paddingBottom'],
  401
+		height: ['borderLeftWidth', 'borderRightWidth', 'paddingLeft', 'paddingRight']
  402
+	}, function(styles, property){
  403
+		Element.Styles[property].get = function(element){
  404
+			var result = element.getComputedStyle(property), size = 0;
  405
+			if (result.substr(-2) == 'px') return result;
  406
+
  407
+			Object.forEach(element.getStyles(styles), function(value){ size += value; });
  408
+			return (element['offset' + property.capitalize()] - size) + 'px';
  409
+		};
  410
+	});
  411
+
  412
+	for (var property in Element.Styles) if (/^border(.+)Width|margin|padding/.test(property)){
  413
+		Element.Styles[property].get = function(element){
  414
+			var result = element.getComputedStyle(property);
  415
+			return isNaN(parseFloat(result)) ? '0px' : result;
  416
+		}
  417
+	}
  418
+}
  419
+
  420
+//<ltIE9>
  421
+if (returnsBordersInWrongOrder){
  422
+	for (var property in Element.Styles) if (/^border(Top|Right|Bottom|Left)?$/.test(property)){
  423
+		Element.Styles[property].get = function(element){
  424
+			var result = element.getComputedStyle(property);
  425
+			return /^#/.test(result) ? result.replace(/^(.+)\s(.+)\s(.+)$/, '$2 $3 $1') : result;
  426
+		};
  427
+	}
  428
+}
  429
+//</ltIE9>
  430
+
388 431
 })();

0 notes on commit b687daa

Please sign in to comment.
Something went wrong with that request. Please try again.