Changeset View
Changeset View
Standalone View
Standalone View
assets/js/widgets/channellist.js
- This file was added.
class ChannelListWidget | |||||
{ | |||||
/** | |||||
* Configuration: | |||||
* - username: Current user name | |||||
* - openChat: Callback for "Open" button | |||||
* - createChat: Callback for "Create" button | |||||
* - title: Enable list header with Create button | |||||
*/ | |||||
constructor(id, config) | |||||
{ | |||||
this.config = config || {} | |||||
this.id = id | |||||
this.render([]) | |||||
} | |||||
setUser(username, userId) | |||||
{ | |||||
this.config.username = username | |||||
this.config.userId = userId | |||||
} | |||||
/** | |||||
* Render channels list | |||||
*/ | |||||
render(channels) | |||||
{ | |||||
let title = '' | |||||
let btn = '' | |||||
let list = $('#' + this.id) | |||||
let config = this.config | |||||
let html = channels.map(channel => { | |||||
// TODO: List only public channels and channels the user has been invited to | |||||
let buttons = this.buttons(channel) | |||||
return ` | |||||
<li class="list-group-item" data-channel="${channel.id}"> | |||||
<span class="glyphicon glyphicon-channel"></span> #${channel.name} | |||||
${buttons} | |||||
</li>` | |||||
}) | |||||
.join("") | |||||
if (config.title === true) { | |||||
if (config.createChat) { | |||||
btn = ` | |||||
<button type="button" class="btn btn-primary btn-xs" data-action="createChat"> | |||||
<span class="glyphicon glyphicon-plus-sign"></span> Create | |||||
</button> | |||||
` | |||||
} | |||||
title = `<div class="channellist-head">Channels ${btn}</div>` // TODO: Localization | |||||
} | |||||
list.html(title + '<ul class="channellist list-group">' + html + '</ul>') | |||||
$('button', list).on('click', function(e) { | |||||
let action = $(this).data('action') | |||||
if (action && config[action]) { | |||||
config[action](e, $(this).parents('li').data('channel')) | |||||
} | |||||
}) | |||||
} | |||||
/** | |||||
* Render channel list record buttons | |||||
*/ | |||||
buttons(channel) | |||||
{ | |||||
let buttons = '' | |||||
if (this.config.openChat) { | |||||
let btn_name = '<span class="glyphicon glyphicon-comment"></span> Open' // TODO: localization | |||||
buttons += `<button type="button" class="btn btn-primary btn-xs" data-action="openChat">${btn_name}</button>` | |||||
} | |||||
if (buttons) { | |||||
buttons = '<div class="btn-group">' + buttons + '</div>' | |||||
} | |||||
return buttons | |||||
} | |||||
} | |||||
export default ChannelListWidget |