Changeset 6236

Timestamp:

02/25/07 23:40:43 (3 years ago)

Author:

madrobby

Message:

script.aculo.us: Various effects engine optimizations [Tobie Langel, Thomas Fuchs]

Files:

• spinoffs/scriptaculous/CHANGELOG (modified) (1 diff)
• spinoffs/scriptaculous/lib/prototype.js (modified) (2 diffs)
• spinoffs/scriptaculous/src/effects.js (modified) (11 diffs)
• spinoffs/scriptaculous/test/unit/effects_test.html (modified) (5 diffs)
• spinoffs/scriptaculous/test/unit/element_test.html (modified) (1 diff)
• spinoffs/scriptaculous/test/unit/transform_test.html (modified) (3 diffs)

spinoffs/scriptaculous/CHANGELOG

@@ -1 +1 @@
-*SVN*
+
+* Various effects engine optimizations [Tobie Langel, Thomas Fuchs]
-
-* Update to new Prototype Browser detection

spinoffs/scriptaculous/lib/prototype.js

@@ -1433 +1433 @@
-  setStyle: function(element, style) {
-    element = $(element);
+    var elementStyle = element.style;
-    for (var name in style) {
-      var value = style[name];
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
-    return element;
-  },
@@ -1527 +1523 @@
-
-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 = {};

spinoffs/scriptaculous/src/effects.js

@@ -49 +49 @@
-
-Element.getOpacity = function(element){
-
-
-
-
-
+
-}
-
@@ -151 +147 @@
-  },
-  flicker: function(pos) {
-
+
+
-  },
-  wobble: function(pos) {
@@ -257 +254 @@
-  position: null,
-  start: function(options) {
+    function codeForEvent(options,eventName){
+      return (
+        (options[eventName+'Internal'] ? 'this.options.'+eventName+'Internal(this);' : '') +
+        (options[eventName] ? 'this.options.'+eventName+'(this);' : '')
+      );
+    }
+    if(options.transition === false) options.transition = Effect.Transitions.linear;
-    this.options      = Object.extend(Object.extend({},Effect.DefaultOptions), options || {});
-    this.currentFrame = 0;
-    this.state        = 'idle';
-    this.startOn      = this.options.delay*1000;
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-    this.event('beforeStart');
-    if(!this.options.sync)
@@ -277 +298 @@
-        return;  
-      }
-(this.finishOn - this.startOn);
-var frame = Math.round(pos * this.options.fps * this.options.duration
+this.totalTime,
+    frame = Math.round(pos * this.totalFrames
-      if(frame > this.currentFrame) {
-        this.render(pos);
-        this.currentFrame = frame;
-      }
-    }
-  },
-  render: function(pos) {
-    if(this.state == 'idle') {
-      this.state = 'running';
-      this.event('beforeSetup');
-      if(this.setup) this.setup();
-      this.event('afterSetup');
-    }
-    if(this.state == 'running') {
-      if(this.options.transition) pos = this.options.transition(pos);
-      pos *= (this.options.to-this.options.from);
-      pos += this.options.from;
-      this.position = pos;
-      this.event('beforeUpdate');
-      if(this.update) this.update(pos);
-      this.event('afterUpdate');
-    }
-  },
@@ -952 +956 @@
-          effect.transforms.each(function(transform) {
-            if(transform.style != 'opacity')
-.camelize()
+
-          });
-        }
@@ -968 +972 @@
-    }
-    this.transforms = this.style.map(function(pair){
-.underscore().dasherize()
+
-
-      if(value.parseColor('#zzzzzz') != '#zzzzzz') {
@@ -984 +988 @@
-
-      var originalValue = this.element.getStyle(property);
-$H(
+
-        style: property, 
-        originalValue: unit=='color' ? parseColor(originalValue) : parseFloat(originalValue || 0), 
-        targetValue: unit=='color' ? parseColor(value) : value,
-        unit: unit
-)
+
-    }.bind(this)).reject(function(transform){
-      return (
@@ -1001 +1005 @@
-  },
-  update: function(position) {
-$H()
+{}
-    this.transforms.each(function(transform){
-      value = transform.unit=='color' ?
@@ -1058 +1062 @@
-
-String.prototype.parseStyle = function(){
-Element.extend(document.createElement('div')
+document.createElement('div'
-  element.innerHTML = '<div style="' + this + '"></div>';
-down()
+childNodes[0]
-  
-  Element.CSS_PROPERTIES.each(function(property){
@@ -1076 +1080 @@
-};
-
-setOpacity','getOpacity',
+getOpacity', 
- 'collectTextNodes','collectTextNodesIgnoreClass','morph'].each( 
-  function(f) { Element.Methods[f] = Element[f]; }
@@ -1082 +1086 @@
-
-Element.Methods.visualEffect = function(element, effect, options) {
-gsub(/_/, '-'
+dasherize(
-  effect_class = s.charAt(0).toUpperCase() + s.substring(1);
-  new Effect[effect_class](element, options);

spinoffs/scriptaculous/test/unit/effects_test.html

@@ -32 +32 @@
-    ['Fade','Appear','BlindUp','BlindDown','Puff','SwitchOff','DropOut','Shake',
-     'SlideUp','SlideDown','Pulsate','Squish','Fold','Grow','Shrink'];
+  
+  var COMBINED_RJS_EFFECTS = $w(''+
+    'fade appear blind_up blind_down puff switch_off drop_out shake '+
+    'slide_up slide_down pulsate squish fold grow shrink'
+  );
-     
-  var tmp, tmp2;
@@ -91 +96 @@
-    }},
-    
+    testTransition: function() { with(this) {
+      // false implies linear
+      var e = new Effect.Opacity('sandbox',{transition:false,from:0.0,to:0.25,duration:0.5});
+      assert(e.options.transition == Effect.Transitions.linear);
+      
+      wait(1000, function() {
+        assertEqual(0.25, $('sandbox').getStyle('opacity'));
+        // default to sinoidal
+        var e = new Effect.Opacity('sandbox',{from:0.0,to:0.25,duration:0.5});
+        assert(e.options.transition == Effect.Transitions.sinoidal);
+        wait(1000, function() {
+          assertEqual(0.25, $('sandbox').getStyle('opacity'));
+          
+          var transitions = [
+            { transition: Effect.Transitions.linear,   expected: 1 },
+            { transition: Effect.Transitions.sinoidal, expected: 1 },
+            { transition: Effect.Transitions.reverse,  expected: 0 },
+            { transition: Effect.Transitions.flicker,  expected: 1 },
+            { transition: Effect.Transitions.wobble,   expected: 1 },
+            { transition: Effect.Transitions.pulse,    expected: 1 },
+            { transition: Effect.Transitions.none,     expected: 0 }
+          ];
+          
+          transitions.each(function(t){
+            var e = new Effect.Opacity('sandbox',{sync:true, from:0, to: 1, transition:t.transition});
+            assert(e.options.transition == t.transition);
+            e.render(1.0);
+            assertEqual(t.expected, e.position, t.transition);
+          });
+          
+        });
+      });
+    }},
+    
-    testInspect: function() { with(this) {
-      var e1 = new Effect.Opacity('sandbox',{from:1.0,to:0.5,duration:0.5});
@@ -231 +270 @@
-    // test if all combined effects correctly initialize themselves
-    testCombinedEffectsInitialize: function() { with(this) {
-
+,idx
-        info('Effect.'+fx);
-        $('sandbox').innerHTML = "";
@@ -246 +285 @@
-        assertEqual(0, effect.currentFrame);
-        
+        // and, for visualEffect
+        assert($('test_element') == $('test_element').visualEffect(COMBINED_RJS_EFFECTS[idx]));
+        
-        // options parsing (shake, squish and grow are special here)
-        if(!['Shake','Squish','Grow'].include(fx)) {
@@ -284 +326 @@
-        assertEqual('finished', testeffect.state);
-      });
+    }},
+    
+    testRenderPerformance: function() { with(this) {
+      info('The render() method is generated on a per-effect basis')
+      var e = new Effect.Opacity('sandbox',{sync:true});
+      benchmark(function(){
+        e.render(0.5);
+      },1000, 'Without events');
+      var e = new Effect.Opacity('sandbox',{sync:true,afterUpdate:function(){return}});
+      benchmark(function(){
+        e.render(0.5);
+      },1000, 'With afterUpdate event');      
-    }}
-

spinoffs/scriptaculous/test/unit/element_test.html

@@ -104 +104 @@
-        assertEqual(0.3, Element.getOpacity('op4-ie'));
-      }
+    }},
+    
+    testVisualEffect: function() { with(this) {
+      assert($('style_test_3') == $('style_test_3').visualEffect('fade'));
+      wait(1500,function(){
+        assert(!$('style_test_3').visible())
+      });
+    }},
+    
+    testParseStylePerformance: function() { with(this) {
+      benchmark(function(){
+        "font:12px/15pt Verdana;opacity:0.4;border:4px dotted red".parseStyle();
+      },100);
-    }}
-

spinoffs/scriptaculous/test/unit/transform_test.html

@@ -70 +70 @@
-    });
-    $('error_message_3').morph('final', {duration:0.5});
-6
+10
-      assertEqual('17px', $('error_test_ul').getStyle('margin-right'));
-      assertEqual('40px', $('error_test_ul').getStyle('font-size'));
@@ -79 +79 @@
-      assertEqual(.5, $('error_message_3').getStyle('opacity'));
-      assertEqual('', $('error_message_3').style.fontSize);
-
-
-
-
-
+
+
+
+
+
+
+
-    });
-  }},
@@ -137 +139 @@
-      assertEnumEqual([255,255,255], 
-        generatedEffect.effects[2].transforms.detect( function(transform){
--c
+C
-        }).originalValue);
-      assertEnumEqual([153,85,68], 
-        generatedEffect.effects[2].transforms.detect( function(transform){
--c
+C
-      }).targetValue);
-