Changeset 5528

Timestamp:

11/15/06 18:45:41 (3 years ago)

Author:

madrobby

Message:

script.aculo.us effects world domination attempt with new CSS-rule based Effect.Transform engine

Files:

• spinoffs/scriptaculous/CHANGELOG (modified) (1 diff)
• spinoffs/scriptaculous/lib/prototype.js (modified) (1 diff)
• spinoffs/scriptaculous/src/effects.js (modified) (1 diff)
• spinoffs/scriptaculous/src/unittest.js (modified) (2 diffs)
• spinoffs/scriptaculous/test/unit/index.html (modified) (1 diff)
• spinoffs/scriptaculous/test/unit/string_test.html (modified) (1 diff)
• spinoffs/scriptaculous/test/unit/transform_test.html (added)

spinoffs/scriptaculous/CHANGELOG

@@ -1 @@
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-*V1.6.5* (November 8, 2006)

spinoffs/scriptaculous/lib/prototype.js

@@ -260 +260 @@
-
-    return camelizedString;
+  },
+
+  underscore: function() {
+    return this.gsub(/::/, '/').gsub(/([A-Z]+)([A-Z][a-z])/,'#{1}_#{2}').gsub(/([a-z\d])([A-Z])/,'#{1}_#{2}').gsub(/-/,'-').toLowerCase();
+  },
+
+  dasherize: function() {
+    return this.gsub(/_/,'-');
-  },
-

spinoffs/scriptaculous/src/effects.js

@@ -940 +940 @@
-};
-
+Effect.Morph = Class.create();
+Object.extend(Object.extend(Effect.Morph.prototype, Effect.Base.prototype), {
+  initialize: function(element) {
+    this.element = $(element);
+    if(!this.element) throw(Effect._elementDoesNotExistError);
+    var options = Object.extend({
+      style: ''
+    }, arguments[1] || {});
+    this.start(options);
+  },
+  setup: function(){
+    function parseColor(color){
+      return $R(0,2).map(function(i){
+        return parseInt( ((!color || color=='transparent') ? '#ffffff' : color).parseColor().slice(i*2+1,i*2+3), 16 ) 
+      });
+    }
+    this.transforms = this.options.style.split(';').map(function(style){      
+      return style.parseStyle().map(function(property){
+        var originalValue = this.element.getStyle(property[0]);
+        return $H({ 
+          style: property[0], 
+          originalValue: property[1].unit=='color' ? 
+            parseColor(originalValue) : parseFloat(originalValue || 0), 
+          targetValue: property[1].unit=='color' ? 
+            parseColor(property[1].value) : property[1].value,
+          unit: property[1].unit
+        });
+      }.bind(this));
+    }.bind(this)).flatten();
+  },
+  update: function(position) {
+    var style = $H(), value = null;
+    this.transforms.each(function(transform){
+      value = transform.unit=='color' ?
+        $R(0,2).inject('#',function(m,v,i){
+          return m+(Math.round(transform.originalValue[i]+
+            (transform.targetValue[i] - transform.originalValue[i])*position)).toColorPart() }) : 
+        value = transform.originalValue + Math.round(
+            ((transform.targetValue - transform.originalValue) * position) * 1000)/1000 + transform.unit;
+      style[transform.style] = value;
+    });
+    this.element.setStyle(style);
+  }
+});
+
+Effect.Transform = Class.create();
+Object.extend(Effect.Transform.prototype, {
+  initialize: function(tracks){
+    this.tracks  = [];
+    this.options = arguments[1] || {};
+    this.addTracks(tracks);
+  },
+  addTracks: function(tracks){
+    tracks.each(function(track){
+      var data = $H(track).values().first();
+      this.tracks.push($H({
+        ids:     $H(track).keys().first(),
+        effect:  Effect.Morph,
+        options: { style: data }
+      }));
+    }.bind(this));
+    return this;
+  },
+  play: function(){
+    return new Effect.Parallel(
+      this.tracks.map(function(track){
+        var elements = [$(track.ids) || $$(track.ids)].flatten();
+        return elements.map(function(e){ return new track.effect(e, Object.extend({ sync:true }, track.options)) });
+      }).flatten(),
+      this.options
+    );
+  }
+});
+
+String.CSS_PROPERTIES = ['azimuth', 'backgroundAttachment', 'backgroundColor', 'backgroundImage', 
+  'backgroundPosition', 'backgroundRepeat', 'borderBottomColor', 'borderBottomStyle', 
+  'borderBottomWidth', 'borderCollapse', 'borderLeftColor', 'borderLeftStyle', 'borderLeftWidth',
+  'borderRightColor', 'borderRightStyle', 'borderRightWidth', 'borderSpacing', 'borderTopColor',
+  'borderTopStyle', 'borderTopWidth', 'bottom', 'captionSide', 'clear', 'clip', 'color', 'content',
+  'counterIncrement', 'counterReset', 'cssFloat', 'cueAfter', 'cueBefore', 'cursor', 'direction',
+  'display', 'elevation', 'emptyCells', 'fontFamily', 'fontSize', 'fontSizeAdjust', 'fontStretch',
+  'fontStyle', 'fontVariant', 'fontWeight', 'height', 'left', 'letterSpacing', 'lineHeight',
+  'listStyleImage', 'listStylePosition', 'listStyleType', 'marginBottom', 'marginLeft', 'marginRight',
+  'marginTop', 'markerOffset', 'marks', 'maxHeight', 'maxWidth', 'minHeight', 'minWidth', 'opacity',
+  'orphans', 'outlineColor', 'outlineOffset', 'outlineStyle', 'outlineWidth', 'overflowX', 'overflowY',
+  'paddingBottom', 'paddingLeft', 'paddingRight', 'paddingTop', 'page', 'pageBreakAfter', 'pageBreakBefore',
+  'pageBreakInside', 'pauseAfter', 'pauseBefore', 'pitch', 'pitchRange', 'position', 'quotes',
+  'richness', 'right', 'size', 'speakHeader', 'speakNumeral', 'speakPunctuation', 'speechRate', 'stress',
+  'tableLayout', 'textAlign', 'textDecoration', 'textIndent', 'textShadow', 'textTransform', 'top',
+  'unicodeBidi', 'verticalAlign', 'visibility', 'voiceFamily', 'volume', 'whiteSpace', 'widows',
+  'width', 'wordSpacing', 'zIndex'];
+
+String.prototype.parseStyle = function(){
+  var element = Element.extend(document.createElement('div'));
+  element.innerHTML = '<div style="' + this + '"></div>';
+  var style = element.down().style, styleRules = $H();
+  
+  String.CSS_PROPERTIES.each(function(property){
+   if(style[property]) styleRules[property] = style[property]; 
+  });
+  
+  var CSS_LENGTH = /^(([\+\-]?[0-9\.]+)(em|ex|px|in|cm|mm|pt|pc|\%))|0$/;
+  var CSS_COLOR = /^#([A-Fa-f0-9]{3}|[A-Fa-f0-9]{6}|rgb(\d,\d,\d))$/; 
+  var result = $H();
+  
+  styleRules.each(function(pair){
+    var property = pair[0], value = pair[1], unit = null;
+    
+    if(CSS_LENGTH.test(value)) 
+      var components = value.match(/([\+\-]?[0-9\.]+)(.*)/),
+          value = parseFloat(components[1]), unit = (components.length == 3) ? components[2] : null;
+    else
+      if(value.parseColor('#zzzzzz') != '#zzzzzz') {
+        value = value.parseColor();
+        unit  = 'color';
+      }
+    
+    result[property.underscore().dasherize()] = $H({ value:value, unit:unit });
+  }.bind(this));
+  
+  return result;
+};
+
-['setOpacity','getOpacity','getInlineOpacity','forceRerendering','setContentZoom',
- 'collectTextNodes','collectTextNodesIgnoreClass'].each( 

spinoffs/scriptaculous/src/unittest.js

@@ -294 +294 @@
-    catch(e) { this.error(e); }
-  },
+  assertInspect: function(expected, actual) {
+    var message = arguments[2] || "assertInspect";
+    try { (expected == actual.inspect()) ? this.pass() :
+      this.fail(message + ': expected "' + Test.Unit.inspect(expected) + 
+        '", actual "' + Test.Unit.inspect(actual) + '"'); }
+    catch(e) { this.error(e); }
+  },
-  assertEnumEqual: function(expected, actual) {
-    var message = arguments[2] || "assertEnumEqual";
@@ -404 +411 @@
-      this.fail(message + ": exception expected but none was raised"); }
-    catch(e) {
-e.name==exceptionName
+(exceptionName == null) || (e.name==exceptionName)
-    }
-  },

spinoffs/scriptaculous/test/unit/index.html

@@ -62 +62 @@
-<ul>
-   <li><a href="effects_test.html" target="test">Effects test</a></li>
+   <li><a href="transform_test.html" target="test">Transform test</a></li>
-</ul>
-

spinoffs/scriptaculous/test/unit/string_test.html

@@ -49 +49 @@
-      assertEqual('#00ff00', "rgb(0,255,0)".parseColor());
-      assertEqual('#0000ff', "rgb(0,0,255)".parseColor());
+    }},
+    
+    testStringParseStyle: function() { with(this) {
+      var expected = "#<Hash:{'font-size': #<Hash:{'value': 11, 'unit': 'px'}>}>";
+
+      // basics
+      assertInspect(expected, "font-size:11px".parseStyle());
+      assertInspect(expected, "font-SIZE:  11px".parseStyle());
+      assertInspect(expected, "font-size:11px  ".parseStyle());
+      assertInspect(expected, " Font-size: 11px  ".parseStyle());
+
+      // values
+      assertEqual(-1, "margin: -1px".parseStyle().values().first().value);
+      assertEqual( 0, "margin: 0px".parseStyle().values().first().value);
+      assertEqual( 0, "margin: 0".parseStyle().values().first().value);
+      assertEqual( 1, "margin: 1px".parseStyle().values().first().value);
+
+      // need units on non-zero lengths
+      assertRaise(null, "margin: -1".parseStyle());
+      assertRaise(null, "margin: 1".parseStyle());
+      
+      // CSS units should work
+      ['em','ex','px','in','cm','mm','pt','pc','%'].each(function(unit){
+        assertEqual( unit, ("font-size: 1"+unit).parseStyle().values().first().unit);
+        assertEqual( unit, ("display:none;font-size: 1"+unit).parseStyle().values().last().unit);
+      });
+      
+      // non-CSS units should raise
+      ['apples','pears','monkeys','mx','yz'].each(function(unit){
+        assertRaise(null, ("font-size: 1"+unit).parseStyle());
+      });
+     
+      // color parsing galore
+      ['#fff','#ffffff','rgb(255,255,255)','rgb(255, 255, 255)'].each(function(color){
+        assertEqual('#ffffff', ('color:'+color).parseStyle().color.value);
+      });
+      
+      expected = "#<Hash:{'value': 22, 'unit': 'pt'}>";
+      assertInspect(expected, "border:22pt".parseStyle()['border-bottom-width']);
+      assertInspect(expected, "border-width:22pt".parseStyle()['border-bottom-width']);
+
+      expected = "#<Hash:{'value': 4.5, 'unit': 'em'}>";
+      assertInspect(expected, "border-bottom-width: 4.5em".parseStyle()['border-bottom-width']);
+      assertInspect(expected, "border-bottom: 4.5em".parseStyle()['border-bottom-width']);
+      assertInspect(expected, " border-bottom-width:4.5em ".parseStyle()['border-bottom-width']);
+      assertInspect(expected, "border:99px solid red;border-width:22pt;border-bottom-width:4.5em".parseStyle()['border-bottom-width']);
+      // test with ; at end
+      assertInspect(expected, "border:99px solid red;border-width:22pt;border-bottom-width:4.5em;".parseStyle()['border-bottom-width']);
+
-    }}
-