Skip to content

Instantly share code, notes, and snippets.

@charlespockert

charlespockert/app.html

Last active June 1, 2016 22:57
Show Gist options
  • Save charlespockert/7fa153eaa9552115a7dcf271c40b83e4 to your computer and use it in GitHub Desktop.
Save charlespockert/7fa153eaa9552115a7dcf271c40b83e4 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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>
Raw
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;
}
}
Raw
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>
Raw
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());
}
Raw
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>
Raw
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>
Raw
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;
});
}
}
Raw
tab.html
<template>
<div class="${ visible ? '' : 'hidden' }" style="padding:10px;border:1px solid gainsboro;border-top:0">
<content>
</content>
</div>
</template>
Raw
tab.js
import {bindable} from 'aurelia-framework';
export class Tab {
@bindable heading = "Tab";
visible = false;
}
Raw
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>
Raw
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>
Raw
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();
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment