blog.kassens.net

Aaron Newton has made a new version of the Binds mutator that's used just like the one I've shown here, but works with MooTools 1.2.

When writing a Class you often want to bind a class method to an event and access this as the instance of the class. You could say this isn't a big deal using .bind(). That's right until it comes to removing the event again, since Function::bind works in that way that it returns a new function wrapping the old one. Hence you need to store that very function when you want to remove it again (without removing all events from that element, which isn't good inside a portable class).

What I've seen a couple of times is an object holding all bound functions and created in the constructor, example:

var MyClass = new Class({
 
   initialize: function(){
      this.bound = {
         sayHello: this.sayHello.bind(this),
         sayGoodbye: this.sayGoodbye.bind(this)
      }
      // now only using this.bound.sayHello and
      // this.bound.sayGoodbye inside the class
   },
 
   sayHello: function() { /* ... */ },
 
   sayGoodbye: function() { /* ... */ }
 
});

I wasn't quite happy with this solution, because it's too verbose: why always use this.bound.myFn when I always want the bound one? Secondly, I don't want to do the binding of all these functions by hand. After some discussions on different solutions this is what I come up with as the optimum between speed (don't worry its faster than the solution above) and usability.

A new so called "class mutator" named Binds. Most of you probably didn't hear of class mutators before, but you sure have used a class mutator before when you've written one or another class. Built in mutators are Implements and Extends and here is the code of the Binds mutator:

Class.Mutators.Binds = function(self, methods) {
 
   $splat(methods).each(function(method){
      var fn = self[method];
      self[method] = function(){
         return fn.apply(self, arguments);
      };
   });
 
};

What it does is overriding all methods passed to it as a string with a version bound to the instance. Binds: 'foo' would just bind foo to the class, Binds: ['foo', 'bar'] binds foo and bar. Pretty simple, huh?

Now let's see how the class can be simplified using the Binds mutator:

var MyClass = new Class({
 
   Binds: ['sayHello', 'sayGoodbye'],
 
   initialize: function(){
      // now only using this.sayHello and
      // this.sayGoodbye inside the class
   },
 
   sayHello: function() { /* ... */ },
 
   sayGoodbye: function() { /* ... */ }
 
});

I hope you learned a bit again or can find use of it.

If you have any wishes or ideas for further articles let me know.

Someone in the #mootoos irc channel wanted an event triggered only when clicked outside of an element but there's nothing built-in, so I thought that it's an interesting event to implement. And since it has at least some reusability I'm going to share the code along with a description of what it's doing.

(function(){
  var events;
  var check = function(e){
    var target = $(e.target);
    var parents = target.getParents();
    events.each(function(item){
      var element = item.element;
      if (element != target && !parents.contains(element))
        item.fn.call(element, e);
    });
  };
  Element.Events.outerClick = {
    onAdd: function(fn){
      if(!events) {
        document.addEvent('click', check);
        events = [];
      }
      events.push({element: this, fn: fn});
    },
    onRemove: function(fn){
      events = events.filter(function(item){
        return item.element != this || item.fn != fn;
      }, this);
      if (!events.length) {
        document.removeEvent('click', check);
        events = null;
      }
    }
  };
})();
 
// usage
window.addEvent('domready', function(){
  $('test').addEvent('outerClick', function(){
    alert('You clicked outside of $("test").');
  });
});
 

First thing you may notice is the (function(){ /* code here */ })() pattern. That creates a private area for the events variable, which will store all the added outerClick events and the check function. This way the global namespace is not polluted.

Now let's take a look at onAdd. It checks if the events variable is set, and if not it initializes it with an empty array and adds the check function as a document click event listener. Note that this is only done once for all outerClick events added. The element and the user supplied event listener fn are pushed to the events array as the last step of onAdd.

onRemove does the same things onAdd does but in reverse. It filters the element with the function and element out of the events array and if the array is empty it removes the document click listener.

Last part of the code to discuss is the check function. The idea behind it is to check if the event target is outside the the element in events and if so it calls the event function. The target is 'inside' the element if its the element itself or if the element is one of the targets parents. In order to do the search for the parents only once per click target.getParents() is saved to a temporary variable.

The post is now way longer than expected, though I hope you've learned a bit from my first serious post.

Welcome to my brand new blog, I'm going to publish random mootools snippets here.