Pulse the template every time it is rendered in Meteor
animation, css, meteor, templates
Solution
Based on the code from @Hubert OG and an idea from this blog post, I made the following debugging code for Meteor rendering:
pulseNode = (i, node) ->
return unless node.style
$node = $(node)
prePulseCss = $node.data('prePulseCss') ? node.style.cssText
prePulseBackgroundColor = $node.data('prePulseBackgroundColor') ? $node.css('backgroundColor')
$node.data(
'prePulseCss': prePulseCss
'prePulseBackgroundColor': prePulseBackgroundColor
).css('backgroundColor', 'rgba(255,0,0,0.5)').stop('pulseQueue', true).animate(
backgroundColor: prePulseBackgroundColor
,
duration: 'slow'
queue: 'pulseQueue'
done: (animation, jumpedToEnd) ->
node.style.cssText = prePulseCss
).dequeue 'pulseQueue'
pulse = (template) ->
$(template.firstNode).nextUntil(template.lastNode).addBack().add(template.lastNode).each pulseNode
_.each Template, (template, name) ->
oldRendered = template.rendered
counter = 0
template.rendered = (args...) ->
console.debug name, "render count: #{ ++counter }"
oldRendered.apply @, args if oldRendered
pulse @
Problem
I would like to have every template pulse every time it is rendered. To have a visual debugging tool to see what is being rendered. So I imagine something like that when a template (a small segment) is rendered, its background color is set to red and then this red color slowly fades into original background color or whatever the background was (even if it was transparent). So if I see that something is all the time red, I know that it is being redrawn all the time.