Last active
September 24, 2018 15:25
-
-
Save ara4n/d28e9e3f07d99ce9fdd19115df40ef33 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <style type="text/css"> | |
| #timeline ol { | |
| list-style: none; | |
| } | |
| .sender { | |
| float: left; | |
| width: 200px; | |
| padding-right: 10px; | |
| text-align: right; | |
| } | |
| </style> | |
| <script type="text/javascript"> | |
| class Timeline extends React.Component { | |
| render() { | |
| return ( | |
| <ol> | |
| { this.props.events.map((ev)=>{ | |
| <li> | |
| <div className="sender">{ ev.sender }</div> | |
| <div className="body">{ ev.formatted_body || ev.body }</div> | |
| </li> | |
| }) } | |
| </ol> | |
| ); | |
| } | |
| } | |
| let events = []; | |
| function setEvents(args) { | |
| events = args.append ? events.concat(args.events) : args.events; | |
| ReactDOM.render(<Timeline events={ events }/>, document.getElementById('timeline')); | |
| } | |
| </script> | |
| <script type="text/javascript"> | |
| // Fake client pretending to be Swift | |
| setEvents({ | |
| events: [ | |
| { sender: "@matthew:matrix.org", contents: { body: "Hello world!" } }, | |
| { sender: "@matthew:matrix.org", contents: { formatted_body: "I am a <b>fish</b>" } }, | |
| ], | |
| }); | |
| setTimeout(()=>{ | |
| setEvents({ | |
| events: [ | |
| { sender: "@neil:sandbox.modular.im", contents: { body: "Mr Flibble is very cross!" } }, | |
| ], | |
| append: true, | |
| }); | |
| }, 1000); | |
| </script> | |
| <body> | |
| <div id="timeline"></div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment