jQuery popover with meteor


#1

Hello,

I’m trying to implement a drop down window for my notifications to my app. I’ve been using Skeleton.css for my apps basic look. In Skeleton the creator uses “data-popover” when a user clicks a drop down window. Inspect the element on “More” in the nav to get the example.

Here is my template. 99% sure it’s syntax is correct.

    <template name="notifications">
  <a href="#" class="navbar-link notifications" data-popover="#moreNavPopover">
 Notifications
{{#if notificationCount}}
  <span class="badge badge-inverse">{{notificationCount}}</span>
{{/if}}
<b class="caret"></b>
  </a>
 <div id="moreNavPopover" class="popover open">
     <ul class="popover-list">
           {{#if notificationCount}}
  {{#each notifications}}
    {{> notificationItem}}
  {{/each}}
{{else}}
  <li class="popover-item"> No Notifications</li>
{{/if}}

and a screen shot so you can see what is going on. The data doesn’t stay hidden till clicked.

What would I exactly need to put in my notifications.js helpers to make the drop down happen? I’ve read 4-5 links from google and everyone is slightly different. Does meteor have another feature I could you instead of popover?

Thanks!


#2

update!

Interesting. The popup works when I get a notification, It doesn’t link to the comment though. Maybe a plan old css issue?


#3

I’m assuming the class open makes it open, since you have that from the start it will start being open.

See how he adds the class on click: http://gfycat.com/EmptyAjarBighorn


#4

Ahhh! Good eye!! Well… this is what I have so far.

Template.notifications.events({
'click notifications': function() {
var d = document.getElementById("moreNavPopover");
console.log(d.className);
d.className = d.className + " open";
}
 });

It’s not working though :frowning:


#5

To extend on this maybe you could do something like

Template.notifications.events({
	'click [data-popover]': function () {
		Session.set('notifications_open', !Session.get('notifications_open'));
	}
});

Template.notifications.helpers({
	open: function () {
		if(Session.get('notifications_open')) {
			return "open";
		}
		return false;
	}
});

Template.notifications.onCreated(function() {
	Session.setDefault('notifications_open', false)
})

and then do <div id="moreNavPopover" class="popover {{open}}">


#6

You sir are a freaking GENIUS!!! Thank you, it worked!! :smile:


#7

do something like function(e) { and you have the element in e.target, that way you don’t have to getElementById again


#8

Will do! How does skeleton.css handle when the user clicks outside of the dropdown and it closes? I guess you need to type something in the helper that detects outside of the menu? The dropdown will close when I click it "Notifications. Skeleton has it so it closes when you click outside of it.


#9

Hm, not really sure.

Could you try something like this?

Template.notifications.events({
	'click [data-popover]': function () {
		Session.set('notifications_open', !Session.get('notifications_open'));
	},
	'click .popover': function(e) {
		e.stopPropagation();
	},
	'click': function() {
		Session.set('notifications_open', false);
	}
});

#10

I’m sorry, I’m not quite sure how to do the e.target you mentioned with the function… It’s my 3rd week with JavaScript and Meteor


#11

See the second event in the comment above, it’s using e in the function. That’s the jQuery event. Then e.target should be the same as getElementById I think


#12

I see that, but e isn’t assigned to anything. The only way I know how to assign things from the DOM is getElementById. I see how e is used in a function. I don’t see how e.target replace getElementById


#13

e.target is the element clicked, but I re-read your code, it wouldn’t matter there, sorry for confusing you


#14

It is okay. Did you look at Skeleton.css script on its page? I noticed e was used there.


#15

I found a link that should help me solve my problem of closing the menu by clicking outside of it.

Trying to figure out how to apply it to meteor


#16
'click': function(event) {
event.preventDefault();
console.log("clicked anywhere in the layout");

}

Detects anywhere in my entire layout template when clicked.


#17

Yeah, wasn’t that what I wrote? Or did you do something different?


#18

Yeah but it doesn’t seem to work. The menu doesn’t open at all with this code.

Template.notifications.events({
	'click [data-popover]': function () {
	Session.set('notifications_open', !Session.get('notifications_open'));
},
'click .popover': function(e) {
  e.stopPropagation();
 },
 'click': function() {
Session.set('notifications_open', false);
 }
});

It will open when clicked on and closed when click on with just this

Template.notifications.events({
	'click [data-popover]': function () {
	Session.set('notifications_open', !Session.get('notifications_open'));
 }
});