Skip to content

Instantly share code, notes, and snippets.

@charlespockert

charlespockert/alt-layout.html

Last active May 20, 2016 17:05
Show Gist options
  • Save charlespockert/ae040a4feb9b2994d837b2d37e450c37 to your computer and use it in GitHub Desktop.
Save charlespockert/ae040a4feb9b2994d837b2d37e450c37 to your computer and use it in GitHub Desktop.
Download ZIP
Aurelia router with layouts
Raw
alt-layout.html
<template>
<section class="au-animate">
<div class="well">
<content select="#navigation"></content>
</div>
<div>
<content select="#content"></content>
</div>
</section>
</template>
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">
<layout-router-view layout-view="main-layout.html"></layout-router-view>
</div>
</template>
Raw
app.js
export class App {
configureRouter(config, router) {
config.title = 'Aurelia';
config.map([
{ layoutView: 'main-layout.html', route: ['', 'welcome'], name: 'welcome', moduleId: 'welcome', nav: true, title: 'Welcome' },
{ layoutView: 'alt-layout.html', route: 'welcome2', name: 'welcome2', moduleId: 'welcome', nav: true, title: 'Welcome Alt Layout' },
]);
this.router = router;
}
}
Raw
config.js
System.config({
defaultJSExtensions: true,
transpiler: "babel",
babelOptions: {
"ignore": [
"github:*",
"npm:*"
],
"stage": 0,
"optional": []
},
paths: {
"github:*": "https://cdn.rawgit.com/aurelia-ui-toolkits/aurelia-kendoui-bundles/0.3.15/jspm_packages/github/*",
"npm:*": "https://cdn.rawgit.com/aurelia-ui-toolkits/aurelia-kendoui-bundles/0.3.15/jspm_packages/npm/*",
"kendo.*": "https://cdn.rawgit.com/aurelia-ui-toolkits/aurelia-kendoui-bundles/0.3.15/jspm_packages/kendo/[email protected]/js/kendo.*.js",
"kendo:*": "https://cdn.rawgit.com/aurelia-ui-toolkits/aurelia-kendoui-bundles/0.3.15/jspm_packages/kendo/*",
"bundles/bundle.js": "https://cdn.rawgit.com/aurelia-ui-toolkits/aurelia-kendoui-bundles/0.3.15/bundles/bundle.js"
},
map: {
"aurelia-animator-css": "npm:[email protected]",
"aurelia-binding": "npm:[email protected]",
"aurelia-bootstrapper": "npm:[email protected]",
"aurelia-dependency-injection": "npm:[email protected]",
"aurelia-event-aggregator": "npm:[email protected]",
"aurelia-fetch-client": "npm:[email protected]",
"aurelia-framework": "npm:[email protected]",
"aurelia-history": "npm:[email protected]",
"aurelia-history-browser": "npm:[email protected]",
"aurelia-http-client": "npm:[email protected]",
"aurelia-kendoui-bridge": "npm:[email protected]",
"aurelia-loader": "npm:[email protected]",
"aurelia-loader-default": "npm:[email protected]",
"aurelia-logging": "npm:[email protected]",
"aurelia-logging-console": "npm:[email protected]",
"aurelia-metadata": "npm:[email protected]",
"aurelia-path": "npm:[email protected]",
"aurelia-route-recognizer": "npm:[email protected]",
"aurelia-router": "npm:[email protected]",
"aurelia-task-queue": "npm:[email protected]",
"aurelia-templating": "npm:[email protected]",
"aurelia-templating-binding": "npm:[email protected]",
"aurelia-templating-resources": "npm:[email protected]",
"aurelia-templating-router": "npm:[email protected]",
"babel": "npm:[email protected]",
"babel-runtime": "npm:[email protected]",
"core-js": "npm:[email protected]",
"jquery": "npm:[email protected]",
"jquery.min": "npm:[email protected]",
"json": "github:systemjs/[email protected]",
"kendo-ui": "kendo:[email protected]",
"text": "github:systemjs/[email protected]",
"datatables": "https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js",
"github:jspm/[email protected]": {
"assert": "npm:[email protected]"
},
"github:jspm/[email protected]": {
"process": "npm:[email protected]"
},
"github:jspm/[email protected]": {
"util": "npm:[email protected]"
},
"npm:[email protected]": {
"util": "npm:[email protected]"
},
"npm:[email protected]": {
"aurelia-metadata": "npm:[email protected]",
"aurelia-pal": "npm:[email protected]",
"aurelia-templating": "npm:[email protected]"
},
"npm:[email protected]": {
"aurelia-logging": "npm:[email protected]",
"aurelia-metadata": "npm:[email protected]",
"aurelia-pal": "npm:[email protected]",
"aurelia-task-queue": "npm:[email protected]"
},
"npm:[email protected]": {
"aurelia-event-aggregator": "npm:[email protected]",
"aurelia-framework": "npm:[email protected]",
"aurelia-history": "npm:[email protected]",
"aurelia-history-browser": "npm:[email protected]",
"aurelia-loader-default": "npm:[email protected]",
"aurelia-logging-console": "npm:[email protected]",
"aurelia-pal": "npm:[email protected]",
"aurelia-pal-browser": "npm:[email protected]",
"aurelia-polyfills": "npm:[email protected]",
"aurelia-router": "npm:[email protected]",
"aurelia-templating": "npm:[email protected]",
"aurelia-templating-binding": "npm:[email protected]",
"aurelia-templating-resources": "npm:[email protected]",
"aurelia-templating-router": "npm:[email protected]"
},
"npm:[email protected]": {
"aurelia-logging": "npm:[email protected]",
"aurelia-metadata": "npm:[email protected]",
"aurelia-pal": "npm:[email protected]"
},
"npm:[email protected]": {
"aurelia-logging": "npm:[email protected]"
},
"npm:[email protected]": {
"aurelia-binding": "npm:[email protected]",
"aurelia-dependency-injection": "npm:[email protected]",
"aurelia-loader": "npm:[email protected]",
"aurelia-logging": "npm:[email protected]",
"aurelia-metadata": "npm:[email protected]",
"aurelia-pal": "npm:[email protected]",
"aurelia-path": "npm:[email protected]",
"aurelia-task-queue": "npm:[email protected]",
"aurelia-templating": "npm:[email protected]"
},
"npm:[email protected]": {
"aurelia-history": "npm:[email protected]",
"aurelia-pal": "npm:[email protected]"
},
"npm:[email protected]": {
"aurelia-pal": "npm:[email protected]",
"aurelia-path": "npm:[email protected]"
},
"npm:[email protected]": {
"aurelia-binding": "npm:[email protected]",
"aurelia-dependency-injection": "npm:[email protected]",
"aurelia-logging": "npm:[email protected]",
"aurelia-metadata": "npm:[email protected]",
"aurelia-task-queue": "npm:[email protected]",
"aurelia-templating": "npm:[email protected]",
"aurelia-templating-resources": "npm:[email protected]"
},
"npm:[email protected]": {
"aurelia-loader": "npm:[email protected]",
"aurelia-metadata": "npm:[email protected]",
"aurelia-pal": "npm:[email protected]"
},
"npm:[email protected]": {
"aurelia-metadata": "npm:[email protected]",
"aurelia-path": "npm:[email protected]"
},
"npm:[email protected]": {
"aurelia-logging": "npm:[email protected]",
"aurelia-pal": "npm:[email protected]"
},
"npm:[email protected]": {
"aurelia-pal": "npm:[email protected]"
},
"npm:[email protected]": {
"aurelia-pal": "npm:[email protected]"
},
"npm:[email protected]": {
"aurelia-pal": "npm:[email protected]"
},
"npm:[email protected]": {
"aurelia-path": "npm:[email protected]"
},
"npm:[email protected]": {
"aurelia-dependency-injection": "npm:[email protected]",
"aurelia-event-aggregator": "npm:[email protected]",
"aurelia-history": "npm:[email protected]",
"aurelia-logging": "npm:[email protected]",
"aurelia-path": "npm:[email protected]",
"aurelia-route-recognizer": "npm:[email protected]"
},
"npm:[email protected]": {
"aurelia-pal": "npm:[email protected]"
},
"npm:[email protected]": {
"aurelia-binding": "npm:[email protected]",
"aurelia-logging": "npm:[email protected]",
"aurelia-templating": "npm:[email protected]"
},
"npm:[email protected]": {
"aurelia-binding": "npm:[email protected]",
"aurelia-dependency-injection": "npm:[email protected]",
"aurelia-loader": "npm:[email protected]",
"aurelia-logging": "npm:[email protected]",
"aurelia-metadata": "npm:[email protected]",
"aurelia-pal": "npm:[email protected]",
"aurelia-path": "npm:[email protected]",
"aurelia-task-queue": "npm:[email protected]",
"aurelia-templating": "npm:[email protected]"
},
"npm:[email protected]": {
"aurelia-dependency-injection": "npm:[email protected]",
"aurelia-logging": "npm:[email protected]",
"aurelia-metadata": "npm:[email protected]",
"aurelia-pal": "npm:[email protected]",
"aurelia-path": "npm:[email protected]",
"aurelia-router": "npm:[email protected]",
"aurelia-templating": "npm:[email protected]"
},
"npm:[email protected]": {
"aurelia-binding": "npm:[email protected]",
"aurelia-dependency-injection": "npm:[email protected]",
"aurelia-loader": "npm:[email protected]",
"aurelia-logging": "npm:[email protected]",
"aurelia-metadata": "npm:[email protected]",
"aurelia-pal": "npm:[email protected]",
"aurelia-path": "npm:[email protected]",
"aurelia-task-queue": "npm:[email protected]"
},
"npm:[email protected]": {
"process": "github:jspm/[email protected]"
},
"npm:[email protected]": {
"fs": "github:jspm/[email protected]",
"process": "github:jspm/[email protected]",
"systemjs-json": "github:systemjs/[email protected]"
},
"npm:[email protected]": {
"util": "github:jspm/[email protected]"
},
"npm:[email protected]": {
"assert": "github:jspm/[email protected]"
},
"npm:[email protected]": {
"inherits": "npm:[email protected]",
"process": "github:jspm/[email protected]"
}
},
bundles: {
"bundles/bundle.js": [
"github:systemjs/[email protected]",
"github:systemjs/[email protected]/json.js",
"github:systemjs/[email protected]",
"github:systemjs/[email protected]/text.js",
"kendo.aspnetmvc.min",
"kendo.autocomplete.min",
"kendo.binder.min",
"kendo.button.min",
"kendo.calendar.min",
"kendo.color.min",
"kendo.colorpicker.min",
"kendo.columnmenu.min",
"kendo.columnsorter.min",
"kendo.combobox.min",
"kendo.core.min",
"kendo.data.min",
"kendo.data.odata.min",
"kendo.data.signalr.min",
"kendo.data.xml.min",
"kendo.dataviz.barcode.min",
"kendo.dataviz.chart.funnel.min",
"kendo.dataviz.chart.min",
"kendo.dataviz.chart.polar.min",
"kendo.dataviz.core.min",
"kendo.dataviz.diagram.min",
"kendo.dataviz.gauge.min",
"kendo.dataviz.map.min",
"kendo.dataviz.qrcode.min",
"kendo.dataviz.sparkline.min",
"kendo.dataviz.stock.min",
"kendo.dataviz.themes.min",
"kendo.dataviz.treemap.min",
"kendo.datepicker.min",
"kendo.datetimepicker.min",
"kendo.dom.min",
"kendo.draganddrop.min",
"kendo.drawing.min",
"kendo.dropdownlist.min",
"kendo.editable.min",
"kendo.editor.min",
"kendo.excel.min",
"kendo.filebrowser.min",
"kendo.filtercell.min",
"kendo.filtermenu.min",
"kendo.fx.min",
"kendo.gantt.list.min",
"kendo.gantt.min",
"kendo.gantt.timeline.min",
"kendo.grid.min",
"kendo.groupable.min",
"kendo.imagebrowser.min",
"kendo.list.min",
"kendo.listview.min",
"kendo.maskedtextbox.min",
"kendo.menu.min",
"kendo.mobile.actionsheet.min",
"kendo.mobile.application.min",
"kendo.mobile.button.min",
"kendo.mobile.buttongroup.min",
"kendo.mobile.collapsible.min",
"kendo.mobile.drawer.min",
"kendo.mobile.listview.min",
"kendo.mobile.loader.min",
"kendo.mobile.modalview.min",
"kendo.mobile.navbar.min",
"kendo.mobile.pane.min",
"kendo.mobile.popover.min",
"kendo.mobile.scroller.min",
"kendo.mobile.scrollview.min",
"kendo.mobile.shim.min",
"kendo.mobile.splitview.min",
"kendo.mobile.switch.min",
"kendo.mobile.tabstrip.min",
"kendo.mobile.view.min",
"kendo.multiselect.min",
"kendo.notification.min",
"kendo.numerictextbox.min",
"kendo.ooxml.min",
"kendo.pager.min",
"kendo.panelbar.min",
"kendo.pdf.min",
"kendo.pivot.configurator.min",
"kendo.pivot.fieldmenu.min",
"kendo.pivotgrid.min",
"kendo.popup.min",
"kendo.progressbar.min",
"kendo.reorderable.min",
"kendo.resizable.min",
"kendo.responsivepanel.min",
"kendo.router.min",
"kendo.scheduler.agendaview.min",
"kendo.scheduler.dayview.min",
"kendo.scheduler.min",
"kendo.scheduler.monthview.min",
"kendo.scheduler.recurrence.min",
"kendo.scheduler.timelineview.min",
"kendo.scheduler.view.min",
"kendo.selectable.min",
"kendo.slider.min",
"kendo.sortable.min",
"kendo.splitter.min",
"kendo.tabstrip.min",
"kendo.timepicker.min",
"kendo.timezones.min",
"kendo.toolbar.min",
"kendo.tooltip.min",
"kendo.touch.min",
"kendo.treelist.min",
"kendo.treeview.draganddrop.min",
"kendo.treeview.min",
"kendo.upload.min",
"kendo.userevents.min",
"kendo.validator.min",
"kendo.view.min",
"kendo.virtuallist.min",
"kendo.webcomponents.min",
"kendo.window.min",
"kendo:[email protected]/js/jszip.min.js",
"kendo:[email protected]/js/pako_deflate.min.js",
"npm:[email protected]",
"npm:[email protected]/aurelia-animator-css.js",
"npm:[email protected]",
"npm:[email protected]/aurelia-binding.js",
"npm:[email protected]",
"npm:[email protected]/aurelia-bootstrapper.js",
"npm:[email protected]",
"npm:[email protected]/aurelia-dependency-injection.js",
"npm:[email protected]",
"npm:[email protected]/aurelia-event-aggregator.js",
"npm:[email protected]",
"npm:[email protected]/aurelia-fetch-client.js",
"npm:[email protected]",
"npm:[email protected]/aurelia-framework.js",
"npm:[email protected]",
"npm:[email protected]/aurelia-history-browser.js",
"npm:[email protected]",
"npm:[email protected]/aurelia-history.js",
"npm:[email protected]",
"npm:[email protected]/aurelia-http-client.js",
"npm:[email protected]",
"npm:[email protected]/autocomplete/autocomplete.html!github:systemjs/[email protected]",
"npm:[email protected]/autocomplete/autocomplete.js",
"npm:[email protected]/barcode/barcode.js",
"npm:[email protected]/button/button.js",
"npm:[email protected]/buttongroup/buttongroup.js",
"npm:[email protected]/calendar/calendar.html!github:systemjs/[email protected]",
"npm:[email protected]/calendar/calendar.js",
"npm:[email protected]/chart/chart.html!github:systemjs/[email protected]",
"npm:[email protected]/chart/chart.js",
"npm:[email protected]/chart/sparkline.html!github:systemjs/[email protected]",
"npm:[email protected]/chart/sparkline.js",
"npm:[email protected]/chart/stock.html!github:systemjs/[email protected]",
"npm:[email protected]/chart/stock.js",
"npm:[email protected]/chart/treemap.html!github:systemjs/[email protected]",
"npm:[email protected]/chart/treemap.js",
"npm:[email protected]/colorpalette/colorpalette.html!github:systemjs/[email protected]",
"npm:[email protected]/colorpalette/colorpalette.js",
"npm:[email protected]/colorpicker/colorpicker.js",
"npm:[email protected]/combobox/combobox.html!github:systemjs/[email protected]",
"npm:[email protected]/combobox/combobox.js",
"npm:[email protected]/common/bindables.js",
"npm:[email protected]/common/constants.js",
"npm:[email protected]/common/control-properties.js",
"npm:[email protected]/common/decorators.js",
"npm:[email protected]/common/options-builder.js",
"npm:[email protected]/common/template-compiler.js",
"npm:[email protected]/common/template-gatherer.js",
"npm:[email protected]/common/template.js",
"npm:[email protected]/common/util.js",
"npm:[email protected]/common/widget-base.js",
"npm:[email protected]/config-builder.js",
"npm:[email protected]/contextmenu/contextmenu.js",
"npm:[email protected]/datepicker/datepicker.js",
"npm:[email protected]/datetimepicker/datetimepicker.js",
"npm:[email protected]/diagram/diagram.html!github:systemjs/[email protected]",
"npm:[email protected]/diagram/diagram.js",
"npm:[email protected]/draggable/draggable.js",
"npm:[email protected]/drop-target/drop-target-area.js",
"npm:[email protected]/drop-target/drop-target.js",
"npm:[email protected]/dropdownlist/dropdownlist.html!github:systemjs/[email protected]",
"npm:[email protected]/dropdownlist/dropdownlist.js",
"npm:[email protected]/editor/editor.js",
"npm:[email protected]/flatcolorpicker/flatcolorpicker.html!github:systemjs/[email protected]",
"npm:[email protected]/flatcolorpicker/flatcolorpicker.js",
"npm:[email protected]/gantt/gantt-col.html!github:systemjs/[email protected]",
"npm:[email protected]/gantt/gantt-col.js",
"npm:[email protected]/gantt/gantt.html!github:systemjs/[email protected]",
"npm:[email protected]/gantt/gantt.js",
"npm:[email protected]/gauges/linear-gauge.html!github:systemjs/[email protected]",
"npm:[email protected]/gauges/linear-gauge.js",
"npm:[email protected]/gauges/radial-gauge.html!github:systemjs/[email protected]",
"npm:[email protected]/gauges/radial-gauge.js",
"npm:[email protected]/grid/col.html!github:systemjs/[email protected]",
"npm:[email protected]/grid/col.js",
"npm:[email protected]/grid/grid-toolbar.html!github:systemjs/[email protected]",
"npm:[email protected]/grid/grid-toolbar.js",
"npm:[email protected]/grid/grid.html!github:systemjs/[email protected]",
"npm:[email protected]/grid/grid.js",
"npm:[email protected]/index.js",
"npm:[email protected]/listview/listview.html!github:systemjs/[email protected]",
"npm:[email protected]/listview/listview.js",
"npm:[email protected]/map/map.html!github:systemjs/[email protected]",
"npm:[email protected]/map/map.js",
"npm:[email protected]/maskedtextbox/maskedtextbox.js",
"npm:[email protected]/menu/menu.js",
"npm:[email protected]/multiselect/multiselect.html!github:systemjs/[email protected]",
"npm:[email protected]/multiselect/multiselect.js",
"npm:[email protected]/notification/notification-template.js",
"npm:[email protected]/notification/notification.html!github:systemjs/[email protected]",
"npm:[email protected]/notification/notification.js",
"npm:[email protected]/numerictextbox/numerictextbox.js",
"npm:[email protected]/panelbar/panelbar.html!github:systemjs/[email protected]",
"npm:[email protected]/panelbar/panelbar.js",
"npm:[email protected]/pdf/pdf.js",
"npm:[email protected]/pivotgrid/pivotconfigurator.html!github:systemjs/[email protected]",
"npm:[email protected]/pivotgrid/pivotconfigurator.js",
"npm:[email protected]/pivotgrid/pivotgrid.html!github:systemjs/[email protected]",
"npm:[email protected]/pivotgrid/pivotgrid.js",
"npm:[email protected]/progressbar/progressbar.js",
"npm:[email protected]/qrcode/qrcode.js",
"npm:[email protected]/rangeslider/rangeslider.html!github:systemjs/[email protected]",
"npm:[email protected]/rangeslider/rangeslider.js",
"npm:[email protected]/responsivepanel/responsivepanel.js",
"npm:[email protected]/scheduler/scheduler.html!github:systemjs/[email protected]",
"npm:[email protected]/scheduler/scheduler.js",
"npm:[email protected]/scrollview/scrollview.html!github:systemjs/[email protected]",
"npm:[email protected]/scrollview/scrollview.js",
"npm:[email protected]/slider/slider.js",
"npm:[email protected]/sortable/sortable.js",
"npm:[email protected]/splitter/splitter.js",
"npm:[email protected]/spreadsheet/spreadsheet.html!github:systemjs/[email protected]",
"npm:[email protected]/spreadsheet/spreadsheet.js",
"npm:[email protected]/switch/switch.js",
"npm:[email protected]/tabstrip/tabstrip.js",
"npm:[email protected]/timepicker/timepicker.js",
"npm:[email protected]/toolbar/toolbar-item-button.html!github:systemjs/[email protected]",
"npm:[email protected]/toolbar/toolbar-item-button.js",
"npm:[email protected]/toolbar/toolbar-item.html!github:systemjs/[email protected]",
"npm:[email protected]/toolbar/toolbar-item.js",
"npm:[email protected]/toolbar/toolbar.html!github:systemjs/[email protected]",
"npm:[email protected]/toolbar/toolbar.js",
"npm:[email protected]/tooltip/tooltip.js",
"npm:[email protected]/treelist/tree-col.html!github:systemjs/[email protected]",
"npm:[email protected]/treelist/tree-col.js",
"npm:[email protected]/treelist/treelist.html!github:systemjs/[email protected]",
"npm:[email protected]/treelist/treelist.js",
"npm:[email protected]/treeview/treeview.js",
"npm:[email protected]/upload/upload.html!github:systemjs/[email protected]",
"npm:[email protected]/upload/upload.js",
"npm:[email protected]/validator/validator.js",
"npm:[email protected]/valueconverters/valueconverters.js",
"npm:[email protected]/window/window.js",
"npm:[email protected]",
"npm:[email protected]/aurelia-loader-default.js",
"npm:[email protected]",
"npm:[email protected]/aurelia-loader.js",
"npm:[email protected]",
"npm:[email protected]/aurelia-logging-console.js",
"npm:[email protected]",
"npm:[email protected]/aurelia-logging.js",
"npm:[email protected]",
"npm:[email protected]/aurelia-metadata.js",
"npm:[email protected]",
"npm:[email protected]/aurelia-pal-browser.js",
"npm:[email protected]",
"npm:[email protected]/aurelia-pal.js",
"npm:[email protected]",
"npm:[email protected]/aurelia-path.js",
"npm:[email protected]",
"npm:[email protected]/aurelia-polyfills.js",
"npm:[email protected]",
"npm:[email protected]/aurelia-route-recognizer.js",
"npm:[email protected]",
"npm:[email protected]/aurelia-router.js",
"npm:[email protected]",
"npm:[email protected]/aurelia-task-queue.js",
"npm:[email protected]",
"npm:[email protected]/aurelia-templating-binding.js",
"npm:[email protected]",
"npm:[email protected]/abstract-repeater.js",
"npm:[email protected]/analyze-view-factory.js",
"npm:[email protected]/array-repeat-strategy.js",
"npm:[email protected]/aurelia-templating-resources.js",
"npm:[email protected]/binding-mode-behaviors.js",
"npm:[email protected]/binding-signaler.js",
"npm:[email protected]/compile-spy.js",
"npm:[email protected]/compose.js",
"npm:[email protected]/css-resource.js",
"npm:[email protected]/debounce-binding-behavior.js",
"npm:[email protected]/dynamic-element.js",
"npm:[email protected]/focus.js",
"npm:[email protected]/hide.js",
"npm:[email protected]/html-resource-plugin.js",
"npm:[email protected]/html-sanitizer.js",
"npm:[email protected]/if.js",
"npm:[email protected]/map-repeat-strategy.js",
"npm:[email protected]/null-repeat-strategy.js",
"npm:[email protected]/number-repeat-strategy.js",
"npm:[email protected]/repeat-strategy-locator.js",
"npm:[email protected]/repeat-utilities.js",
"npm:[email protected]/repeat.js",
"npm:[email protected]/replaceable.js",
"npm:[email protected]/sanitize-html.js",
"npm:[email protected]/set-repeat-strategy.js",
"npm:[email protected]/show.js",
"npm:[email protected]/signal-binding-behavior.js",
"npm:[email protected]/throttle-binding-behavior.js",
"npm:[email protected]/update-trigger-binding-behavior.js",
"npm:[email protected]/view-spy.js",
"npm:[email protected]/with.js",
"npm:[email protected]",
"npm:[email protected]/aurelia-templating-router.js",
"npm:[email protected]/route-href.js",
"npm:[email protected]/route-loader.js",
"npm:[email protected]/router-view.js",
"npm:[email protected]",
"npm:[email protected]/aurelia-templating.js",
"npm:[email protected]",
"npm:[email protected]/dist/jquery.js"
]
}
});
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>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.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="config.js"></script>
<script>
System.import('aurelia-bootstrapper');
</script>
</body>
</html>
Raw
layout-router-view.js
import {Container, inject} from 'aurelia-dependency-injection';
import {ViewSlot, ViewLocator, customElement, noView, BehaviorInstruction, bindable, CompositionTransaction, CompositionEngine} from 'aurelia-framework';
import {Router} from 'aurelia-router';
import {Origin} from 'aurelia-framework';
import {DOM} from 'aurelia-framework';
import {_ContentSelector} from 'aurelia-framework';
class SwapStrategies {
// animate the next view in before removing the current view;
before(viewSlot, previousView, callback) {
let promise = Promise.resolve(callback());
if (previousView !== undefined) {
return promise.then(() => viewSlot.remove(previousView, true));
}
return promise;
}
// animate the next view at the same time the current view is removed
with(viewSlot, previousView, callback) {
let promise = Promise.resolve(callback());
if (previousView !== undefined) {
return Promise.all([viewSlot.remove(previousView, true), promise]);
}
return promise;
}
// animate the next view in after the current view has been removed
after(viewSlot, previousView, callback) {
return Promise.resolve(viewSlot.removeAll(true)).then(callback);
}
}
const swapStrategies = new SwapStrategies();
@customElement('layout-router-view')
@noView
@inject(DOM.Element, Container, ViewSlot, Router, ViewLocator, CompositionTransaction, CompositionEngine)
export class LayoutRouterView {
@bindable swapOrder;
@bindable layoutView;
@bindable layoutViewModel;
@bindable layoutModel;
constructor(element, container, viewSlot, router, viewLocator, compositionTransaction, compositionEngine) {
this.element = element;
this.container = container;
this.viewSlot = viewSlot;
this.router = router;
this.viewLocator = viewLocator;
this.compositionTransaction = compositionTransaction;
this.compositionEngine = compositionEngine;
this.router.registerViewPort(this, this.element.getAttribute('name'));
if (!('initialComposition' in compositionTransaction)) {
compositionTransaction.initialComposition = true;
this.compositionTransactionNotifier = compositionTransaction.enlist();
}
}
created(owningView) {
this.owningView = owningView;
}
bind(bindingContext, overrideContext) {
this.container.viewModel = bindingContext;
this.overrideContext = overrideContext;
}
process(viewPortInstruction, waitToSwap) {
let component = viewPortInstruction.component;
let childContainer = component.childContainer;
let viewModel = component.viewModel;
let viewModelResource = component.viewModelResource;
let metadata = viewModelResource.metadata;
let config = component.router.currentInstruction.config;
// layoutInstruction is our layout viewModel
let layoutInstruction = {
viewModel: config.layoutViewModel || this.layoutViewModel,
view: config.layoutView || this.layoutView,
model: config.layoutModel || this.layoutModel,
router: viewPortInstruction.component.router,
childContainer: childContainer,
viewSlot: this.viewSlot
};
return Promise.resolve(this.composeLayout(layoutInstruction))
.then(layoutView => {
let viewStrategy = this.viewLocator.getViewStrategy(component.view || viewModel);
if (viewStrategy) {
viewStrategy.makeRelativeTo(Origin.get(component.router.container.viewModel.constructor).moduleId);
}
return metadata.load(childContainer, viewModelResource.value, null, viewStrategy, true)
.then(viewFactory => {
if (!this.compositionTransactionNotifier) {
this.compositionTransactionOwnershipToken = this.compositionTransaction.tryCapture();
}
viewPortInstruction.layout = layoutView ? layoutView.view || layoutView : undefined;
viewPortInstruction.controller = metadata.create(childContainer,
BehaviorInstruction.dynamic(
this.element,
viewModel,
viewFactory
)
);
if (waitToSwap) {
return;
}
this.swap(viewPortInstruction);
});
});
}
composeLayout(instruction) {
if (instruction.viewModel || instruction.view) {
return this.compositionEngine.compose(instruction);
}
}
swap(viewPortInstruction) {
let work = viewPortInstruction.layout ?
() => { return this.swapWithLayout(viewPortInstruction); } :
() => { return this.swapWithoutLayout(viewPortInstruction); };
viewPortInstruction.controller.automate(this.overrideContext, this.owningView);
if (this.compositionTransactionOwnershipToken) {
return this.compositionTransactionOwnershipToken.waitForCompositionComplete().then(() => {
this.compositionTransactionOwnershipToken = null;
work();
});
}
work();
}
swapWithoutLayout(viewPortInstruction) {
let previousView = this.view;
let swapStrategy;
let viewSlot = this.viewSlot;
swapStrategy = this.swapOrder in swapStrategies
? swapStrategies[this.swapOrder]
: swapStrategies.after;
swapStrategy(viewSlot, previousView, () => {
return Promise.resolve(viewSlot.add(viewPortInstruction.controller.view))
.then(() => {
if (this.compositionTransactionNotifier) {
this.compositionTransactionNotifier.done();
this.compositionTransactionNotifier = null;
}
});
});
this.view = viewPortInstruction.controller.view;
}
swapWithLayout(viewPortInstruction) {
let previousView = this.view;
let swapStrategy;
let layout = viewPortInstruction.layout;
if (layout.contentSelectors.length === 0) throw new Error('No content selector present in layout ' + layout.resources.viewUrl);
let viewSlot = new ViewSlot(layout.contentSelectors[0].anchor, false);
viewSlot.attached();
_ContentSelector.applySelectors(
viewPortInstruction.controller.view,
layout.contentSelectors,
(contentSelector, group) => contentSelector.add(group)
);
swapStrategy = this.swapOrder in swapStrategies
? swapStrategies[this.swapOrder]
: swapStrategies.after;
swapStrategy(viewSlot, previousView, () => {
return Promise.resolve(viewSlot.add(viewPortInstruction.controller.view))
.then(() => {
if (this.compositionTransactionNotifier) {
this.compositionTransactionNotifier.done();
this.compositionTransactionNotifier = null;
}
});
});
this.view = viewPortInstruction.controller.view;
}
}
Raw
main-layout.html
<template>
<section class="au-animate">
<div class="container-fluid">
<div class="row">
<div class="col-xs-3">
<content select="#navigation"></content>
</div>
<div class="col-xs-9">
<content select="#content"></content>
</div>
</div>
</div>
</section>
</template>
Raw
main.js
//import 'bootstrap';
import "datatables";
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging();
aurelia.use.globalResources('layout-router-view');
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
styles.css
body {
margin: 0;
}
.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 1s;
animation: fadeInRight 1s;
}
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 2s;
animation: fadeIn 2s;
}
.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;
}
}
Raw
table-element.html
<template>
<table border="1" id="${tableId}">
<thead>
<tr>
<th>First Name</th>
<th>Surname</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr repeat.for="item of data">
<td>${item.firstName}</td>
<td>${item.surname}</td>
<td>${item.Age}</td>
</tr>
</tbody>
</table>
</template>
Raw
table-element.js
import {bindable} from 'aurelia-framework';
export class TableElement {
@bindable tableId;
@bindable data = [];
attached() {
$(this.myTable).DataTable();
}
tableIdChanged() {
console.log("changed");
}
}
Raw
welcome.html
<template>
<require from="table-element"></require>
<section id="navigation">
<table-element data.bind="data1"></table-element>
<table-element data.bind="data2"></table-element>
<table-element data.bind="data3"></table-element>
<table-element data.bind="data2"></table-element>
<table-element data.bind="data1"></table-element>
<table-element data.bind="data3"></table-element>
</section>
</template>
Raw
welcome.js
//import {computedFrom} from 'aurelia-framework';
import {activationStrategy} from 'aurelia-router';
export class Welcome {
data1 = [
{ firstName: "charles", surname: "pockert", age: 34},
{ firstName: "max", surname: "pockert", age: 5},
{ firstName: "ella", surname: "pockert", age: 12},
{ firstName: "lindsay", surname: "pockert", age: 29}
];
data2 = [
{ firstName: "mickey", surname: "mouse", age: 100},
{ firstName: "daffy", surname: "duck", age: 95}
];
data3 = [
{ firstName: "dimebag", surname: "darrel", age: 40},
{ firstName: "josh", surname: "middleton", age: 28}
];
}
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