Skip to content

Instantly share code, notes, and snippets.

@benstr

benstr/Meteor_uihooks.md

Last active January 25, 2022 09:02
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save benstr/1ed39b35bb0b8e4c5de6 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save benstr/1ed39b35bb0b8e4c5de6 to your computer and use it in GitHub Desktop.
Download ZIP
_uihooks Examples
Raw
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();
}
});
}
};
}
Raw
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();
}
});
}
}
}
Raw
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;
}
Raw
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

Raw
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();
}});
}
};
};
Raw
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);
}
};
};
Raw
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();
});
}
};
};
Raw
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();
});
}
};
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment