241 lines
6.0 KiB
JavaScript
241 lines
6.0 KiB
JavaScript
|
/*
|
||
|
moo.fx pack, effects extensions for moo.fx.
|
||
|
by Valerio Proietti (http://mad4milk.net) MIT-style LICENSE
|
||
|
for more info visit (http://moofx.mad4milk.net).
|
||
|
Wednesday, November 16, 2005
|
||
|
v1.0.4
|
||
|
*/
|
||
|
|
||
|
//text size modify, now works with pixels too.
|
||
|
fx.Text = Class.create();
|
||
|
fx.Text.prototype = Object.extend(new fx.Base(), {
|
||
|
initialize: function(el, options) {
|
||
|
this.el = $(el);
|
||
|
this.setOptions(options);
|
||
|
if (!this.options.unit) this.options.unit = "em";
|
||
|
},
|
||
|
|
||
|
increase: function() {
|
||
|
this.el.style.fontSize = this.now + this.options.unit;
|
||
|
}
|
||
|
});
|
||
|
|
||
|
//composition effect, calls Width and Height alltogheter
|
||
|
fx.Resize = Class.create();
|
||
|
fx.Resize.prototype = {
|
||
|
initialize: function(el, options) {
|
||
|
this.h = new fx.Height(el, options);
|
||
|
if (options) options.onComplete = null;
|
||
|
this.w = new fx.Width(el, options);
|
||
|
this.el = $(el);
|
||
|
},
|
||
|
|
||
|
toggle: function(){
|
||
|
this.h.toggle();
|
||
|
this.w.toggle();
|
||
|
},
|
||
|
|
||
|
modify: function(hto, wto) {
|
||
|
this.h.custom(this.el.offsetHeight, this.el.offsetHeight + hto);
|
||
|
this.w.custom(this.el.offsetWidth, this.el.offsetWidth + wto);
|
||
|
},
|
||
|
|
||
|
custom: function(hto, wto) {
|
||
|
this.h.custom(this.el.offsetHeight, hto);
|
||
|
this.w.custom(this.el.offsetWidth, wto);
|
||
|
},
|
||
|
|
||
|
hide: function(){
|
||
|
this.h.hide();
|
||
|
this.w.hide();
|
||
|
}
|
||
|
}
|
||
|
|
||
|
//composition effect, calls Opacity and (Width and/or Height) alltogheter
|
||
|
fx.FadeSize = Class.create();
|
||
|
fx.FadeSize.prototype = {
|
||
|
initialize: function(el, options) {
|
||
|
this.el = $(el);
|
||
|
this.el.o = new fx.Opacity(el, options);
|
||
|
if (options) options.onComplete = null;
|
||
|
this.el.h = new fx.Height(el, options);
|
||
|
this.el.w = new fx.Width(el, options);
|
||
|
},
|
||
|
|
||
|
toggle: function() {
|
||
|
this.el.o.toggle();
|
||
|
for (var i = 0; i < arguments.length; i++) {
|
||
|
if (arguments[i] == 'height') this.el.h.toggle();
|
||
|
if (arguments[i] == 'width') this.el.w.toggle();
|
||
|
}
|
||
|
},
|
||
|
|
||
|
hide: function(){
|
||
|
this.el.o.hide();
|
||
|
for (var i = 0; i < arguments.length; i++) {
|
||
|
if (arguments[i] == 'height') this.el.h.hide();
|
||
|
if (arguments[i] == 'width') this.el.w.hide();
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
//intended to work with arrays.
|
||
|
var Multi = new Object();
|
||
|
Multi = function(){};
|
||
|
Multi.prototype = {
|
||
|
initialize: function(elements, options){
|
||
|
this.options = options;
|
||
|
this.el = this.getElementsFromArray(elements);
|
||
|
for (i=0;i<this.el.length;i++){
|
||
|
this.effect(this.el[i]);
|
||
|
}
|
||
|
},
|
||
|
|
||
|
getElementsFromArray: function(array) {
|
||
|
var elements = new Array();
|
||
|
for (i=0;i<array.length;i++) {
|
||
|
elements.push($(array[i]));
|
||
|
}
|
||
|
return elements;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
//Fadesize with arrays
|
||
|
fx.MultiFadeSize = Class.create();
|
||
|
fx.MultiFadeSize.prototype = Object.extend(new Multi(), {
|
||
|
effect: function(el){
|
||
|
el.fs = new fx.FadeSize(el, this.options);
|
||
|
},
|
||
|
|
||
|
showThisHideOpen: function(el, delay, mode){
|
||
|
for (i=0;i<this.el.length;i++){
|
||
|
if (this.el[i].offsetHeight > 0 && this.el[i] != el && this.el[i].h.timer == null && el.h.timer == null){
|
||
|
this.el[i].fs.toggle(mode);
|
||
|
setTimeout(function(){el.fs.toggle(mode);}.bind(el), delay);
|
||
|
}
|
||
|
|
||
|
}
|
||
|
},
|
||
|
|
||
|
hide: function(el, mode){
|
||
|
el.fs.hide(mode);
|
||
|
}
|
||
|
});
|
||
|
|
||
|
var Remember = new Object();
|
||
|
Remember = function(){};
|
||
|
Remember.prototype = {
|
||
|
initialize: function(el, options){
|
||
|
this.el = $(el);
|
||
|
this.days = 365;
|
||
|
this.options = options;
|
||
|
this.effect();
|
||
|
var cookie = this.readCookie();
|
||
|
if (cookie) {
|
||
|
this.fx.now = cookie;
|
||
|
this.fx.increase();
|
||
|
}
|
||
|
},
|
||
|
|
||
|
//cookie functions based on code by Peter-Paul Koch
|
||
|
setCookie: function(value) {
|
||
|
var date = new Date();
|
||
|
date.setTime(date.getTime()+(this.days*24*60*60*1000));
|
||
|
var expires = "; expires="+date.toGMTString();
|
||
|
document.cookie = this.el+this.el.id+this.prefix+"="+value+expires+"; path=/";
|
||
|
},
|
||
|
|
||
|
readCookie: function() {
|
||
|
var nameEQ = this.el+this.el.id+this.prefix + "=";
|
||
|
var ca = document.cookie.split(';');
|
||
|
for(var i=0;i < ca.length;i++) {
|
||
|
var c = ca[i];
|
||
|
while (c.charAt(0)==' ') c = c.substring(1,c.length);
|
||
|
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
|
||
|
}
|
||
|
return false;
|
||
|
},
|
||
|
|
||
|
custom: function(from, to){
|
||
|
if (this.fx.now != to) {
|
||
|
this.setCookie(to);
|
||
|
this.fx.custom(from, to);
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
fx.RememberHeight = Class.create();
|
||
|
fx.RememberHeight.prototype = Object.extend(new Remember(), {
|
||
|
effect: function(){
|
||
|
this.fx = new fx.Height(this.el, this.options);
|
||
|
this.prefix = 'height';
|
||
|
},
|
||
|
|
||
|
toggle: function(){
|
||
|
if (this.el.offsetHeight == 0) this.setCookie(this.el.scrollHeight);
|
||
|
else this.setCookie(0);
|
||
|
this.fx.toggle();
|
||
|
},
|
||
|
|
||
|
resize: function(to){
|
||
|
this.setCookie(this.el.offsetHeight+to);
|
||
|
this.fx.custom(this.el.offsetHeight,this.el.offsetHeight+to);
|
||
|
},
|
||
|
|
||
|
hide: function(){
|
||
|
if (!this.readCookie()) {
|
||
|
this.fx.hide();
|
||
|
}
|
||
|
}
|
||
|
});
|
||
|
|
||
|
fx.RememberText = Class.create();
|
||
|
fx.RememberText.prototype = Object.extend(new Remember(), {
|
||
|
effect: function(){
|
||
|
this.fx = new fx.Text(this.el, this.options);
|
||
|
this.prefix = 'text';
|
||
|
}
|
||
|
});
|
||
|
|
||
|
|
||
|
//use to attach effects without using js code, just classnames and rel attributes.
|
||
|
ParseClassNames = Class.create();
|
||
|
ParseClassNames.prototype = {
|
||
|
initialize: function(options){
|
||
|
var babies = document.getElementsByTagName('*') || document.all;
|
||
|
for (var i = 0; i < babies.length; i++) {
|
||
|
var el = babies[i];
|
||
|
//attach the effect, from the classNames;
|
||
|
var effects = this.getEffects(el);
|
||
|
for (var j = 0; j < effects.length; j++) {
|
||
|
if (j == 1 && options) options.onComplete = null;
|
||
|
el[effects[j]+"fx"] = new fx[effects[j]](el, options);
|
||
|
}
|
||
|
//execute methods, from rel
|
||
|
if (el.rel) {
|
||
|
el.crel = el.rel.split(' ');
|
||
|
if (el.crel[0].indexOf("fx_") > -1) {
|
||
|
var event = el.crel[0].replace('fx_', '');
|
||
|
var tocompute = this.getEffects($(el.crel[1]));
|
||
|
el["on"+event] = function(){
|
||
|
for (var f = 0; f < tocompute.length; f++) {
|
||
|
$(this.crel[1])[tocompute[f]+"fx"][this.crel[2] || "toggle"](this.crel[3] || null, this.crel[4] || null);
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
},
|
||
|
|
||
|
getEffects: function(el){
|
||
|
var effects = new Array();
|
||
|
var css = el.className.split(' ');
|
||
|
for (var i = 0; i < css.length; i++) {
|
||
|
if (css[i].indexOf('fx_') > -1) {
|
||
|
var effect = css[i].replace('fx_', '');
|
||
|
effects.push(effect);
|
||
|
}
|
||
|
}
|
||
|
return effects;
|
||
|
}
|
||
|
}
|