_uihooks Examples

community.md

Packages

https://github.com/strack/meteor-animation-hooks

https://github.com/percolatestudio/meteor-momentum

https://github.com/frozeman/meteor-animation-helper-velocity

Issues / Discussions / Walkthroughs

percolatestudio/mdg-localmarket#4

https://gist.github.com/jperl/b445a21da1748ad6f04f

http://stackoverflow.com/questions/24627093/meteor-reactive-list-transitions

http://stackoverflow.com/questions/24389187/where-should-uihooks-be-defined

https://github.com/search?q=_uihooks&type=Issues&utf8=%E2%9C%93

Code Base Search

https://github.com/search?p=1&q=_uihooks&type=Code&utf8=%E2%9C%93

https://github.com/search?utf8=%E2%9C%93&q=_uihooks+velocity&type=Code&ref=searchresults

localmarket-app-body.js

// from https://github.com/meteor/meteor/blob/devel/examples/localmarket/client/templates/app-body.js#L55-L110

Template.appBody.rendered = function() {
  this.find("#content-container")._uihooks = {
    insertElement: function(node, next) {
      // short-circuit and just do it right away
      if (initiator === 'menu')
        return $(node).insertBefore(next);
      
      var start = (initiator === 'back') ? '-100%' : '100%';
      
      $.Velocity.hook(node, 'translateX', start);
      $(node)
        .insertBefore(next)
        .velocity({translateX: [0, start]}, {
          duration: ANIMATION_DURATION,
          easing: 'ease-in-out',
          queue: false
        });
    },
    removeElement: function(node) {
      if (initiator === 'menu')
        return $(node).remove();
      
      var end = (initiator === 'back') ? '100%' : '-100%';
      
      $(node)
        .velocity({translateX: end}, {
          duration: ANIMATION_DURATION,
          easing: 'ease-in-out',
          queue: false,
          complete: function() {
            $(node).remove();
          }
        });
    }
  };

  this.find(".notifications")._uihooks = {
    insertElement: function(node, next) {
      $(node)
        .insertBefore(next)
        .velocity("slideDown", { 
          duration: ANIMATION_DURATION, 
          easing: [0.175, 0.885, 0.335, 1.05]
        });
    },
    removeElement: function(node) {
      $(node)
        .velocity("fadeOut", {
          duration: ANIMATION_DURATION,
          complete: function() {
            $(node).remove();
          }
        });
    }
  };
}

localmarket-overlay.js

// from https://github.com/meteor/meteor/blob/devel/examples/localmarket/client/templates/overlay.js#L27-L51

Template.overlay.rendered = function() {
  this.find('#overlay-hook')._uihooks = {
    insertElement: function(node, next, done) {
      var $node = $(node);

      $node
        .hide()
        .insertBefore(next)
        .velocity('fadeIn', {
          duration: ANIMATION_DURATION
        });
    },
    removeElement: function(node, done) {
      var $node = $(node);

      $node
        .velocity("fadeOut", {
          duration: ANIMATION_DURATION,
          complete: function() {
            $node.remove();
          }
        });
    }
  }
}

magic-square-transition-helper.js

// from https://github.com/xumx/magic-square/blob/fcf190c735a48a6c9413168a6141df89a844914f/client/transition-helper.js

var OFFSCREEN_CLASS = 'off-screen';
var EVENTS = 'webkitTransitionEnd oTransitionEnd transitionEnd msTransitionEnd transitionend';

var hooks = {
    insertElement: function(node, next) {
      $(node)
        .addClass(OFFSCREEN_CLASS)
        .insertBefore(next);
      
      Deps.afterFlush(function() {
        // call width to force the browser to draw it
        $(node).width();
        $(node).removeClass(OFFSCREEN_CLASS);
      });
    },
      // we could do better I guess?
    moveElement: function(node, next) {
      hooks.removeElement(node);
      hooks.insertElement(node, next);
    },
    removeElement: function(node) {
      $(node).addClass(OFFSCREEN_CLASS)
        .on(EVENTS, function() {
          $(node).remove()
        });
    }
  }

Template.transition.rendered = function() {
  this.firstNode.parentNode._uihooks = hooks;
}

Meteor_uihooks.md

Add preliminary API for registering hooks to run when Blaze intends to insert, move, or remove DOM elements. For example, you can use these hooks to animate nodes as they are inserted, moved, or removed. To use them, you can set the _uihooks property on a container DOM element. _uihooks is an object that can have any subset of the following three properties:

• insertElement: function (node, next): called when Blaze intends to insert the DOM element node before the element next
• moveElement: function (node, next): called when Blaze intends to move the DOM element node before the element next
• removeElement: function (node): called when Blaze intends to remove the DOM element node

Note that when you set one of these functions on a container element, Blaze will not do the actual operation; it's your responsibility to actually insert, move, or remove the node (by calling $(node).remove(), for example).

https://github.com/meteor/meteor/blob/30fb11f1fa0227f1c0ec3eb30b7864ea3b2d210e/History.md

notifications-notifications.js

// from https://github.com/gfk-ba/meteor-notifications/blob/master/notifications.js#L238-259

Template.notifications.rendered = function () {
    this.firstNode._uihooks = {
        insertElement: function (node, next) {
			var settings = Notifications.settings;
			$(node)
                .addClass('notificationHidden')
                .insertBefore(next)
                .fadeIn({duration: settings.animationSpeed})
                .promise()
                .done(function () {
                    $(this).removeClass('notificationHidden');
                });
        },
        removeElement: function (node) {
			var settings = Notifications.settings;
            $(node).animate(settings.hideAnimationProperties, {
                duration: settings.animationSpeed,
                complete: function () {
                    $(node).remove();
                }});
        }
    };
};

redis-animations.js

// from https://github.com/meteor/redis-example/blob/ed39b420e26fc1a279438b86b0b23443591f5c3f/client/animations.js

Template.yodors.rendered = function () {
  $('.debug')[0]._uihooks = {
    insertElement: function (node, next) {
      $('.debug li').addClass('shift-down');
      $(node).addClass('pop-in').insertBefore(next);
      setTimeout(function () {
        $('.debug li').removeClass('shift-down');
        $(node).removeClass('pop-in');
      }, 230);
    }
  };
};

todo-app-body.js

// from https://github.com/meteor/meteor/blob/c78e04645d970b455c0ef405889242ae9b8e6c47/examples/todos/client/templates/app-body.js#L35-L51

Template.appBody.rendered = function() {
  this.find('#content-container')._uihooks = {
    insertElement: function(node, next) {
      $(node)
        .hide()
        .insertBefore(next)
        .fadeIn(function () {
          listFadeInHold.release();
        });
    },
    removeElement: function(node) {
      $(node).fadeOut(function() {
        $(this).remove();
      });
    }
  };
};

todo-lists-show.js

// from https://github.com/meteor/meteor/blob/c78e04645d970b455c0ef405889242ae9b8e6c47/examples/todos/client/templates/lists-show.js#L9-L33

Template.listsShow.rendered = function() {
  if (firstRender) {
    // Released in app-body.js
    listFadeInHold = LaunchScreen.hold();

    // Handle for launch screen defined in app-body.js
    listRenderHold.release();

    firstRender = false;
  }

  this.find('.js-title-nav')._uihooks = {
    insertElement: function(node, next) {
      $(node)
        .hide()
        .insertBefore(next)
        .fadeIn();
    },
    removeElement: function(node) {
      $(node).fadeOut(function() {
        this.remove();
      });
    }
  };
};