meteor package

[newswim]

is it okay if I make a smart package of this library for the Meteor framework?

[VincentGarreau]

Hi @newswim, of course! I'll add the command line in the ReadMe 👍

[newswim]

Hello @VincentGarreau, I've asked for this library to be folded into @dandv 's autopublish.meteor service, in the mean time I've published the package to https://atmospherejs.com/newswim/particles and will be submitting PR later today.

here's my fork: https://github.com/newswim/particles.js
demo: https://github.com/newswim/particlesJSmeteor

[2014mchidamb]

Hey @newswim, I was using your smart package and encountered this error:

Uncaught TypeError: Cannot read property 'appendChild' of null

It appears to be originating from
var canvas = document.getElementById(tag_id).appendChild(canvas_el);
, but I'm not sure why (I have included the proper div in my template).

[newswim]

Hi @2014mchidamb --- I will look at this in more detail, but in the mean time make sure your code is wrapped in Meteor.isClient -> Meteor.startup object, like this:

   if (Meteor.isClient) {
      Meteor.startup(function () {
           // particlesJS object
      });
    } 

Also there is a lot of contention and work being put into the package build system for Meteor involving curling upstream sister repos into the package, it's not completed yet but you can look at the examples users 'dandv' and 'splendido' have made. When this is perfected I will rebuild the package.

[dandv]

@newswim,

I've asked for this library to be folded into @dandv 's autopublish.meteor service

I can't really take much credit for autopublish. @splendido did all the excellent work!

[2014mchidamb]

@newswim, thank you very much - my code is wrapped as you have described (this is a test, so my js file is virtually identical to the one in your demo). Weirdly, I have gotten the package to work with other apps - but unfortunately not the one I am currently working on. The relevant HTML file looks as follows:

<template name="home">
        {{> navbar }}
        <h1 class="headbox"> Where you at? </h1>
        <div class="row">
            <div class="input-field col s8 offset-s2">
                <form>
                    <input id="school" type="text" class="validate">
                    <label for="school"> Enter a school </label>
                </form>
            </div>
        </div>
        <div id="particles-js"></div>
</template>

[newswim]

@2014mchidamb, Maybe run your js through a linter just to check everything? Are there any errors being thrown?

Particles.js will create a element inside of and taking up the entire area of the containing div (this can also be changed to target window but I haven't tried that.. yet). Be sure the div isn't being blocked or covered in your css somewhere, the html elements look right.

[2014mchidamb]

@newswim, there appear to be no errors other than the aforementioned Uncaught TypeError. I'm using the materializecss package in this project, is it possible that there is something in that package blocking the div? Is there any way to check/debug that?

[newswim]

@2014mchidamb, this may be due to the div being inside a template, and the div not being loaded yet when the handler is called. Have you gotten any further with debugging?

[2014mchidamb]

@newswim, I got it to work by putting the particles code in my home template's js file. Thanks for the help!

[2014mchidamb]

@newswim, Actually, it looks like the particles don't load if I navigate back to the home page with the back button. However, they load after I reload the page. Would you happen to know why this is happening? Shouldn't Meteor.startup prevent this?

[newswim]

@2014mchidamb Meteor.startup just ensures that the code is executed at runtime. I have a feeling that that .startup isn't the proper wrapper for this type of static api. We need the code to rerun any time the template is rendered, but it isn't exactly a reactive template, even though there (can be/are) nodes being pushed to the particles-js object. We need a helper that says, when home template is rendered, rerun this code. I will look into this more tomorrow!

[lifeinchords]

any news on this @newswim? Interested to hear how you solved this..

[newswim]

I spent a bit of time yesterday upgrading to 2.0.0, but I still need to work out the best way to reference a json file for settings. Typing a command every time won't fly. I'll put aside time this week to find a solution.

[splendido]

@newswim, lets try to figure out whether we'd like @VincentGarreau to merge the necessary files to officially support Meteor or simply wrap the package like we're doing for other libraries (see, e.g., jspdf-core-wrapper.

The best, off course, would be @VincentGarreau to accept a PR! :-)
...but please lets try to explain what this mean.

[asafdav]

Any update on this? currently the meteor package doesn't play nicely with the generator

[noncototient]

For anyone having issues with
Uncaught TypeError: Cannot read property 'appendChild' of null
make sure you insert JS code not on Meteor.startUp, but in

Template.template_name.onRendered(function(){
//Template code here
})

and provide any element id that you wish the canvas to be appended to. If you have questions just ask and I'd be happy to help.

[you-fail-me]

@noncototient I'm trying to add particles.js to a meteor app via kadira:dochead, and I'm getting such an error: particles.min.js:9 Uncaught TypeError: Cannot read property 'getElementsByClassName' of null don't you know what could be the reason?

[newswim]

hey @you-fail-me

So I had originally made a Meteor smart package for an older version of particles.js, and then tried upgrading when Vincent changed the configuration, but ended up breaking everything.. so that's why adding the meteor package (afaik) does not work. I really need to fix this.

But since you're loading from a CDN, that's not the issue, however my feeling is that dochead isn't available when your initialization code is being ran. This is probably an artifact of Meteor's eager file loading order.

Can you post the dochead snippet?

[you-fail-me]

@newswim Thank you, already fixed it. If it might help someone some day - the issue was in load order, particles.js initialization was called before the dom with the target id was built. Just needed to check that the script is loaded and the dom is built at the moment of initializing particles.js.

[newswim]

Sweet! Can I ask if you are using a json file or passing an object to particlesJS?

[you-fail-me]

@newswim I'm using a json file, stored where all the assets are

[newswim]

Cool - I just got it working similarly, but I had to edit one line in particles.js (1517).

window.pJSDom.push(new pJS(tag_id, params));
// rather than
// pJSDom.push(new pJS(tag_id, params));

This is probably specific to Meteor, so if anyone wants to keep using the package, I will update it with this change and provide instructions. I could see the reassignment not being necessary if you were loading particles over cdn.

Also:

I disabled click events and ensured the canvas wouldn't push anything out of the way, like so:

#particles-js {
    position: absolute;
    pointer-events: none;
}

[you-fail-me]

I was afraid that I would be forced to do smth like this (things like you have to explicitly add window namespace happen pretty often when using smth with Meteor), but surprisingly it just worked, loaded script with dochead, and initialized it with window.particlesJS.load('particles-js', 'particlesjs-config.json');

[newswim]

update

I've published a new version of the package, if anyone wants to test, please let me know if anything gives you trouble.

https://atmospherejs.com/newswim/particles

cheers :]