CODEWITHSUNDEEP
javascriptmootools
joe
joe

Reputation: 23

fx.morph list on "click" instead of "mouseenter"

I'm trying to get similar results to the fx.morph demo but on clicks instead of "mouseenter" or "mouseleave." If a list option is clicked it should morph. If another item is clicked it should morph while the original morphs to it's default state. The first part is a no brainer but so far I haven't been able to get the second part to work as desired. I tried creating a "clickOutside" event but that only works if you click somewhere that's not a list item. the new item will morph but the old one does not revert back to its original state.

Where I am so far:

Element.Events.outerClick = {
    base : 'click',
    condition : function(event){
        event.stopPropagation();
        return false;
    },
    onAdd : function(fn){
        this.getDocument().addEvent('click', fn);
    },
    onRemove : function(fn){
        this.getDocument().removeEvent('click', fn);
    }
};

window.addEvent('domready', function() {
    $$('#idList LI').each(function(el) {
        el.set('morph', {
            duration: 200
        }).addEvents({
            click: el.morph.pass('.hover', el),
            outerClick: el.morph.pass('.default', el)
        });
    });

});​

If you want to fiddle: http://jsfiddle.net/JXTMa/

I reverted it back to the original mouseenter example for the sake of illustrating the original concept.

Upvotes: 2

Views: 127

Answers (1)

Nils
Nils

Reputation: 2061

The outerClick event will be stoped by e.stopPropagation so you will need to trigger that event manually with this.getDocument().fireEvent('click')

Element.Events.outerClick = {
    base : 'click',
    condition : function(event){
        event.stopPropagation();
        this.getDocument().fireEvent('click');
        return false;
    },
    onAdd : function(fn){
        this.getDocument().addEvent('click', fn);
    },
    onRemove : function(fn){
        this.getDocument().removeEvent('click', fn);
    }
};

Here is an example fiddle: http://jsfiddle.net/cNNjP/1/

Another way that I sometimes like is to create a class and use it as an Component. Here is an example for that: http://jsfiddle.net/kVnY4/3/

Edit: Updated the second fiddle where my component utilizes toElement and store. Check your javascript console and you will see first element retrieval from object and then object retrieval from element.

Upvotes: 1

Related Questions