gpetrioli/app.html

## app.html
<template>
  <router-view></router-view>
</template>

## app.js
import {activationStrategy} from 'aurelia-router';

export class App {
     configureRouter(config, router){
      config.map([
            {route:'', name:'language-selection', moduleId:'language-selection'},
            {route:':locale', name:'locale-home', moduleId: 'child'}
        ]);
        config.mapUnknownRoutes({redirect:''});

        this.router = router;
    }
}


## category.html
<template>
  <div>${message}</div>
  <a route-href="route:category-item-details; params.bind: {poi:'cat-1'}">open category poi</a>
  <div if.bind="message=='CATEGORY POI'">
    <div>Seeing POI: ${poi}</div>
    <a route-href="route: category">back to category</a>
  </div>
</template>

## category.js
export class Category{
    activate(params){
      if (params.poi){
       this.poi = params.poi;
        this.message = "CATEGORY POI";
      } else {
        this.message = "CATEGORY";
      }
    }
}

## child.html
<template>
  <router-view></router-view>
</template>

## child.js
import {activationStrategy} from 'aurelia-router';

export class Child {
     configureRouter(config, router){
        config.map([
            {route:'', redirect:'map'},
            {route:'map', name:'map', moduleId: 'map',  activationStrategy: activationStrategy.invokeLifecycle},
            {route:'map/:poi', name:'map-item-details', moduleId: 'map' },
            {route:'category', name:'category', moduleId: 'category',  activationStrategy: activationStrategy.invokeLifecycle},
            {route:'category/:poi', name:'category-item-details', moduleId: 'category' }
        ]);
        config.mapUnknownRoutes({redirect:''});

        this.router = router;
    }
}


## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="styles.css" rel="stylesheet">
  </head>
  <body aurelia-app="main">
    <h1>Loading...</h1>

    <script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script>
    <script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/config.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
</html>

## language-selection.html
<template>
  <ul>
    <li repeat.for="language of locales">
        <a route-href="route: locale-home; params.bind: {locale: language}">${language}</a>
    </li>
  </ul>
</template>

## language-selection.js
export class languageSelection{
    locales = ['greek','english'];
}

## main.js
export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .plugin('aurelia-animator-css', animator=>{
      animator.useAnimationDoneClasses = true;
  });
  aurelia.start().then(() => aurelia.setRoot());
}

## map.html
<template>
  <div>${message}</div>
  <a route-href="route:map-item-details; params.bind: {poi:'μαπ-1'}">open poi</a>
  <a route-href="route:category">go category</a>
  <div class="overlay au-animate" if.bind="message=='MAP POI'"></div>
  <div if.bind="message=='MAP POI'" class="poi au-animate">
    <div>Seeing POI: ${poi}</div>
    <a route-href="route: map">back to map</a>
  </div>
</template>

## map.js
export class Map{
    activate(params){
      if (params.poi){
        this.poi = params.poi;
        this.message = "MAP POI";
      } else {
        this.message = "MAP";
      }
    }
}

## styles.css
.overlay{
  position:fixed;
  top:0;  left:0;
  right:0;  bottom:0;
  background:rgba(0,128,128,0.8);
  z-index:50;
}
.poi{
  padding:1em 2em;
  position:fixed;
  right:1em;
  top:1em;
  background-color:rgba(0,0,0,0.6);
  border:3px double white;
  box-shadow:0 0 6px #000;
  border-radius:2px;
  z-index:100;
  color:teal;
}
.poi a{color:white;}
.poi.au-left{transform:translateX(100%);}
.poi.au-enter-active{animation:slide-in 400ms linear forwards;}
.poi.au-leave-active{animation:slide-in 400ms linear reverse;}

.overlay.au-left{background-color:rgba(0,0,0,0)}
.overlay.au-enter-active{animation:fade-in 200ms linear forwards;}
.overlay.au-leave-active{animation:fade-in 200ms linear reverse;}

@keyframes slide-in{
    from{
        transform:translateX(100%);
    }
    to{
        transform:translateX(0);
    }
}
@keyframes fade-in{
    from{
        background-color:rgba(0,0,0,0);
    }
    to{
        background-color:rgba(0,0,0,0.3);
    }
}
	import {activationStrategy} from 'aurelia-router';

	export class App {
	configureRouter(config, router){
	config.map([
	{route:'', name:'language-selection', moduleId:'language-selection'},
	{route:':locale', name:'locale-home', moduleId: 'child'}
	]);
	config.mapUnknownRoutes({redirect:''});

	this.router = router;
	}
	}
	<template>
	<div>${message}</div>
	<a route-href="route:category-item-details; params.bind: {poi:'cat-1'}">open category poi</a>
	<div if.bind="message=='CATEGORY POI'">
	<div>Seeing POI: ${poi}</div>
	<a route-href="route: category">back to category</a>
	</div>
	</template>
	export class Category{
	activate(params){
	if (params.poi){
	this.poi = params.poi;
	this.message = "CATEGORY POI";
	} else {
	this.message = "CATEGORY";
	}
	}
	}
	import {activationStrategy} from 'aurelia-router';

	export class Child {
	configureRouter(config, router){
	config.map([
	{route:'', redirect:'map'},
	{route:'map', name:'map', moduleId: 'map', activationStrategy: activationStrategy.invokeLifecycle},
	{route:'map/:poi', name:'map-item-details', moduleId: 'map' },
	{route:'category', name:'category', moduleId: 'category', activationStrategy: activationStrategy.invokeLifecycle},
	{route:'category/:poi', name:'category-item-details', moduleId: 'category' }
	]);
	config.mapUnknownRoutes({redirect:''});

	this.router = router;
	}
	}
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="styles.css" rel="stylesheet">
	</head>
	<body aurelia-app="main">
	<h1>Loading...</h1>

	<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script>
	<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/config.js"></script>
	<script>
	System.import('aurelia-bootstrapper');
	</script>
	</body>
	</html>
	<template>
	<ul>
	<li repeat.for="language of locales">
	<a route-href="route: locale-home; params.bind: {locale: language}">${language}</a>
	</li>
	</ul>
	</template>
	export class languageSelection{
	locales = ['greek','english'];
	}
	export function configure(aurelia) {
	aurelia.use
	.standardConfiguration()
	.plugin('aurelia-animator-css', animator=>{
	animator.useAnimationDoneClasses = true;
	});
	aurelia.start().then(() => aurelia.setRoot());
	}
	<template>
	<div>${message}</div>
	<a route-href="route:map-item-details; params.bind: {poi:'μαπ-1'}">open poi</a>
	<a route-href="route:category">go category</a>
	<div class="overlay au-animate" if.bind="message=='MAP POI'"></div>
	<div if.bind="message=='MAP POI'" class="poi au-animate">
	<div>Seeing POI: ${poi}</div>
	<a route-href="route: map">back to map</a>
	</div>
	</template>
	export class Map{
	activate(params){
	if (params.poi){
	this.poi = params.poi;
	this.message = "MAP POI";
	} else {
	this.message = "MAP";
	}
	}
	}