Elgg  Version 5.1
UserPicker.js
Go to the documentation of this file.
1 
5 define(['jquery', 'elgg', 'elgg/Ajax', 'jquery-ui/widgets/autocomplete', 'jquery.ui.autocomplete.html'], function($, elgg, Ajax) {
11  function UserPicker(wrapper) {
12  this.$wrapper = $(wrapper);
13  this.$input = $('.elgg-input-user-picker', wrapper);
14  this.$ul = $('.elgg-user-picker-list', wrapper);
15 
16  var UserPicker = this,
17  data = this.$wrapper.data();
18 
19  this.name = data.name || 'members';
20  this.matchOn = data.matchOn || 'users';
21  this.handler = data.handler || 'livesearch';
22  this.limit = data.limit || 0;
23  this.minLength = data.minLength || 2;
24  this.isSealed = false;
25 
26  this.$input.autocomplete({
27  source: function(request, response) {
28  // note: "this" below will not be bound to the input, but rather
29  // to an object created by the autocomplete component
30  var Autocomplete = this;
31 
32  if (UserPicker.isSealed) {
33  return;
34  }
35 
36  var ajax = new Ajax();
37  ajax.path(UserPicker.handler, {
38  data: {
39  term: Autocomplete.term,
40  match_on: UserPicker.getSearchType(),
41  name: UserPicker.name
42  },
43  method: 'GET',
44  success: function(data) {
45  response(data);
46  }
47  });
48  },
49  minLength: UserPicker.minLength,
50  html: 'html',
51  select: function(event, ui) {
52  UserPicker.addUser(event, ui.item.guid, ui.item.html);
53  },
54  // turn off experimental live help - no i18n support and a little buggy
55  messages: {
56  noResults: '',
57  results: function() {}
58  }
59  });
60 
61  this.$wrapper.on('click', '.elgg-autocomplete-item-remove', function(event) {
62  UserPicker.removeUser(event);
63  });
64 
65  this.enforceLimit();
66  }
67 
68  UserPicker.prototype = {
76  addUser: function(event, guid, html) {
77  if (event.isDefaultPrevented()) {
78  return;
79  }
80 
81  // do not allow users to be added multiple times
82  if (!$('li[data-guid="' + guid + '"]', this.$ul).length) {
83  this.$ul.append(html);
84  }
85 
86  this.$input.val('');
87 
88  this.enforceLimit();
89 
90  event.preventDefault();
91  },
92 
98  removeUser: function(event) {
99  $(event.target).closest('.elgg-user-picker-list > li').remove();
100 
101  this.enforceLimit();
102 
103  event.preventDefault();
104  },
105 
109  enforceLimit: function() {
110  if (this.limit) {
111  if ($('li[data-guid]', this.$ul).length >= this.limit) {
112  if (!this.isSealed) {
113  this.seal();
114  }
115  } else {
116  if (this.isSealed) {
117  this.unseal();
118  }
119  }
120  }
121  },
122 
126  seal: function() {
127  this.$input.prop('disabled', true);
128  this.$wrapper.addClass('elgg-state-disabled');
129  this.isSealed = true;
130  },
131 
135  unseal: function() {
136  this.$input.prop('disabled', false);
137  this.$wrapper.removeClass('elgg-state-disabled');
138  this.isSealed = false;
139  },
140 
144  getSearchType: function() {
145  if (this.$wrapper.has('[type="checkbox"][name="match_on"]:checked').length) {
146  return $('[type="checkbox"][name=match_on]:checked', this.$wrapper).val();
147  }
148 
149  return this.matchOn;
150  }
151  };
152 
156  UserPicker.setup = function(selector) {
157  $(selector).each(function () {
158  // we only want to wrap each picker once
159  if (!$(this).data('initialized')) {
160  new UserPicker(this);
161  $(this).data('initialized', 1);
162  }
163  });
164  };
165 
166  return UserPicker;
167 });
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