Skip to content

Commit 211d5fa

Browse files
Thanoodtraviskaufman
Thanood
authored and
traviskaufman
committed
feat(examples): add Aurelia example with buttons, checkboxes and ripple (google#4895)
Thank you @Thanood !
1 parent afb264c commit 211d5fa

21 files changed

+731
-0
lines changed

‎examples/aurelia/.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.awcache/
2+
.vscode/settings.json
3+
yarn.lock

‎examples/aurelia/README.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# MDLv2 with aurelia-skeleton-webpack
2+
3+
## Running the app
4+
5+
To run the app execute the following command:
6+
7+
```shell
8+
npm install
9+
npm start
10+
```
11+
12+
This command starts the webpack development server that serves the build bundles.
13+
You can now browse the skeleton app at http://localhost:9000. Changes in the code
14+
will automatically build and reload the app.

‎examples/aurelia/custom_typings/aurelia-protractor.d.ts

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
// Type definitions for Aurelia Protractor extensions
2+
// Project: https://github.com/aurelia/skeleton-navigation
3+
// Definitions by: Enrapt <https://github.com/Enrapt>, Kirill Grishin <https://github.com/KirillGrishin>
4+
5+
// Extend existing interfaces with additional functionality from Aurelia Protractor Extender (aurelia.protractor.js)
6+
import * as protractor from 'protractor'
7+
declare module 'protractor' {
8+
interface Browser {
9+
loadAndWaitForAureliaPage(url: string): any;
10+
waitForRouterComplete(): any;
11+
12+
// this should eventually be defined externally:
13+
switchTo(): any;
14+
}
15+
16+
interface ProtractorBy {
17+
valueBind(bindTarget: string): Locator;
18+
}
19+
}

‎examples/aurelia/custom_typings/fetch.d.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/// <reference path="../node_modules/@types/whatwg-fetch/index.d.ts" />
2+
interface URLSearchParams {}
3+
declare module "isomorphic-fetch" {
4+
export = fetch;
5+
}

‎examples/aurelia/custom_typings/offline-plugin.d.ts

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
declare module "offline-plugin/runtime" {
2+
/**
3+
* Note: Events must be explicitly enabled for each tool (ServiceWorker/AppCache) in their options.
4+
*/
5+
export interface InstallOptions {
6+
/**
7+
* Event called exactly once when ServiceWorker or AppCache is installed. Can be useful to display "App is ready for offline usage" message.
8+
*/
9+
onInstalled: ()=>void;
10+
/**
11+
* Not supported for AppCache
12+
*
13+
* Event called when update is found and browsers started updating process. At this moment, some assets are downloading.
14+
*/
15+
onUpdating: ()=>void;
16+
/**
17+
* Event called when onUpdating phase finished. All required assets are downloaded at this moment and are ready to be updated. Call runtime.applyUpdate() to apply update.
18+
*/
19+
onUpdateReady: ()=>void;
20+
/**
21+
* Event called when upUpdating phase failed by some reason. Nothing is downloaded at this moment and current update process in your code should be canceled or ignored.
22+
*/
23+
onUpdateFailed: ()=>void;
24+
/**
25+
* Event called when update is applied, either by calling runtime.applyUpdate() or some other way by a browser itself.
26+
*/
27+
onUpdated: ()=>void;
28+
}
29+
30+
export function install(options?: InstallOptions);
31+
export function applyUpdate();
32+
}

‎examples/aurelia/custom_typings/system.d.ts

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
declare module 'system' {
2+
import fetch = require('isomorphic-fetch');
3+
import offline = require('offline-plugin/runtime');
4+
import * as Aurelia from 'aurelia-framework';
5+
6+
/*
7+
* List your dynamically imported modules to get typing support
8+
*/
9+
interface System {
10+
import(name: string): Promise<any>;
11+
import(name: 'aurelia-framework'): Promise<typeof Aurelia>;
12+
import(name: 'isomorphic-fetch'): Promise<typeof fetch>;
13+
import(name: 'offline-plugin/runtime'): Promise<typeof offline>;
14+
}
15+
16+
global {
17+
var System: System;
18+
}
19+
}

‎examples/aurelia/index.html

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title><%- webpackConfig.metadata.title %></title>
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<base href="<%- webpackConfig.metadata.baseUrl %>">
7+
<!-- imported CSS are concatenated and added automatically -->
8+
</head>
9+
<body aurelia-app="main">
10+
<div class="splash">
11+
<div class="message"><%- webpackConfig.metadata.title %></div>
12+
<i class="fa fa-spinner fa-spin"></i>
13+
</div>
14+
<script>
15+
document.addEventListener('DOMContentLoaded', function() { console.log('document.ready'); }, false);
16+
</script>
17+
<% if (webpackConfig.metadata.ENV === 'development') { %>
18+
<!-- Webpack Dev Server reload -->
19+
<script src="/webpack-dev-server.js"></script>
20+
<% } %>
21+
</body>
22+
</html>

‎examples/aurelia/package.json

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
{
2+
"name": "aurelia-skeleton-navigation-webpack",
3+
"version": "1.0.0",
4+
"description": "A starter kit for building a standard navigation-style app with Aurelia and webpack.",
5+
"main": "dist/electron.js",
6+
"productName": "Aurelia Electron",
7+
"scripts": {
8+
"test": "cross-env NODE_ENV=test ./node_modules/karma/bin/karma start test/karma.conf.js",
9+
"webdriver:update": "cross-env ./node_modules/.bin/webdriver-manager update",
10+
"webdriver:start": "cross-env ./node_modules/.bin/webdriver-manager start",
11+
"pree2e": "npm run webdriver:update -- --standalone",
12+
"e2e": "concurrently --kill-others \"npm run e2e:start-when-ready\" \"cross-env WEBPACK_PORT=19876 npm start\"",
13+
"e2e:start-when-ready": "wait-on --timeout 20000 http-get://localhost:19876/index.html && npm run e2e:start",
14+
"e2e:start": "cross-env ./node_modules/.bin/protractor test/protractor.conf.js",
15+
"e2e:live": "npm run e2e:start -- --elementExplorer",
16+
"clean": "npm cache clean && rimraf node_modules test/coverage dist",
17+
"clean:dist": "rimraf dist",
18+
"preclean:install": "npm run clean",
19+
"clean:install": "npm set progress=false && npm install",
20+
"preclean:start": "npm run clean",
21+
"clean:start": "npm start",
22+
"watch": "npm run watch:dev",
23+
"watch:dev": "npm run build:dev -- --watch",
24+
"watch:dev:hmr": "npm run watch:dev -- --hot",
25+
"watch:test": "npm run test -- --auto-watch --no-single-run",
26+
"watch:prod": "npm run build:prod -- --watch",
27+
"build": "cross-env NODE_ENV=development npm run build:dev",
28+
"prebuild:dev": "npm run clean:dist",
29+
"build:dev": "cross-env NODE_ENV=development npm run webpack -- --progress --profile",
30+
"prebuild:prod": "npm run clean:dist",
31+
"build:prod": "cross-env NODE_ENV=production npm run webpack -- --progress --profile",
32+
"start": "npm run server:dev",
33+
"server": "npm run server:dev",
34+
"server:dev": "cross-env NODE_ENV=development node ./node_modules/webpack-dev-server/bin/webpack-dev-server --inline --progress --profile --watch",
35+
"server:dev:hmr": "npm run server:dev -- --hot",
36+
"server:prod": "http-server dist --cors",
37+
"webpack": "cross-env ./node_modules/.bin/webpack",
38+
"webpack-dev-server": "cross-env ./node_modules/.bin/webpack-dev-server"
39+
},
40+
"repository": {
41+
"type": "git",
42+
"url": "git+ssh://git@github.com/aurelia/skeleton-navigation.git"
43+
},
44+
"keywords": [
45+
"aurelia",
46+
"skeleton",
47+
"navigation",
48+
"webpack"
49+
],
50+
"license": "CC0-1.0",
51+
"author": "Rob Eisenberg <rob@bluespire.com> (http://robeisenberg.com/)",
52+
"contributors": [
53+
{
54+
"name": "Arjen de Blok"
55+
},
56+
{
57+
"name": "Bazyli Brzóska <bazyli.brzoska@gmail.com> (https://invent.life)"
58+
}
59+
],
60+
"bugs": {
61+
"url": "https://github.com/aurelia/skeleton-navigation/issues"
62+
},
63+
"homepage": "https://github.com/aurelia/skeleton-navigation#readme",
64+
"aurelia": {
65+
"build": {
66+
"resources": []
67+
}
68+
},
69+
"dependencies": {
70+
"aurelia-bootstrapper-webpack": "^1.0.0",
71+
"aurelia-event-aggregator": "^1.0.0",
72+
"aurelia-fetch-client": "^1.0.0",
73+
"aurelia-framework": "^1.0.0",
74+
"aurelia-history-browser": "^1.0.0",
75+
"aurelia-loader-webpack": "^1.0.0",
76+
"aurelia-logging-console": "^1.0.0",
77+
"aurelia-pal-browser": "^1.0.0",
78+
"aurelia-polyfills": "^1.0.0",
79+
"aurelia-route-recognizer": "^1.0.0",
80+
"aurelia-router": "^1.0.2",
81+
"aurelia-templating-binding": "^1.0.0",
82+
"aurelia-templating-resources": "^1.0.0",
83+
"aurelia-templating-router": "^1.0.0",
84+
"bluebird": "^3.4.1",
85+
"bootstrap": "^3.3.7",
86+
"font-awesome": "^4.6.3",
87+
"isomorphic-fetch": "^2.2.1",
88+
"jquery": "^3.1.0"
89+
},
90+
"devDependencies": {
91+
"@easy-webpack/config-aurelia": "^2.0.1",
92+
"@easy-webpack/config-babel": "^2.0.2",
93+
"@easy-webpack/config-common-chunks-simple": "^2.0.1",
94+
"@easy-webpack/config-copy-files": "^1.0.0",
95+
"@easy-webpack/config-css": "^2.3.2",
96+
"@easy-webpack/config-env-development": "^2.1.1",
97+
"@easy-webpack/config-env-production": "^2.1.0",
98+
"@easy-webpack/config-external-source-maps": "^2.0.1",
99+
"@easy-webpack/config-fonts-and-images": "^1.2.1",
100+
"@easy-webpack/config-generate-index-html": "^2.0.1",
101+
"@easy-webpack/config-global-bluebird": "^1.2.0",
102+
"@easy-webpack/config-global-jquery": "^1.2.0",
103+
"@easy-webpack/config-global-regenerator": "^1.2.0",
104+
"@easy-webpack/config-html": "^2.0.2",
105+
"@easy-webpack/config-json": "^2.0.2",
106+
"@easy-webpack/config-source-map-support": "^1.0.0",
107+
"@easy-webpack/config-test-coverage-istanbul": "^2.0.2",
108+
"@easy-webpack/config-typescript": "^2.1.2",
109+
"@easy-webpack/config-uglify": "^2.1.0",
110+
"@easy-webpack/core": "^1.3.2",
111+
"@types/bluebird": "^2.0.29",
112+
"@types/jasmine": "^2.2.30",
113+
"@types/whatwg-fetch": "0.0.27",
114+
"aurelia-tools": "^0.2.4",
115+
"babel-plugin-transform-decorators-legacy": "^1.3.4",
116+
"babel-preset-es2015": "^6.9.0",
117+
"babel-preset-es2015-loose": "^7.0.0",
118+
"babel-preset-es2015-loose-native-modules": "^1.0.0",
119+
"babel-preset-stage-1": "^6.5.0",
120+
"babel-register": "^6.11.6",
121+
"concurrently": "^2.2.0",
122+
"cross-env": "^2.0.0",
123+
"http-server": "^0.9.0",
124+
"jasmine-core": "^2.4.1",
125+
"karma": "^1.1.2",
126+
"karma-chrome-launcher": "^1.0.1",
127+
"karma-coverage": "^1.1.1",
128+
"karma-jasmine": "^1.0.2",
129+
"karma-mocha-reporter": "^2.0.4",
130+
"karma-remap-istanbul": "^0.1.1",
131+
"karma-sourcemap-loader": "^0.3.7",
132+
"karma-webpack": "^1.7.0",
133+
"protractor": "4.0.0",
134+
"rimraf": "^2.5.4",
135+
"ts-node": "^1.2.1",
136+
"typescript": "^2.0.0",
137+
"wait-on": "^1.5.2",
138+
"webpack": "2.1.0-beta.22",
139+
"webpack-dev-server": ">=2.1.0-beta.0 || ^2.1.0"
140+
},
141+
"babel": {
142+
"presets": [
143+
"es2015",
144+
"stage-1"
145+
]
146+
}
147+
}

‎examples/aurelia/src/app.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<template>
2+
<div class="page-host">
3+
<router-view></router-view>
4+
</div>
5+
</template>

‎examples/aurelia/src/app.ts

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import {Aurelia} from 'aurelia-framework';
2+
import {Router, RouterConfiguration} from 'aurelia-router';
3+
4+
export class App {
5+
router: Router;
6+
7+
configureRouter(config: RouterConfiguration, router: Router) {
8+
config.title = 'Aurelia';
9+
config.map([
10+
{ route: ['', 'welcome'], name: 'welcome', moduleId: './welcome', nav: true, title: 'Welcome' }
11+
]);
12+
13+
this.router = router;
14+
}
15+
}

‎examples/aurelia/src/components/button/mdl-button.ts

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import {bindable, customAttribute, inject, DOM} from 'aurelia-framework';
2+
3+
// Use webpack's require function to load the css
4+
const MDL_BUTTON_STYLES = require('mdl-button-styles');
5+
DOM.injectStyles(MDL_BUTTON_STYLES);
6+
7+
@customAttribute('mdl-button')
8+
@inject(Element)
9+
export class MdlButton {
10+
@bindable() accent = false;
11+
@bindable() raised = false;
12+
13+
constructor(private element: Element) { }
14+
15+
attached() {
16+
this.element.classList.add('mdl-button');
17+
}
18+
19+
detached() {
20+
const classes = [
21+
'mdl-button',
22+
'mdl-button--accent',
23+
'mdl-button--raised'
24+
];
25+
this.element.classList.remove(...classes);
26+
}
27+
28+
accentChanged(newValue) {
29+
if (newValue) {
30+
this.element.classList.add('mdl-button--accent');
31+
} else {
32+
this.element.classList.remove('mdl-button--accent');
33+
}
34+
}
35+
36+
raisedChanged(newValue) {
37+
if (newValue) {
38+
this.element.classList.add('mdl-button--raised');
39+
} else {
40+
this.element.classList.remove('mdl-button--raised');
41+
}
42+
}
43+
}

‎examples/aurelia/src/components/checkbox/mdl-checkbox.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<template class="mdl-checkbox">
2+
<input type="checkbox" checked.bind="isChecked" change.delegate="handleChange($event)" class="mdl-checkbox__native-control">
3+
<div class="mdl-checkbox__background">
4+
<svg version="1.1"
5+
class="mdl-checkbox__checkmark"
6+
xmlns="http://www.w3.org/2000/svg"
7+
viewBox="0 0 24 24">
8+
<path class="mdl-checkbox__checkmark__path"
9+
fill="none"
10+
stroke="white"
11+
d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
12+
</svg>
13+
<div class="mdl-checkbox__mixedmark"></div>
14+
</div>
15+
</template>

‎examples/aurelia/src/components/checkbox/mdl-checkbox.ts

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import {inject, bindable, bindingMode, DOM} from 'aurelia-framework';
2+
3+
// Since we don't have typings (yet) we require mdl-checkbox manually.
4+
// const MDLCheckboxModule = require('mdl-checkbox');
5+
const {MDLCheckbox} = require('mdl-checkbox');
6+
// Use webpack's require function to load the css
7+
const MDL_CHECKBOX_STYLES = require('mdl-checkbox-styles');
8+
DOM.injectStyles(MDL_CHECKBOX_STYLES);
9+
10+
@inject(Element)
11+
export class MdlCheckbox {
12+
@bindable({ defaultBindingMode: bindingMode.twoWay }) isChecked = false;
13+
@bindable({ defaultBindingMode: bindingMode.twoWay }) isIndeterminate = false;
14+
@bindable() isDisabled = false;
15+
mdlCheckbox;
16+
17+
constructor(private element: Element) { }
18+
19+
bind() {
20+
this.mdlCheckbox = new MDLCheckbox(this.element);
21+
}
22+
23+
handleChange(e: Event) {
24+
// stop propagation so we're able to fire our own event when data-binding changes checked value
25+
e.stopPropagation();
26+
}
27+
28+
isCheckedChanged(newValue) {
29+
this.isIndeterminate = false;
30+
const event = new CustomEvent('change', { bubbles: true, detail: { value: newValue }});
31+
this.element.dispatchEvent(event);
32+
}
33+
34+
isDisabledChanged(newValue) {
35+
this.mdlCheckbox.disabled = !!newValue;
36+
}
37+
38+
isIndeterminateChanged(newValue) {
39+
this.mdlCheckbox.indeterminate = !!newValue;
40+
}
41+
}

0 commit comments

Comments
 (0)