From 80f6f4076b73b259f69a39afc7e1c00c4dc1befc Mon Sep 17 00:00:00 2001 From: Thomas Fuchs Date: Fri, 23 Feb 2007 01:19:18 +0000 Subject: [PATCH] Prototype: Optimize Element.setStyle and add new Element.setOpacity method, special case IE and Gecko opacity methods. Closes #7585. [savetheclocktower] --- CHANGELOG | 2 ++ src/dom.js | 57 +++++++++++++++++++++++++++++++--------------- test/unit/dom.html | 23 ++++++++++++++++++- 3 files changed, 63 insertions(+), 19 deletions(-) diff --git a/CHANGELOG b/CHANGELOG index 5bf716e..1d7f1cf 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -1,5 +1,7 @@ *SVN* +* Optimize Element.setStyle and add new Element.setOpacity method, special case IE and Gecko opacity methods. Closes #7585. [savetheclocktower] + * Add unified Browser detection by providing Prototype.Browser.(IE|Gecko|WebKit|Opera) booleans. Closes #6800. [savetheclocktower] * Add String.prototype.empty and String.prototype.blank (tests if empty or whitespace-only). Closes #7016. [Jonathan Viney, Thomas Fuchs] diff --git a/src/dom.js b/src/dom.js index 0c0a83a..e59700d 100644 --- a/src/dom.js +++ b/src/dom.js @@ -321,7 +321,7 @@ Element.Methods = { if (Element.getStyle(element, 'position') == 'static') value = 'auto'; if(style == 'opacity') { if(value) return parseFloat(value); - if(value = (element.getStyle('filter') || '').match(/alpha\(opacity=(.*)\)/)) + if(value = (element.getStyle('filter') || '').match(/alpha\(opacity=(.*)\)/)) if(value[1]) return parseFloat(value[1]) / 100; return 1.0; } @@ -330,29 +330,25 @@ Element.Methods = { setStyle: function(element, style) { element = $(element); + var elementStyle = element.style; for (var name in style) { var value = style[name]; - if(name == 'opacity') { - if (value == 1) { - value = (/Gecko/.test(navigator.userAgent) && - !/Konqueror|Safari|KHTML/.test(navigator.userAgent)) ? 0.999999 : 1.0; - if(/MSIE/.test(navigator.userAgent) && !window.opera) - element.style.filter = element.getStyle('filter').replace(/alpha\([^\)]*\)/gi,''); - } else if(value === '') { - if(/MSIE/.test(navigator.userAgent) && !window.opera) - element.style.filter = element.getStyle('filter').replace(/alpha\([^\)]*\)/gi,''); - } else { - if(value < 0.00001) value = 0; - if(/MSIE/.test(navigator.userAgent) && !window.opera) - element.style.filter = element.getStyle('filter').replace(/alpha\([^\)]*\)/gi,'') + - 'alpha(opacity='+value*100+')'; - } - } else if(['float','cssFloat'].include(name)) name = (typeof element.style.styleFloat != 'undefined') ? 'styleFloat' : 'cssFloat'; - element.style[name.camelize()] = value; + if (name == 'opacity') element.setOpacity(value); + if (name == 'float' || name == 'cssFloat') { + name = (typeof elementStyle.styleFloat != 'undefined') ? + 'styleFloat' : 'cssFloat'; + } + elementStyle[name.camelize()] = value; } return element; }, + setOpacity: function(element, value) { + element = $(element); + element.style.opacity = (value < 0.00001) ? 0 : value; + return element; + }, + getDimensions: function(element) { element = $(element); var display = $(element).getStyle('display'); @@ -425,6 +421,31 @@ Element.Methods = { Object.extend(Element.Methods, {childOf: Element.Methods.descendantOf}); +if (Prototype.Browser.IE) { + Element.Methods.setOpacity = function(element, value) { + element = $(element); + var filter = element.getStyle('filter'), style = element.style; + if (value == 1 || value === '') { + style.filter = filter.replace(/alpha\([^\)]*\)/gi,''); + return element; + } else if (value < 0.00001) value = 0; + style.filter = filter.replace(/alpha\([^\)]*\)/gi, '') + + 'alpha(opacity=' + (value * 100) + ')'; + return element; + }; +} + +if (Prototype.Browser.Gecko) { + Element.Methods.setOpacity = function(element, value) { + element = $(element); + var style = element.style; + if (value == 1) value = 0.999999; + else if (value < 0.00001) value = 0; + style.opacity = value; + return element; + }; +} + Element._attributeTranslations = {}; Element._attributeTranslations.names = { diff --git a/test/unit/dom.html b/test/unit/dom.html index abe603e..bebc14c 100644 --- a/test/unit/dom.html +++ b/test/unit/dom.html @@ -630,6 +630,22 @@ assertEqual(0, $('style_test_3').getStyle('opacity')); }}, + testElementSetOpacity: function() { with(this) { + [0,0.1,0.5,0.999].each(function(opacity){ + $('style_test_3').setOpacity(opacity); + // b/c of rounding issues on IE special case + assert($('style_test_3').getStyle('opacity').toString().startsWith(opacity)); + }); + + assertEqual(0, + $('style_test_3').setOpacity(0.0000001).getStyle('opacity')); + + // for Firefox, we don't set to 1, because of flickering + assert( + $('style_test_3').setOpacity(0.9999999).getStyle('opacity') > 0.999 + ); + }}, + testElementGetStyle: function() { with(this) { assertEqual("none", $('style_test_1').getStyle('display')); @@ -681,10 +697,15 @@ assertEqual(0.3, $('op2').getStyle('opacity')); assertEqual(0.3, $('op3').getStyle('opacity')); + $('op3').setStyle({opacity: 0}); + assertEqual(0, $('op3').getStyle('opacity')); + if(navigator.appVersion.match(/MSIE/)) { assertEqual('alpha(opacity=30)', $('op1').getStyle('filter')); assertEqual('progid:DXImageTransform.Microsoft.Blur(strength=10)alpha(opacity=30)', $('op2').getStyle('filter')); - assertEqual('alpha(opacity=30)', $('op3').getStyle('filter')); + $('op2').setStyle({opacity:''}); + assertEqual('progid:DXImageTransform.Microsoft.Blur(strength=10)', $('op2').getStyle('filter')); + assertEqual('alpha(opacity=0)', $('op3').getStyle('filter')); assertEqual(0.3, $('op4-ie').getStyle('opacity')); } // verify that value is stil found when using camelized