Thanks for the answers. Is there a way I could extend only the elements I specify and not the Element class itself ? It seems to me, that not all elements should have the functionality I'm trying to add.
On Aug 25, 6:05 pm, Aaron Newton <[email protected]> wrote: > Be cautious about what you name these > properties. In general, you should try and ensure your names are > relatively unique. Naming an element method "scroll" is quite likely > to collide with something elsewhere. Try and give your name something > less likely to be overwritten. > As for the best way to add such methods, Arian is correct. Look at > Fx.Tween or Fx.Reveal for examples. > > On Tue, Aug 25, 2009 at 3:59 PM, Arian <[email protected]> wrote: > > > I have a solution for your first problem: > > > You can create something link this: > > > Element.Properties.scroller = { > > > set: function(options){ > > this.eliminate('scroller').store('scroller:options',options); > > }, > > > get: function(options){ > > if (options || !this.retrieve('scroller')){ > > if (options || !this.retrieve('scroller:options')) > > this.set('scroller', options); > > this.store('scroller', new Scroller(this, this.retrieve > > ('scroller:options'))); > > } > > > }; > > > Element.implement({ > > > scroll: function(what){ > > var scroller = this.get('scroller'); > > switch(what){ > > case: 'start': scroller.start(); break; > > case: 'next': scroller.nextItem(); break; > > } > > } > > > }); > > > On this way you can do the same thing like Fx.Tween, first you can do > > elmt.set('scroller',{options}); > > and then elmt.scroll('start'); > > > and that looks pretty semantic... > > > On 25 aug, 20:11, reaktivo <[email protected]> wrote: > > > I'm creating a scrolling text ticker class in MooTools, named > > > Scroller. The initializer takes two arguments, the element it's going > > > to "control" and the options for the scroller, and has a bunch of > > > methods start(), stop(), nextItem(), toggle(), etc. The initializer > > > calls the occlude method of Class.Occlude. So an example for calling > > > it is: > > > > var s = new Scroller($("scroller"), options); > > > > then call s.start() or s.nextItem() or whatever. > > > > I want to be able to add the methods to the element itself, so I could > > > call $('scroller').nextItem(), $('scoller').start(), etc. It just > > > seems more semantically correct, but it seems to be frowned upon, or > > > I've never seen it in use, I suppose there's a reason, I just want to > > > know why. > > > > Also, whenever I write a class for example the scroller, I'll add > > > this: > > > > $extend (Scroller, { > > > all: function(els, options) { > > > els.each(function(el) { > > > new Scroller(el, options); > > > }); > > > } > > > }); > > > > and this: > > > > Scroller.all($$('.moo-scroller'), { > > > interval: 4000, > > > //autostart: false, > > > tween: { > > > duration: 1000, > > > transition: "expo:in:out" > > > } > > > }); > > > > So I can just add my script tag before </body> and add classes > > > correspondingly. So I'm thinking of creating a "Widgeter" class that > > > handles this and more, so my own Scroller class and any other class > > > could add itself to Widgeter like so: > > > > initializer: function() { > > > ... > > > if(Widgeter) Widgeter.add(Scroller); > > > > } > > > > and Widgeter would have a function something like this: > > > > $extend(Widgeter, { > > > > prefix: 'widget-', > > > > add: function(widget_class) { > > > if(!widgets_arr.contains(widget_class)) widgets_arr.push > > > (widget_class); > > > }, > > > > init: function() { > > > widgets_arr.each(this.widgetize); > > > }, > > > > widgetize: function(widget_class, options) { > > > $$(this.prefix + > > widget_class.toLowerCase()).each(function(element) > > > { > > > new widget_class(element, options); > > > this.occlude(widget_class.toString(), element); > > > }); > > > > } > > > > }); > > > > so all the classes that add functionality to elements. > > > > So what do you think ?
