Demo for At.js for @mention

Showing @mention usage of At.js

by Guddu Kumar

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.jsdelivr.net/at.js/0.5.0/css/jquery.atwho.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="http://cdn.jsdelivr.net/caret.js/0.2.0/jquery.caret.min.js"></script>
<script src="http://cdn.jsdelivr.net/at.js/0.5.0/js/jquery.atwho.min.js"></script>

</br>
<textarea id='question' class='span12 code_area_style'></textarea>

CSS

.code_area_style {
    width: 400px;
    height: 100px;
    border: 1px solid #ccc;
}
.template_helper_commands {
    position: absolute;
    display:none;
}
#formulaDialog {
      width: 280px;
      border: 1px solid rgba(0, 0, 0, 0.2);
      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
      padding: 5px;
      height: auto;
      z-index: 1000;
      background-color: #fff;
}
.var {
      padding: 0 5px;
      background: #E6E6E6;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-shadow: 1px 1px #CCC;
}

JavaScript

$(document).ready(function () {
    var config = {
        at: '%{',
      
        limit: 50,
        data: ['Ram', 'Shayam', 'Rohan', 'Sohan'],
        callbacks: {
            before_insert: function (template) { 
                var abs=template+'}'
                return atWhoBeforeInsertCallback(abs);                
            }
        }
    };

    // helper functions
    function getFormattedVariableName(name) {

      var span_id = Math.random().toString(36).substring(2, 10);
      return '<span>' + name + '</span>'
    }
    function atWhoBeforeInsertCallback(value, is_new_one) {
       
      var that = this;
      return value.replace(/<span id='\w+'>.(.+)<\/span>/g, function(_, m){
        if(is_new_one) {
          m = m + '(...)';
        }
        return getFormattedVariableName(m);
      });
    }    

    $('#question').atwho(config);
});