Split opacityOverlay from opacityFilterOverlay on theme styles

Author: rxaviers

lib/themeroller.js

@@ -7,6 +7,7 @@ var _ = require( "underscore" ),
 	path = require( "path" ),
 	querystring = require( "querystring" ),
 	Release = require( "./release" ),
+	semver = require( "semver" ),
 	textures = require( "./themeroller.textures" ),
 	zParams = require( "./zparams" );
 
@@ -67,7 +68,7 @@ var iconDimension = [ "256", "240" ];
  * ThemeRoller
  */
 function ThemeRoller( options ) {
-	var found, opacityFix, themeGallery, vars, version,
+	var found, opacityFilter, opacityFix, themeGallery, vars, version,
 		self = this;
 	options = options || {};
 	if ( typeof options !== "object" ) {
@@ -104,14 +105,32 @@ function ThemeRoller( options ) {
 	vars = this.vars = _.extend( {}, ThemeRoller.defaults, vars );
 	this.images = {};
 
-	// Opacity fix (w3c + IE)
-	opacityFix = function( opacity ) {
-		return /* w3c */ ( opacity / 100 ).toString().replace( /^0\./, "." ) + /* IE */ ";filter:Alpha(Opacity=" + opacity + ")";
-	};
+	// Opacity fix
+	// TODO: Remove `filter` style when dropping support for IE8 and earlier.
 	vars.opacityOverlayPerc = vars.opacityOverlay;
 	vars.opacityShadowPerc = vars.opacityShadow;
-	vars.opacityOverlay = opacityFix( vars.opacityOverlay );
-	vars.opacityShadow = opacityFix( vars.opacityShadow );
+	if ( semver.gte( this.version, "1.10.0" ) ) {
+
+		// For version >= 1.10.0, filter has its own separate line and variable name.
+		opacityFix = function( opacity ) {
+			return ( opacity / 100 ).toString().replace( /^0\./, "." );
+		};
+		opacityFilter = function( opacity ) {
+			return "Alpha(Opacity=" + opacity + ")";
+		};
+		vars.opacityFilterOverlay = opacityFilter( vars.opacityOverlay );
+		vars.opacityFilterShadow = opacityFilter( vars.opacityShadow );
+		vars.opacityOverlay = opacityFix( vars.opacityOverlay );
+		vars.opacityShadow = opacityFix( vars.opacityShadow );
+	} else {
+
+		// For version < 1.10.0, opacity (w3c) and filter (IE) are combined into the same line.
+		opacityFix = function( opacity ) {
+			return /* w3c */ ( opacity / 100 ).toString().replace( /^0\./, "." ) + /* IE */ ";filter:Alpha(Opacity=" + opacity + ")";
+		};
+		vars.opacityOverlay = opacityFix( vars.opacityOverlay );
+		vars.opacityShadow = opacityFix( vars.opacityShadow );
+	}
 
 	// Add '#' in the beginning of the colors if needed
 	colorVars.forEach(function( colorVar ) {

package.json

@@ -13,14 +13,14 @@
 		"lzma": "1.2.1",
 		"optimist": "0.3.4",
 		"rimraf": "2.0.2",
+		"semver": "1.1.0",
 		"simple-log": "1.0.0",
 		"sqwish": "0.2.0",
 		"underscore": "~1.3.3",
 		"winston": "0.6.2"
 	},
 	"devDependencies": {
-		"nodeunit": "~0.7.4",
-		"semver": "1.1.0"
+		"nodeunit": "~0.7.4"
 	},
 	"main": "frontend.js",
 	"engine": {