2 Script: Class.Extras.js
3 Contains common implementations for custom classes. In Mootools is implemented in <Ajax>, <XHR> and <Fx.Base> and many more.
11 An "Utility" Class. Its methods can be implemented with <Class.implement> into any <Class>.
12 Currently implemented in <Fx.Base>, <XHR> and <Ajax>. In <Fx.Base> for example, is used to execute a list of function, one after another, once the effect is completed.
13 The functions will not be fired all togheter, but one every completion, to create custom complex animations.
17 var myFx = new Fx.Style('element', 'opacity');
19 myFx.start(1,0).chain(function(){
26 //the element will appear and disappear three times
30 var Chain = new Class({
34 adds a function to the Chain instance stack.
37 fn - the function to append.
41 this.chains = this.chains || [];
48 Executes the first function of the Chain instance stack, then removes it. The first function will then become the second.
51 callChain: function(){
52 if (this.chains && this.chains.length) this.chains.shift().delay(10, this);
57 Clears the stack of a Chain instance.
60 clearChain: function(){
68 An "Utility" Class. Its methods can be implemented with <Class.implement> into any <Class>.
70 In <Fx.Base> Class, for example, is used to give the possibility add any number of functions to the Effects events, like onComplete, onStart, onCancel.
74 var myFx = new Fx.Style('element', 'opacity').addEvent('onComplete', function(){
75 alert('the effect is completed');
76 }).addEvent('onComplete', function(){
77 alert('I told you the effect is completed');
81 //upon completion it will display the 2 alerts, in order.
85 This class can be implemented into other classes to add the functionality to them.
86 Goes well with the <Options> class.
90 var Widget = new Class({
91 initialize: function(){},
93 this.fireEvent('onComplete');
96 Widget.implement(new Events);
98 var myWidget = new Widget();
99 myWidget.addEvent('onComplete', myfunction);
103 var Events = new Class({
107 adds an event to the stack of events of the Class instance.
110 type - string; the event name (e.g. 'onComplete')
111 fn - function to execute
114 addEvent: function(type, fn){
115 if (fn != Class.empty){
116 this.$events = this.$events || {};
117 this.$events[type] = this.$events[type] || [];
118 this.$events[type].include(fn);
125 fires all events of the specified type in the Class instance.
128 type - string; the event name (e.g. 'onComplete')
129 args - array or single object; arguments to pass to the function; if more than one argument, must be an array
130 delay - (integer) delay (in ms) to wait to execute the event
134 var Widget = new Class({
135 initialize: function(arg1, arg2){
137 this.fireEvent("onInitialize", [arg1, arg2], 50);
140 Widget.implement(new Events);
144 fireEvent: function(type, args, delay){
145 if (this.$events && this.$events[type]){
146 this.$events[type].each(function(fn){
147 fn.create({'bind': this, 'delay': delay, 'arguments': args})();
154 Property: removeEvent
155 removes an event from the stack of events of the Class instance.
158 type - string; the event name (e.g. 'onComplete')
159 fn - function that was added
162 removeEvent: function(type, fn){
163 if (this.$events && this.$events[type]) this.$events[type].remove(fn);
171 An "Utility" Class. Its methods can be implemented with <Class.implement> into any <Class>.
172 Used to automate the options settings, also adding Class <Events> when the option begins with on.
176 var Widget = new Class({
184 initialize: function(options){
185 this.setOptions(options);
188 Widget.implement(new Options);
190 var myWidget = new Widget({
196 //myWidget.options = {color: #f00, size: {width: 200, height: 100}}
200 var Options = new Class({
207 defaults - object; the default set of options
208 options - object; the user entered options. can be empty too.
211 if your Class has <Events> implemented, every option beginning with on, followed by a capital letter (onComplete) becomes an Class instance event.
214 setOptions: function(){
215 this.options = $merge.apply(null, [this.options].extend(arguments));
216 if (!this.addEvent) return this;
217 for (var option in this.options){
218 if ($type(this.options[option] == 'function') && option.test(/^on[A-Z]/)) this.addEvent(option, this.options[option]);