view/templates/acl/message_recipient.tpl

   1 <select name="recipient" class="form-control input-lg" id="recipient" required>
   2         <option></option>
   3         {{foreach $contacts as $contact}}
   4                 <option value="{{$contact.id}}"{{if $contact.id == $selected}} selected{{/if}}>{{$contact.name}}</option>
   5         {{/foreach}}
   6 </select>
   7 <script type="text/javascript">
   8         $(function() {
   9                 let $recipient_input = $('[name="recipient"]');
  10
  11                 let acl = new Bloodhound({
  12                         local: {{$contacts|@json_encode nofilter}},
  13                         identify: function(obj) { return obj.id.toString(); },
  14                         datumTokenizer: Bloodhound.tokenizers.obj.whitespace(['name', 'addr']),
  15                         queryTokenizer: Bloodhound.tokenizers.whitespace,
  16                         sorter: function (itemA, itemB) {
  17                                 if (itemA.name === itemB.name) {
  18                                         return 0;
  19                                 } else if (itemA.name > itemB.name) {
  20                                         return 1;
  21                                 } else {
  22                                         return -1;
  23                                 }
  24                         },
  25                 });
  26                 acl.initialize();
  27
  28                 let suggestionTemplate = function (item) {
  29                         return '<div><img src="' + item.micro + '" alt="" style="float: left; width: auto; height: 2.8em; margin-right: 0.5em;"><p style="margin-left: 3.3em;"><strong>' + item.name + '</strong><br /><em>' + item.addr + '</em></p></div>';
  30                 };
  31
  32                 $recipient_input.tagsinput({
  33                         confirmKeys: [13, 44],
  34                         freeInput: false,
  35                         tagClass: 'label label-info',
  36                         itemValue: function (item) { return item.id.toString(); },
  37                         itemText: 'name',
  38                         itemThumb: 'micro',
  39                         itemTitle: function(item) {
  40                                 return item.addr;
  41                         },
  42                         typeaheadjs: {
  43                                 name: 'contacts',
  44                                 displayKey: 'name',
  45                                 templates: {
  46                                         suggestion: suggestionTemplate
  47                                 },
  48                                 source: acl.ttAdapter()
  49                         }
  50                 });
  51
  52                 {{if $selected}}
  53                 // Import existing ACL into the tags input fields.
  54                 $recipient_input.tagsinput('add', acl.get({{$selected}})[0]);
  55                 {{/if}}
  56         });
  57 </script>