mirror of
https://github.com/vector-im/hydrogen-web.git
synced 2024-12-23 11:35:04 +01:00
integrate grid vm with session vm, allowing to switch
This commit is contained in:
parent
9cc7833d7a
commit
614ec08238
@ -40,6 +40,12 @@ export class ViewModel extends EventEmitter {
|
|||||||
return this.disposables.track(disposable);
|
return this.disposables.track(disposable);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
untrack(disposable) {
|
||||||
|
if (this.disposables) {
|
||||||
|
return this.disposables.untrack(disposable);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
dispose() {
|
dispose() {
|
||||||
if (this.disposables) {
|
if (this.disposables) {
|
||||||
this.disposables.dispose();
|
this.disposables.dispose();
|
||||||
|
@ -18,6 +18,7 @@ limitations under the License.
|
|||||||
import {LeftPanelViewModel} from "./leftpanel/LeftPanelViewModel.js";
|
import {LeftPanelViewModel} from "./leftpanel/LeftPanelViewModel.js";
|
||||||
import {RoomViewModel} from "./room/RoomViewModel.js";
|
import {RoomViewModel} from "./room/RoomViewModel.js";
|
||||||
import {SessionStatusViewModel} from "./SessionStatusViewModel.js";
|
import {SessionStatusViewModel} from "./SessionStatusViewModel.js";
|
||||||
|
import {RoomGridViewModel} from "./RoomGridViewModel.js";
|
||||||
import {ViewModel} from "../ViewModel.js";
|
import {ViewModel} from "../ViewModel.js";
|
||||||
|
|
||||||
export class SessionViewModel extends ViewModel {
|
export class SessionViewModel extends ViewModel {
|
||||||
@ -32,16 +33,34 @@ export class SessionViewModel extends ViewModel {
|
|||||||
})));
|
})));
|
||||||
this._leftPanelViewModel = new LeftPanelViewModel(this.childOptions({
|
this._leftPanelViewModel = new LeftPanelViewModel(this.childOptions({
|
||||||
rooms: this._session.rooms,
|
rooms: this._session.rooms,
|
||||||
openRoom: this._openRoom.bind(this)
|
openRoom: this._openRoom.bind(this),
|
||||||
|
gridEnabled: {
|
||||||
|
get: () => !!this._gridViewModel,
|
||||||
|
set: value => this._enabledGrid(value)
|
||||||
|
}
|
||||||
}));
|
}));
|
||||||
this._currentRoomTileViewModel = null;
|
this._currentRoomTileViewModel = null;
|
||||||
this._currentRoomViewModel = null;
|
this._currentRoomViewModel = null;
|
||||||
|
this._gridViewModel = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
start() {
|
start() {
|
||||||
this._sessionStatusViewModel.start();
|
this._sessionStatusViewModel.start();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
get middlePanelViewType() {
|
||||||
|
if (this._currentRoomViewModel) {
|
||||||
|
return "room";
|
||||||
|
} else if (this._gridViewModel) {
|
||||||
|
return "roomgrid";
|
||||||
|
}
|
||||||
|
return "placeholder";
|
||||||
|
}
|
||||||
|
|
||||||
|
get roomGridViewModel() {
|
||||||
|
return this._gridViewModel;
|
||||||
|
}
|
||||||
|
|
||||||
get leftPanelViewModel() {
|
get leftPanelViewModel() {
|
||||||
return this._leftPanelViewModel;
|
return this._leftPanelViewModel;
|
||||||
}
|
}
|
||||||
@ -58,24 +77,62 @@ export class SessionViewModel extends ViewModel {
|
|||||||
return this._currentRoomViewModel;
|
return this._currentRoomViewModel;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
_enabledGrid(enabled) {
|
||||||
|
if (enabled) {
|
||||||
|
this._gridViewModel = this.track(new RoomGridViewModel(this.childOptions({width: 3, height: 2})));
|
||||||
|
// transfer current room
|
||||||
|
if (this._currentRoomViewModel) {
|
||||||
|
this.untrack(this._currentRoomViewModel);
|
||||||
|
this._gridViewModel.setRoomViewModel(this._currentRoomViewModel, this._currentRoomTileViewModel);
|
||||||
|
this._currentRoomViewModel = null;
|
||||||
|
this._currentRoomTileViewModel = null;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
const VMs = this._gridViewModel.getAndUntrackFirst();
|
||||||
|
if (VMs) {
|
||||||
|
this._currentRoomViewModel = this.track(VMs.vm);
|
||||||
|
this._currentRoomTileViewModel = VMs.tileVM;
|
||||||
|
this._currentRoomTileViewModel.open();
|
||||||
|
}
|
||||||
|
this._gridViewModel = this.disposeTracked(this._gridViewModel);
|
||||||
|
}
|
||||||
|
this.emitChange("middlePanelViewType");
|
||||||
|
}
|
||||||
|
|
||||||
_closeCurrentRoom() {
|
_closeCurrentRoom() {
|
||||||
|
// no closing in grid for now
|
||||||
|
if (!this._gridViewModel) {
|
||||||
this._currentRoomTileViewModel?.close();
|
this._currentRoomTileViewModel?.close();
|
||||||
this._currentRoomViewModel = this.disposeTracked(this._currentRoomViewModel);
|
this._currentRoomViewModel = this.disposeTracked(this._currentRoomViewModel);
|
||||||
|
return true;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
_openRoom(room, roomTileVM) {
|
_openRoom(room, roomTileVM) {
|
||||||
this._closeCurrentRoom();
|
// for now, we don't support having the same room opened more than once,
|
||||||
this._currentRoomTileViewModel = roomTileVM;
|
// so bail out if we already have the room open
|
||||||
this._currentRoomViewModel = this.track(new RoomViewModel(this.childOptions({
|
if (this._gridViewModel?.hasRoomId(room.id)) {
|
||||||
|
return;
|
||||||
|
} else if (this._currentRoomViewModel?._room.id === room.id) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const roomVM = new RoomViewModel(this.childOptions({
|
||||||
room,
|
room,
|
||||||
ownUserId: this._session.user.id,
|
ownUserId: this._session.user.id,
|
||||||
closeCallback: () => {
|
closeCallback: () => {
|
||||||
this._closeCurrentRoom();
|
if (this._closeCurrentRoom()) {
|
||||||
this.emitChange("currentRoom");
|
this.emitChange("currentRoom");
|
||||||
|
}
|
||||||
},
|
},
|
||||||
})));
|
}));
|
||||||
this._currentRoomViewModel.load();
|
roomVM.load();
|
||||||
|
if (this._gridViewModel) {
|
||||||
|
this._gridViewModel.setRoomViewModel(roomVM, roomTileVM);
|
||||||
|
} else {
|
||||||
|
this._closeCurrentRoom();
|
||||||
|
this._currentRoomTileViewModel = roomTileVM;
|
||||||
|
this._currentRoomViewModel = this.track(roomVM);
|
||||||
this.emitChange("currentRoom");
|
this.emitChange("currentRoom");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
@ -35,6 +35,13 @@ export class Disposables {
|
|||||||
return disposable;
|
return disposable;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
untrack(disposable) {
|
||||||
|
const idx = this._disposables.indexOf(disposable);
|
||||||
|
if (idx >= 0) {
|
||||||
|
this._disposables.splice(idx, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
dispose() {
|
dispose() {
|
||||||
if (this._disposables) {
|
if (this._disposables) {
|
||||||
for (const d of this._disposables) {
|
for (const d of this._disposables) {
|
||||||
|
Loading…
Reference in New Issue
Block a user