Last active
June 5, 2020 09:19
-
-
Save jdanyow/4fec7ba8894772dc684896d666a40e8a to your computer and use it in GitHub Desktop.
Aurelia Skeleton
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> | |
<nav-bar router.bind="router"></nav-bar> | |
<div class="container"> | |
<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
export class App { | |
configureRouter(config, router) { | |
config.title = 'Aurelia'; | |
config.map([ | |
{ route: ['', 'welcome'], name: 'welcome', moduleId: 'welcome', nav: true, title: 'Welcome' }, | |
{ route: 'users', name: 'users', moduleId: 'users', nav: true, title: 'Github Users' }, | |
{ route: 'child-router', name: 'child-router', moduleId: 'child-router', nav: true, title: 'Child Router' } | |
]); | |
this.router = router; | |
} | |
} |
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 {inject} from 'aurelia-framework'; | |
@inject(Element) | |
export class BlurImageCustomAttribute { | |
constructor(element) { | |
this.element = element; | |
} | |
valueChanged(newImage) { | |
if (newImage.complete) { | |
drawBlur(this.element, newImage); | |
} else { | |
newImage.onload = () => drawBlur(this.element, newImage); | |
} | |
} | |
} | |
/* eslint-disable */ | |
/* | |
This Snippet is using a modified Stack Blur js lib for blurring the header images. | |
*/ | |
/* | |
StackBlur - a fast almost Gaussian Blur For Canvas | |
Version: 0.5 | |
Author: Mario Klingemann | |
Contact: mario@quasimondo.com | |
Website: http://www.quasimondo.com/StackBlurForCanvas | |
Twitter: @quasimondo | |
In case you find this class useful - especially in commercial projects - | |
I am not totally unhappy for a small donation to my PayPal account | |
mario@quasimondo.de | |
Or support me on flattr: | |
https://flattr.com/thing/72791/StackBlur-a-fast-almost-Gaussian-Blur-Effect-for-CanvasJavascript | |
Copyright (c) 2010 Mario Klingemann | |
Permission is hereby granted, free of charge, to any person | |
obtaining a copy of this software and associated documentation | |
files (the "Software"), to deal in the Software without | |
restriction, including without limitation the rights to use, | |
copy, modify, merge, publish, distribute, sublicense, and/or sell | |
copies of the Software, and to permit persons to whom the | |
Software is furnished to do so, subject to the following | |
conditions: | |
The above copyright notice and this permission notice shall be | |
included in all copies or substantial portions of the Software. | |
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, | |
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES | |
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND | |
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT | |
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, | |
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING | |
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR | |
OTHER DEALINGS IN THE SOFTWARE. | |
*/ | |
var mul_table = [ | |
512,512,456,512,328,456,335,512,405,328,271,456,388,335,292,512, | |
454,405,364,328,298,271,496,456,420,388,360,335,312,292,273,512, | |
482,454,428,405,383,364,345,328,312,298,284,271,259,496,475,456, | |
437,420,404,388,374,360,347,335,323,312,302,292,282,273,265,512, | |
497,482,468,454,441,428,417,405,394,383,373,364,354,345,337,328, | |
320,312,305,298,291,284,278,271,265,259,507,496,485,475,465,456, | |
446,437,428,420,412,404,396,388,381,374,367,360,354,347,341,335, | |
329,323,318,312,307,302,297,292,287,282,278,273,269,265,261,512, | |
505,497,489,482,475,468,461,454,447,441,435,428,422,417,411,405, | |
399,394,389,383,378,373,368,364,359,354,350,345,341,337,332,328, | |
324,320,316,312,309,305,301,298,294,291,287,284,281,278,274,271, | |
268,265,262,259,257,507,501,496,491,485,480,475,470,465,460,456, | |
451,446,442,437,433,428,424,420,416,412,408,404,400,396,392,388, | |
385,381,377,374,370,367,363,360,357,354,350,347,344,341,338,335, | |
332,329,326,323,320,318,315,312,310,307,304,302,299,297,294,292, | |
289,287,285,282,280,278,275,273,271,269,267,265,263,261,259]; | |
var shg_table = [ | |
9, 11, 12, 13, 13, 14, 14, 15, 15, 15, 15, 16, 16, 16, 16, 17, | |
17, 17, 17, 17, 17, 17, 18, 18, 18, 18, 18, 18, 18, 18, 18, 19, | |
19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 20, 20, 20, | |
20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 21, | |
21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, | |
21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 22, 22, 22, 22, 22, 22, | |
22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, | |
22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 23, | |
23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, | |
23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, | |
23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, | |
23, 23, 23, 23, 23, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, | |
24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, | |
24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, | |
24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, | |
24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24 ]; | |
var BLUR_RADIUS = 40; | |
function stackBlurCanvasRGBA( canvas, top_x, top_y, width, height, radius ) | |
{ | |
if ( isNaN(radius) || radius < 1 ) return; | |
radius |= 0; | |
var context = canvas.getContext("2d"); | |
var imageData; | |
try { | |
imageData = context.getImageData( top_x, top_y, width, height ); | |
} catch(e) { | |
throw new Error("unable to access image data: " + e); | |
} | |
var pixels = imageData.data; | |
var x, y, i, p, yp, yi, yw, r_sum, g_sum, b_sum, a_sum, | |
r_out_sum, g_out_sum, b_out_sum, a_out_sum, | |
r_in_sum, g_in_sum, b_in_sum, a_in_sum, | |
pr, pg, pb, pa, rbs; | |
var div = radius + radius + 1; | |
var w4 = width << 2; | |
var widthMinus1 = width - 1; | |
var heightMinus1 = height - 1; | |
var radiusPlus1 = radius + 1; | |
var sumFactor = radiusPlus1 * ( radiusPlus1 + 1 ) / 2; | |
var stackStart = new BlurStack(); | |
var stack = stackStart; | |
for ( i = 1; i < div; i++ ) | |
{ | |
stack = stack.next = new BlurStack(); | |
if ( i == radiusPlus1 ) var stackEnd = stack; | |
} | |
stack.next = stackStart; | |
var stackIn = null; | |
var stackOut = null; | |
yw = yi = 0; | |
var mul_sum = mul_table[radius]; | |
var shg_sum = shg_table[radius]; | |
for ( y = 0; y < height; y++ ) | |
{ | |
r_in_sum = g_in_sum = b_in_sum = a_in_sum = r_sum = g_sum = b_sum = a_sum = 0; | |
r_out_sum = radiusPlus1 * ( pr = pixels[yi] ); | |
g_out_sum = radiusPlus1 * ( pg = pixels[yi+1] ); | |
b_out_sum = radiusPlus1 * ( pb = pixels[yi+2] ); | |
a_out_sum = radiusPlus1 * ( pa = pixels[yi+3] ); | |
r_sum += sumFactor * pr; | |
g_sum += sumFactor * pg; | |
b_sum += sumFactor * pb; | |
a_sum += sumFactor * pa; | |
stack = stackStart; | |
for( i = 0; i < radiusPlus1; i++ ) | |
{ | |
stack.r = pr; | |
stack.g = pg; | |
stack.b = pb; | |
stack.a = pa; | |
stack = stack.next; | |
} | |
for( i = 1; i < radiusPlus1; i++ ) | |
{ | |
p = yi + (( widthMinus1 < i ? widthMinus1 : i ) << 2 ); | |
r_sum += ( stack.r = ( pr = pixels[p])) * ( rbs = radiusPlus1 - i ); | |
g_sum += ( stack.g = ( pg = pixels[p+1])) * rbs; | |
b_sum += ( stack.b = ( pb = pixels[p+2])) * rbs; | |
a_sum += ( stack.a = ( pa = pixels[p+3])) * rbs; | |
r_in_sum += pr; | |
g_in_sum += pg; | |
b_in_sum += pb; | |
a_in_sum += pa; | |
stack = stack.next; | |
} | |
stackIn = stackStart; | |
stackOut = stackEnd; | |
for ( x = 0; x < width; x++ ) | |
{ | |
pixels[yi+3] = pa = (a_sum * mul_sum) >> shg_sum; | |
if ( pa != 0 ) | |
{ | |
pa = 255 / pa; | |
pixels[yi] = ((r_sum * mul_sum) >> shg_sum) * pa; | |
pixels[yi+1] = ((g_sum * mul_sum) >> shg_sum) * pa; | |
pixels[yi+2] = ((b_sum * mul_sum) >> shg_sum) * pa; | |
} else { | |
pixels[yi] = pixels[yi+1] = pixels[yi+2] = 0; | |
} | |
r_sum -= r_out_sum; | |
g_sum -= g_out_sum; | |
b_sum -= b_out_sum; | |
a_sum -= a_out_sum; | |
r_out_sum -= stackIn.r; | |
g_out_sum -= stackIn.g; | |
b_out_sum -= stackIn.b; | |
a_out_sum -= stackIn.a; | |
p = ( yw + ( ( p = x + radius + 1 ) < widthMinus1 ? p : widthMinus1 ) ) << 2; | |
r_in_sum += ( stackIn.r = pixels[p]); | |
g_in_sum += ( stackIn.g = pixels[p+1]); | |
b_in_sum += ( stackIn.b = pixels[p+2]); | |
a_in_sum += ( stackIn.a = pixels[p+3]); | |
r_sum += r_in_sum; | |
g_sum += g_in_sum; | |
b_sum += b_in_sum; | |
a_sum += a_in_sum; | |
stackIn = stackIn.next; | |
r_out_sum += ( pr = stackOut.r ); | |
g_out_sum += ( pg = stackOut.g ); | |
b_out_sum += ( pb = stackOut.b ); | |
a_out_sum += ( pa = stackOut.a ); | |
r_in_sum -= pr; | |
g_in_sum -= pg; | |
b_in_sum -= pb; | |
a_in_sum -= pa; | |
stackOut = stackOut.next; | |
yi += 4; | |
} | |
yw += width; | |
} | |
for ( x = 0; x < width; x++ ) | |
{ | |
g_in_sum = b_in_sum = a_in_sum = r_in_sum = g_sum = b_sum = a_sum = r_sum = 0; | |
yi = x << 2; | |
r_out_sum = radiusPlus1 * ( pr = pixels[yi]); | |
g_out_sum = radiusPlus1 * ( pg = pixels[yi+1]); | |
b_out_sum = radiusPlus1 * ( pb = pixels[yi+2]); | |
a_out_sum = radiusPlus1 * ( pa = pixels[yi+3]); | |
r_sum += sumFactor * pr; | |
g_sum += sumFactor * pg; | |
b_sum += sumFactor * pb; | |
a_sum += sumFactor * pa; | |
stack = stackStart; | |
for( i = 0; i < radiusPlus1; i++ ) | |
{ | |
stack.r = pr; | |
stack.g = pg; | |
stack.b = pb; | |
stack.a = pa; | |
stack = stack.next; | |
} | |
yp = width; | |
for( i = 1; i <= radius; i++ ) | |
{ | |
yi = ( yp + x ) << 2; | |
r_sum += ( stack.r = ( pr = pixels[yi])) * ( rbs = radiusPlus1 - i ); | |
g_sum += ( stack.g = ( pg = pixels[yi+1])) * rbs; | |
b_sum += ( stack.b = ( pb = pixels[yi+2])) * rbs; | |
a_sum += ( stack.a = ( pa = pixels[yi+3])) * rbs; | |
r_in_sum += pr; | |
g_in_sum += pg; | |
b_in_sum += pb; | |
a_in_sum += pa; | |
stack = stack.next; | |
if( i < heightMinus1 ) | |
{ | |
yp += width; | |
} | |
} | |
yi = x; | |
stackIn = stackStart; | |
stackOut = stackEnd; | |
for ( y = 0; y < height; y++ ) | |
{ | |
p = yi << 2; | |
pixels[p+3] = pa = (a_sum * mul_sum) >> shg_sum; | |
if ( pa > 0 ) | |
{ | |
pa = 255 / pa; | |
pixels[p] = ((r_sum * mul_sum) >> shg_sum ) * pa; | |
pixels[p+1] = ((g_sum * mul_sum) >> shg_sum ) * pa; | |
pixels[p+2] = ((b_sum * mul_sum) >> shg_sum ) * pa; | |
} else { | |
pixels[p] = pixels[p+1] = pixels[p+2] = 0; | |
} | |
r_sum -= r_out_sum; | |
g_sum -= g_out_sum; | |
b_sum -= b_out_sum; | |
a_sum -= a_out_sum; | |
r_out_sum -= stackIn.r; | |
g_out_sum -= stackIn.g; | |
b_out_sum -= stackIn.b; | |
a_out_sum -= stackIn.a; | |
p = ( x + (( ( p = y + radiusPlus1) < heightMinus1 ? p : heightMinus1 ) * width )) << 2; | |
r_sum += ( r_in_sum += ( stackIn.r = pixels[p])); | |
g_sum += ( g_in_sum += ( stackIn.g = pixels[p+1])); | |
b_sum += ( b_in_sum += ( stackIn.b = pixels[p+2])); | |
a_sum += ( a_in_sum += ( stackIn.a = pixels[p+3])); | |
stackIn = stackIn.next; | |
r_out_sum += ( pr = stackOut.r ); | |
g_out_sum += ( pg = stackOut.g ); | |
b_out_sum += ( pb = stackOut.b ); | |
a_out_sum += ( pa = stackOut.a ); | |
r_in_sum -= pr; | |
g_in_sum -= pg; | |
b_in_sum -= pb; | |
a_in_sum -= pa; | |
stackOut = stackOut.next; | |
yi += width; | |
} | |
} | |
context.putImageData( imageData, top_x, top_y ); | |
} | |
function BlurStack() | |
{ | |
this.r = 0; | |
this.g = 0; | |
this.b = 0; | |
this.a = 0; | |
this.next = null; | |
} | |
function drawBlur(canvas, image) { | |
var w = canvas.width; | |
var h = canvas.height; | |
var canvasContext = canvas.getContext('2d'); | |
canvasContext.drawImage(image, 0, 0, w, h); | |
stackBlurCanvasRGBA(canvas, 0, 0, w, h, BLUR_RADIUS); | |
}; |
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"> | |
<h2>${heading}</h2> | |
<div> | |
<div class="col-md-2"> | |
<ul class="well 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 class="col-md-10" style="padding: 0"> | |
<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
export class ChildRouter { | |
heading = 'Child Router'; | |
configureRouter(config, router) { | |
config.map([ | |
{ route: ['', 'welcome'], name: 'welcome', moduleId: 'welcome', nav: true, title: 'Welcome' }, | |
{ route: 'users', name: 'users', moduleId: 'users', nav: true, title: 'Github Users' }, | |
{ route: 'child-router', name: 'child-router', moduleId: 'child-router', nav: true, title: 'Child Router' } | |
]); | |
this.router = router; | |
} | |
} |
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> | |
<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" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> | |
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> | |
</head> | |
<body aurelia-app="main" style="margin-top: 50px"> | |
Loading... | |
<script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script> | |
<script src="https://jdanyow.github.io/rjs-bundle/config.js"></script> | |
<script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script> | |
<script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script> | |
<script> | |
require(['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
export function configure(aurelia) { | |
aurelia.use | |
.standardConfiguration() | |
.developmentLogging(); | |
//Uncomment the line below to enable animation. | |
//aurelia.use.plugin('aurelia-animator-css'); | |
//if the css animator is enabled, add swap-order="after" to all router-view elements | |
//Anyone wanting to use HTMLImports to load views, will need to install the following plugin. | |
//aurelia.use.plugin('aurelia-html-import-template-loader') | |
aurelia.start().then(() => aurelia.setRoot()); | |
} |
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="blur-image"></require> | |
<section class="au-animate"> | |
<h2>${heading}</h2> | |
<div class="row au-stagger"> | |
<div class="col-sm-6 col-md-3 card-container au-animate" repeat.for="user of users"> | |
<div class="card"> | |
<canvas class="header-bg" width="250" height="70" blur-image.bind="image"></canvas> | |
<div class="avatar"> | |
<img src.bind="user.avatar_url" crossorigin ref="image"/> | |
</div> | |
<div class="content"> | |
<p class="name">${user.login}</p> | |
<p><a target="_blank" class="btn btn-default" href.bind="user.html_url">Contact</a></p> | |
</div> | |
</div> | |
</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 {inject} from 'aurelia-framework'; | |
import {HttpClient} from 'aurelia-fetch-client'; | |
import 'fetch'; | |
@inject(HttpClient) | |
export class Users { | |
heading = 'Github Users'; | |
users = []; | |
constructor(http) { | |
http.configure(config => { | |
config | |
.useStandardConfiguration() | |
.withBaseUrl('https://api.github.com/'); | |
}); | |
this.http = http; | |
} | |
activate() { | |
return this.http.fetch('users') | |
.then(response => response.json()) | |
.then(users => this.users = users); | |
} | |
} |
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"> | |
<h2>${heading}</h2> | |
<form role="form" submit.delegate="submit()"> | |
<div class="form-group"> | |
<label for="fn">First Name</label> | |
<input type="text" value.bind="firstName" class="form-control" id="fn" placeholder="first name"> | |
</div> | |
<div class="form-group"> | |
<label for="ln">Last Name</label> | |
<input type="text" value.bind="lastName" class="form-control" id="ln" placeholder="last name"> | |
</div> | |
<div class="form-group"> | |
<label>Full Name</label> | |
<p class="help-block">${fullName | upper}</p> | |
</div> | |
<button type="submit" class="btn btn-default">Submit</button> | |
</form> | |
</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 {computedFrom} from 'aurelia-framework'; | |
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?'); | |
} | |
} | |
} | |
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