Changeset 7209

Timestamp:

07/22/07 20:01:24 (1 year ago)

Author:

madrobby

Message:

Add support for full CSS inheritance in Effect.Morph. Closes #9054. [Tobie]

Files:

• spinoffs/scriptaculous/CHANGELOG (modified) (1 diff)
• spinoffs/scriptaculous/src/effects.js (modified) (3 diffs)
• spinoffs/scriptaculous/test/unit/effects_test.html (modified) (1 diff)
• spinoffs/scriptaculous/test/unit/element_test.html (modified) (3 diffs)

spinoffs/scriptaculous/CHANGELOG

@@ -1 +1 @@
-*SVN*
+
+* Add support for full CSS inheritance in Effect.Morph.  Closes #9054.  [Tobie]
+  IMPORTANT: Note that this could potentially change the outcome of classname-based morphs, so be sure to check your morph effects if you use this feature. 
+  For this feature, the new method Element#getStyles is introduced, which returns an objects which properties correspond to the CSS properties found in Element.CSS_PROPERTIES. Note that this method doesn't work seemlessly across browsers for certain non-measurable CSS properties, such as float.  
-
-* Add the externalControlOnly option to the in-place editors to allow for external controls to exclusively trigger the in-place editing.  Closes #9024.  [tdd]

spinoffs/scriptaculous/src/effects.js

@@ -936 +936 @@
-      style: {}
-    }, arguments[1] || {});
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
-        });
-
-
+
-          effect.element.addClassName(effect.options.style);
-          effect.transforms.each(function(transform) {
-
-
+
-          });
-        }
- else this.style = options.style.parseStyle();
- else this.style = $H(options.style)
+
+
-    this.start(options);
-  },
+  
-  setup: function(){
-    function parseColor(color){
@@ -1071 +1069 @@
-  });
-  
-dexOf('opacity') > -1
+clude('opacity')
-    styleRules.opacity = this.match(/opacity:\s*((?:0|1)?(?:\.\d*)?)/)[1];
-
-  return styleRules;
-};
+
+if (document.defaultView && document.defaultView.getComputedStyle) {
+  Element.getStyles = function(element) {
+    var css = document.defaultView.getComputedStyle($(element), null);
+    return Element.CSS_PROPERTIES.inject({}, function(styles, property) {
+      styles[property] = css[property];
+      return styles;
+    });
+  };
+} else {
+  Element.getStyles = function(element) {
+    element = $(element);
+    var css = element.currentStyle, styles;
+    styles = Element.CSS_PROPERTIES.inject({}, function(hash, property) {
+      hash[property] = css[property];
+      return hash;
+    });
+    if (!styles.opacity) styles.opacity = element.getOpacity();
+    return styles;
+  };
+}
-
-Effect.Methods = {
@@ -1107 +1126 @@
-);
-
-
+ getStyles
-  function(f) { Effect.Methods[f] = Element[f]; }
-);

spinoffs/scriptaculous/test/unit/effects_test.html

@@ -22 +22 @@
-      color: #fff;
-      font-style: italic;
-      font-size: 20px;
-      background: #000;
-      opacity: 0.5;
+    }
+    body div.final {
+      font-size: 20px;
-    }
-  </style>

spinoffs/scriptaculous/test/unit/element_test.html

@@ -13 +13 @@
-    blah { color:rgb(0, 255, 0); }
-    #op2 { opacity:0.5;filter:alpha(opacity=50)progid:DXImageTransform.Microsoft.Blur(strength=10);}
+    #allStyles_1 {font-size: 12px;}
+    #allStyles_2 {opacity:0.5; filter:alpha(opacity=50);}
+    #allStyles_3 {opacity:0.5;}
-  </style>
-</head>
@@ -59 +62 @@
-
-<div id="perftest1"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
-
+
+
+
-<!-- Tests follow -->
-<script type="text/javascript" language="javascript" charset="utf-8">
@@ -96 +101 @@
-        "font:12px/15pt Verdana;opacity:0.4;border:4px dotted red".parseStyle();
-      },100);
+    }},
+
+    testGetStyles: function() { with(this) {
+      assertEqual('12px', $('allStyles_1').getStyles().fontSize);
+      assertEqual(1, parseFloat($('allStyles_1').getStyles().opacity));
+      assertEqual(0.5, parseFloat($('allStyles_2').getStyles().opacity));
+      assertEqual(0.5, parseFloat($('allStyles_3').getStyles().opacity));
-    }}
-