This project is archived and is in readonly mode.

#688 ✓invalid
Anthony McLin

wishlist: element.switchClass()

Reported by Anthony McLin | June 17th, 2009 @ 01:26 AM | in 2.0 (closed)

I'd like to propose a new method for element, switchClass. Similar to toggleClass, but what it would do is take two CSS class names and swap them out if they occur.

This would be incredibly useful for changing classnames on elements. For example it could be used onComplete of a Fx.Morph to assign styles. Here's a sample of how this function could work:

Element.implement({ switchClass: function(from, to){

if (this.hasClass(from)) {
    this.removeClass(from);
    this.addClass(to);
    return this;
}

if (this.hasClass(to)) {
    this.removeClass(to);
    this.addClass(from);
    return this;
}

});

Comments and changes to this ticket

  • Chris the Developer

    Chris the Developer June 17th, 2009 @ 06:24 AM

    so, like...

    Element.implement({
        switchClass: function(from, to) {
            if (this.hasClass(from))
                return this.removeClass(from).addClass(to);
            if (this.hasClass(to))
                return this.removeClass(to).addClass(from);
        }
    });
    
  • Chris the Developer

    Chris the Developer June 17th, 2009 @ 06:27 AM

    or, better yet...

    Element.implement({

    switchClass: function(from, to) {
        if (this.hasClass(from)){
            return this.removeClass(from).addClass(to);
        }
        else if (this.hasClass(to)){
            return this.removeClass(to).addClass(from);
        }
        return this;
    }
    
    
    
    
    });
  • Fábio M. Costa

    Fábio M. Costa June 17th, 2009 @ 01:19 PM

    This looks kind of usefull.

    Element.implement({
        switchClass: function(from, to) {
            return (this.hasClass(from))? this.removeClass(from).addClass(to):
                           (this.hasClass(to))? this.removeClass(to).addClass(from):
                           this;
        }
    });
    
  • Chris the Developer

    Chris the Developer June 17th, 2009 @ 09:58 PM

    since we're going for interesting ways to do the same thing...

    Element.implement({
        switchClass: function(from, to, second) {
            return this.hasClass(from && !second) ? this.removeClass(from).addClass(to): this.switchClass(to, from, true);
        }
    });
    

    :P

  • Christoph Pojer

    Christoph Pojer June 25th, 2009 @ 09:55 AM

    • State changed from “new” to “invalid”

    MooTools-Core provides a base for you and includes the most common and important features. As you know it is possible for you to extend this base functionality so you can easily add this to your own code :)

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile »

Shared Ticket Bins

People watching this ticket

Pages