Add custom RightPanel support
This commit is contained in:
parent
c0a2a65c2f
commit
82ba92b806
|
@ -11,6 +11,7 @@
|
||||||
"express": "^4.17.2",
|
"express": "^4.17.2",
|
||||||
"hydrogen-view-sdk": "^0.0.4",
|
"hydrogen-view-sdk": "^0.0.4",
|
||||||
"linkedom": "^0.13.2",
|
"linkedom": "^0.13.2",
|
||||||
|
"matrix-public-archive-shared": "file:./shared/",
|
||||||
"node-fetch": "^2.6.7"
|
"node-fetch": "^2.6.7"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
@ -1271,6 +1272,10 @@
|
||||||
"integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
|
"integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"node_modules/matrix-public-archive-shared": {
|
||||||
|
"resolved": "shared",
|
||||||
|
"link": true
|
||||||
|
},
|
||||||
"node_modules/media-typer": {
|
"node_modules/media-typer": {
|
||||||
"version": "0.3.0",
|
"version": "0.3.0",
|
||||||
"resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
|
"resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
|
||||||
|
@ -1908,7 +1913,8 @@
|
||||||
"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
|
||||||
"integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
|
"integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
|
||||||
"dev": true
|
"dev": true
|
||||||
}
|
},
|
||||||
|
"shared": {}
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@eslint/eslintrc": {
|
"@eslint/eslintrc": {
|
||||||
|
@ -2855,6 +2861,9 @@
|
||||||
"integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
|
"integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"matrix-public-archive-shared": {
|
||||||
|
"version": "file:shared"
|
||||||
|
},
|
||||||
"media-typer": {
|
"media-typer": {
|
||||||
"version": "0.3.0",
|
"version": "0.3.0",
|
||||||
"resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
|
"resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
|
||||||
|
|
|
@ -13,6 +13,7 @@
|
||||||
"express": "^4.17.2",
|
"express": "^4.17.2",
|
||||||
"hydrogen-view-sdk": "^0.0.4",
|
"hydrogen-view-sdk": "^0.0.4",
|
||||||
"linkedom": "^0.13.2",
|
"linkedom": "^0.13.2",
|
||||||
"node-fetch": "^2.6.7"
|
"node-fetch": "^2.6.7",
|
||||||
|
"matrix-public-archive-shared": "file:./shared/"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,8 +1,16 @@
|
||||||
.room-layout {
|
/* Based on .SessionView from Hydrogen */
|
||||||
display: flex;
|
.ArchiveView {
|
||||||
}
|
/* this takes into account whether or not the url bar is hidden on mobile
|
||||||
|
(have tested Firefox Android and Safari on iOS),
|
||||||
.right-panel {
|
see https://developers.google.com/web/updates/2016/12/url-bar-resizing */
|
||||||
width: 20%;
|
position: fixed;
|
||||||
background-color: #f2f5f8;
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: grid;
|
||||||
|
grid-template:
|
||||||
|
'status status' auto
|
||||||
|
'middle right' 1fr /
|
||||||
|
1fr 300px;
|
||||||
|
min-height: 0;
|
||||||
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
|
@ -21,8 +21,6 @@ async function fetchRoomData(roomId) {
|
||||||
fetchEndpoint(stateAvatarEndpoint),
|
fetchEndpoint(stateAvatarEndpoint),
|
||||||
]);
|
]);
|
||||||
|
|
||||||
console.log('stateAvatarResDataOutcome', stateAvatarResDataOutcome);
|
|
||||||
|
|
||||||
let name;
|
let name;
|
||||||
if (stateNameResDataOutcome.reason === undefined) {
|
if (stateNameResDataOutcome.reason === undefined) {
|
||||||
name = stateNameResDataOutcome.value.name;
|
name = stateNameResDataOutcome.value.name;
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
const assert = require('assert');
|
const assert = require('assert');
|
||||||
|
const path = require('path');
|
||||||
const express = require('express');
|
const express = require('express');
|
||||||
const asyncHandler = require('./lib/express-async-handler');
|
const asyncHandler = require('./lib/express-async-handler');
|
||||||
const urlJoin = require('./lib/url-join');
|
const urlJoin = require('./lib/url-join');
|
||||||
|
@ -18,6 +19,11 @@ app.get('/hydrogen-styles.css', async function (req, res) {
|
||||||
res.sendFile(require.resolve('hydrogen-view-sdk/style.css'));
|
res.sendFile(require.resolve('hydrogen-view-sdk/style.css'));
|
||||||
});
|
});
|
||||||
|
|
||||||
|
app.get('/styles.css', async function (req, res) {
|
||||||
|
res.set('Content-Type', 'text/css');
|
||||||
|
res.sendFile(path.join(__dirname, '../public/styles/styles.css'));
|
||||||
|
});
|
||||||
|
|
||||||
app.get(
|
app.get(
|
||||||
'/:roomIdOrAlias/event/:eventId',
|
'/:roomIdOrAlias/event/:eventId',
|
||||||
asyncHandler(async function (req, res) {
|
asyncHandler(async function (req, res) {
|
||||||
|
@ -97,13 +103,7 @@ app.get(
|
||||||
<link href="${stylesUrl}" rel="stylesheet">
|
<link href="${stylesUrl}" rel="stylesheet">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="room-layout">
|
${hydrogenHtmlOutput}
|
||||||
${hydrogenHtmlOutput}
|
|
||||||
|
|
||||||
<aside class="right-panel">
|
|
||||||
|
|
||||||
</aside>
|
|
||||||
</div>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
`;
|
`;
|
||||||
|
|
|
@ -1,17 +1,16 @@
|
||||||
const {
|
const { TemplateView, RoomView, RightPanelView } = require('hydrogen-view-sdk');
|
||||||
TemplateView,
|
|
||||||
RoomView,
|
|
||||||
RightPanelView
|
|
||||||
} = require('hydrogen-view-sdk');
|
|
||||||
|
|
||||||
export class ArchiveView extends TemplateView {
|
class ArchiveView extends TemplateView {
|
||||||
render(t, vm) {
|
render(t, vm) {
|
||||||
return t.div({
|
return t.div(
|
||||||
|
{
|
||||||
className: {
|
className: {
|
||||||
"ArchiveView": true,
|
ArchiveView: true,
|
||||||
},
|
},
|
||||||
}, [
|
},
|
||||||
|
[t.view(new RoomView(vm.roomViewModel)), t.view(new RightPanelView(vm.rightPanelModel))]
|
||||||
]
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
module.exports = ArchiveView;
|
||||||
|
|
|
@ -0,0 +1,16 @@
|
||||||
|
const { TemplateView } = require('hydrogen-view-sdk');
|
||||||
|
|
||||||
|
class RightPanelContentView extends TemplateView {
|
||||||
|
render(t, vm) {
|
||||||
|
return t.div(
|
||||||
|
{
|
||||||
|
className: {
|
||||||
|
todo: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
[t.div('test')]
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = RightPanelContentView;
|
|
@ -15,6 +15,9 @@ const {
|
||||||
RoomViewModel,
|
RoomViewModel,
|
||||||
} = require('hydrogen-view-sdk');
|
} = require('hydrogen-view-sdk');
|
||||||
|
|
||||||
|
const ArchiveView = require('matrix-public-archive-shared/ArchiveView');
|
||||||
|
const RightPanelContentView = require('matrix-public-archive-shared/RightPanelContentView');
|
||||||
|
|
||||||
const roomData = global.INPUT_ROOM_DATA;
|
const roomData = global.INPUT_ROOM_DATA;
|
||||||
assert(roomData);
|
assert(roomData);
|
||||||
const events = global.INPUT_EVENTS;
|
const events = global.INPUT_EVENTS;
|
||||||
|
@ -176,7 +179,17 @@ async function mountHydrogen() {
|
||||||
kind: 'none',
|
kind: 'none',
|
||||||
};
|
};
|
||||||
|
|
||||||
const view = new RoomView(roomViewModel);
|
const archiveViewModel = {
|
||||||
|
roomViewModel,
|
||||||
|
rightPanelModel: {
|
||||||
|
activeViewModel: {
|
||||||
|
type: 'custom',
|
||||||
|
customView: RightPanelContentView,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const view = new ArchiveView(archiveViewModel);
|
||||||
|
|
||||||
//console.log('view.mount()', view.mount());
|
//console.log('view.mount()', view.mount());
|
||||||
app.appendChild(view.mount());
|
app.appendChild(view.mount());
|
||||||
|
|
Loading…
Reference in New Issue