Permalink
Browse files

XE-1130: Display gradients in the ColorTheme Wizard also for IE8 and …

…IE9 browsers

- gradients are now generated using JS and Velocity using the 2 gradients macros: #css3_backgroundLinearGradient (FF, Chrome, Opera, IE10) and #css_filterGradient (IE6-9)
  • Loading branch information...
1 parent 985fdbf commit 474dc9a97a63c86d1f34753818924ee7400ef4b7 @evalica evalica committed Mar 20, 2012
Showing with 14 additions and 4 deletions.
  1. +14 −4 xwiki-enterprise-ui/src/main/resources/ColorThemes/ColorThemeSheet.xml
@@ -449,23 +449,30 @@ XWiki.editors.ColorThemeWizard = Class.create({
}
},
wrapGradients : function(value) {
- // Gradients are using 2 values that are passed to #css3_backgroundLinearGradient macro found in macros.vm
#set($gradient1Placeholder = '__gradient1__name__placeholder__')
#set($gradient2Placeholder = '__gradient2__name__placeholder__')
var gradient1PlaceholderRegEx = new RegExp("$gradient1Placeholder",'g');
var gradient2PlaceholderRegEx = new RegExp("$gradient2Placeholder",'g');
- #set($cachedRaw= "#css3_backgroundLinearGradient({
+ ## #css3_backgroundLinearGradient macro (defined in macros.vm) used for the majority of browsers (FF, Chrome, Opera, IE10) that support CSS3 properties
+ #set($backgroundLinearGradientRaw= "#css3_backgroundLinearGradient({
'angle': 'top',
'colors': [
{'color': ${gradient1Placeholder}, 'position': '0%'},
{'color': ${gradient2Placeholder}, 'position': '100%'}
]
})")
- var cached = "$escapetool.javascript($cachedRaw)";
+ var backgroundLinearGradient = "$escapetool.javascript($backgroundLinearGradientRaw)";
+ ## #css_filterGradient macro (defined in macros.vm) used for the IE8, IE9 browsers that don t support CSS3 properties
+ #set($filterGradientRaw= "#css_filterGradient(${gradient1Placeholder}, ${gradient2Placeholder})")
+ var filterGradient = "$escapetool.javascript($filterGradientRaw)";
+ ## Gradients are using 2 values that are passed to the suggested macros
var gradientValues = value.split(' ');
if (gradientValues.size() >= 2) {
if (gradientValues[0] != '' && gradientValues[1] != '') {
- return cached.replace(gradient1PlaceholderRegEx,gradientValues[1]).replace(gradient2PlaceholderRegEx,gradientValues[0]);
+ var constructedStyle = backgroundLinearGradient.replace(gradient1PlaceholderRegEx,gradientValues[1]).replace(gradient2PlaceholderRegEx,gradientValues[0]);
+ ## for IE browsers
+ constructedStyle = constructedStyle + filterGradient.replace(gradient1PlaceholderRegEx,gradientValues[1]).replace(gradient2PlaceholderRegEx,gradientValues[0]);
+ return constructedStyle;
}
}
// Other values remain unchanged
@@ -1437,13 +1444,16 @@ $xwiki.jsx.use('ColorThemes.ColorThemeSheet', {
#set ($gradientValues = $cssValue.trim().split(' '))
#if ($gradientValues.size() >= 2)
#if ($gradientValues[0] != '' && $gradientValues[1] != '')
+ ## #css3_backgroundLinearGradient macro (defined in macros.vm) used for the majority of browsers (FF, Chrome, Opera, IE10) that support CSS3 properties
#set($style = "$!{style} #css3_backgroundLinearGradient({
'angle': 'top',
'colors': [
{'color': $gradientValues[1], 'position': '0%'},
{'color': $gradientValues[0], 'position': '100%'}
]
})")
+ ## #css_filterGradient macro (defined in macros.vm) used for the IE 6-9 browsers that don't support CSS3 properties
+ #set($style = "$!{style} #css_filterGradient(${gradientValues[1]}, ${gradientValues[0]})")
#end
#end
#end

0 comments on commit 474dc9a

Please sign in to comment.