Elgg  Version 5.0
UserPicker.js
Go to the documentation of this file.
1 
2 define(['jquery', 'elgg', 'elgg/Ajax', 'jquery-ui/widgets/autocomplete', 'jquery.ui.autocomplete.html'], function($, elgg, Ajax) {
8  function UserPicker(wrapper) {
9  this.$wrapper = $(wrapper);
10  this.$input = $('.elgg-input-user-picker', wrapper);
11  this.$ul = $('.elgg-user-picker-list', wrapper);
12 
13  var UserPicker = this,
14  data = this.$wrapper.data();
15 
16  this.name = data.name || 'members';
17  this.matchOn = data.matchOn || 'users';
18  this.handler = data.handler || 'livesearch';
19  this.limit = data.limit || 0;
20  this.minLength = data.minLength || 2;
21  this.isSealed = false;
22 
23  this.$input.autocomplete({
24  source: function(request, response) {
25  // note: "this" below will not be bound to the input, but rather
26  // to an object created by the autocomplete component
27  var Autocomplete = this;
28 
29  if (UserPicker.isSealed) {
30  return;
31  }
32 
33  var ajax = new Ajax();
34  ajax.path(UserPicker.handler, {
35  data: {
36  term: Autocomplete.term,
37  match_on: UserPicker.getSearchType(),
38  name: UserPicker.name
39  },
40  method: 'GET',
41  success: function(data) {
42  response(data);
43  }
44  });
45  },
46  minLength: UserPicker.minLength,
47  html: 'html',
48  select: function(event, ui) {
49  UserPicker.addUser(event, ui.item.guid, ui.item.html);
50  },
51  // turn off experimental live help - no i18n support and a little buggy
52  messages: {
53  noResults: '',
54  results: function() {}
55  }
56  });
57 
58  this.$wrapper.on('click', '.elgg-autocomplete-item-remove', function(event) {
59  UserPicker.removeUser(event);
60  });
61 
62  this.enforceLimit();
63  }
64 
65  UserPicker.prototype = {
73  addUser: function(event, guid, html) {
74  if (event.isDefaultPrevented()) {
75  return;
76  }
77 
78  // do not allow users to be added multiple times
79  if (!$('li[data-guid="' + guid + '"]', this.$ul).length) {
80  this.$ul.append(html);
81  }
82 
83  this.$input.val('');
84 
85  this.enforceLimit();
86 
87  event.preventDefault();
88  },
89 
95  removeUser: function(event) {
96  $(event.target).closest('.elgg-user-picker-list > li').remove();
97 
98  this.enforceLimit();
99 
100  event.preventDefault();
101  },
102 
106  enforceLimit: function() {
107  if (this.limit) {
108  if ($('li[data-guid]', this.$ul).length >= this.limit) {
109  if (!this.isSealed) {
110  this.seal();
111  }
112  } else {
113  if (this.isSealed) {
114  this.unseal();
115  }
116  }
117  }
118  },
119 
123  seal: function() {
124  this.$input.prop('disabled', true);
125  this.$wrapper.addClass('elgg-state-disabled');
126  this.isSealed = true;
127  },
128 
132  unseal: function() {
133  this.$input.prop('disabled', false);
134  this.$wrapper.removeClass('elgg-state-disabled');
135  this.isSealed = false;
136  },
137 
141  getSearchType: function() {
142  if (this.$wrapper.has('[type="checkbox"][name="match_on"]:checked').length) {
143  return $('[type="checkbox"][name=match_on]:checked', this.$wrapper).val();
144  }
145 
146  return this.matchOn;
147  }
148  };
149 
153  UserPicker.setup = function(selector) {
154  $(selector).each(function () {
155  // we only want to wrap each picker once
156  if (!$(this).data('initialized')) {
157  new UserPicker(this);
158  $(this).data('initialized', 1);
159  }
160  });
161  };
162 
163  return UserPicker;
164 });
define(['jquery', 'elgg', 'elgg/Ajax', 'jquery-ui/widgets/autocomplete', 'jquery.ui.autocomplete.html'], function($, elgg, Ajax){function UserPicker(wrapper){this.$wrapper=$(wrapper);this.$input=$('.elgg-input-user-picker', wrapper);this.$ul=$('.elgg-user-picker-list', wrapper);var UserPicker=this, data=this.$wrapper.data();this.name=data.name|| 'members';this.matchOn=data.matchOn|| 'users';this.handler=data.handler|| 'livesearch';this.limit=data.limit||0;this.minLength=data.minLength||2;this.isSealed=false;this.$input.autocomplete({source:function(request, response){var Autocomplete=this;if(UserPicker.isSealed){return;}var ajax=new Ajax();ajax.path(UserPicker.handler,{data:{term:Autocomplete.term, match_on:UserPicker.getSearchType(), name:UserPicker.name}, method: 'GET', success:function(data){response(data);}});}, minLength:UserPicker.minLength, html: 'html', select:function(event, ui){UserPicker.addUser(event, ui.item.guid, ui.item.html);}, messages:{noResults: '', results:function(){}}});this.$wrapper.on('click', '.elgg-autocomplete-item-remove', function(event){UserPicker.removeUser(event);});this.enforceLimit();}UserPicker.prototype={addUser:function(event, guid, html){if(event.isDefaultPrevented()){return;}if(!$('li[data-guid="' + guid + '"]', this.$ul).length){this.$ul.append(html);}this.$input.val('');this.enforceLimit();event.preventDefault();}, removeUser:function(event){$(event.target).closest('.elgg-user-picker-list > li').remove();this.enforceLimit();event.preventDefault();}, enforceLimit:function(){if(this.limit){if($('li[data-guid]', this.$ul).length >=this.limit){if(!this.isSealed){this.seal();}}else{if(this.isSealed){this.unseal();}}}}, seal:function(){this.$input.prop('disabled', true);this.$wrapper.addClass('elgg-state-disabled');this.isSealed=true;}, unseal:function(){this.$input.prop('disabled', false);this.$wrapper.removeClass('elgg-state-disabled');this.isSealed=false;}, getSearchType:function(){if(this.$wrapper.has('[type="checkbox"][name="match_on"]:checked').length){return $('[type="checkbox"][name=match_on]:checked', this.$wrapper).val();}return this.matchOn;}};UserPicker.setup=function(selector){$(selector).each(function(){if(!$(this).data('initialized')){new UserPicker(this);$(this).data('initialized', 1);}});};return UserPicker;})
elgg/UserPicker
$input
Form field view.
Definition: field.php:13
$site name
Definition: settings.php:15
var elgg
Definition: elgglib.js:4