First alpha

src/components/Routing.tsx

@@ -0,0 +1,56 @@
+import { h, Component } from 'preact';
+import Navigation from '../navigation';
+import "./routing.scss"
+
+
+export class Router extends Component<{}, { next?: JSX.Element, current: JSX.Element }> {
+   mounted: HTMLDivElement = undefined;
+   constructor(props) {
+      super(props);
+      this.onChange = this.onChange.bind(this);
+      this.state = { current: Navigation.page.page, next: undefined }
+   }
+
+   componentWillMount() {
+      Navigation.pageObservable.subscribe(this.onChange, true)
+   }
+
+   componentWillUnmount() {
+      Navigation.pageObservable.unsubscribe(this.onChange)
+   }
+   to = -1;
+   onChange([page]: JSX.Element[]) {
+      this.setState({ next: page, current: this.state.next || this.state.current });
+      if (this.to >= 0) {
+         clearTimeout(this.to)
+         this.to = -1;
+      }
+   }
+
+   render() {
+      let overlay;
+      if (this.state.next) {
+         overlay = <div class="transition_container transition_slidein" key={this.state.next.key} ref={(elm: HTMLDivElement) => {
+            let lst = () => {
+               if (this.state.next)
+                  this.setState({ current: this.state.next, next: undefined }, () => {
+                     if (this.mounted)
+                        this.mounted.scrollTo({ top: 0 })
+                  });
+               if (elm)
+                  elm.removeEventListener("animationend", lst)
+            }
+            if (elm)
+               elm.addEventListener("animationend", lst)
+         }}>
+            {this.state.next}
+         </div>
+      }
+      return <div style="overflow:hidden">
+         <div class="transition_container" ref={elm => this.mounted = elm}>
+            {this.state.current}
+         </div>
+         {overlay}
+      </div>
+   }
+}