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 ? >
