Last active
May 6, 2016 06:30
-
-
Save paulharker/32091dc3e182db6836f6850d85290fce to your computer and use it in GitHub Desktop.
Dynamic Routes With Collection Menus
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<require from="nav-bar.html"></require> | |
<require from="styles.css"></require> | |
<require from="panels.css"></require> | |
<nav-bar router.bind="router"></nav-bar> | |
<div class="page-host"> | |
<router-view></router-view> | |
</div> | |
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import {Router, RouterConfiguration} from 'aurelia-router'; | |
import {Configuration} from 'configuration'; | |
import {inject} from 'aurelia-framework'; | |
@inject(Configuration) | |
export class App { | |
configuration: Configuration; | |
router: Router; | |
configureRouter(config: RouterConfiguration, router: Router) { | |
config.title = 'My App'; | |
config.map([ | |
{ route: ['', 'dashboard'], name: 'dashboard', moduleId: './dashboard', nav: true, title: 'Dashboard' }, | |
{ route: 'users', name: 'users', moduleId: 'users', nav: true, title: 'Users' } | |
]); | |
this.router = router; | |
} | |
constructor(config) { | |
this.configuration = config; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export class Configuration { | |
title: string; | |
newMenuItems = new Array(); | |
actionItems = new Array(); | |
bladeItems = {}; | |
get hasActionItems(): boolean { | |
return (this.actionItems.length > 0 || false); | |
} | |
constructor(){ | |
this.title = 'Configuration System'; | |
this.newMenuItems = [ | |
{ | |
title: "Dashboard", | |
href: "#/dashboard" | |
}, | |
{ | |
title: "New Customer", | |
href: "#/customer" | |
}, | |
{ | |
title: "ROM Setup", | |
href: "#/setup" | |
} | |
]; | |
this.bladeItems = { | |
background: "#e0e0e0", | |
color: "#808080", | |
title: "Setup", | |
items: [ | |
{ | |
title: "Favorites", | |
panel: "favorites" | |
}, | |
{ | |
title: "Profile", | |
image: "profile.jpg", | |
panel: "profile" | |
}, | |
{ | |
title: "Transactions", | |
// panel: "txDashboard", | |
panel: "child-blade", | |
subMenu : { | |
background : "#909090", | |
color: "#ffffff", | |
title: "Transactions", | |
items: [ | |
{ | |
title: "Public Receiving", | |
panel: "public-receiver" | |
}, | |
{ | |
title: "Payments", | |
panel: "payments" | |
} | |
] | |
} | |
}, | |
{ | |
title: "Printouts", | |
image: "printer.jpg", | |
panel: "printouts", | |
subMenu : { | |
background : "#e3e3e3", | |
color: "#808080", | |
title: "Printouts", | |
items: [ | |
{ | |
title: "Configuration", | |
image: "gears.jpg", | |
panel: "poConfig" | |
}, | |
{ | |
title: "Schedules", | |
image: "calnendar.jpg", | |
panel: "poSched" | |
} | |
] | |
} | |
} | |
] | |
}; | |
} | |
loadModel(id) { | |
return Promise.resolve(this.bladeItems); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<section class="au-animate"> | |
<div > | |
<div class="message">${title}</div> | |
</div> | |
</section> | |
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export class Dashboard { | |
title = "App Dashboard"; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html> | |
<head> | |
<title>Aurelia</title> | |
<!-- Latest compiled and minified CSS --> | |
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> | |
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css"> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
</head> | |
<body aurelia-app> | |
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
html, body { | |
background-color:#e9eaed; | |
} | |
.panel-body { | |
width: 200px; | |
top: 50px; | |
} | |
.float-left { | |
float:left; | |
} | |
.content { | |
width:960px; | |
height:0px; | |
margin-right: auto; | |
margin-left: auto; | |
} | |
.nav-pills { | |
font-size: 1.3em; | |
} | |
.panel-group { | |
top: 100px; | |
width:430px; | |
z-index: 100; | |
-webkit-backface-visibility: hidden; | |
-webkit-transform: translateX(-100%) rotate(-90deg); | |
-webkit-transform-origin: right top; | |
-moz-transform: translateX(-100%) rotate(-90deg); | |
-moz-transform-origin: right top; | |
-o-transform: translateX(-100%) rotate(-90deg); | |
-o-transform-origin: right top; | |
transform: translateX(-100%) rotate(-90deg); | |
transform-origin: right top; | |
} | |
.panel-heading { | |
width: 300px; | |
} | |
.panel-title { | |
line-height:40px; | |
font-weight: bold; | |
font-size: 1.5em; | |
} | |
.panel-title a { | |
float:right; | |
text-decoration:none; | |
padding: 10px 430px; | |
margin: -10px -430px; | |
} | |
.panel-body { | |
height:830px; | |
padding-top: 0; | |
} | |
.panel-group img { | |
-webkit-backface-visibility: hidden; | |
-webkit-transform: translateX(0%) rotate(90deg); | |
-webkit-transform-origin: left top; | |
-moz-transform: translateX(0%) rotate(90deg); | |
-moz-transform-origin: left top; | |
-o-transform: translateX(0%) rotate(90deg); | |
-o-transform-origin: left top; | |
transform: translateX(0%) rotate(90deg); | |
transform-origin: left top; | |
} | |
.panel-group p { | |
-webkit-backface-visibility: hidden; | |
-webkit-transform: translateX(0%) rotate(90deg); | |
-webkit-transform-origin: left top; | |
-moz-transform: translateX(0%) rotate(90deg); | |
-moz-transform-origin: left top; | |
-o-transform: translateX(0%) rotate(90deg); | |
-o-transform-origin: left top; | |
transform: translateX(0%) rotate(90deg); | |
transform-origin: left top; | |
} | |
.panel-group .panel img { | |
margin-left:400px; | |
position: absolute; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<section class="au-animate row"> | |
<div class="content-fluid"> | |
<div class="panel panel-default float-left" > | |
<div class="panel-heading" style="background-color: ${panelColor}"> | |
<span class="panel-title">${title}</span> | |
<!-- Search Box --> | |
<div class="row"> | |
<div class="col-sm-12"> | |
<div class="input-group blade-item"> | |
<input type="text" class="form-control" placeholder="Search for..."> | |
<span class="input-group-btn"> | |
<button class="btn btn-default" type="button"><i class="fa fa-search"></i></button> | |
</span> | |
</div><!-- /input-group --> | |
</div><!-- /.col-lg-6 --> | |
</div><!-- row --> | |
<div> | |
<div class="panel-body" style="background-color: ${panelColor}"> | |
<ul class="nav nav-pills nav-stacked"> | |
<li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}"> | |
<a href.bind="row.href">${row.title}</a> | |
</li> | |
</ul> | |
</div> | |
</div> | |
</div> | |
</div> | |
<div class="panel panel-body float-left"> | |
<router-view></router-view> | |
</div> | |
</div> | |
</section> | |
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import {Router, RouterConfiguration} from 'aurelia-router' | |
import {EventAggregator} from 'aurelia-event-aggregator'; | |
import {Configuration} from 'configuration'; | |
import {inject} from 'aurelia-framework'; | |
@inject(Configuration, EventAggregator) | |
export class Settings { | |
// This module | |
_menuData = { color: '', textColor: '', items: [] }; | |
panelColor: Number; | |
panelTextColor: Number; | |
configuration: Configuration; | |
title: string = "Settings"; | |
// Router | |
router: Router; | |
config: RouterConfiguration; | |
routeMap = []; | |
// Event Aggregator | |
eventAggregator: EventAggregator; | |
subscription: { dispose: () => void }; | |
constructor(config, EventAggregator) { | |
console.log('setup: constructor'); | |
this.configuration = config; | |
this.eventAggregator = EventAggregator; | |
// hard coded route sample | |
this.routeMap = [ | |
{ route: ['', 'dashboard'], name: 'dashboard', moduleId: 'dashboard', nav: true, title: 'Favorites' }, | |
{ route: 'dashboard', name: 'dashboard2', moduleId: 'dashboard', nav: true, title: 'Profile' } | |
]; | |
} | |
// menuData | |
get menuData() { | |
return this._menuData; | |
} | |
set menuData(value) { | |
this._menuData = value; | |
console.log("set menuData called"); | |
} | |
activate(params, route) { | |
console.log('setup: activate'); | |
if (params.username) { | |
this.title = "Settings " + params.username; | |
params.username = ''; // initialize? | |
} | |
this.configuration.actionItems = | |
[ | |
{ | |
title: "New User", | |
href: "#/new-user" | |
}, | |
{ | |
title: "New Group", | |
href: "#/new-group" | |
}, | |
{ | |
title: "Delete User", | |
href: "#/delete-user" | |
} | |
]; | |
} | |
configureRouter(config: RouterConfiguration, router: Router) { | |
console.log('setup: configureRouter'); | |
this.router = router; | |
config.title = this.title; | |
config.map(this.routeMap); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
margin: 0; | |
/*font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Comic Neue", cursive; */ /*PH 2016-04-07*/ | |
} | |
.blade-item { | |
padding-bottom: 15px; | |
margin-bottom: 10px; | |
font-size: 18px; | |
} | |
#dockbar { | |
position: fixed; | |
padding-top:10px; | |
bottom: 0px; | |
left: 0px; | |
height: 130px; | |
width: 100%; | |
color: #fff; | |
background: #1b38e6; | |
} | |
#start-button { | |
width:140px; | |
height: 110px; | |
/*background: #646dcf*/ | |
} | |
#task-button { | |
width: 160px; | |
height: 110px; | |
} | |
#primary-button { | |
width: 140px; | |
height: 110px; | |
} | |
#secondary-button { | |
width: 140px; | |
height: 110px; | |
} | |
#tertiery-button { | |
width: 40px; | |
height: 110px; | |
} | |
.splash { | |
text-align: center; | |
margin: 10% 0 0 0; | |
box-sizing: border-box; | |
} | |
.splash .message { | |
font-size: 72px; | |
line-height: 72px; | |
text-shadow: rgba(0, 0, 0, 0.5) 0 0 15px; | |
text-transform: uppercase; | |
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
} | |
.splash .fa-spinner { | |
text-align: center; | |
display: inline-block; | |
font-size: 72px; | |
margin-top: 50px; | |
} | |
.page-host { | |
position: absolute; | |
left: 0; | |
right: 0; | |
top: 50px; | |
bottom: 0; | |
overflow-x: hidden; | |
overflow-y: auto; | |
} | |
@media print { | |
.page-host { | |
position: absolute; | |
left: 10px; | |
right: 0; | |
top: 50px; | |
bottom: 0; | |
overflow-y: inherit; | |
overflow-x: inherit; | |
} | |
} | |
section { | |
margin: 0 20px; | |
} | |
.navbar-nav li.loader { | |
margin: 12px 24px 0 6px; | |
} | |
.pictureDetail { | |
max-width: 425px; | |
} | |
/* animate page transitions */ | |
section.au-enter-active { | |
-webkit-animation: fadeInRight 0.4s; | |
animation: fadeInRight 0.4s; | |
} | |
div.au-stagger { | |
/* 50ms will be applied between each successive enter operation */ | |
-webkit-animation-delay: 50ms; | |
animation-delay: 50ms; | |
} | |
.card-container.au-enter { | |
opacity: 0; | |
} | |
.card-container.au-enter-active { | |
-webkit-animation: fadeIn 0.5s; | |
animation: fadeIn 0.5s; | |
} | |
.card { | |
overflow: hidden; | |
position: relative; | |
border: 1px solid #CCC; | |
border-radius: 8px; | |
text-align: center; | |
padding: 0; | |
background-color: #337ab7; | |
color: rgb(136, 172, 217); | |
margin-bottom: 32px; | |
box-shadow: 0 0 5px rgba(0, 0, 0, .5); | |
} | |
.card .content { | |
margin-top: 10px; | |
} | |
.card .content .name { | |
color: white; | |
text-shadow: 0 0 6px rgba(0, 0, 0, .5); | |
font-size: 18px; | |
} | |
.card .header-bg { | |
/* This stretches the canvas across the entire hero unit */ | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 70px; | |
border-bottom: 1px #FFF solid; | |
border-radius: 6px 6px 0 0; | |
} | |
.card .avatar { | |
position: relative; | |
margin-top: 15px; | |
z-index: 100; | |
} | |
.card .avatar img { | |
width: 100px; | |
height: 100px; | |
-webkit-border-radius: 50%; | |
-moz-border-radius: 50%; | |
border-radius: 50%; | |
border: 2px #FFF solid; | |
} | |
/* animation definitions */ | |
@-webkit-keyframes fadeInRight { | |
0% { | |
opacity: 0; | |
-webkit-transform: translate3d(100%, 0, 0); | |
transform: translate3d(100%, 0, 0) | |
} | |
100% { | |
opacity: 1; | |
-webkit-transform: none; | |
transform: none | |
} | |
} | |
@keyframes fadeInRight { | |
0% { | |
opacity: 0; | |
-webkit-transform: translate3d(100%, 0, 0); | |
-ms-transform: translate3d(100%, 0, 0); | |
transform: translate3d(100%, 0, 0) | |
} | |
100% { | |
opacity: 1; | |
-webkit-transform: none; | |
-ms-transform: none; | |
transform: none | |
} | |
} | |
@-webkit-keyframes fadeIn { | |
0% { | |
opacity: 0; | |
} | |
100% { | |
opacity: 1; | |
} | |
} | |
@keyframes fadeIn { | |
0% { | |
opacity: 0; | |
} | |
100% { | |
opacity: 1; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template bindable="userList"> | |
<section class="au-animate row"> | |
<div class="content-fluid"> | |
<!-- Navigation --> | |
<div class="panel panel-default float-left" > | |
<div class="panel-heading" style="background-color: ${panelColor}"> | |
<div> | |
<span class="panel-title">${router.title}</span> | |
</div> | |
<div class="row"> | |
<div><span class="col-sm-offset-1">Clicking on "Paul" causes "Charlie"</span><br /> | |
<span class="col-sm-offset-1">to be selected. I expect "Paul".</span> | |
</div> | |
<button click.delegate="newUserClick($event)" class="btn btn-grey col-sm-offset-1 col-sm-10 m-b-10" | |
style="height:45px; border-radius:5; font-size: 18px;"> | |
<span class="ion-plus fa-2x white" style="position: absolute; left:10%; top: -5%;"></span> | |
<span class="semi-bold" style="left: 30%; top:25%; position: absolute;"> New User</span> | |
</button> | |
</div> | |
<!-- Blade Content --> | |
<div> | |
<div class="panel-body" style="background-color: ${panelColor}"> | |
<!-- Navigation Control --> | |
<ul class="nav nav-pills nav-stacked"> | |
<li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}"> | |
<a href.bind="row.href">${row.title}</a> | |
</li> | |
</ul> | |
</div> | |
</div> | |
</div><!-- panel-heading --> | |
</div><!-- panel --> | |
<!-- Panel --> | |
<div class="panel panel-body float-left"> | |
<router-view></router-view> | |
</div> | |
</div> | |
</section> | |
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import {Configuration} from 'configuration'; | |
import {Router, RouterConfiguration} from 'aurelia-router' | |
import {EventAggregator} from 'aurelia-event-aggregator'; | |
import {inject} from 'aurelia-framework'; | |
@inject(Configuration, EventAggregator) | |
export class Users { | |
// This module | |
_userList = [{ userName: '', href: '', id: '', active: false }]; | |
panelColor: Number; | |
panelTextColor: Number; | |
configuration: Configuration; | |
title: string = "Users"; | |
// Model | |
userModel = [ | |
{ | |
"userName": "Paul", | |
"href": "#/users/settings/Paul", | |
"id": "Paul", | |
"active": false | |
}, | |
{ | |
"userName": "Charlie", | |
"href": "#/users/settings/Charlie", | |
"id": "Charlie", | |
"active": false | |
} | |
]; | |
// Router | |
router: Router; | |
config: RouterConfiguration; | |
routeMap = []; | |
// Event Aggregator | |
eventAggregator: EventAggregator; | |
subscription: { dispose: () => void }; | |
constructor(config, eventAggregator) { | |
console.log('setup: constructor'); | |
this.configuration = config; | |
this.eventAggregator = eventAggregator; | |
// hard coded route sample | |
this.routeMap = [ | |
{ route: ['', 'dashboard'], name: 'dashboard', moduleId: 'dashboard', nav: true, title: 'Dashboard' }, | |
{ route: 'settings/:username', name: 'settings2', moduleId: 'settings', nav: false, title: 'My Settings' } | |
]; | |
} | |
configureRouter(config: RouterConfiguration, router: Router) { | |
console.log('setup: configureRouter'); | |
config.title = this.title; | |
config.map(this.routeMap); | |
this.router = router; | |
} | |
newUserClick() { | |
console.log('users: Button newUserClick was clicked'); | |
var newName = "New User " + (this.router.navigation.length - 2).toString(); | |
var newUser = { userName: '', href: '', id: '', active: false}; | |
newUser.userName = newName; | |
newUser.id = newName; | |
newUser.href = "#/users/settings/" + newName; | |
newUser.active = false; | |
//this.userList.push(newUser); | |
var newList = [newUser]; | |
var routes = this.convertToRoutes(newList); | |
routes.forEach((route) => { | |
this.setRoute(route); | |
}); | |
} | |
// userList | |
get userList() { | |
return this._userList; | |
} | |
set userList(value) { | |
console.log("set userList called"); | |
this.setUserList(value); | |
} | |
setUserList(value) { | |
this._userList = value; | |
var routes = this.convertToRoutes(this.userList); | |
routes.forEach((route) => { | |
this.setRoute(route); | |
}); | |
} | |
setRoute(route) { | |
this.router.addRoute({ route: route.route, name: route.name, moduleId: route.moduleId, nav: true, href: route.href, title: route.title }); | |
this.router.refreshNavigation(); | |
} | |
activate(params, route) { | |
console.log('setup: activate'); | |
this.configuration.actionItems = | |
[ | |
{ | |
title: "New User", | |
href: "#/new-user" | |
}, | |
{ | |
title: "New Group", | |
href: "#/new-group" | |
}, | |
{ | |
title: "Delete User", | |
href: "#/delete-user" | |
} | |
]; | |
} | |
attached() { | |
console.log('users: attach'); | |
this.setUserList(this.userModel); | |
} | |
convertToRoutes(menu) { | |
var routes = []; | |
if (menu) { | |
routes = menu.map(function(m) { | |
var x = { route: '', name: '', moduleId: '', nav: true, title: '', href:'', settings: {} }; | |
x.route = "settings/:username"; | |
x.name = "settings-" + m.userName; | |
x.moduleId = "settings" | |
x.href = "#/users/settings/" + m.id; | |
x.nav = true; | |
x.title = m.userName; | |
return x; | |
}); | |
} | |
return routes; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment