Wednesday 30 January 2008

Grails: Tag for Prototype observe

Continuing with Grails taglib, now I'm going to do a taglib to easy capture and group javascript events. I'll use prototype element observe method. Here the code:


def observe = {attrs ->
if(!attrs.noScript){
out << '<script type="text/javascript">'
}
if(attrs.element && attrs.element instanceof String){
printObserve("\$('${attrs.element}')", attrs.event, attrs.function, out)
}
if(attrs.element && attrs.element instanceof List){
attrs.element.each{it -> printObserve("\$('${it}')", attrs.event, attrs.function, out)}
}
if(attrs.classes && attrs.classes instanceof String){
printObserveClass(attrs.classes, attrs.event, attrs.function, out)
}
if(attrs.classes && attrs.classes instanceof List){
attrs.classes.each{ it -> printObserveClass(it, attrs.event, attrs.function, out)}
}
if(!attrs.noScript){
out << '</script>'
}
}

def printObserveClass(className, event, function, out){
out << "var classes = \$\$('.' + '${className}');"
out << "for(i = 0; i < classes.length; i++) {"
printObserve("classes[i]", event, function, out)
out << "}"
}

def printObserve(element, event, function, out){
if(event && event instanceof String){
out << "${element}.observe('${event}', ${function});"
}
if(event && event instanceof List){
attrs.event.each{ it -> out << "${element}.observe('${it}', ${function});"}
}
}




Now, some examples.

Simple use:

<g:javascript>
function testing(event){event.stop();alert('hello');}
</g:javascript>

<a id="idTest" href="http://grails.org">Grails Rulez</a>

<g:observe element="idTest" event="click" function="testing"/>


With a list of elements:

<g:observe element="${['id1','id2','id3']}" event="click" function="testing"/>


With a list of events:

<g:observe element="${['id1','id2','id3']}" event="${['click','load']}" function="testing"/>


With a list of classes:

<g:observe element="${['id1','id2']}" classes="${['class1','class2']}" event="change" function="testing"/>

No comments: