import 'dart:async' show Stream, StreamController; import 'dart:html' show AnchorElement, window; import 'angel_route.dart'; final RegExp _hash = new RegExp(r'^#/'); /// A variation of the [Router] support both hash routing and push state. abstract class BrowserRouter extends Router { /// Fires whenever the active route changes. Fires `null` if none is selected (404). Stream get onResolve; /// Fires whenever the active route changes. Fires `null` if none is selected (404). Stream get onRoute; /// Set `hash` to true to use hash routing instead of push state. /// `listen` as `true` will call `listen` after initialization. factory BrowserRouter({bool hash: false, bool listen: true}) { return hash ? new _HashRouter(listen: listen) : new _PushStateRouter(listen: listen); } BrowserRouter._() : super(); void _goTo(String path); /// Navigates to the path generated by calling /// [navigate] with the given [linkParams]. /// /// This always navigates to an absolute path. void go(List linkParams); /// Begins listen for location changes. void listen(); /// Identical to [all]. Route on(Pattern path, handler, {List middleware}) => all(path, handler, middleware: middleware); } class _BrowserRouterImpl extends Router implements BrowserRouter { Route _current; StreamController _onResolve = new StreamController(); StreamController _onRoute = new StreamController(); Route get currentRoute => _current; @override Stream get onResolve => _onResolve.stream; @override Stream get onRoute => _onRoute.stream; _BrowserRouterImpl({bool listen}) : super() { if (listen != false) this.listen(); prepareAnchors(); } @override void go(Iterable linkParams) => _goTo(navigate(linkParams)); void prepareAnchors() { final anchors = window.document.querySelectorAll('a:not([dynamic])'); for (final AnchorElement $a in anchors) { if ($a.attributes.containsKey('href') && !$a.attributes.containsKey('download') && !$a.attributes.containsKey('target') && $a.attributes['rel'] != 'external') { $a.onClick.listen((e) { e.preventDefault(); go($a.attributes['href'].split('/').where((str) => str.isNotEmpty)); }); } $a.attributes['dynamic'] = 'true'; } } } class _HashRouter extends _BrowserRouterImpl { _HashRouter({bool listen}) : super(listen: listen) { if (listen) this.listen(); } @override void _goTo(String uri) { window.location.hash = '#$uri'; } @override void listen() { void handleHash([_]) { final path = window.location.hash.replaceAll(_hash, ''); final resolved = resolveAbsolute(path); if (resolved == null) { _onResolve.add(null); _onRoute.add(_current = null); } else if (resolved != null && resolved.route != _current) { _onResolve.add(resolved); _onRoute.add(_current = resolved.route); } } window.onHashChange.listen(handleHash); handleHash(); } } class _PushStateRouter extends _BrowserRouterImpl { _PushStateRouter({bool listen, Route root}) : super(listen: listen) { if (listen) this.listen(); } @override void _goTo(String uri) { final resolved = resolveAbsolute(uri); if (resolved == null) { _onResolve.add(null); _onRoute.add(_current = null); } else { final route = resolved.route; window.history.pushState( {'path': route.path, 'params': {}, 'properties': properties}, route.name ?? route.path, uri); _onResolve.add(resolved); _onRoute.add(_current = route); } } @override void listen() { void handleState(state) { if (state is Map && state.containsKey('path')) { final resolved = resolveAbsolute(state['path']); if (resolved != null && resolved.route != _current) { properties.addAll(state['properties'] ?? {}); _onResolve.add(resolved); _onRoute.add(_current = resolved.route ..state.properties.addAll(state['params'] ?? {})); } } else { _onResolve.add(null); _onRoute.add(_current = null); } } window.onPopState.listen((e) { handleState(e.state); }); handleState(window.history.state); } }