<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/main.css"> <link rel="stylesheet" type="text/css" href="css/themes/element/theme.css"> </head> <body class="not-ie11"> <script type="text/javascript"> function vm(o) { // fake EventEmitter o.on = () => {}; o.off = () => {}; o.i18n = (parts, ...expr) => { let result = ""; for (let i = 0; i < parts.length; ++i) { result = result + parts[i]; if (i < expr.length) { result = result + expr[i]; } } return result; }; return o; } </script> <h1>View Gallery</h1> <h2 name="session-status">Session Status Bar</h2> <div id="session-status" class="hydrogen"></div> <script id="main" type="module"> import {SessionStatusView} from "./session/SessionStatusView.js"; const view = new SessionStatusView(vm({ isShown: true, statusLabel: "Doing something something", isWaiting: true, isConnectNowShown: true, connectNow: () => alert("connecting now") })); document.getElementById("session-status").appendChild(view.mount()); </script> <h2 name="login">Login</h2> <div id="login" class="hydrogen"></div> <script id="main" type="module"> import {LoginView} from "./login/LoginView.js"; const view = new LoginView(vm({ defaultHomeserver: "https://hs.tld", login: () => alert("Logging in!"), cancelUrl: "#/session" })); document.getElementById("login").appendChild(view.mount()); </script> <h2 name="login-loading">Login Loading</h2> <div id="login-loading" class="hydrogen"></div> <script id="main" type="module"> import {LoginView} from "./login/LoginView.js"; const view = new LoginView(vm({ isBusy: true, loadViewModel: vm({ loadLabel: "Doing something important...", loading: true, }), cancelUrl: "#/session", defaultHomeserver: "https://hs.tld", })); document.getElementById("login-loading").appendChild(view.mount()); </script> <h2 name="session-loading">Session Loading</h2> <div id="session-loading" class="hydrogen"></div> <script id="main" type="module"> import {SessionLoadView} from "./login/SessionLoadView.js"; const view = new SessionLoadView(vm({ loading: true, loadLabel: "Getting on with loading your session..." })); document.getElementById("session-loading").appendChild(view.mount()); </script> <h2 name="invite-dm-view">Invite DM view</h2> <div id="invite-dm-view" style="height: 600px" class="hydrogen"></div> <script id="main" type="module"> import {InviteView} from "./session/room/InviteView.js"; const view = new InviteView(vm({ busy: false, name: "Alice", avatarTitle: "Alice", avatarColorNumber: 5, avatarLetter: "A", error: "", inviter: { id: "@alice:hs.tld", displayName: "Alice", name: "Alice", avatarTitle: "Alice", avatarColorNumber: 5, avatarLetter: "A", }, isDirectMessage: true, showDMProfile: true, })); document.getElementById("invite-dm-view").appendChild(view.mount()); </script> <h2 name="invite-room-view">Invite Room view</h2> <div id="invite-room-view" style="height: 600px" class="hydrogen"></div> <script id="main" type="module"> import {InviteView} from "./session/room/InviteView.js"; const view = new InviteView(vm({ busy: false, name: "Some Room", avatarTitle: "Some Room", avatarColorNumber: 2, avatarLetter: "S", error: "", inviter: { id: "@alice:hs.tld", displayName: "Alice", name: "Alice", avatarTitle: "Alice", avatarColorNumber: 5, avatarLetter: "A", }, roomDescription: "#some-room:hs.tld - public room", isDirectMessage: false, showDMProfile: false, })); document.getElementById("invite-room-view").appendChild(view.mount()); </script> </body> </html>