charlespockert/app.html

## app.html
<template>
  <require from="nav-bar.html"></require>
  <require from="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></require>

  <nav-bar router.bind="router"></nav-bar>

  <div class="page-host" style="margin-top:50px">
    <router-view></router-view>
  </div>
</template>

## app.js
export class App {
  configureRouter(config, router) {
    config.title = 'Aurelia';
    config.map([
      { route: ['', 'welcome'], name: 'welcome',      moduleId: 'welcome',      nav: true, title: 'Welcome' }
    ]);

    this.router = router;
  }
}

## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></link>
    <link rel="stylesheet" href="styles.css"></link>
  </head>
  <body aurelia-app="main">
    <h1>Loading...</h1>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.6/system.js"></script>
    <script src="https://rawgit.com/aurelia-ui-toolkits/aurelia-kendoui-bundles/0.3.15/config2.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
</html>

## main.js
//import 'bootstrap';

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging();

  aurelia.use.globalResources('tab-set', 'tab');
  aurelia.use.plugin('aurelia-animator-css');

  aurelia.start().then(() => aurelia.setRoot());
}

## nav-bar.html
<template bindable="router">
  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#skeleton-navigation-navbar-collapse">
        <span class="sr-only">Toggle Navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">
        <i class="fa fa-home"></i>
        <span>${router.title}</span>
      </a>
    </div>

    <div class="collapse navbar-collapse" id="skeleton-navigation-navbar-collapse">
      <ul class="nav navbar-nav">
        <li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
          <a data-toggle="collapse" data-target="#skeleton-navigation-navbar-collapse.in" href.bind="row.href">${row.title}</a>
        </li>
      </ul>

      <ul class="nav navbar-nav navbar-right">
        <li class="loader" if.bind="router.isNavigating">
          <i class="fa fa-spinner fa-spin fa-2x"></i>
        </li>
      </ul>
    </div>
  </nav>
</template>

## tab-set.html
<template>
    <ul class="nav nav-tabs">
        <li role="presentation" click.delegate="selectTab(tab)" repeat.for="tab of tabs" class="${ selectedTab === tab ? 'active' : '' }"><a href="#">${ tab.heading }</a></li>
    </ul>
        <content></content>
</template>

## tab-set.js
import {children, bindable} from 'aurelia-framework';

@children({ name: "tabs", selector: "tab" })
export class TabSet {
    tabs = [];
    @bindable selectedTab;
    @bindable selectedIndex = 0;
    @bindable tabChanged;

    selectedTabChanged() {
        this.onTabChanged();
    }

    tabsChanged() {
        if (this.tabs.length > 0) {
            if (this.selectedIndex >= this.tabs.length)
                this.selectedTab = this.tabs[0];
            else
                this.selectedTab = this.tabs[this.selectedIndex];
        }
        else
            this.selectedTab = null;

        this.updateVisibility();
    }

    onTabChanged() {
        if (this.tabChanged)
            this.tabChanged(this.selectedTab);
    }

    selectTab(tab: any) {
        this.selectedTab = tab;

        // Find tab index
        var i = 0;
        this.tabs.forEach(t => { if (t === this.selectedTab) this.selectedIndex = i; i++ })

        this.updateVisibility();
    }

    updateVisibility() {
        this.tabs.forEach(tab => {
            tab.visible = tab === this.selectedTab;
        });
    }
}

## tab.html
<template>
    <div class="${ visible ? '' : 'hidden' }" style="padding:10px;border:1px solid gainsboro;border-top:0">
        <content>
        </content>
    </div>
</template>

## tab.js
import {bindable} from 'aurelia-framework';

export class Tab {
    @bindable heading = "Tab";
    visible = false;
}

## usage.html
<template>
  <!-- Some view model... -->
  <tab-set>
    <tab heading="Tab 1">
      <p>Hello world!</p>
    </tab>
    <tab heading="Tab 2">
      <p>Hello another world!</p>
    </tab>
  </tab-set>
</template>

## welcome.html
<template>
  <!-- Some view model... -->
  <p>This is where the tabs go...</p>
  <tab-set>
    <tab heading="Tab 1">
      There's some nested tabs inside me ... get them out arrghghhghhg!
      <tab-set>
        <tab heading="Nested Tab 1">Hi I'm nested</tab>
        <tab heading="Nested Tab 2">Hi I'm nested too</tab>
      </tab-set>
    </tab>
    <tab heading="Tab 2">
      <p>Hello another world!</p>
    </tab>
  </tab-set>
</template>

## welcome.js
//import {computedFrom} from 'aurelia-framework';
import {activationStrategy} from 'aurelia-router';

