Skip to content

Instantly share code, notes, and snippets.

@timfish
Created November 15, 2020 23:19
Show Gist options
  • Save timfish/09024f7ea19045d03144b411e1f2e33e to your computer and use it in GitHub Desktop.
Save timfish/09024f7ea19045d03144b411e1f2e33e to your computer and use it in GitHub Desktop.
ip-address
<!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"
}
}
<template>
<require from="./ip-address"></require>
<!-- Try to create a css/scss/sass/less file then require it here -->
<h1>${message}</h1>
<p>Enter the IP address:</p>
<ip-address ip-address.bind="ipAddress"></ip-address>
<br />
<p>Here is the IP address:</p>
<p>${ipAddress || 'undefined'}</p>
<button click.delegate="set()">Set it to 1.2.3.4</button>
</template>
export class App {
public message: string = 'Hello Aurelia!';
public ipAddress: string = '';
public set() {
this.ipAddress = '1.2.3.4';
}
<template>
<require from="./ip-address.scss"></require>
<div class="cont ${hasFocus ?'focus':''}">
<input
type="text"
class="form-control form-control-sm mono"
focus.delegate="inputFocus()"
click.delegate="inputFocus()"
blur.trigger="lostFocus()"
value.bind="ip1"
keyup.delegate="changed($event)"
/>
<span>.</span>
<input
type="text"
class="form-control form-control-sm mono"
focus.delegate="inputFocus()"
click.delegate="inputFocus()"
blur.trigger="lostFocus()"
value.bind="ip2"
keyup.delegate="changed($event)"
/>
<span>.</span>
<input
type="text"
class="form-control form-control-sm mono"
focus.delegate="inputFocus()"
click.delegate="inputFocus()"
blur.trigger="lostFocus()"
value.bind="ip3"
keyup.delegate="changed($event)"
/>
<span>.</span>
<input
type="text"
class="form-control form-control-sm mono"
focus.delegate="inputFocus()"
click.delegate="inputFocus()"
blur.trigger="lostFocus()"
value.bind="ip4"
keyup.delegate="changed($event)"
/>
</div>
</template>
ip-address {
.cont {
width: 160px;
padding: 0.25rem;
line-height: 1.25;
color: 'gray';
background-color: #fff;
background-image: none;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 0.25rem;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
display: flex;
flex-direction: row;
&.focus {
border-color: #aabad2;
outline: none;
box-shadow: 0 0 0 0.2rem rgba(87, 119, 165, 0.25);
}
input {
border: none;
padding: 0;
margin: 0 0.125rem;
width: 30px;
text-align: center;
&:focus {
border: none;
box-shadow: none;
outline: none;
}
}
}
}
import {
autoinject,
bindable,
bindingMode,
customElement,
TaskQueue
} from 'aurelia-framework';
@autoinject
@customElement('ip-address')
export class IpAddress {
@bindable({
defaultBindingMode: bindingMode.twoWay
})
@bindable
public ipAddress: string;
public ip1: string;
public ip2: string;
public ip3: string;
public ip4: string;
public hasFocus: boolean;
constructor(private taskQueue: TaskQueue) {}
public inputFocus() {
this.hasFocus = true;
}
public lostFocus() {
this.hasFocus = false;
}
public changed(event: KeyboardEvent) {
this.ip1 = this.sanitise(this.ip1);
this.ip2 = this.sanitise(this.ip2);
this.ip3 = this.sanitise(this.ip3);
this.ip4 = this.sanitise(this.ip4);
this.taskQueue.queueMicroTask(() => {
this.ipAddress = `${this.ip1}.${this.ip2}.${this.ip3}.${this.ip4}`;
const current = event.target as HTMLInputElement;
if (
event.keyCode === 190 ||
event.keyCode === 110 ||
current.value.length > 2
) {
const inputs = Array.from(
(event.target as Element).parentElement.querySelectorAll('input')
);
const index = inputs.indexOf(current);
if (index >= 0 && index < inputs.length - 1) {
inputs[index + 1].focus();
inputs[index + 1].select();
this.hasFocus = true;
}
}
});
}
private sanitise(input: string): string {
let int = parseInt((input || '').replace(/\D/g, ''));
if (isNaN(int)) {
int = 0;
}
return Math.max(0, Math.min(255, int)).toString();
}
public ipAddressChanged() {
[this.ip1, this.ip2, this.ip3, this.ip4] = (
this.ipAddress || '0.0.0.0'
).split('.');
}
}
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