59 lines
1.9 KiB
TypeScript
59 lines
1.9 KiB
TypeScript
// SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
|
|
//
|
|
// SPDX-License-Identifier: AGPL-3.0-only
|
|
|
|
/**
|
|
* Do some customization on the toolbar:
|
|
* * change the appearance of the toggle occupants button
|
|
*
|
|
* @param plugin The plugin object
|
|
*/
|
|
export function customizeToolbar (plugin: any): void {
|
|
const _converse = plugin._converse
|
|
_converse.api.listen.on('getToolbarButtons', getToolbarButtons.bind(plugin))
|
|
}
|
|
|
|
function getToolbarButtons (this: any, toolbarEl: any, buttons: any[]): any {
|
|
const _converse = this._converse
|
|
|
|
// Adding a toggle_occupants button.
|
|
// Note: we don't need to test conditions, we know the button was here.
|
|
const i18nHideOccupants = _converse.__('Hide participants')
|
|
const i18nShowOccupants = _converse.__('Show participants')
|
|
const html = window.converse.env.html
|
|
const icon = toolbarEl.hidden_occupants
|
|
? html`<converse-icon
|
|
color="var(--muc-toolbar-btn-color)"
|
|
class="fa fa-angle-double-left"
|
|
size="1em">
|
|
</converse-icon>
|
|
<converse-icon
|
|
color="var(--muc-toolbar-btn-color)"
|
|
class="fa users"
|
|
size="1em">
|
|
</converse-icon>`
|
|
: html`<converse-icon
|
|
color="var(--muc-toolbar-btn-color)"
|
|
class="fa users"
|
|
size="1em">
|
|
</converse-icon>
|
|
<converse-icon
|
|
color="var(--muc-toolbar-btn-color)"
|
|
class="fa fa-angle-double-right"
|
|
size="1em">
|
|
</converse-icon>`
|
|
buttons.push(html`
|
|
<button class="toggle-occupants btn" type="button"
|
|
title="${toolbarEl.hidden_occupants ? i18nShowOccupants : i18nHideOccupants}"
|
|
@click=${(ev?: Event) => {
|
|
ev?.preventDefault()
|
|
toolbarEl.model.save({
|
|
hidden_occupants: !toolbarEl.model.get('hidden_occupants')
|
|
})
|
|
}}>
|
|
${icon}
|
|
</button>`
|
|
)
|
|
return buttons
|
|
}
|