Tribute.js

Katniss Everdeen

You might have experienced this: you go to implement a new feature, you find a great jQuery plugin, but then as you're rolling it out you realize that you're using Angular, so you've got to dig around for an Angular version, maybe wrap up the jQuery version, then after hours you move forward only to get to your mobile website where you don't want to include jQuery because it's too heavy.

The Need for Native

As part of the unification and rebuild of Notable that we’ve been working on over the past year, we’re working with 6 different unique application environments. If we were to require rewriting them all to be consistent before we could introduce new features, we’d never make progress. So for cross-application features, increasingly we’re “going native” to make it easier to use the same libraries for new features across applications.

One of the new features we added to Notable is @mentioning. @mentions, popularized by Twitter, allow you to call out other people in a conversation. We scoured the net for a open source, native, @mention library and came up with nothing. To solve this problem, we built our own and are excited to open source it as Tribute.

How it works

Add the JS and CSS to your page:

<link rel="stylesheet" href="tribute.css" />
<script src="tribute.js"></script>

Then initialize a Tribute instance with an array of objects that represents your data:

var tribute = new Tribute({
  values: [
    {key: 'Katniss Everdeen', value: 'Kat_Catching_Fire'},
    {key: 'Foxface', value: 'foxyweapons'}
  ]
})

You can then attach it to an input, textarea, or an element that supports contenteditable:

<div id="arena">Destroying things is much easier than making them.</div>

<script>
  tribute.attach(document.getElementById('arena'));
</script>

And that’s all there is to it! For optional configurations and different use cases, check out the documentation on Github!

"Happy Hunger Games! And may the odds be ever in your favor." ― Suzanne Collins, The Hunger Games