I’m trying to work with Reveal.js, which I’ve worked with before. I’m a big fan of this library, but I’ve never used it on Meteor, and subsequently am have some serious problems with it.
This library works https://atmospherejs.com/neo/reveal-js, seems to load everything. However, I’m pretty sure the calculations for sizing are being done at the wrong time of rendering. Running the identical code from the original repo (https://github.com/hakimel/reveal.js) on a meteor install renders different results.
So here’s what I got:
/* Suggestions */
Template.story.onCreated(function(){ console.log('Story onCreated.'); });
Template.story.onRendered(function(){
// initialize
Reveal.initialize({
// The "normal" size of the presentation, aspect ratio will be preserved
// when the presentation is scaled to fit different resolutions. Can be
// specified using percentage units.
width: "100%",
height: $( window ).height(),
margin: 0,
minScale: 1,
maxScale: 1,
This is what is called for in the git:
Template.myTemplate.onRendered( function() {
Reveal.initialize();
});
All the backgrounds are sized incorrectly. This speaks to a larger issue that I seem to be having. I’m trying to dynamically change the vertical size of images on domready, but I’m not sure exactly how to do that without a using an interval. I’ve assumed onRendered was supposed to work in a similar manner to domReady, but I can’t seem to run either a function for resizing images, or getting Reveal.js to work as it’s supposed to.
So the question is, what’s the smart way to emulate a domready when a template loads? Either I’m misunderstanding onRendered or I’m doing it wrong.
onRendered is run when the basic DOM elements are added - before any reactive changes and before any asynchronous changes (like images being loaded).
I’m guessing this is not what you’re expecting?
OK, so working through this, using the the neo/reveal-js package, this should, but doesn’t, run. I think because the calculations on dimensions are being done at the wrong time because static files haven’t loaded. So, is there a post-onRendered? I guess, if you’re doing UI calculations, generally done in a domReady, when are you suppose to do them? You only want to run Reveal.initialize() once, so this is the disconnect (I think). I doubt this is a unique situation.
In a reactive context, you never know when the DOM’s finished rendering, because something new may come along and add new DOM elements. The only way round this is to code defensively when you have to ensure that an element is there. In the case of an image, you can use a callback to notify your code when loading is complete (in Meteor, this could set a ReactiveVar, for instance). For example, from https://developers.google.com/web/fundamentals/getting-started/primers/promises (original code):
var img1 = document.querySelector('.img-1');
function loaded() {
// woo yey image loaded
}
if (img1.complete) {
loaded();
}
else {
img1.addEventListener('load', loaded);
}
img1.addEventListener('error', function() {
// argh everything's broken
});
Ahhhhhh. Ok. That makes sense. Basically a custom-made domReady trigger (for lack of a better term). I’m still not sure this is the problem, but it’s step one. At this point, the dimensions are simply not being created and I think that might be related to the calculations being done at the wrong time.
I’m still having problems with this. I’m not sure how you’re supposed to defensively program asset loading when images are being loaded via css. Rather, something like Reveal.js is doing its dimensional calculations when the “page” is being loaded, but since it’s reactive it appears the only way to do these calculations is by running an interval to resize the framework accordingly. This seems extremely ineffective. If I can’t check if the image is loaded, as it’s loaded through css, what’s the proper way to detect when actually rendered? Like post-rendered, or something.
Is making the helper non-reactive the smart money here?