diff options
| -rw-r--r-- | views/default/css.php | 60 | ||||
| -rw-r--r-- | views/default/input/userpicker.php | 150 |
2 files changed, 210 insertions, 0 deletions
diff --git a/views/default/css.php b/views/default/css.php index 2554073ec..706c5fe50 100644 --- a/views/default/css.php +++ b/views/default/css.php @@ -2536,4 +2536,64 @@ a.delete_report_button:hover { } +/* *************************************** + Auto Suggest Boxes +*************************************** */ + +.ac_results { + padding: 0px; + border: 1px solid black; + background-color: white; + overflow: hidden; + z-index: 99999; +} + +.ac_results ul { + width: 100%; + list-style-position: outside; + list-style: none; + padding: 0; + margin: 0; +} + +.ac_results li { + margin: 0px; + padding: 2px 5px; + cursor: default; + display: block; + /* + if width will be 100% horizontal scrollbar will apear + when scroll mode will be used + */ + /*width: 100%;*/ + font: menu; + font-size: 12px; + /* + it is very important, if line-height not setted or setted + in relative units scroll will be broken in firefox + */ + line-height: 16px; + overflow: hidden; +} + +.ac_loading { + background: white url(<?php echo $vars['url']; ?>_graphics/indicator.gif') right center no-repeat; +} + +.ac_odd { + background-color: #eee; +} + +.ac_over { + background-color: #0A246A; + color: white; +} + +.autocomplete { + width:300px; +} +.user_picker .user_picker_entry { + clear: both; + padding: 1em; +}
\ No newline at end of file diff --git a/views/default/input/userpicker.php b/views/default/input/userpicker.php new file mode 100644 index 000000000..8f26b8916 --- /dev/null +++ b/views/default/input/userpicker.php @@ -0,0 +1,150 @@ +<?php +/** + * User Picker. Sends an array of user guids. + * + * @package Elgg + * @subpackage Core + * @author Curverider Ltd + * @link http://elgg.org/ + * + * @uses $vars['value'] The current value, if any + * @uses $vars['internalname'] The name of the input field + * + * + * pops up defaulted to lazy load friends lists in paginated alphabetical order. + * upon + * + * As users are checked they move down to a "users" box. + * When this happens, a hidden input is created also. + * {$internalnal}[] with the value th GUID. + * + */ + +global $user_picker_js_sent; + +if (!$user_picker_js_sent) { +?> +<!-- User picker JS --> +<script language="javascript" type="text/javascript" src="<?php echo $vars['url']; ?>vendors/jquery/jquery.autocomplete.min.js"></script> +<script type="text/javascript"> +// set up a few required variables +userPickerURL = '<?php echo $vars['url'] ?>pg/livesearch'; + +function userPickerBindEvents() { + // binding autocomplete. + // doing this as an each so we can past this to functions. + $('.user_picker .search').each(function (i, e) { + userPickerBindAutocomplete(e); + }); + + // changing friends vs all users. + $('.user_picker .all_users').click(function() { + // update the extra params for the autocomplete. + var e = $(this).parents('.user_picker').find('.search'); + var params = userPickerGetSearchParams(e); + e.setOptions({extraParams: params}); + e.flushCache(); + }); + + // hitting enter on the text field +// $('.user_picker .search').bind($.browser.opera ? "keypress" : "keydown", function(event) { +// if(event.keyCode == 13) { +//// console.log($(this).val()); +// userPickerAddUser(this); +// } +// }); +} + +function userPickerBindAutocomplete(e) { + var params = userPickerGetSearchParams(e); + + $(e).autocomplete(userPickerURL, { + extraParams: params, + minChars: 1, + matchContains: true, + autoFill: false, + formatItem: userPickerFormatItem, + formatResult: function (row, i, max) { + eval("var info = " + row + ";"); + //console.log('format result'); + // upon select, adding the user to the user basket. + // this is slightly abusive for this function. + // set it to the hidden input name + + //userPickerAddUser(info.guid); + + // returning the name + return info.name; + } + }); + + // add users when a result is picked. + $(e).result(userPickerAddUser); +} + +function userPickerFormatItem(row, i, max, term) { + eval("var info = " + row + ";"); + var r = ''; + + switch (info.type) { + case 'user': + case 'group': + r = info.icon + info.name + ' - ' + info.desc; + break; + + default: + r = info.name + ' - ' + info.desc; + break; + } + return r.replace(new RegExp("(" + term + ")", "gi"), "<b>$1</b>"); +} + +function userPickerAddUser(event, data, formatted) { + eval("var info = " + data + ";"); + var picker = $(this).parent('.user_picker'); + var users = picker.find('.users'); + var internalName = picker.find('input.internalname').val(); + // not sure why formatted isn't. + var formatted = userPickerFormatItem(data); + + // add guid as hidden input and to list. + var li = formatted + ' (' + '<a onclick="userPickerRemoveUser(this, ' + info.guid + ')">X</a>)' + + '<input type="hidden" name="' + internalName + '[]" value="' + info.guid + '" />'; + $('<li class="user_picker_entry">').html(li).appendTo(users); + + $(this).val(''); +} + +function userPickerRemoveUser(link, guid) { + $(link).parent('.user_picker_entry').html(''); +} + +function userPickerGetSearchParams(e) { + if ($(e).parent().find('.all_users').attr('checked')) { + return {'match_on[]': 'users'}; + } else { + return {'match_on[]': 'friends'}; + } +} + +$(document).ready(function() { + userPickerBindEvents(); +}); +</script> +<?php + $user_picker_js_sent = true; +} + +?> +<div class="user_picker"> + <input class="internalname" type="hidden" name="internalname" value="<?php echo $vars['internalname']; ?>" /> + <input class="search" type="text" name="user_search" /> + <span class="controls"> + <label><input class="all_users" type="checkbox" name="match_on" value="true" />All Users</label> + </span> + <div class="results"> + <!-- This space will be filled with users, checkboxes and magic. --> + </div> + <ul class="users"></ul> +</div> + |