Skip to content

Instantly share code, notes, and snippets.

@charlespockert

charlespockert/add-suffix.js

Last active May 21, 2016 05:34
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save charlespockert/452851c45144668d37df556f5df9c04a to your computer and use it in GitHub Desktop.
Save charlespockert/452851c45144668d37df556f5df9c04a to your computer and use it in GitHub Desktop.
Download ZIP
Async value converted using binding behaviour
Raw
add-suffix.js
export class AddSuffixValueConverter {
toView(val, suffix) {
return new Promise((res, rej) => {
setTimeout(() => {
res(val + ' ' + suffix);
}, 1000);
});
}
}
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([
{ 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
async-binding-behavior.js
import {bindingMode} from 'aurelia-binding';
function waitForPromise(newValue) {
// check if thenable
if ('then' in newValue) {
newValue.then((result) => {
this.promisedMethod(result);
});
}
else this.promisedMethod(newValue);
}
export class AsyncBindingBehavior {
bind(binding, source) {
let methodToPromise = 'updateTarget'; // one-way bindings or interpolation bindings
if (binding.callSource) {
methodToPromise = 'callSource'; // listener and call bindings
} else if (binding.updateSource && binding.mode === bindingMode.twoWay) {
methodToPromise = 'updateSource'; // two-way bindings
}
binding.promisedMethod = binding[methodToPromise];
binding.promisedMethod.originalName = methodToPromise;
// Wait for the promise to resolve
binding[methodToPromise] = waitForPromise;
}
unbind(binding, source) {
// restore the state of the binding.
let methodToRestore = binding.promisedMethod.originalName;
binding[methodToRestore] = binding.promisedMethod;
binding.promisedMethod = null;
}
}
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.plugin('aurelia-animator-css');
aurelia.use.globalResources('async-binding-behavior');
aurelia.use.globalResources('add-suffix');
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
welcome.html
<template>
<section id="content">
<input value.bind="test" />
<p>${test | addSuffix:'this suffix is a value converter using a promise' & async}</p>
</section>
</template>
Raw
welcome.js
//import {computedFrom} from 'aurelia-framework';
import {activationStrategy} from 'aurelia-router';
export class Welcome {
test = "test value";
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment