At.js Mentions Callbacks and Duplicates

Question

Anyone experience with At.js that can help out? I'm trying to:

1. Get the inserted mentions in an array so that they can then be processed with PHP
2. Prevent duplicate entries (not sure where to start with this one)

Little experience with Javascript and jQuery so any help appreciated. FYI I'm using At.js with the amazing Froala WYSIWYG Editor

Here is what I have to get the tags but I'm not sure how to get it into an array.

$(function(data){   
   $('#postTagsInput').atwho({
       at: '@', 
       data: 'URL'
});

$('#postTagsInput').on("inserted.atwho", function($li, query) {
   console.log(query);

   var postTags = query;
   $('#myResults').html(postTags);      
  });      
});

Answer 1

I solved this problem by using a custom "insertTpl" for the inserted mentioned names:

var at_config = {
    at: '@',
    data: mentionablesList,
    displayTpl: '<li><span>${name}</span></li>',
    insertTpl: '<a href="${url}" data-type="mentionable" data-id="${id}" data-name="${name}">${name}</a>'
};

$(that.document.getBody().$)
    .atwho('setIframe', that.window.getFrame().$)
    .atwho(at_config);

and then use jQuery to parse the input value and extract all mentioned names:

var commentHtml = CKEDITOR.instances['new-comment'].getData();
var comment = $('<div/>').html(commentHtml).contents();

comment.find('a[data-type="Employee"]').each(function(index, element) {

    // do whatever you need with $(element) object

});

Note: I used CKEditor in my case -- a comment box that allows users to mention other users' names while they are writing a comment. Once the comment is posted, all mentioned names will be added to a list of followers of the post that the comment belongs to.

Answer 2

You can just push them into an Array when they are selected either by using the At.js default callback or JQuery to parse out the values once your form gets submitted.

Here is pseudo-code for option #1. People is your Array of people being mentioned. You will want to put a debugger into the before insert to find where value is nested. (It depends on how your json response is structured.)

$(function(data){   
   $('#postTagsInput').atwho({
       at: '@', 
       data: 'URL',
       callbacks:
         beforeInsert: function(value, $li) {
         //debugger here to figure out where your data value is
         people.push(value.thing_to_insert);
       }
});

This works but only if you don't care about someone changing their mind about the mention later, as it will insert your mentions as they are selected. If you want to make it more flexible, then parse the names out of the textarea using JQuery, kind of like so:

mentionsString = $("#textarea_id").val();
mentions = mentionsString.split(' ');

Then you can use TwitterText to parse out the @mentions from that Array. https://github.com/twitter/twitter-text

If you want them to be unique and you aren't using a framework, you will have to go through your Array and parse out duplicates. Better yet, use Ember and it has uniq built in to the Array methods :)