Skip to content

Instantly share code, notes, and snippets.

@gimerstedt
Created July 13, 2020 18:39
Show Gist options
  • Select an option

  • Save gimerstedt/e881ca7333082fe5ec3c4d4208c9ce64 to your computer and use it in GitHub Desktop.

Select an option

Save gimerstedt/e881ca7333082fe5ec3c4d4208c9ce64 to your computer and use it in GitHub Desktop.
testing
<!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.ts.
-->
<body aurelia-app="main">
<script src="/dist/entry-bundle.js" data-main="aurelia-bootstrapper"></script>
</body>
</html>
{
"dependencies": {
"aurelia-bootstrapper": "^2.3.3"
}
}
label {
display: block;
}
<template>
<require from="./app.css"></require>
<!-- Try to create a css/scss/sass/less file then require it here -->
<h1>${message}</h1>
<form>
<label>
<input type="checkbox" checked.bind="opts.soundEnabled"/>
Sound enabled
</label>
<label>
<input type="checkbox" checked.bind="opts.notificationsEnabled"/>
Notifications enabled
</label>
<div if.bind="opts.notificationsEnabled">
<label>
<input type="radio" name="sound" value="default" checked.bind="sound"/>
Default sound
</label>
<label>
<input type="radio" name="sound" value="custom" checked.bind="sound"/>
Custom sound
</label>
<input if.bind="sound === 'custom'" type="file" files.bind="selectedFiles"/>
</div>
</form>
<pre>
{
"soundEnabled": ${opts.soundEnabled},
"notificationsEnabled": ${opts.notificationsEnabled},
"customSoundPath": ${opts.customSoundPath === undefined ? "undefined" : '"' + opts.customSoundPath + '"'},
}
</pre>
</template>
import {computedFrom, observable} from 'aurelia-framework'
type opts = {
soundEnabled?: boolean
notificationsEnabled?: boolean
customSoundPath?: string
}
export class App {
private message: string = 'Hello Aurelia!';
opts: opts = {
soundEnabled: false,
notificationsEnabled: true,
customSoundPath: undefined,
}
@observable sound = 'default'
@observable selectedFiles: FileList
soundChanged(n) {
this.opts.customSoundPath = n === 'default' ? undefined : ""
}
selectedFilesChanged(n: FileList) {
if(!n) return
this.opts.customSoundPath = Array.from(n).map(a => a.name).join(',')
}
}
import {Aurelia} from 'aurelia-framework';
export function configure(aurelia: Aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging('info');
aurelia.start().then(() => aurelia.setRoot());
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment