diff options
| -rw-r--r-- | actionpack/CHANGELOG | 4 | ||||
| -rw-r--r-- | actionpack/lib/action_view/helpers/javascripts/prototype.js | 66 | ||||
| -rw-r--r-- | railties/html/javascripts/prototype.js | 66 |
3 files changed, 136 insertions, 0 deletions
diff --git a/actionpack/CHANGELOG b/actionpack/CHANGELOG index a12e5db90d..b38df11a2a 100644 --- a/actionpack/CHANGELOG +++ b/actionpack/CHANGELOG @@ -1,5 +1,9 @@ *SVN* +* Added Effect.Squish for scaling down an element and making it disappear at the end #972 [thomas@fesch.at] + +* Added Effect.Scale for smoothly scaling images or text up and down #972 [thomas@fesch.at] + * Added 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 2541866ccb..031149619e 100644 --- a/actionpack/lib/action_view/helpers/javascripts/prototype.js +++ b/actionpack/lib/action_view/helpers/javascripts/prototype.js @@ -481,4 +481,70 @@ Effect.Fade.prototype = { element.style.filter = "alpha(opacity:"+opacity+")"; element.style.opacity = opacity/100; } +} + +Effect.Scale = Class.create(); +Effect.Scale.prototype = { + initialize: function(element, percent) { + this.element = $(element); + this.startScale = 1.0; + this.startHeight = this.element.height || this.element.offsetHeight; + this.startWidth = this.element.width || this.element.offsetWidth; + this.currentHeight = this.startHeight; + this.currentWidth = this.startWidth; + this.finishScale = (percent/100); + if (element.style.fontSize=="") this.sizeEm = 1.0; + if (element.style.fontSize && element.style.fontSize.indexOf("em")>0) + this.sizeEm = parseFloat(element.style.fontSize); + if(this.element.effect_scale) { + clearTimeout(this.element.effect_scale.timer); + this.startScale = element.effect_scale.currentScale; + this.startHeight = element.effect_scale.startHeight; + this.startWidth = element.effect_scale.startWidth; + if(element.effect_scale.sizeEm) + this.sizeEm = element.effect_scale.sizeEm; + } + this.element.effect_scale = this; + this.currentScale = this.startScale; + this.factor = this.finishScale - this.startScale; + this.options = arguments[2] || {}; + this.scale(); + }, + + scale: function() { + if (this.isFinished()) { + this.setDimensions(this.element, this.startWidth*this.finishScale, this.startHeight*this.finishScale); + if(this.sizeEm) this.element.style.fontSize = this.sizeEm*this.finishScale + "em"; + if(this.options.complete) this.options.complete(this); + return; + } + if (this.timer) clearTimeout(this.timer); + 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); + this.currentWidth = this.startWidth * this.currentScale; + this.currentHeight = this.startHeight * this.currentScale; + this.timer = setTimeout(this.scale.bind(this), 50); + }, + + isFinished: function() { + return (this.factor < 0) ? + this.currentScale <= this.finishScale : this.currentScale >= this.finishScale; + }, + + setDimensions: function(element, width, height) { + element.style.width = width + 'px'; + element.style.height = height + 'px'; + } +} + +Effect.Squish = Class.create(); +Effect.Squish.prototype = { + initialize: function(element) { + this.element = $(element); + new Effect.Scale(element, 1, { complete: this.hide.bind(this) } ); + }, + hide: function() { + this.element.style.display = 'none'; + } }
\ No newline at end of file diff --git a/railties/html/javascripts/prototype.js b/railties/html/javascripts/prototype.js index 2541866ccb..031149619e 100644 --- a/railties/html/javascripts/prototype.js +++ b/railties/html/javascripts/prototype.js @@ -481,4 +481,70 @@ Effect.Fade.prototype = { element.style.filter = "alpha(opacity:"+opacity+")"; element.style.opacity = opacity/100; } +} + +Effect.Scale = Class.create(); +Effect.Scale.prototype = { + initialize: function(element, percent) { + this.element = $(element); + this.startScale = 1.0; + this.startHeight = this.element.height || this.element.offsetHeight; + this.startWidth = this.element.width || this.element.offsetWidth; + this.currentHeight = this.startHeight; + this.currentWidth = this.startWidth; + this.finishScale = (percent/100); + if (element.style.fontSize=="") this.sizeEm = 1.0; + if (element.style.fontSize && element.style.fontSize.indexOf("em")>0) + this.sizeEm = parseFloat(element.style.fontSize); + if(this.element.effect_scale) { + clearTimeout(this.element.effect_scale.timer); + this.startScale = element.effect_scale.currentScale; + this.startHeight = element.effect_scale.startHeight; + this.startWidth = element.effect_scale.startWidth; + if(element.effect_scale.sizeEm) + this.sizeEm = element.effect_scale.sizeEm; + } + this.element.effect_scale = this; + this.currentScale = this.startScale; + this.factor = this.finishScale - this.startScale; + this.options = arguments[2] || {}; + this.scale(); + }, + + scale: function() { + if (this.isFinished()) { + this.setDimensions(this.element, this.startWidth*this.finishScale, this.startHeight*this.finishScale); + if(this.sizeEm) this.element.style.fontSize = this.sizeEm*this.finishScale + "em"; + if(this.options.complete) this.options.complete(this); + return; + } + if (this.timer) clearTimeout(this.timer); + 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); + this.currentWidth = this.startWidth * this.currentScale; + this.currentHeight = this.startHeight * this.currentScale; + this.timer = setTimeout(this.scale.bind(this), 50); + }, + + isFinished: function() { + return (this.factor < 0) ? + this.currentScale <= this.finishScale : this.currentScale >= this.finishScale; + }, + + setDimensions: function(element, width, height) { + element.style.width = width + 'px'; + element.style.height = height + 'px'; + } +} + +Effect.Squish = Class.create(); +Effect.Squish.prototype = { + initialize: function(element) { + this.element = $(element); + new Effect.Scale(element, 1, { complete: this.hide.bind(this) } ); + }, + hide: function() { + this.element.style.display = 'none'; + } }
\ No newline at end of file |