Element#replaceClassName

[rajuGT]

I'm using Font Awesome and Glyphicons libraries for icons. I think these libraries are quite popular.

Case: Icons like

• minimize or maximize window
• pin or unpin utility tab

onclick of the above icons we replace with the other one to update the UI. (by changing element's font awesome className)

So I had written the following code which does this

    function replaceClassName(element, className, newClassName) {
        if (!(element = $(element))) return;
        element.removeClassName(className);
        element.addClassName(newClassName);
        return element;
    }

    Element.addMethods({
        replaceClassName : replaceClassName
    });

I'm not sure is this only my requirement or generic one. So I'm just asking prototype community to have this one or not. If yes, I will work on this.

Also let me know if this is not the best way to do it, I've seen Youtube subscribe/unsubscribe button holder component has 2 or 3 button elements for each and it displays one depending upon the action and hides rest of them.

[walterdavis]

I've had to do this before as well, and what I usually do is $('foo').toggleClassName('class-1').toggleClassName('class-2'); Has the benefit of being able to replace the substitution again just by invoking it a second time.

Walter

On May 27, 2015, at 11:36 AM, rajuGT notifications@github.com wrote:

I'm using Font Awesome and Glyphicons libraries for icons. I think these libraries are quite popular.

Case: Icons like

� minimize or maximize window � pin or unpin utility tab onclick of the above icons we replace with the other one to update the UI. (by changing element's font awesome className)

So I had written the following code which does this

function replaceClassName(element, className, newClassName

) {

if (!(element = $(element))) return ; element.removeClassName(className); element.addClassName(newClassName);

return element; }

Element.addMethods({
    replaceClassName 

: replaceClassName });

I'm not sure is this only my requirement or generic one. So I'm just asking prototype community to have this one or not. If yes, I will work on this.

Also let me know if this is not the best way to do it, I've seen Youtube subscribe/unsubscribe button holder component has 2 or 3 button elements for each and it displays one depending upon the action and hides rest of them.

� Reply to this email directly or view it on GitHub.

[rajuGT]

@walterdavis thats really good, nice trick. Yes it has the benefit by calling again second time.

  function toggleClassName(element, className, bool) {
    if (!(element = $(element))) return;

    if (Object.isUndefined(bool))
      bool = !hasClassName(element, className);

    var method = Element[bool ? 'addClassName' : 'removeClassName'];
    return method(element, className);
  }

Just two reasons

1. Meaninful API (name and functionality)
2. Avoids element's null check, prototype extension and hasClassName again in addClassName function.

[savetheclocktower]

Yeah, this is a simple enough task that I think anyone who needs it can write a helper function if they want something terser than $('foo').addClassName('bar').removeClassName('baz'). Closing.