Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Problems with Meteor package #7248

Closed
jbethuel opened this issue Nov 27, 2015 · 19 comments
Closed

Problems with Meteor package #7248

jbethuel opened this issue Nov 27, 2015 · 19 comments

Comments

@jbethuel
Copy link

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
Copy link
Contributor

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

@rafibomb
Copy link
Member

@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
Copy link
Author

jbethuel commented Dec 1, 2015

@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
Copy link
Contributor

@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
Copy link
Author

jbethuel commented Dec 2, 2015

@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
Copy link
Contributor

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
Copy link
Contributor

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
Copy link
Contributor

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
Copy link
Contributor

That didn't work either.

@juliancwirko
Copy link
Contributor

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

@merlinstardust
Copy link
Contributor

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
Copy link
Contributor

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
Copy link
Contributor

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

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

@merlinstardust
Copy link
Contributor

Still not logging anything to the console on your example.

@juliancwirko
Copy link
Contributor

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
Copy link
Contributor

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
Copy link
Contributor

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.

juliancwirko added a commit to juliancwirko/foundation-sites that referenced this issue Dec 16, 2015
- Fixed internal hash anchors. It isn't working on Atmospherejs.com.
- Added 'Known problems' section with explanation of one problem with events which is a corner case and is explained in the issue foundation#7248 (last comments)
@gakimball
Copy link
Contributor

@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
Copy link
Contributor

This fixed it. Thanks @juliancwirko

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants