[nodebb-plugin-cards] Show cards when hovering over user links!

[baris]

Hmm, another thing that can happen is if you mouse over multiple users quickly it will send of multiple $.api() calls and you might end up with multiple tooltips. This might work better.

function createCard(target, url) {

	var api = '/api' + url;
	$.get(api, function(result) {

		....

		if (target !== currentCard) {
			if (currentCard) {	 
				destroyCard(currentCard);
			}

			target.popover({
				html: true,
				content: html,
				placement: 'top',
				trigger: 'manual',
				container: 'body'
			}).popover('show');

			currentCard = target;
		}

		...
	});
}

Totally not tested :), Idea is to not doing anything if the target already has a tooltip and to destroy the previous one if there is no current card or its a different one.

[Schamper]

@baris Actually, that should be impossible to happen, since you have to hover over a link for 500ms before it'll even call createCard.

[tedr56]

@Schamper I think I found another one. If you click on the profile icon of the mention card and go back to the previous page, the mention card is still there and wont close.

Nice plugin anyway

[Schamper]

@tedr56 That should be fixed with https://github.com/Schamper/nodebb-plugin-mentions-cards/commit/cd215d07167907bc0b847f2f3fbfef0b56dbf097, but I'm holding off on publishing another update, incase more bugs are found If there won't be any other reports by tonight I'll publish that fix.

[tedr56]

@Schamper No problem. Thanks

[trevor]

Gonna implement this nao! LOL

[trevor]

Okay so, I have it installed and it works but I hover over anyones name, avatar, etc. it doesn't remove the popover from the dom so its a bunch of cards everywhere.

Card city...

EDIT: I fixed it by changing;
$('.container').off(events, selector).on(events, selector, function(e){
to what I have it all wrapped in which is ._ob

Actually I can just put body and it works just fine too.

[trevor]

Noticed a bug when you hover over the card and leave it on hover and backspace it doesn't remove itself.

[baris]

The issue where the card remains on screen on page navigation is fixed, @Schamper just didn't push a new version yet.

[trevor]

@baris said:

The issue where the card remains on screen on page navigation is fixed, @Schamper just didn't push a new version yet.

Ohh okay, thanks! Yup, I just pulled the latest, looks better and works good now. Example below...

[psychobunny]

wow that card looks awesome @trevor ... such a show off haha

btw these cards seem to get stuck open on mobile, after opening the composer, I can't remove the card. Maybe the cards shouldn't be activated at all on mobile

[trevor]

So you're saying they should either be disabled at a certain viewport, OR, as you've said for mobile devices using mobile detection which leads me to ask this question. Why doesn't NodeBB use Modernizr or some type of browser detection in the core?
I agree with either direction.

[psychobunny]

That's a good question, right now we have some stuff like this, might be better to use Modernizr instead

[Schamper]

@psychobunny either that or destroy it on any "click" not on the card. Also is it just on Android or on Chrome in general that the info is under the profile image, instead of next to it?

@trevor oooh that looks very nice! Is that with just a template override and some styling?

[trevor]

@Schamper Yeah, I didn't have to touch JS.

[Steve]

@Schamper said:

npm install nodebb-plugin-mentions-cards

Great stuff, thanks for creating this!

[meetdilip]

I am yet to install this. Am I to believe that there are custom titles / group titles available. Or only in @trevor 's theme ?

[trevor]

@meetdilip said:

I am yet to install this. Am I to believe that there are custom titles / group titles available. Or only in @trevor 's theme ?

Its not a custom title/group title, its just a signature. {signature}
I suppose it uses the variables from the profiles so you can add anything you want thats on the profile.tpl like age and etc.

[meetdilip]

@trevor said:

@meetdilip said:

I am yet to install this. Am I to believe that there are custom titles / group titles available. Or only in @trevor 's theme ?

Its not a custom title/group title, its just a signature. {signature}
I suppose it uses the variables from the profiles so you can add anything you want thats on the profile.tpl like age and etc.

Thanks. Could you please explain to steps please. Not as good as you guys

[trevor]

You can edit the template called card.tpl located in node_modules/nodebb-plugin-mentions-cards/templates/mentions/card.tpl
Somewhere in there you can place the {signature} variable.