scinote-web/app/assets/javascripts/sitewide/atwho_users.js.erb

(function() {
  'use strict';

  $(document).on(
    'focus',
    '[data-atwho-users-edit]',
    function() {
      // Only initialize if URL is present and
      // atwho is not initialized yet
      if (
        $(document.body).is('[data-atwho-users-url]') &&
        _.isUndefined($(this).data('atwho'))
      ) {
        var dataUrl = $(document.body).attr('data-atwho-users-url');

        $(this)
        .atwho({
          at: '@',
          callbacks: {
            remoteFilter: function(query, callback) {
              $.getJSON(
                dataUrl,
                {query: query},
                function(data) {
                  callback(data.users);
                }
              );
            },
            sorter: function(query, items, _searchKey) {
              // Sorting is already done on server-side
              return items;
            },
            tplEval: function(_tpl, map) {
              var res;
              try {
                res = '';
                res += '<li class="atwho-li atwho-li-user" ';
                res += 'data-id="' + map.id + '" ';
                res += 'data-full-name="' + map.full_name + '">';
                res += '<img src="' + map.img_url + '" class="avatar" />';
                res += '<span data-val="full-name">';
                res += map.full_name;
                res += '</span>';
                res += '<small>';
                res += '&nbsp;';
                res += '&#183;';
                res += '&nbsp;';
                res += '<span data-val="email">';
                res += map.email;
                res += '</span>';
                res += '</small>';
                res += '</li>';
              } catch (_error) {
                res = '';
              }
              return res;
            },
            highlighter: function(li, query) {
              function highlight(el, sel, re) {
                var prevVal = el.find(sel).html();
                var newVal = prevVal.replace(re, '<strong>$&</strong>');
                el.find(sel).html(newVal);
              }

              if (!query) {
                return li;
              }

              var $li = $(li);
              var re = new RegExp(query, 'gi');
              highlight($li, '[data-val=full-name]', re);
              highlight($li, '[data-val=email]', re);
              return $li[0].outerHTML;
            },
            beforeInsert: function(value, li) {
              var res = '';
              res += '[@' + li.attr('data-full-name');
              res += '~' + li.attr('data-id') + ']';
              return res;
            }
          },
          headerTpl:
            '<div class="atwho-header-user">' +
            '<div class="title"><%= I18n.t("atwho.users.title") %></div>' +
            '<div class="help">' +
            '<div>' +
            '<strong><%= I18n.t("atwho.users.navigate_1") %></strong> ' +
            '<%= I18n.t("atwho.users.navigate_2") %>' +
            '</div>' +
            '<div>' +
            '<strong><%= I18n.t("atwho.users.confirm_1") %></strong> ' +
            '<%= I18n.t("atwho.users.confirm_2") %>' +
            '</div>' +
            '<div>' +
            '<strong><%= I18n.t("atwho.users.dismiss_1") %></strong> ' +
            '<%= I18n.t("atwho.users.dismiss_2") %>' +
            '</div>' +
            '<div class="dismiss">' +
            '<span class="glyphicon glyphicon-remove"></span>' +
            '</div>' +
            '</div>' +
            '</div>',
          limit: <%= Constants::ATWHO_SEARCH_LIMIT %>,
          startsWithSpace: true,
          acceptSpaceBar: true
        });
      }
    }
  );
})();