Skip to content

Instantly share code, notes, and snippets.

@Vheissu
Last active August 26, 2024 05:39
Show Gist options
  • Save Vheissu/c99fe051feecf7ea20f57de042c51bc0 to your computer and use it in GitHub Desktop.
Save Vheissu/c99fe051feecf7ea20f57de042c51bc0 to your computer and use it in GitHub Desktop.
Dynamic component example with bi-directional value converters
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dumber Gist</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<base href="/">
</head>
<!--
Dumber gist uses dumber bundler, the default bundle file
is /dist/entry-bundle.js.
The starting module is pointed to aurelia-bootstrapper
(data-main attribute on script) for Aurelia,
The aurelia bootstrapper then loads up user module "main"
(aurelia-app attribute on <body>) which is your src/main.js.
-->
<body aurelia-app="main">
<script src="/dist/entry-bundle.js" data-main="aurelia-bootstrapper"></script>
</body>
</html>
{
"dependencies": {
"aurelia-bootstrapper": "latest",
"moment": "2.22.2",
"numeral": "2.0.6"
}
}
<template>
<require from="./rgb-to-hex"></require>
<label for="color">Select Color:</label>
<input id="color" type="color" value.bind="rgb | rgbToHex">
<br> r: ${rgb.r}, g:${rgb.g}, b:${rgb.b}
</template>
export class App {
rgb = { r: 146, g: 39, b: 143 };
}
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging('info');
aurelia.start().then(() => aurelia.setRoot());
}
export class RgbToHexValueConverter {
toView(rgb) {
return "#" + (
(1 << 24) + (rgb.r << 16) + (rgb.g << 8) + rgb.b
).toString(16).slice(1);
}
fromView(hex) {
let exp = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i,
result = exp.exec(hex);
return {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
};
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment