/* * Effect.Morphpos - an extension to Script.aculo.us' Effect.Morph * Version 1 * Based on code lifted from Script.Aculo.Us version 1.8.1 * Amendments by Anthony Doherty 2008 * http://codeandeffect.co.uk/blog */ Effect.Morphbgpos = Class.create(Effect.Base, { initialize: function(element) { this.element = $(element); if (!this.element) throw(Effect._elementDoesNotExistError); var options = Object.extend({ style: { } }, arguments[1] || { }); this.style = options.style.parseStyle(); this.start(options); }, setup: function(){ this.transforms = this.style.map(function(pair){ var property = pair[0], value = pair[1], unit = null ; var xpos, ypos if (property != 'backgroundPosition') { return new Effect.Morph(this.element, { style: property+":"+value, duration: this.options.duration} ); } else if (Element.CSS_LENGTH.test(value)) { var components = value.match(/^([\+\-]?[0-9\.]+)(.*)$/); var compo = value.match(/^([\+\-]?[0-9\.]+)(px)(.+)([\+\-]?[0-9\.]*)$/); xpos = parseFloat(compo[1]); ypos = parseFloat(compo[3]); value = parseFloat(components[1]); unit = "px"; } //get orginal x and y positions var originalValue = this.element.getStyle(property); var originalpositions = this.element.getStyle(property).match(/^([\+\-]?[0-9\.]+)(px)(.+)([\+\-]?[0-9\.]*)$/); var originalX = parseFloat(originalpositions[1]); var originalY = parseFloat(originalpositions[3]); return { style: property.camelize(), originX: parseFloat(originalX || 0), originY: parseFloat(originalY || 0), originalValue: originalValue, targetX: parseFloat(xpos || 0), targetY: parseFloat(ypos || 0), targetValue: value, unit: unit }; }.bind(this)).reject(function(transform){ return ( (transform.originalValue == transform.targetValue) || (transform.unit == (isNaN(transform.originalValue) || isNaN(transform.targetValue)) ) ) }); }, update: function(position) { var style = { }, transform, i = this.transforms.length; while(i--) { style[(transform = this.transforms[i]).style] = (transform.originX +(transform.targetX - transform.originX) * position).toFixed(3) + "px" + " "+ (transform.originY +(transform.targetY - transform.originY) * position).toFixed(3) + "px" ; this.element.setStyle(style, true); } } });