Trigger suggestions popup (menu show) ? about tribute HOT 14 CLOSED

I have been slowly working on this issue on the trigger-menu branch. You can take a look at what I've done there. It mostly works, there are still a couple of edge cases that I need to work through.

from tribute.

This allows you to call tribute.showMenuForCollection(element); to show the menu.

from tribute.

This will be a little tricky without introducing a new method. Essentially you need to set the current property to the collection that you want to show and then set current.element to the DOM node you are targeting.

If you can provide a little more detail of your use-case maybe I can get a clearer understanding of what a good solution would be.

from tribute.

Also, when you are doing this? Is there any mentionText present? If not, would you just show the complete list?

from tribute.

@mrsweaters

With keydown + keyup I already can fill the list with correct values (I believe), but cannot show it, styles simply don't apply.

My use-case is following:

I have contenteditable div.editor. User types @ char and receives list of users. This works as expected.
And now (for users who not familiar with github-like mentions) I want to add additional button on the div.toolbar, which adds @ char to the div.editor and triggers list of users to appear.

Also, when you are doing this? Is there any mentionText present? If not, would you just show the complete list?

I wanted to show complete list first, so initially mentionText is empty.

from tribute.

I could show the menu by adding timeout to the keydown + keyup events. Before the menu closes right after show because of the original click event on the button.

So, to trigger menu I used the following code, where $('.editor', this.$el) is a contenteditable div:

setTimeout(() => {
		$('.editor', this.$el).get(0).focus();
		
		let event = document.createEvent('HTMLEvents');
		event.initEvent('keydown', true, true);
		$('.editor', this.$el).get(0).dispatchEvent(event);
		
		$('.editor', this.$el).get(0).focus();
		
		event = document.createEvent('HTMLEvents');
		event.initEvent('keyup', true, true);
		$('.editor', this.$el).get(0).dispatchEvent(event);
		
	  }, 100);

This worked fine. But only for cases, when cursor is placed on the left side of the "input" div. For other cases when I try to trigger menu, tributejs throws an exception on the line https://github.com/zurb/tribute/blob/master/src/TributeRange.js#L60, I assume the issue is in offset, because it's different in native way of triggering menu and manual.

from tribute.

Unfortunately couldn't make it work.

from tribute.

I've started working on a workaround for you:
4a72855

This gets you to the point of showing the menu, but it still needs work to get to resolving the user's selection.

from tribute.

@mrsweaters cool, thanks!

from tribute.

@mrsweaters Yeah, I could really use this too. What I ended up with in my code was something like this:

if (this.tribute.collection[0].values.length == 0) {
     this.tribute.append(0, results);
     this.tribute.current.collection = this.tribute.collection[0];
     this.tribute.current.element = el;
     this.tribute.showMenuFor(el, 0);
} else {
     this.tribute.append(0, results);
}

but like you mentioned above, selecting an item doesn't work UNTIL after you've typed a second character - then everything is populated in current properly and the menu and items function as you'd expect.

My use case is to have mentions that work exactly like they do on Facebook:

1. You type an @, nothing happens yet
2. You type a character (for example: e), and then you get back a list of 10 items from your API that match e
3. You type another character (for example: s), and now you get back a list of 10 items from your API that matches es (NOTE: This replaces the original list of 10 e matching items with 10 es matching items.)

from tribute.

I had the same problem and thanks to this discussion I finally found a solution that works almost as I want it to:

utils.insertAtCaretPosition('@'); // http://stackoverflow.com/a/2925633/5559047

// element => contenteditable div 
// tribute => tribute instance 
var fakeEvent = {
    keyCode: 76 // @
};
tribute.current.collection = tribute.collection[0];
tribute.current.element = element;
tribute.events.keydown.bind(element.get(0))(tribute.events, tribute, fakeEvent);
setTimeout(function () {
    tribute.events.keyup.bind(element)(tribute.events, tribute, fakeEvent);
});

As long a there is whitespace around the caret it works fine.

It would be awesome if there was an API method for this though!
Thanks for your work on this project :)

Edit:
There still seems to be an issue with this code when trying to add a member in the middle of a text. The dropdown shows up but selecting a member sets the cursor to the end of the div instead.

from tribute.

Done!

from tribute.

@nathanchase how did you solve your problem?

from tribute.

This allows you to call tribute.showMenuForCollection(element); to show the menu.

THX

from tribute.