Elgg  Version 3.0
UserPicker.js
Go to the documentation of this file.
1 
3 define(function(require) {
4  var $ = require('jquery');
5  var elgg = require('elgg');
6  var spinner = require('elgg/spinner');
7  require('jquery.ui.autocomplete.html');
8 
16  function UserPicker(wrapper) {
17  this.$wrapper = $(wrapper);
18  this.$input = $('.elgg-input-user-picker', wrapper);
19  this.$ul = $('.elgg-user-picker-list', wrapper);
20 
21  var UserPicker = this,
22  data = this.$wrapper.data();
23 
24  this.name = data.name || 'members';
25  this.handler = data.handler || 'livesearch';
26  this.limit = data.limit || 0;
27  this.minLength = data.minLength || 2;
28  this.isSealed = false;
29 
30  this.$input.autocomplete({
31  source: function(request, response) {
32  // note: "this" below will not be bound to the input, but rather
33  // to an object created by the autocomplete component
34  var Autocomplete = this;
35 
36  if (UserPicker.isSealed) {
37  return;
38  }
39 
40  elgg.get(UserPicker.handler, {
41  beforeSend: spinner.start,
42  complete: spinner.stop,
43  data: {
44  term: Autocomplete.term,
45  match_on: UserPicker.getSearchType(),
46  name: UserPicker.name
47  },
48  dataType: 'json',
49  success: function(data) {
50  response(data);
51  }
52  });
53  },
54  minLength: UserPicker.minLength,
55  html: "html",
56  select: function(event, ui) {
57  UserPicker.addUser(event, ui.item.guid, ui.item.html);
58  },
59  // turn off experimental live help - no i18n support and a little buggy
60  messages: {
61  noResults: '',
62  results: function() {}
63  }
64  });
65 
66  this.$wrapper.on('click', '.elgg-autocomplete-item-remove', function(event) {
67  UserPicker.removeUser(event);
68  });
69 
70  this.enforceLimit();
71  }
72 
73  UserPicker.prototype = {
81  addUser : function(event, guid, html) {
82  // do not allow users to be added multiple times
83  if (!$('li[data-guid="' + guid + '"]', this.$ul).length) {
84  this.$ul.append(html);
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  var defaultType = 'users';
146  if (this.$wrapper.has('[type="hidden"][name="match_on"]').length) {
147  defaultType = $('[type="hidden"][name="match_on"]', this.$wrapper).val();
148  }
149 
150  if (this.$wrapper.has('[type="checkbox"][name="match_on"]:checked').length) {
151  return $('[type="checkbox"][name=match_on]:checked', this.$wrapper).val();
152  }
153 
154  return defaultType;
155  }
156  };
157 
161  UserPicker.setup = function(selector) {
162  elgg.register_hook_handler('init', 'system', function () {
163  $(selector).each(function () {
164  // we only want to wrap each picker once
165  if (!$(this).data('initialized')) {
166  new UserPicker(this);
167  $(this).data('initialized', 1);
168  }
169  });
170  });
171  };
172 
173  return UserPicker;
174 });
define(function(require){var $=require('jquery');var elgg=require('elgg');var spinner=require('elgg/spinner');require('jquery.ui.autocomplete.html');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.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;}elgg.get(UserPicker.handler,{beforeSend:spinner.start, complete:spinner.stop, data:{term:Autocomplete.term, match_on:UserPicker.getSearchType(), name:UserPicker.name}, dataType: 'json', 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(!$('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(){var defaultType= 'users';if(this.$wrapper.has('[type="hidden"][name="match_on"]').length){defaultType=$('[type="hidden"][name="match_on"]', this.$wrapper).val();}if(this.$wrapper.has('[type="checkbox"][name="match_on"]:checked').length){return $('[type="checkbox"][name=match_on]:checked', this.$wrapper).val();}return defaultType;}};UserPicker.setup=function(selector){elgg.register_hook_handler('init', 'system', function(){$(selector).each(function(){if(!$(this).data('initialized')){new UserPicker(this);$(this).data('initialized', 1);}});});};return UserPicker;})
elgg/UserPicker
elgg require
Throw an error if the required package isn't present.
Definition: elgglib.js:164
$site name
$input
Form field view.
Definition: field.php:13
var elgg
Definition: elgglib.js:4