That's not how prototypal inheritance works, and attaching methods to specific elements presents garbage collection issues. In short, not really. Perhaps element shortcuts aren't really what you need. Is it really so bad to have to refer to the instance of a class?
On Tue, Aug 25, 2009 at 9:00 PM, reaktivo <[email protected]> wrote: > > 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 ? >