export class Welcome {
  heading = 'Welcome to the Aurelia Navigation App!';
  firstName = 'John';
  lastName = 'Doe';
  previousValue = this.fullName;

  //Getters can't be directly observed, so they must be dirty checked.
  //However, if you tell Aurelia the dependencies, it no longer needs to dirty check the property.
  //To optimize by declaring the properties that this getter is computed from, uncomment the line below
  //as well as the corresponding import above.
  //@computedFrom('firstName', 'lastName')
  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }

  submit() {
    this.previousValue = this.fullName;
    alert(`Welcome, ${this.fullName}!`);
  }

  canDeactivate() {
    if (this.fullName !== this.previousValue) {
      return confirm('Are you sure you want to leave?');
    }
  }

  determineActivationStrategy() {
    return activationStrategy.replace;
  }
}

export class UpperValueConverter {
  toView(value) {
    return value && value.toUpperCase();
  }
}
	<template>
	<require from="nav-bar.html"></require>
	<require from="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></require>

	<nav-bar router.bind="router"></nav-bar>

	<div class="page-host" style="margin-top:50px">
	<router-view></router-view>
	</div>
	</template>
	export class App {
	configureRouter(config, router) {
	config.title = 'Aurelia';
	config.map([
	{ route: ['', 'welcome'], name: 'welcome', moduleId: 'welcome', nav: true, title: 'Welcome' }
	]);

	this.router = router;
	}
	}
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></link>
	<link rel="stylesheet" href="styles.css"></link>
	</head>
	<body aurelia-app="main">
	<h1>Loading...</h1>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.6/system.js"></script>
	<script src="https://rawgit.com/aurelia-ui-toolkits/aurelia-kendoui-bundles/0.3.15/config2.js"></script>
	<script>
	System.import('aurelia-bootstrapper');
	</script>
	</body>
	</html>
	//import 'bootstrap';

	export function configure(aurelia) {
	aurelia.use
	.standardConfiguration()
	.developmentLogging();

	aurelia.use.globalResources('tab-set', 'tab');
	aurelia.use.plugin('aurelia-animator-css');

	aurelia.start().then(() => aurelia.setRoot());
	}
	<template>
	<ul class="nav nav-tabs">
	<li role="presentation" click.delegate="selectTab(tab)" repeat.for="tab of tabs" class="${ selectedTab === tab ? 'active' : '' }"><a href="#">${ tab.heading }</a></li>
	</ul>
	<content></content>
	</template>
	import {children, bindable} from 'aurelia-framework';

	@children({ name: "tabs", selector: "tab" })
	export class TabSet {
	tabs = [];
	@bindable selectedTab;
	@bindable selectedIndex = 0;
	@bindable tabChanged;

	selectedTabChanged() {
	this.onTabChanged();
	}

	tabsChanged() {
	if (this.tabs.length > 0) {
	if (this.selectedIndex >= this.tabs.length)
	this.selectedTab = this.tabs[0];
	else
	this.selectedTab = this.tabs[this.selectedIndex];
	}
	else
	this.selectedTab = null;

	this.updateVisibility();
	}

	onTabChanged() {
	if (this.tabChanged)
	this.tabChanged(this.selectedTab);
	}

	selectTab(tab: any) {
	this.selectedTab = tab;

	// Find tab index
	var i = 0;
	this.tabs.forEach(t => { if (t === this.selectedTab) this.selectedIndex = i; i++ })

	this.updateVisibility();
	}

	updateVisibility() {
	this.tabs.forEach(tab => {
	tab.visible = tab === this.selectedTab;
	});
	}
	}
	<template>
	<div class="${ visible ? '' : 'hidden' }" style="padding:10px;border:1px solid gainsboro;border-top:0">
	<content>
	</content>
	</div>
	</template>
	import {bindable} from 'aurelia-framework';

	export class Tab {
	@bindable heading = "Tab";
	visible = false;
	}
	<template>
	<!-- Some view model... -->
	<tab-set>
	<tab heading="Tab 1">
	<p>Hello world!</p>
	</tab>
	<tab heading="Tab 2">
	<p>Hello another world!</p>
	</tab>
	</tab-set>
	</template>
	<template>
	<!-- Some view model... -->
	<p>This is where the tabs go...</p>
	<tab-set>
	<tab heading="Tab 1">
	There's some nested tabs inside me ... get them out arrghghhghhg!
	<tab-set>
	<tab heading="Nested Tab 1">Hi I'm nested</tab>
	<tab heading="Nested Tab 2">Hi I'm nested too</tab>
	</tab-set>
	</tab>
	<tab heading="Tab 2">
	<p>Hello another world!</p>
	</tab>
	</tab-set>
	</template>