From 8499c24770982b533cc11f3e12171f5151f11e37 Mon Sep 17 00:00:00 2001 From: David Heinemeier Hansson Date: Thu, 31 Mar 2005 11:53:06 +0000 Subject: [PATCH] Added Effect.Puff and Effect.Appear #990, #996 git-svn-id: http://svn-commit.rubyonrails.org/rails/trunk@1046 5ecf4fe2-1ee6-0310-87b1-e25e094e27de --- actionpack/CHANGELOG | 9 +++ .../helpers/javascripts/prototype.js | 67 ++++++++++++++++++- railties/html/javascripts/prototype.js | 67 ++++++++++++++++++- 3 files changed, 141 insertions(+), 2 deletions(-) diff --git a/actionpack/CHANGELOG b/actionpack/CHANGELOG index ebfac7ee0a..bc7686a5b6 100644 --- a/actionpack/CHANGELOG +++ b/actionpack/CHANGELOG @@ -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] diff --git a/actionpack/lib/action_view/helpers/javascripts/prototype.js b/actionpack/lib/action_view/helpers/javascripts/prototype.js index 6081ab191a..5dc41e36dd 100644 --- a/actionpack/lib/action_view/helpers/javascripts/prototype.js +++ b/actionpack/lib/action_view/helpers/javascripts/prototype.js @@ -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'; } -} \ No newline at end of file +} + +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 = ''; + } +} + diff --git a/railties/html/javascripts/prototype.js b/railties/html/javascripts/prototype.js index 6081ab191a..5dc41e36dd 100644 --- a/railties/html/javascripts/prototype.js +++ b/railties/html/javascripts/prototype.js @@ -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'; } -} \ No newline at end of file +} + +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 = ''; + } +} + -- GitLab