01 julio, 2008

toElement y outerClick

Un par de snippets para MooTools 1.2 publicados por Jan Kassens en su nuevo blog:

1. toElement: con el nuevo MooTools 1.2 se puede definir un método toElement al definir una clase. Ese método será utilizado por MooTools cuando se haga referencia a un objeto mediante la función $(), de forma que se obtenga una representación visual (en HTML) del objeto automáticamente.

Por ejemplo, para la siguiente clase usuario, se define el método toElement que muestra un elemento DIV con el nombre y la foto del usuario. Cuando se haga referencia desde MooTools a objetos de esa clase con métodos como inject o grab, se obtendrá la representación visual definida por el método.

  var User = new Class({
    initialize: function(name){
      this.name = name;
    },
    toElement: function(){
      if (!this.element) {
        this.element = new Element('div', {'class': 'user'});
        var avatar = new Element('img', {
          src: '/avatars/' + name + '.jpg'
        });
        var description = new Element('div', {
          'class': 'username',
          'text': this.name
        });
        this.element.adopt(avatar, description);
      }
      return this.element;
    }
  });
   
  window.addEvent('domready', function(){
    var alicia = new User('Alicia');
    var juan = new User('Juan');
    $(alicia).inject($(document.body), 'after');
    // añadimos juan a alicia
    $(alicia).grab($(juan))
    // o para inyectar juan tras alicia:
    // $(juan).inject(alicia, 'after');
  });

2. outerClick: Se trata de la definición de un nuevo evento (outerClick) que se dispara cuando el usuario pulsa fuera del área del elemento al que se asocia. Es ideal para diseñar componentes como ventanas emergentes (popup) o Cajas de selección desplegables (dropdown).

(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) {
        window.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) {
        window.removeEvent('click', check);
        events = null;
      }
    }
  };
})();
 
// utilización
window.addEvent('domready', function(){
  $('test').addEvent('outerClick', function(){
    alert('Has hecho click fuera de "test".');
  });
});

Nótese que el evento se define dentro de una estructura ( function (){} )() lo que permite no machacar con las variables definidas en esta implementación las del código en el que se incluya. La función check comprueba si el objeto del evento (onClick) está fuera del elemento a chequear y dispara el evento (outerClick) en ese caso. Dicha función se asocia a window.onClick al definir un nuevo evento.

Publicar un comentario en la entrada

Últimos links en indiza.com