github-migration
/
prototype
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Prototype: Optimize Element.setStyle and add new Element.setOpacity method, special case IE and Gecko opacity methods. Closes #7585. [savetheclocktower]

This commit is contained in:
Thomas Fuchs 2007-02-23 01:19:18 +00:00
parent d1481932b9
commit 80f6f4076b
3 changed files with 63 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
CHANGELOG
View File

@ -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]

57
src/dom.js
View File

@ -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 = {

23
test/unit/dom.html
View File

@ -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