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 |