Skip to content

Instantly share code, notes, and snippets.

@jasoncarreira

jasoncarreira/app.html

Forked from Thanood/app.html
Last active June 1, 2017 18:50
Show Gist options
  • Save jasoncarreira/ad52b4a40be13f8209a2014b04edad7f to your computer and use it in GitHub Desktop.
Save jasoncarreira/ad52b4a40be13f8209a2014b04edad7f to your computer and use it in GitHub Desktop.
Download ZIP
Aurelia-Materialize bridge input fields
Raw
app.html
<template>
<require from="./au-input"></require>
<md-colors></md-colors>
<au-input label="A" value.bind="foo.a" percent.bind="foo.percent" salary.bind="foo.salary"></au-input>
<au-input label="B" value.bind="foo.b" percent.bind="foo.percent" salary.bind="foo.salary"></au-input>
<md-input md-label="Test" md-value.bind="foo.a & validate" md-validate="true"
md-validate-success="good">
<i md-prefix if.bind="foo.percent">%</i>
<i md-prefix if.bind="!foo.percent">$</i>
</md-input>
<button md-button md-waves="color: light;" click.delegate="switch()">Switch</button>
<button md-button="disabled.bind: foo.isClean()" md-waves="color: light;" click.delegate="validateModel()">Validate</button>
<p>Foo.percent = ${foo.percent}</p>
<p>Foo.numberOne = ${foo.a}</p>
<p>Foo.numberTwo = ${foo.b}</p>
<h5>${message}</h5>
<ul style="margin-top: 15px;" show.bind="controller.errors.length">
<li repeat.for="error of controller.errors">
<a href="#" click.delegate="error.target.focus()">
${error.message}
</a>
</li>
</ul>
</template>
Raw
app.js
import {inject, NewInstance} from 'aurelia-dependency-injection';
import {ValidationController, ValidationRules} from 'aurelia-validation';
import { MaterializeFormValidationRenderer } from 'aurelia-materialize-bridge';
import {Foo} from './foo.js';
@inject(NewInstance.of(ValidationController))
export class App {
message = '';
foo = new Foo();
controller = null;
clean = this.foo.isClean();
constructor(controller) {
this.controller = controller;
this.controller.addRenderer(new MaterializeFormValidationRenderer());
this.addRules(this.foo.percent);
}
addRules(percent) {
if (percent) {
ValidationRules
.ensure("a").satisfies((value, obj) => {
console.log("Validating value " + value);
return parseInt(value) <= 5;
}).withMessage("A must be no more than 5%")
.ensure("b").satisfies((value, obj) => {
console.log("Validating value " + value);
return parseInt(value) <= 10;
}).withMessage("B must be no more than 10%")
.on(this.foo);
} else {
ValidationRules
.ensure("a").satisfies((value, obj) => {
console.log("Validating value " + value);
return parseInt(value) <= 2500;
}).withMessage("A must be no more than $2,500")
.ensure("b").satisfies((value, obj) => {
console.log("Validating value " + value);
return parseInt(value) <= 5000;
}).withMessage("B must be no more than $5,000")
.on(this.foo);
}
}
switch() {
this.foo.percent = !this.foo.percent;
this.addRules(this.foo.percent);
}
validateModel() {
this.controller.validate().then(v => {
if (v.valid) {
this.message = 'All is good!';
} else {
this.message = 'You have errors!';
}
});
}
}
Raw
au-input.html
<template>
<md-input type="number" md-label.bind="label" md-value.bind="value & validate" md-validate="true"
md-validate-success="good">
<i md-prefix if.bind="percent">%</i>
<i md-prefix if.bind="!percent">$</i>
</md-input>
</template>
Raw
au-input.js
import {observable,bindable,bindingMode, computedFrom} from 'aurelia-framework';
export class AuInput {
suppressValueChanged: boolean;
@observable
dollarValue: number;
dollarValueChanged(newValue,oldValue){
console.log('AuInput: dollarValueChanged: newValue = ' + newValue + ' oldValue = ' + oldValue + ' state = ' + JSON.stringify(this));
if(this.suppressValueChanged){
return;
}
this.suppressValueChanged = true;
this.value = this.dollarValue;
this.suppressValueChanged = false;
}
@observable
percentValue: number;
percentValueChanged(newValue,oldValue){
console.log('AuInput: percentValueChanged: newValue = ' + newValue + ' oldValue = ' + oldValue + ' state = ' + JSON.stringify(this));
if(this.suppressValueChanged){
return;
}
this.suppressValueChanged = true;
this.value = this.percentValue;
this.suppressValueChanged = false;
}
@bindable({defaultBindingMode: bindingMode.twoWay})
value: number;
valueChanged(newValue, oldValue) {
if(this.suppressValueChanged || !this.salary){
return;
}
this.suppressValueChanged = true;
console.log('AuInput: valueChanged: newValue = ' + newValue + ' oldValue = ' + oldValue + ' state = ' + JSON.stringify(this));
if (this.percent) {
this.percentValue = this.value;
this.dollarValue = this.percentValue * this.salary / 100;
} else {
console.log('here');
this.dollarValue = this.value;
this.percentValue = this.dollarValue / this.salary * 100;
}
this.suppressValueChanged = false;
}
@bindable
salary: number;
salaryChanged(){
if(!this.value){
return;
}
this.valueChanged();
}
@bindable label : string;
prefix : string;
suffix : string;
@bindable
percent: boolean;
percentChanged(newValue, oldValue) {
console.log('AuInput: percentChanged: newValue = ' + newValue + ' oldValue = ' + oldValue + ' state = ' + JSON.stringify(this));
if (this.percent) {
this.suffix = "%";
this.prefix = null;
this.percentValueChanged();
} else {
this.suffix = null;
this.prefix = "$";
this.dollarValueChanged();
}
}
}
Raw
foo.js
export class Foo {
percent = true;
a = 1000;
b = 2000;
salary = 50000;
isClean() : boolean {
return this.percent && (this.a == 1000) && (this.b == 2000) && (this.salary == 50000);
}
}
Raw
index.html
<!doctype html>
<html>
<head>
<title>Aurelia</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
</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://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 src="https://rawgit.com/aurelia-ui-toolkits/aurelia-materialize-bundles/0.27.0/config2.js"></script>
<script>
System.import('aurelia-bootstrapper');
System.import('materialize/dist/css/materialize.css!');
</script>
</body>
</html>
Raw
main.js
/*******************************************************************************
* The following two lines enable async/await without using babel's
* "runtime" transformer. Uncomment the lines if you intend to use async/await.
*
* More info here: https://github.com/jdanyow/aurelia-plunker/issues/2
*/
//import regeneratorRuntime from 'babel-runtime/regenerator';
//window.regeneratorRuntime = regeneratorRuntime;
/******************************************************************************/
import 'materialize';
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging()
.plugin('aurelia-validation')
.plugin('aurelia-materialize-bridge', bridge => bridge.useAll() );
aurelia.start().then(a => a.setRoot());
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment