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 | |||||