Differential D363 Diff 840 web/static/js/widgets/userstatus.js

Changeset View

Standalone View

web/static/js/widgets/userstatus.js


	class UserStatusWidget			class UserStatusWidget
	{			{
	/**			/**
	* Configuration:			* Configuration:
	* - statusChange: handler function for status change			* - statusChange: handler function for status change
	*/			*/
	constructor(id, config)			constructor(id, config)
	{			{
	this.config = config \|\| {}			this.config = config \|\| {}
	this.id = id			this.id = id

				// FIXME: should we get that list from the backend?
				seigoUnsubmitted Not Done Inline Actions yes, this will eventually need to be done. i have added T2193 for this. seigo: yes, this will eventually need to be done. i have added T2193 for this.
				this.status_list = [
				// user is available for chat
				"online",
				"away",
				// user is connected and visible, but not available
				"busy",
				"unavailable",
				// user is shown as offline
				"invisible",
				"offline"
				];
	}			}

	/**			/**
	* Renders user status widget			* Renders user status widget
	*/			*/
	render(presence)			render(presence)
	{			{
	let userStatusElement = document.getElementById(this.id)			let userStatusElement = document.getElementById(this.id)
	let icon = '<span class="glyphicon glyphicon-user"></span>'			let icon = '<span class="glyphicon glyphicon-user"></span>'
				let options = list => {
				return $.map(list, status =>
				`<li><a href="#" class="status-${status}">${icon} ${status}</a></li>`
				).join("\n")
				}

	userStatusElement.innerHTML = `			userStatusElement.innerHTML = `
	<div class="dropdown">			<div class="dropdown">
	<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">			<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
	<span class="status-${presence.status}">			<span class="status-${presence.status}">
	${icon} ${presence.user}			${icon} ${presence.user}
	</span>			</span>
	<span class="caret"></span>			<span class="caret"></span>
	</button>			</button>
	<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">			<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
	<li><a href="#" class="status-online">${icon} Online</a></li>			` + options(this.status_list) + `
	<li><a href="#" class="status-away">${icon} Away</a></li>
	<li><a href="#" class="status-busy">${icon} Busy</a></li>
	</ul>			</ul>
	</div>			</div>
	`			`

	$('.dropdown-menu > li', userStatusElement).click(e => {			$('.dropdown-menu > li', userStatusElement).click(e => {
	let status_class = $(e.target).attr('class')			let status_class = $(e.target).attr('class')
	if (this.config.statusChange && !$('button > span:first', userStatusElement).hasClass(status_class)) {			if (this.config.statusChange && !$('button > span:first', userStatusElement).hasClass(status_class)) {
	this.config.statusChange(status_class.replace(/^status-/, ''))			this.config.statusChange(status_class.replace(/^status-/, ''))
	}			}
	})			})
	}			}
	}			}

	export default UserStatusWidget			export default UserStatusWidget