mark room tile as active when clicked

This commit is contained in:
Bruno Windels 2020-08-12 17:40:41 +02:00
parent 7f50e3d137
commit 5aacf85166
3 changed files with 31 additions and 9 deletions

View File

@ -28,12 +28,13 @@ export class SessionViewModel extends ViewModel {
sync: sessionContainer.sync,
reconnector: sessionContainer.reconnector
})));
this._currentRoomTileViewModel = null;
this._currentRoomViewModel = null;
const roomTileVMs = this._session.rooms.mapValues((room, emitUpdate) => {
const roomTileVMs = this._session.rooms.mapValues((room, emitChange) => {
return new RoomTileViewModel({
room,
emitUpdate,
emitOpen: room => this._openRoom(room)
emitChange,
emitOpen: this._openRoom.bind(this)
});
});
this._roomList = roomTileVMs.sortValues((a, b) => a.compare(b));
@ -62,7 +63,11 @@ export class SessionViewModel extends ViewModel {
}
}
_openRoom(room) {
_openRoom(room, roomTileVM) {
if (this._currentRoomTileViewModel) {
this._currentRoomTileViewModel.close();
}
this._currentRoomTileViewModel = roomTileVM;
if (this._currentRoomViewModel) {
this._currentRoomViewModel = this.disposeTracked(this._currentRoomViewModel);
}

View File

@ -15,20 +15,33 @@ limitations under the License.
*/
import {avatarInitials} from "../avatar.js";
import {ViewModel} from "../../ViewModel.js";
export class RoomTileViewModel {
export class RoomTileViewModel extends ViewModel {
// we use callbacks to parent VM instead of emit because
// it would be annoying to keep track of subscriptions in
// parent for all RoomTileViewModels
// emitUpdate is ObservableMap/ObservableList update mechanism
constructor({room, emitUpdate, emitOpen}) {
constructor(options) {
super(options);
const {room, emitOpen} = options;
this._room = room;
this._emitUpdate = emitUpdate;
this._emitOpen = emitOpen;
this._isOpen = false;
}
// called by parent for now (later should integrate with router)
close() {
if (this._isOpen) {
this._isOpen = false;
this.emitChange("isOpen");
}
}
open() {
this._emitOpen(this._room);
this._isOpen = true;
this.emitChange("isOpen");
this._emitOpen(this._room, this);
}
compare(other) {
@ -36,6 +49,10 @@ export class RoomTileViewModel {
return this._room.name.localeCompare(other._room.name);
}
get isOpen() {
return this._isOpen;
}
get name() {
return this._room.name;
}

View File

@ -18,7 +18,7 @@ import {TemplateView} from "../general/TemplateView.js";
export class RoomTile extends TemplateView {
render(t) {
return t.li([
return t.li({"className": {"active": vm => vm.isOpen}}, [
t.div({className: "avatar medium"}, vm => vm.avatarInitials),
t.div({className: "description"}, t.div({className: "name"}, vm => vm.name))
]);