From 60bb0686ba84a3b1d9441cfdf7abffe700414925 Mon Sep 17 00:00:00 2001 From: Thomas Fuchs Date: Tue, 27 Feb 2007 11:35:21 +0000 Subject: [PATCH] Prototype: Optimize Element.getStyle and add new Element.getOpacity method. Special case IE and Opera getStyle methods. Closes #7648. [Tobie Langel, Thomas Fuchs] --- CHANGELOG | 2 ++ src/dom.js | 89 ++++++++++++++++++++++++++++------------------ test/unit/dom.html | 4 +++ 3 files changed, 61 insertions(+), 34 deletions(-) diff --git a/CHANGELOG b/CHANGELOG index 1d7f1cf..9d70cbe 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -1,5 +1,7 @@ *SVN* +* Optimize Element.getStyle and add new Element.getOpacity method. Special case IE and Opera getStyle methods. Closes #7648. [Tobie Langel, Thomas Fuchs] + * 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] diff --git a/src/dom.js b/src/dom.js index e59700d..ab5b069 100644 --- a/src/dom.js +++ b/src/dom.js @@ -301,51 +301,40 @@ Element.Methods = { getStyle: function(element, style) { element = $(element); - if (['float','cssFloat'].include(style)) - style = (typeof element.style.styleFloat != 'undefined' ? 'styleFloat' : 'cssFloat'); - style = style.camelize(); + style = style == 'float' ? 'cssFloat' : style.camelize(); var value = element.style[style]; if (!value) { - if (document.defaultView && document.defaultView.getComputedStyle) { - var css = document.defaultView.getComputedStyle(element, null); - value = css ? css[style] : null; - } else if (element.currentStyle) { - value = element.currentStyle[style]; - } - } - - if((value == 'auto') && ['width','height'].include(style) && (element.getStyle('display') != 'none')) - value = element['offset'+style.capitalize()] + 'px'; - - if (window.opera && ['left', 'top', 'right', 'bottom'].include(style)) - 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[1]) return parseFloat(value[1]) / 100; - return 1.0; + var css = document.defaultView.getComputedStyle(element, null); + value = css ? css[style] : null; } + if (style == 'opacity') return value ? parseFloat(value) : 1.0; return value == 'auto' ? null : value; }, - setStyle: function(element, style) { + getOpacity: function(element) { + return $(element).getStyle('opacity'); + }, + + setStyle: function(element, styles) { element = $(element); var elementStyle = element.style; - for (var name in style) { - var value = style[name]; - if (name == 'opacity') element.setOpacity(value); - if (name == 'float' || name == 'cssFloat') { - name = (typeof elementStyle.styleFloat != 'undefined') ? - 'styleFloat' : 'cssFloat'; + for (var property in styles) { + var value = styles[property]; + if (property == 'opacity') { + element.setOpacity(value) + } else { + property = (property == 'float' || property == 'cssFloat') ? + ((elementStyle.styleFloat === undefined) ? 'cssFloat' : 'styleFloat') : property.camelize(); + elementStyle[property] = value; } - elementStyle[name.camelize()] = value; } return element; }, setOpacity: function(element, value) { element = $(element); - element.style.opacity = (value < 0.00001) ? 0 : value; + element.style.opacity = (value == 1 || value === '') ? '' : + (value < 0.00001) ? 0 : value; return element; }, @@ -421,7 +410,41 @@ Element.Methods = { Object.extend(Element.Methods, {childOf: Element.Methods.descendantOf}); +if (Prototype.Browser.Opera) { + Element.Methods._getStyle = Element.Methods.getStyle; + Element.Methods.getStyle = function(element, style) { + switch(style) { + case 'left': + case 'top': + case 'right': + case 'bottom': + if(Element._getStyle(element, 'position') == 'static') return null; + default: return Element._getStyle(element, style); + } + }; +} + if (Prototype.Browser.IE) { + Element.Methods.getStyle = function(element, style) { + element = $(element); + style = (style == 'float' || style == 'cssFloat') ? 'styleFloat' : style.camelize(); + var value = element.style[style]; + if (!value && element.currentStyle) value = element.currentStyle[style]; + + if (style == 'opacity') { + if (value = (element.getStyle('filter') || '').match(/alpha\(opacity=(.*)\)/)) + if (value[1]) return parseFloat(value[1]) / 100; + return 1.0; + } + + if (value == 'auto') { + if ((style == 'width' || style == 'height') && (element.getStyle('display') != 'none')) + return element['offset'+style.capitalize()] + 'px'; + return null; + } + return value; + }; + Element.Methods.setOpacity = function(element, value) { element = $(element); var filter = element.getStyle('filter'), style = element.style; @@ -438,10 +461,8 @@ if (Prototype.Browser.IE) { 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; + element.style.opacity = (value == 1) ? 0.999999 : + (value === '') ? '' : (value < 0.00001) ? 0 : value; return element; }; } diff --git a/test/unit/dom.html b/test/unit/dom.html index bebc14c..795b43f 100644 --- a/test/unit/dom.html +++ b/test/unit/dom.html @@ -714,6 +714,10 @@ assertEqual("12px", $('style_test_1').getStyle('fontSize')); }}, + testElementGetOpacity: function() {with(this) { + assertEqual(0.45, $('op1').setOpacity(0.45).getOpacity()); + }}, + testElementReadAttribute: function() {with(this) { assertEqual('test.html' , $('attributes_with_issues_1').readAttribute('href')); assertEqual('L' , $('attributes_with_issues_1').readAttribute('accesskey'));