2 moo.fx pack, effects extensions for moo.fx.
\r
3 by Valerio Proietti (http://mad4milk.net) MIT-style LICENSE
\r
4 for more info visit (http://moofx.mad4milk.net).
\r
5 Wednesday, November 16, 2005
\r
9 //text size modify, now works with pixels too.
\r
10 fx.Text = Class.create();
\r
11 fx.Text.prototype = Object.extend(new fx.Base(), {
\r
12 initialize: function(el, options) {
\r
14 this.setOptions(options);
\r
15 if (!this.options.unit) this.options.unit = "em";
\r
18 increase: function() {
\r
19 this.el.style.fontSize = this.now + this.options.unit;
\r
23 //composition effect, calls Width and Height alltogheter
\r
24 fx.Resize = Class.create();
\r
25 fx.Resize.prototype = {
\r
26 initialize: function(el, options) {
\r
27 this.h = new fx.Height(el, options);
\r
28 if (options) options.onComplete = null;
\r
29 this.w = new fx.Width(el, options);
\r
38 modify: function(hto, wto) {
\r
39 this.h.custom(this.el.offsetHeight, this.el.offsetHeight + hto);
\r
40 this.w.custom(this.el.offsetWidth, this.el.offsetWidth + wto);
\r
43 custom: function(hto, wto) {
\r
44 this.h.custom(this.el.offsetHeight, hto);
\r
45 this.w.custom(this.el.offsetWidth, wto);
\r
54 //composition effect, calls Opacity and (Width and/or Height) alltogheter
\r
55 fx.FadeSize = Class.create();
\r
56 fx.FadeSize.prototype = {
\r
57 initialize: function(el, options) {
\r
59 this.el.o = new fx.Opacity(el, options);
\r
60 if (options) options.onComplete = null;
\r
61 this.el.h = new fx.Height(el, options);
\r
62 this.el.w = new fx.Width(el, options);
\r
65 toggle: function() {
\r
67 for (var i = 0; i < arguments.length; i++) {
\r
68 if (arguments[i] == 'height') this.el.h.toggle();
\r
69 if (arguments[i] == 'width') this.el.w.toggle();
\r
75 for (var i = 0; i < arguments.length; i++) {
\r
76 if (arguments[i] == 'height') this.el.h.hide();
\r
77 if (arguments[i] == 'width') this.el.w.hide();
\r
82 //intended to work with arrays.
\r
83 var Multi = new Object();
\r
84 Multi = function(){};
\r
86 initialize: function(elements, options){
\r
87 this.options = options;
\r
88 this.el = this.getElementsFromArray(elements);
\r
89 for (i=0;i<this.el.length;i++){
\r
90 this.effect(this.el[i]);
\r
94 getElementsFromArray: function(array) {
\r
95 var elements = new Array();
\r
96 for (i=0;i<array.length;i++) {
\r
97 elements.push($(array[i]));
\r
103 //Fadesize with arrays
\r
104 fx.MultiFadeSize = Class.create();
\r
105 fx.MultiFadeSize.prototype = Object.extend(new Multi(), {
\r
106 effect: function(el){
\r
107 el.fs = new fx.FadeSize(el, this.options);
\r
110 showThisHideOpen: function(el, delay, mode){
\r
111 for (i=0;i<this.el.length;i++){
\r
112 if (this.el[i].offsetHeight > 0 && this.el[i] != el && this.el[i].h.timer == null && el.h.timer == null){
\r
113 this.el[i].fs.toggle(mode);
\r
114 setTimeout(function(){el.fs.toggle(mode);}.bind(el), delay);
\r
120 hide: function(el, mode){
\r
125 var Remember = new Object();
\r
126 Remember = function(){};
\r
127 Remember.prototype = {
\r
128 initialize: function(el, options){
\r
131 this.options = options;
\r
133 var cookie = this.readCookie();
\r
135 this.fx.now = cookie;
\r
136 this.fx.increase();
\r
140 //cookie functions based on code by Peter-Paul Koch
\r
141 setCookie: function(value) {
\r
142 var date = new Date();
\r
143 date.setTime(date.getTime()+(this.days*24*60*60*1000));
\r
144 var expires = "; expires="+date.toGMTString();
\r
145 document.cookie = this.el+this.el.id+this.prefix+"="+value+expires+"; path=/";
\r
148 readCookie: function() {
\r
149 var nameEQ = this.el+this.el.id+this.prefix + "=";
\r
150 var ca = document.cookie.split(';');
\r
151 for(var i=0;i < ca.length;i++) {
\r
153 while (c.charAt(0)==' ') c = c.substring(1,c.length);
\r
154 if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
\r
159 custom: function(from, to){
\r
160 if (this.fx.now != to) {
\r
161 this.setCookie(to);
\r
162 this.fx.custom(from, to);
\r
167 fx.RememberHeight = Class.create();
\r
168 fx.RememberHeight.prototype = Object.extend(new Remember(), {
\r
169 effect: function(){
\r
170 this.fx = new fx.Height(this.el, this.options);
\r
171 this.prefix = 'height';
\r
174 toggle: function(){
\r
175 if (this.el.offsetHeight == 0) this.setCookie(this.el.scrollHeight);
\r
176 else this.setCookie(0);
\r
180 resize: function(to){
\r
181 this.setCookie(this.el.offsetHeight+to);
\r
182 this.fx.custom(this.el.offsetHeight,this.el.offsetHeight+to);
\r
186 if (!this.readCookie()) {
\r
192 fx.RememberText = Class.create();
\r
193 fx.RememberText.prototype = Object.extend(new Remember(), {
\r
194 effect: function(){
\r
195 this.fx = new fx.Text(this.el, this.options);
\r
196 this.prefix = 'text';
\r
201 //use to attach effects without using js code, just classnames and rel attributes.
\r
202 ParseClassNames = Class.create();
\r
203 ParseClassNames.prototype = {
\r
204 initialize: function(options){
\r
205 var babies = document.getElementsByTagName('*') || document.all;
\r
206 for (var i = 0; i < babies.length; i++) {
\r
207 var el = babies[i];
\r
208 //attach the effect, from the classNames;
\r
209 var effects = this.getEffects(el);
\r
210 for (var j = 0; j < effects.length; j++) {
\r
211 if (j == 1 && options) options.onComplete = null;
\r
212 el[effects[j]+"fx"] = new fx[effects[j]](el, options);
\r
214 //execute methods, from rel
\r
216 el.crel = el.rel.split(' ');
\r
217 if (el.crel[0].indexOf("fx_") > -1) {
\r
218 var event = el.crel[0].replace('fx_', '');
\r
219 var tocompute = this.getEffects($(el.crel[1]));
\r
220 el["on"+event] = function(){
\r
221 for (var f = 0; f < tocompute.length; f++) {
\r
222 $(this.crel[1])[tocompute[f]+"fx"][this.crel[2] || "toggle"](this.crel[3] || null, this.crel[4] || null);
\r
230 getEffects: function(el){
\r
231 var effects = new Array();
\r
232 var css = el.className.split(' ');
\r
233 for (var i = 0; i < css.length; i++) {
\r
234 if (css[i].indexOf('fx_') > -1) {
\r
235 var effect = css[i].replace('fx_', '');
\r
236 effects.push(effect);
\r