github/rails
1
1
Fork 0
mirror of https://github.com/github/rails.git synced 2026-04-26 03:00:59 -04:00
Code Issues Packages Projects Releases Wiki Activity

Added Effect.Scale for smoothly scaling images or text up and down #972 [thomas@fesch.at] Added Effect.Squish for scaling down an element and making it disappear at the end #972 [thomas@fesch.at]

Browse Source 
git-svn-id: http://svn-commit.rubyonrails.org/rails/trunk@1033 5ecf4fe2-1ee6-0310-87b1-e25e094e27de
This commit is contained in:
David Heinemeier Hansson
2005-03-28 23:32:24 +00:00
parent b0c0c9c2ef
commit ce2fe88d53
3 changed files with 136 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
actionpack/CHANGELOG
View File

@@ -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]

66
actionpack/lib/action_view/helpers/javascripts/prototype.js vendored
View File

@@ -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';
}
}