How do I convert this snippet to Mootools

Question

I have a Prototype snippet here that I really want to see converted into Mootools.

document.observe('click', function(e, el) {
    if ( ! e.target.descendantOf('calendar')) {
        Effect.toggle('calendar', 'appear', {duration: 0.4});
    }
});

The snippet catches clicks and if it clicks outside the container $('calendar') should toggle.

Answer 1

Are you trying to catch clicks anywhere in the document? Maybe you could try...

var calendar = $('calendar');
$$('body')[0].addEvent('click', function(e) {
  if (!$(e.target).getParent('#calendar')) {
    var myFx = new Fx.Tween(calendar, {duration: 400});
    myFx.set('display', 'block');
  }
}

I'm not sure how you are toggling visibility but the way Fx.Tween.set works allows you to change any CSS property. You may want to look at http://mootools.net/docs/core/Fx/Fx.Tween for other possibilities.

Also, notice that I wrapped e.target using a $. This is specifically for IE. I wrote a post about this here under the sub-heading "Mootools Events Targets".

Lastly, I factored out $('calendar') so that you are not searching the DOM every time.