forked from mystiq/hydrogen-web
first round of fixes
This commit is contained in:
parent
14d2dcbc60
commit
4e8e9eae26
9 changed files with 35 additions and 31 deletions
|
@ -32,11 +32,11 @@ export class Navigation {
|
||||||
this._path = path;
|
this._path = path;
|
||||||
// clear values not in the new path in reverse order of path
|
// clear values not in the new path in reverse order of path
|
||||||
for (let i = oldPath.segments.length - 1; i >= 0; i -= 1) {
|
for (let i = oldPath.segments.length - 1; i >= 0; i -= 1) {
|
||||||
const segment = oldPath[i];
|
const segment = oldPath.segments[i];
|
||||||
if (!this._path.get(segment.type)) {
|
if (!this._path.get(segment.type)) {
|
||||||
const observable = this._observables.get(segment.type);
|
const observable = this._observables.get(segment.type);
|
||||||
if (observable) {
|
if (observable) {
|
||||||
observable.set(segment.type, undefined);
|
observable.set(undefined);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -45,7 +45,7 @@ export class Navigation {
|
||||||
const observable = this._observables.get(segment.type);
|
const observable = this._observables.get(segment.type);
|
||||||
if (observable) {
|
if (observable) {
|
||||||
if (!segmentValueEqual(segment?.value, observable.get())) {
|
if (!segmentValueEqual(segment?.value, observable.get())) {
|
||||||
observable.set(segment.type, segment.value);
|
observable.set(segment.value);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -41,7 +41,7 @@ export class URLRouter {
|
||||||
|
|
||||||
applyUrl(url) {
|
applyUrl(url) {
|
||||||
const urlPath = this._history.urlAsPath(url)
|
const urlPath = this._history.urlAsPath(url)
|
||||||
const navPath = this._navigation.pathFrom(this._parseUrlPath(urlPath));
|
const navPath = this._navigation.pathFrom(this._parseUrlPath(urlPath, this._navigation.path));
|
||||||
this._navigation.applyPath(navPath);
|
this._navigation.applyPath(navPath);
|
||||||
return this._history.pathAsUrl(this._stringifyPath(navPath));
|
return this._history.pathAsUrl(this._stringifyPath(navPath));
|
||||||
}
|
}
|
||||||
|
@ -76,12 +76,17 @@ export class URLRouter {
|
||||||
}
|
}
|
||||||
|
|
||||||
disableGridUrl() {
|
disableGridUrl() {
|
||||||
|
let path = this._navigation.path.until("session");
|
||||||
|
const room = this._navigation.path.get("room");
|
||||||
|
if (room) {
|
||||||
|
path = path.with(room);
|
||||||
|
}
|
||||||
|
return this.urlForPath(path);
|
||||||
}
|
}
|
||||||
|
|
||||||
enableGridUrl() {
|
enableGridUrl() {
|
||||||
let path = this._navigation.path.until("session");
|
let path = this._navigation.path.until("session");
|
||||||
const room = this._navigation.get("room");
|
const room = this._navigation.path.get("room");
|
||||||
if (room) {
|
if (room) {
|
||||||
path = path.with(this._navigation.segment("rooms", [room.value]));
|
path = path.with(this._navigation.segment("rooms", [room.value]));
|
||||||
path = path.with(room);
|
path = path.with(room);
|
||||||
|
|
|
@ -47,7 +47,7 @@ export class RoomGridViewModel extends ViewModel {
|
||||||
this._selectedIndex = focusTileIndex.get();
|
this._selectedIndex = focusTileIndex.get();
|
||||||
}
|
}
|
||||||
|
|
||||||
const focusedRoom = this.navigation.get("room");
|
const focusedRoom = this.navigation.observe("room");
|
||||||
this.track(focusedRoom.subscribe(roomId => {
|
this.track(focusedRoom.subscribe(roomId => {
|
||||||
if (roomId) {
|
if (roomId) {
|
||||||
this._openRoom(roomId);
|
this._openRoom(roomId);
|
||||||
|
|
|
@ -99,15 +99,20 @@ export class SessionViewModel extends ViewModel {
|
||||||
const currentRoomId = this.navigation.path.get("room");
|
const currentRoomId = this.navigation.path.get("room");
|
||||||
if (roomIds) {
|
if (roomIds) {
|
||||||
if (!this._gridViewModel) {
|
if (!this._gridViewModel) {
|
||||||
|
const vm = this._currentRoomViewModel;
|
||||||
|
const index = roomIds.indexOf(vm.id);
|
||||||
|
const shouldTransfer = vm && index !== -1;
|
||||||
|
if (shouldTransfer) {
|
||||||
|
roomIds = roomIds.slice();
|
||||||
|
roomIds[index] = undefined;
|
||||||
|
}
|
||||||
this._gridViewModel = this.track(new RoomGridViewModel(this.childOptions({
|
this._gridViewModel = this.track(new RoomGridViewModel(this.childOptions({
|
||||||
width: 3,
|
width: 3,
|
||||||
height: 2,
|
height: 2,
|
||||||
createRoomViewModel: roomId => this._createRoomViewModel(roomId),
|
createRoomViewModel: roomId => this._createRoomViewModel(roomId),
|
||||||
roomIds: roomIds
|
roomIds: roomIds
|
||||||
})));
|
})));
|
||||||
const vm = this._currentRoomViewModel;
|
if (shouldTransfer) {
|
||||||
const index = roomIds.indexOf(vm.id);
|
|
||||||
if (vm && index !== -1) {
|
|
||||||
this.untrack(vm);
|
this.untrack(vm);
|
||||||
this._gridViewModel.transferRoomViewModel(index, vm);
|
this._gridViewModel.transferRoomViewModel(index, vm);
|
||||||
this._currentRoomViewModel = null;
|
this._currentRoomViewModel = null;
|
||||||
|
@ -128,7 +133,7 @@ export class SessionViewModel extends ViewModel {
|
||||||
}
|
}
|
||||||
|
|
||||||
_createRoomViewModel(roomId) {
|
_createRoomViewModel(roomId) {
|
||||||
const room = this._session.rooms.get(roomId);
|
const room = this._sessionContainer.session.rooms.get(roomId);
|
||||||
if (!room) {
|
if (!room) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
@ -149,11 +154,6 @@ export class SessionViewModel extends ViewModel {
|
||||||
const roomVM = this._createRoomViewModel(roomId);
|
const roomVM = this._createRoomViewModel(roomId);
|
||||||
if (roomVM) {
|
if (roomVM) {
|
||||||
this._currentRoomViewModel = this.track(roomVM);
|
this._currentRoomViewModel = this.track(roomVM);
|
||||||
}
|
|
||||||
if (this._gridViewModel) {
|
|
||||||
this._gridViewModel.setRoomViewModel(roomVM);
|
|
||||||
} else {
|
|
||||||
this._currentRoomViewModel = this.disposeTracked(this._currentRoomViewModel);
|
|
||||||
this.emitChange("currentRoom");
|
this.emitChange("currentRoom");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -23,16 +23,14 @@ import {ApplyMap} from "../../../observable/map/ApplyMap.js";
|
||||||
export class LeftPanelViewModel extends ViewModel {
|
export class LeftPanelViewModel extends ViewModel {
|
||||||
constructor(options) {
|
constructor(options) {
|
||||||
super(options);
|
super(options);
|
||||||
const {rooms, openRoom, gridEnabled} = options;
|
const {rooms} = options;
|
||||||
this._gridEnabled = gridEnabled;
|
this._roomTileViewModels = rooms.mapValues((room, emitChange) => {
|
||||||
const roomTileVMs = rooms.mapValues((room, emitChange) => {
|
|
||||||
return new RoomTileViewModel(this.childOptions({
|
return new RoomTileViewModel(this.childOptions({
|
||||||
room,
|
room,
|
||||||
emitChange,
|
emitChange
|
||||||
emitOpen: openRoom
|
|
||||||
}));
|
}));
|
||||||
});
|
});
|
||||||
this._roomListFilterMap = new ApplyMap(roomTileVMs);
|
this._roomListFilterMap = new ApplyMap(this._roomTileViewModels);
|
||||||
this._roomList = this._roomListFilterMap.sortValues((a, b) => a.compare(b));
|
this._roomList = this._roomListFilterMap.sortValues((a, b) => a.compare(b));
|
||||||
this._currentTileVM = null;
|
this._currentTileVM = null;
|
||||||
this._setupNavigation();
|
this._setupNavigation();
|
||||||
|
@ -58,14 +56,14 @@ export class LeftPanelViewModel extends ViewModel {
|
||||||
this._currentTileVM?.close();
|
this._currentTileVM?.close();
|
||||||
this._currentTileVM = null;
|
this._currentTileVM = null;
|
||||||
if (roomId) {
|
if (roomId) {
|
||||||
this._currentTileVM = this._roomListFilterMap.get(roomId);
|
this._currentTileVM = this._roomTileViewModels.get(roomId);
|
||||||
this._currentTileVM?.open();
|
this._currentTileVM?.open();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
toggleGrid() {
|
toggleGrid() {
|
||||||
let url;
|
let url;
|
||||||
if (this._gridEnabled) {
|
if (this.gridEnabled) {
|
||||||
url = this.urlRouter.disableGridUrl();
|
url = this.urlRouter.disableGridUrl();
|
||||||
} else {
|
} else {
|
||||||
url = this.urlRouter.enableGridUrl();
|
url = this.urlRouter.enableGridUrl();
|
||||||
|
|
|
@ -25,9 +25,8 @@ function isSortedAsUnread(vm) {
|
||||||
export class RoomTileViewModel extends ViewModel {
|
export class RoomTileViewModel extends ViewModel {
|
||||||
constructor(options) {
|
constructor(options) {
|
||||||
super(options);
|
super(options);
|
||||||
const {room, emitOpen} = options;
|
const {room} = options;
|
||||||
this._room = room;
|
this._room = room;
|
||||||
this._emitOpen = emitOpen;
|
|
||||||
this._isOpen = false;
|
this._isOpen = false;
|
||||||
this._wasUnreadWhenOpening = false;
|
this._wasUnreadWhenOpening = false;
|
||||||
this._hidden = false;
|
this._hidden = false;
|
||||||
|
@ -57,7 +56,6 @@ export class RoomTileViewModel extends ViewModel {
|
||||||
this._isOpen = true;
|
this._isOpen = true;
|
||||||
this._wasUnreadWhenOpening = this._room.isUnread;
|
this._wasUnreadWhenOpening = this._room.isUnread;
|
||||||
this.emitChange("isOpen");
|
this.emitChange("isOpen");
|
||||||
this._emitOpen(this._room, this);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -22,8 +22,7 @@ import {SessionContainer} from "./matrix/SessionContainer.js";
|
||||||
import {StorageFactory} from "./matrix/storage/idb/StorageFactory.js";
|
import {StorageFactory} from "./matrix/storage/idb/StorageFactory.js";
|
||||||
import {SessionInfoStorage} from "./matrix/sessioninfo/localstorage/SessionInfoStorage.js";
|
import {SessionInfoStorage} from "./matrix/sessioninfo/localstorage/SessionInfoStorage.js";
|
||||||
import {RootViewModel} from "./domain/RootViewModel.js";
|
import {RootViewModel} from "./domain/RootViewModel.js";
|
||||||
import {createNavigation} from "./domain/navigation/index.js";
|
import {createNavigation, createRouter} from "./domain/navigation/index.js";
|
||||||
import {URLRouter} from "./domain/navigation/URLRouter.js";
|
|
||||||
import {RootView} from "./ui/web/RootView.js";
|
import {RootView} from "./ui/web/RootView.js";
|
||||||
import {Clock} from "./ui/web/dom/Clock.js";
|
import {Clock} from "./ui/web/dom/Clock.js";
|
||||||
import {History} from "./ui/web/dom/History.js";
|
import {History} from "./ui/web/dom/History.js";
|
||||||
|
@ -119,8 +118,9 @@ export async function main(container, paths, legacyExtras) {
|
||||||
}
|
}
|
||||||
|
|
||||||
const navigation = createNavigation();
|
const navigation = createNavigation();
|
||||||
const urlRouter = new URLRouter(new History(), navigation);
|
const urlRouter = createRouter({navigation, history: new History()});
|
||||||
urlRouter.attach();
|
urlRouter.attach();
|
||||||
|
console.log("starting with navigation path", navigation.path);
|
||||||
|
|
||||||
const vm = new RootViewModel({
|
const vm = new RootViewModel({
|
||||||
createSessionContainer: () => {
|
createSessionContainer: () => {
|
||||||
|
|
|
@ -84,4 +84,8 @@ export class MappedMap extends BaseObservableMap {
|
||||||
get size() {
|
get size() {
|
||||||
return this._mappedValues.size;
|
return this._mappedValues.size;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
get(key) {
|
||||||
|
return this._mappedValues.get(key);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -83,7 +83,6 @@ export class LeftPanelView extends TemplateView {
|
||||||
{
|
{
|
||||||
className: "RoomList",
|
className: "RoomList",
|
||||||
list: vm.roomList,
|
list: vm.roomList,
|
||||||
onItemClick: (roomTile, event) => roomTile.clicked(event)
|
|
||||||
},
|
},
|
||||||
roomTileVM => new RoomTileView(roomTileVM)
|
roomTileVM => new RoomTileView(roomTileVM)
|
||||||
))
|
))
|
||||||
|
|
Loading…
Reference in a new issue