Problems with Meteor package

[jbethuel]

I already did add the Meteor package but I cant make it work. Do I need something to setup after adding the package? I'm quite confused.

[juliancwirko]

Hi, and what is the problem? Have you read the documentation here: https://atmospherejs.com/zurb/foundation-sites ?

[rafibomb]

@bethuel11 We'd like to know more about what's not working for you. Screenshots, steps to reproduce, or error messages would really help us help you.

[jbethuel]

@rafibomb, @juliancwirko Just as stated in atmospherejs I have added the meteor package and created the .scss file since it is a blank project it has no other files inside it, and when I put some components in index.html, It does not work. Sorry, im quite new to sass and only knew some css frameworks.

[juliancwirko]

@bethuel11 What you need to do is:

1. Add the package (in the meteor project directory)

meteor add zurb:foundation-sites

2. Create your main**.scss** file in the app (client side, in the 'client' folder)

3. In the main.scss file Import foundation by (you can copy paste it):

@import '{zurb:foundation-sites}/scss/foundation';
@include foundation-everything;

// my styles lands here

4. Below this import you can write your own styles or import your scss files

5. Start Meteor and it should load the styles.

6. If you want to use Foundation js plugins in Meteor

Read about loading JavaScript plugins here: https://github.com/zurb/foundation-sites/blob/develop/meteor-README.md#javascript-guide

Remember that you need to use Sass here, you should use .scss files not .css

If you want to use just foundation.css and foundation.js you can simply add the files to the project and you don't need this package.

You can also show us your Meteor project here on GitHub. I'll clone it and see what is going on.

[jbethuel]

@juliancwirko hello, sorry for the late reply. Thanks for your step by step instructions. I finally got it working now. Thank you for your help!

by the way some link in your atmospherjs zurb package has missing links.
https://github.com/zurb/foundation-sites/blob/master/#javascript-guide
https://github.com/zurb/foundation-sites/blob/master/#scss-guide

Thank you again for your help!

[juliancwirko]

good to know :)

yeah, I think it isn't a good idea to use 'hashbang' links in the Readme for Meteor because it will not work on Atmosphere ;) I don't know why the full path is missing there. It works here: https://github.com/zurb/foundation-sites/blob/develop/meteor-README.md

[merlinstardust]

I'm also using Meteor and having trouble with the Drilldown plugin. The events that I'm registering on the Drilldown submenu links aren't firing.

<template name="SideNavSelectors">
<div class="is-drilldown">
  <ul class="vertical menu" data-drilldown>
    <li class="selector" data-submenu>
      <a>Course: {{selectedCourseName}}</a>
      <ul class="submenu menu vertical">
        <li><a class="course">Test</a></li>
      </ul>
    </li>
  </ul>
</div>
</template>

Template.SideNavSelectors.onRendered(function () {
  var instance = this;
  instance.drilldown = new Foundation.Drilldown($('[data-drilldown]'));
});

Template.SideNavSelectors.onDestroyed(function () {
  var instance = this;
  if (instance.drilldown) {
    instance.drilldown.destroy();
  }
});

Template.SideNavSelectors.events({
  'click .selector li': function (event) {
    console.log('clicked', event);
  },
});

[juliancwirko]

Hi you just need something like:

<template name="SideNavSelectors">
  <ul class="my-drilldown-menu vertical menu">
    <li class="selector">
      <a>Course: {{selectedCourseName}}</a>
      <ul class="submenu menu vertical">
        <li><a class="course">Test</a></li>
        <li><a class="course">Test</a></li>
        <li><a class="course">Test</a></li>
        <li><a class="course">Test</a></li>
      </ul>
    </li>
  </ul>
</template>

Template.SideNavSelectors.onRendered(function () {
  var instance = this;
  instance.drilldown = new Foundation.Drilldown(instance.$('.my-drilldown-menu'));
});

Template.SideNavSelectors.onDestroyed(function () {
  var instance = this;
  if (instance.drilldown) {
    instance.drilldown.destroy();
  }
});

Template.SideNavSelectors.events({
  'click .selector li': function (event) {
    console.log('clicked', event);
  },
});

You don't need data atributes and you don't need .is-drilldown element. There was a problem with .is-drilldown element because it has overflow: hidden and foundadion couldn't set up the proper height on it. But with the configuration above it should work.

[merlinstardust]

That didn't work either.

[juliancwirko]

hmmmm, the code which I've pasted works for me.
And what don't work exactly?

[merlinstardust]

I copied your code exactly and it didn't work. I can always fake it with some Spacebars code but then I don't get the nice animation plus I have to add more code.

Also, I added the is-drilldown element because I thought the automatic wrapping the Drilldown function did was replacing the code and therefore the events were no longer attached, similar to this issue with modals: http://stackoverflow.com/questions/27194160/foundation-modal-events-are-not-working.

[merlinstardust]

One weird thing I noticed is that when I click any of the submenu items, the entire Drilldown section is highlighted. I think that's more of a tabindex issue than my problem though.

[juliancwirko]

I've got: http://zf-drilldown-menu.meteor.com/

the <a> tags need href and it will not highlight Drilldown section.

[merlinstardust]

Still not logging anything to the console on your example.

[juliancwirko]

ohh so this is the problem ;) I thought that it won't initialize at all ;)
indeed it is weird, there is a conflict between Foundation events and Meteor event delegation. It looks like Foundation clears Meteor's events. I'll try to debug it later.

[merlinstardust]

Yep. Sorry I wasn't clear enough before. Thanks for the help. I'll try to debug it too but I'm not well versed in how Meteor attaches and delegates events.

[juliancwirko]

I found some time. This is because Meteor attaches events to the first node in a Template and propagates it. There are problems when Meteor tries to do something with ul element (which is a first node in the template) because Foundation initializes Drilldown on it and probably overwrites/disable events from Meteor. I don't know exactly what Drilldown does with this ul element here (there are many stopPropagation calls etc.), but the fast solution is to wrap such elements in another one for example 'div' like:

<template name="SideNavSelectors">
 <div>  
  <ul class="my-drilldown-menu vertical menu">
    <li class="selector">
      <a>Course: {{selectedCourseName}}</a>
      <ul class="submenu menu vertical">
        <li><a class="course">Test</a></li>
        <li><a class="course">Test</a></li>
        <li><a class="course">Test</a></li>
        <li><a class="course">Test</a></li>
      </ul>
    </li>
  </ul>
 </div>
</template>

Then it seems to work like it should.

This kind of problems and solutions should also land in the Meteor-Readme file.

[gakimball]

@juliancwirko This issue has been quiet for a bit so I'm going to close it. If anyone runs into any new specific issues with Foundation and Meteor, you can open a new issue. Thanks! :)

[merlinstardust]

This fixed it. Thanks @juliancwirko