Skip to content

Instantly share code, notes, and snippets.

@djedi

djedi/app.html

Last active May 25, 2017 21:14
Show Gist options
  • Save djedi/fe326c90f540686467a3bbf83aec3605 to your computer and use it in GitHub Desktop.
Save djedi/fe326c90f540686467a3bbf83aec3605 to your computer and use it in GitHub Desktop.
Download ZIP
Basic Aurelia Gist Starter
Raw
app.html
<template>
<label>Ticket Number: UP-</label><input type="text" value.bind="ticketNumber"><br>
<label>Slack Team: @team-</label><select value.bind="slackTeam">
<option value="">--------</option>
<option>slicer</option>
<option>infrastructure</option>
<option>billing</option>
<option>cmsapps</option>
<option>cmscore</option>
<option>manifest</option>
<option>monitoring</option>
<option>player</option>
<option>product</option>
<option>qa</option>
</select><br>
<label>Short Descipription: </label><input type="text" value.bind="shortDesc" style="width: 70%"><br>
<label>Potential Impact: </label><input type="text" value.bind="impact" style="width: 70%"><br>
<br><br>
<pre>${publishComment}</pre>
<button show.bind="publishComment.length" click.trigger="copy()">Copy to Clipboard</button>
</template>
Raw
app.js
import {bindable} from 'aurelia-framework';
export class App {
@bindable ticketNumber;
@bindable slackTeam = '';
@bindable shortDesc = '';
@bindable impact = '';
publishComment = '';
ticketNumberChanged() {
this.generateComment();
}
slackTeamChanged() {
this.generateComment();
}
shortDescChanged() {
this.generateComment();
}
impactChanged() {
this.generateComment();
}
generateComment() {
this.publishComment = `UP-${this.ticketNumber}`;
if (this.slackTeam) {
this.publishComment += ` @team-${this.slackTeam}`;
}
if (this.shortDesc) {
this.publishComment += ` ${this.shortDesc}`;
}
if (this.impact) {
this.publishComment += `; potential impact: ${this.impact}`;
}
}
copy() {
this.copyToClipboard(this.publishComment);
}
copyToClipboard(textToCopy) {
return new Promise((resolve, reject) => {
if (window.clipboardData && window.clipboardData.setData) {
// IE specific code path to prevent textarea being shown while dialog is visible.
rval = clipboardData.setData('Text', textToCopy);
resolve(rval);
} else if (document.queryCommandSupported && document.queryCommandSupported('copy')) {
const textarea = document.createElement('textarea');
textarea.textContent = textToCopy;
textarea.style.position = 'fixed'; // Prevent scrolling to bottom of page in MS Edge.
document.body.appendChild(textarea);
textarea.select();
try {
// Security exception may be thrown by some browsers.
document.execCommand('copy');
resolve();
} catch (ex) {
// console.warn('Copy to clipboard failed.', ex);
reject(ex);
} finally {
document.body.removeChild(textarea);
}
} else {
reject(new Error('Could not copy to clipboard'));
}
});
}
}
Raw
index.html
<!doctype html>
<html>
<head>
<title>Aurelia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body aurelia-app>
<h1>Loading...</h1>
<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>
require(['aurelia-bootstrapper']);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment