Permalink
Browse files

Added Effect.Puff and Effect.Appear #990, #996

git-svn-id: http://svn-commit.rubyonrails.org/rails/trunk@1046 5ecf4fe2-1ee6-0310-87b1-e25e094e27de
  • Loading branch information...
1 parent 93e361e commit 8499c24770982b533cc11f3e12171f5151f11e37 @dhh dhh committed Mar 31, 2005
@@ -3,8 +3,17 @@
* Fixed that on very rare occasions, webrick would raise a NoMethodError: private method 'split' called for nil #1001 [Flurin Egger]
* Added a wide range of new Javascript effects:
+ * Effect.Puff zooms the element out and makes it smoothly transparent at the same time, giving a "puff" illusion #996 [thomas@fesch.at]
+ After the animation is completed, the display property will be set to none.
+ This effect will work on relative and absolute positioned elements.
+
+ * Effect.Appear as the opposite of Effect.Fade #990 [thomas@fesch.at]
+ You should return elements with style="display:none;" or a like class for this to work best and have no chance of flicker.
+
* Effect.Squish for scaling down an element and making it disappear at the end #972 [thomas@fesch.at]
+
* Effect.Scale for smoothly scaling images or text up and down #972 [thomas@fesch.at]
+
* Effect.Fade which smoothly turns opacity from 100 to 0 and then hides the element #960 [thomas@fesch.at]
* Fixed problem with page caching #958 [Rick Olson]
@@ -519,6 +519,7 @@ Effect.Scale.prototype = {
return;
}
if (this.timer) clearTimeout(this.timer);
+ if (this.options.step) this.options.step(this);
this.setDimensions(this.element, this.currentWidth, this.currentHeight);
if(this.sizeEm) this.element.style.fontSize = this.sizeEm*this.currentScale + "em";
this.currentScale += (this.factor/10);
@@ -547,4 +548,68 @@ Effect.Squish.prototype = {
hide: function() {
this.element.style.display = 'none';
}
-}
+}
+
+Effect.Puff = Class.create();
+Effect.Puff.prototype = {
+ initialize: function(element) {
+ this.element = $(element);
+ this.opacity = 100;
+ this.startTop = this.element.top || this.element.offsetTop;
+ this.startLeft = this.element.left || this.element.offsetLeft;
+ new Effect.Scale(this.element, 200, { step: this.fade.bind(this), complete: this.hide.bind(this) } );
+ },
+ fade: function(effect) {
+ topd = (((effect.currentScale)*effect.startHeight) - effect.startHeight)/2;
+ leftd = (((effect.currentScale)*effect.startWidth) - effect.startWidth)/2;
+ if(this.element.style.position='absolute') {
+ this.element.style.top = this.startTop-topd + "px";
+ this.element.style.left = this.startLeft-leftd + "px";
+ } else {
+ this.element.style.top = -topd + "px";
+ this.element.style.left = -leftd + "px";
+ }
+ this.opacity -= 10;
+ this.setOpacity(this.element, this.opacity);
+ if(navigator.appVersion.indexOf('AppleWebKit')>0) this.element.innerHTML += ''; //force redraw on safari
+ },
+ hide: function() {
+ this.element.style.display = 'none';
+ },
+ setOpacity: function(element, opacity) {
+ opacity = (opacity == 100) ? 99.999 : opacity;
+ element.style.filter = "alpha(opacity:"+opacity+")";
+ element.style.opacity = opacity/100;
+ }
+}
+
+Effect.Appear = Class.create();
+Effect.Appear.prototype = {
+ initialize: function(element) {
+ this.element = $(element);
+ this.start = 0;
+ this.finish = 100;
+ this.current = this.start;
+ this.fade();
+ },
+
+ fade: function() {
+ if (this.isFinished()) return;
+ if (this.timer) clearTimeout(this.timer);
+ this.setOpacity(this.element, this.current);
+ this.current += 10;
+ this.timer = setTimeout(this.fade.bind(this), 100);
+ },
+
+ isFinished: function() {
+ return this.current > this.finish;
+ },
+
+ setOpacity: function(element, opacity) {
+ opacity = (opacity == 100) ? 99.999 : opacity;
+ element.style.filter = "alpha(opacity:"+opacity+")";
+ element.style.opacity = opacity/100;
+ element.style.display = '';
+ }
+}
+
@@ -519,6 +519,7 @@ Effect.Scale.prototype = {
return;
}
if (this.timer) clearTimeout(this.timer);
+ if (this.options.step) this.options.step(this);
this.setDimensions(this.element, this.currentWidth, this.currentHeight);
if(this.sizeEm) this.element.style.fontSize = this.sizeEm*this.currentScale + "em";
this.currentScale += (this.factor/10);
@@ -547,4 +548,68 @@ Effect.Squish.prototype = {
hide: function() {
this.element.style.display = 'none';
}
-}
+}
+
+Effect.Puff = Class.create();
+Effect.Puff.prototype = {
+ initialize: function(element) {
+ this.element = $(element);
+ this.opacity = 100;
+ this.startTop = this.element.top || this.element.offsetTop;
+ this.startLeft = this.element.left || this.element.offsetLeft;
+ new Effect.Scale(this.element, 200, { step: this.fade.bind(this), complete: this.hide.bind(this) } );
+ },
+ fade: function(effect) {
+ topd = (((effect.currentScale)*effect.startHeight) - effect.startHeight)/2;
+ leftd = (((effect.currentScale)*effect.startWidth) - effect.startWidth)/2;
+ if(this.element.style.position='absolute') {
+ this.element.style.top = this.startTop-topd + "px";
+ this.element.style.left = this.startLeft-leftd + "px";
+ } else {
+ this.element.style.top = -topd + "px";
+ this.element.style.left = -leftd + "px";
+ }
+ this.opacity -= 10;
+ this.setOpacity(this.element, this.opacity);
+ if(navigator.appVersion.indexOf('AppleWebKit')>0) this.element.innerHTML += ''; //force redraw on safari
+ },
+ hide: function() {
+ this.element.style.display = 'none';
+ },
+ setOpacity: function(element, opacity) {
+ opacity = (opacity == 100) ? 99.999 : opacity;
+ element.style.filter = "alpha(opacity:"+opacity+")";
+ element.style.opacity = opacity/100;
+ }
+}
+
+Effect.Appear = Class.create();
+Effect.Appear.prototype = {
+ initialize: function(element) {
+ this.element = $(element);
+ this.start = 0;
+ this.finish = 100;
+ this.current = this.start;
+ this.fade();
+ },
+
+ fade: function() {
+ if (this.isFinished()) return;
+ if (this.timer) clearTimeout(this.timer);
+ this.setOpacity(this.element, this.current);
+ this.current += 10;
+ this.timer = setTimeout(this.fade.bind(this), 100);
+ },
+
+ isFinished: function() {
+ return this.current > this.finish;
+ },
+
+ setOpacity: function(element, opacity) {
+ opacity = (opacity == 100) ? 99.999 : opacity;
+ element.style.filter = "alpha(opacity:"+opacity+")";
+ element.style.opacity = opacity/100;
+ element.style.display = '';
+ }
+}
+

0 comments on commit 8499c24

Please sign in to comment.