Changeset View
Changeset View
Standalone View
Standalone View
assets/js/widgets/userlist.js
| class UserListWidget | class UserListWidget | ||||
| { | { | ||||
| /** | /** | ||||
| * Configuration: | * Configuration: | ||||
| * - username: Current user name | * - username: Current user name | ||||
| * - openChat: callback for "Open chat" button | * - openChat: Callback for "Open chat" button | ||||
| * - title: Enables list header | |||||
| */ | */ | ||||
| constructor(id, config) | constructor(id, config) | ||||
| { | { | ||||
| this.config = config || {} | this.config = config || {} | ||||
| this.id = id | this.id = id | ||||
| this.render([]) | |||||
| } | } | ||||
| setUser(username, userId) | setUser(username, userId) | ||||
| { | { | ||||
| this.config.username = username | this.config.username = username | ||||
| this.config.userId = userId | this.config.userId = userId | ||||
| } | } | ||||
| /** | /** | ||||
| * Render users list | * Render users list | ||||
| */ | */ | ||||
| render(presences) | render(presences) | ||||
| { | { | ||||
| let title = '' | |||||
| let list = $('#' + this.id) | let list = $('#' + this.id) | ||||
| let config = this.config | let config = this.config | ||||
| let html = presences.map(presence => { | let html = presences.map(presence => { | ||||
| if (presence.user != config.userId) { | if (presence.user != config.userId) { | ||||
| let buttons = this.buttons(presence) | let buttons = this.buttons(presence) | ||||
| return ` | return ` | ||||
| <li class="list-group-item status-${presence.status}" data-user="${presence.user}"> | <li class="list-group-item status-${presence.status}" data-user="${presence.user}"> | ||||
| <span class="glyphicon glyphicon-user"></span> ${presence.username} | <span class="glyphicon glyphicon-user"></span> ${presence.username} | ||||
| ${buttons} | ${buttons} | ||||
| </li>` | </li>` | ||||
| } | } | ||||
| }) | }) | ||||
| .join("") | .join("") | ||||
| list.html(html) | if (config.title === true) { | ||||
| title = '<div class="userlist-head">Users</div>' // TODO: Localization | |||||
| } | |||||
| list.html(title + '<ul class="userlist list-group">' + html + '</ul>') | |||||
| $('button', list).on('click', function(e) { | $('button', list).on('click', function(e) { | ||||
| let action = $(this).data('action') | let action = $(this).data('action') | ||||
| if (action && config[action]) { | if (action && config[action]) { | ||||
| config[action](e, $(this).parents('li').data('user')) | config[action](e, $(this).parents('li').data('user')) | ||||
| } | } | ||||
| }) | }) | ||||
| } | } | ||||
| /** | /** | ||||
| * Render users list record buttons | * Render users list record buttons | ||||
| */ | */ | ||||
| buttons(presence) | buttons(presence) | ||||
| { | { | ||||
| let buttons = '' | let buttons = '' | ||||
| if (this.config.openChat) { | if (this.config.openChat) { | ||||
| let btn_name = '<span class="glyphicon glyphicon-comment"></span> Open chat' | let btn_name = '<span class="glyphicon glyphicon-comment"></span> Open chat' // TODO: Localization | ||||
| buttons += `<button type="button" class="btn btn-primary btn-xs" data-action="openChat">${btn_name}</button>` | buttons += `<button type="button" class="btn btn-primary btn-xs" data-action="openChat">${btn_name}</button>` | ||||
| } | } | ||||
| if (buttons) { | if (buttons) { | ||||
| buttons = '<div class="btn-group">' + buttons + '</div>' | buttons = '<div class="btn-group">' + buttons + '</div>' | ||||
| } | } | ||||
| return buttons | return buttons | ||||
| } | } | ||||
| } | } | ||||
| export default UserListWidget | export default UserListWidget | ||||