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

[Schamper]

@baris yeah that part still needs some work

Btw I've updated this to 0.0.3, it now adds a card to every user link

[baris]

Another one I noticed is you can open a tooltip and ajaxify to another page and the tooltip will stay on the screen, maybe createCard function can destroy the previous one before creating a new one which. And should destroy them on ajaxify.start probably.

[Schamper]

@baris that seems like a good way. Doing that now

https://github.com/Schamper/nodebb-plugin-mentions-cards/commit/cd215d07167907bc0b847f2f3fbfef0b56dbf097
That should do it.

[baris]

Sorry just keep finding stuff Go to your profile and hover over the edit/followers link those create the tooltip box too?

[julian]

@Schamper

[Schamper]

@baris https://github.com/Schamper/nodebb-plugin-mentions-cards/commit/cae3f7be28be3d9436cef1f95de6228ca1a5ca00
@julian are you on about the followers link or because it hides under the header?

[baris]

I think he just wants to post screenshots Yeah I think those links shouldn't have any tooltips.

[Schamper]

@baris any other bugs? I'll wait till tomorrow to push 0.0.4 just in case

[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.