Prototype: Optimize Element.setStyle and add new Element.setOpacity m…

…ethod, special case IE and Gecko opacity methods. Closes #7585. [savetheclocktower]
prototypejs · Feb 23, 2007 · 80f6f40 · 80f6f40
1 parent d148193
commit 80f6f40
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 19 deletions.
diff --git 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
@@ -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
@@ -630,6 +630,22 @@ <h1>Prototype Unit test file</h1>
       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 @@ <h1>Prototype Unit test file</h1>
       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