Meteor: removing a post, and animating the other posts with _uihooks

Question

In Meteor, when I remove a post from a collection, I’d like the posts under that post to slide up, taking the removed post’s place.

I’ve read that I should use _uihooks to do this, but I’m just not sure how to implement it.

Could somebody help me, possibly with a simple example from Meteorpad?

Answer 1

What you're trying to achieve is pretty simple and you don't really require a 3rd party library to do that. I suppose that the only problem here is that _uihooks is not very well documented, so you're pretty much on your own to figure out how it works.

Example

Here's the general idea:

Template.body.onRendered(function() {
    var container = this.$('.ui.page.grid')[0];
    container._uihooks = {
        insertElement: function(node, next) {
            // this is the default behavior
            container.insertBefore(node, next);
        },
        removeElement: function(node) {
            var $node = $(node);
            $node.removeClass('visible');
            // can't use Meteor.setTimeout here because
            // it will complain about setting timeouts
            // inside simulations ...
            setTimeout(function() {
                $node.remove();
            }, 1000);
        },
    };
});

There's also another hook called movedElement but you probably don't need it for know.

So basically, you need to grab a container element that will "listen" to changes in it's children array. When an element is inserted or removed the corresponding hooks is called. The node and next arguments represent the element of interest and his next sibling respectively.

Having a hook defined for the given action, prevents the default behavior from happening, so you're alone responsible for inserting / removing the element. But that's fine, because you have an opportunity to perform a corresponding animation before completely getting rid of the element. Here are use css animations attached to the visible class.

To see how it works in practice go here:

http://uihooks-example.meteor.com

Further reading

The source code for the example is available on GitHub:

https://github.com/apendua/uihooks-example

If you want to understand better how the _uihooks API really works, look into the Meteor's source code here:

https://github.com/meteor/meteor/blob/devel/packages/blaze/domrange.js

Gotchas

The insertElement is not called when the elements are initially rendered. So it's important to take that into account if you plan to perform an animation when a new element is inserted.