Skip to content

Instantly share code, notes, and snippets.

@JeroenVinke
Created April 10, 2016 06:33
Show Gist options
  • Save JeroenVinke/5b220d47d7d38de9c1ed9135ba69751e to your computer and use it in GitHub Desktop.
Save JeroenVinke/5b220d47d7d38de9c1ed9135ba69751e to your computer and use it in GitHub Desktop.
Aurelia - JQueryUI DatePicker
<template>
<div id="pendingChangesWindow"
ak-window="k-width: 525px;
k-title: Pending Changes;
k-actions.bind: actions;
k-visible.bind: false;
k-widget.bind: window"
k-on-close.delegate="onClose()">
<div>
Blah blah
</div>
</div>
<button click.delegate="show()">Open</button>
</template>
export class App {
actions = ['Custom', 'Minimize', 'Maximize', 'Close'];
window: any;
DEFAULT_CONTENT: string = '<p>You have un-saved changes.</p><p>Are you sure you want to leave this page?</p>';
DEFAULT_TITLE: string = '<i class="fa fa-question"></i>&nbsp;Pending Changes';
constructor() {
console.log('pendingChangesModal.constructor');
}
attached(): void {
console.log('pendingChangesModal.attached');
}
onClose(): void {
alert('close');
}
show (message: string = '', leaveButtonText: string = '', stayButtonText: string = '', title: string = ''): Promise<boolean> {
console.log('pendingChangesModal.show', this);
return new Promise((resolve, reject) => {
this.window.open();
resolve(true);
});
}
}
<!doctype html>
<html>
<head>
<title>Aurelia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.mobile.all.min.css">
<script src="https://kendo.cdn.telerik.com/2016.1.226/js/jszip.min.js"></script>
</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://rawgit.com/aurelia-ui-toolkits/aurelia-kendoui-bundles/0.3.4/config2.js"></script>
<!--<script src="./config2.js"></script>-->
<script>
System.import('aurelia-bootstrapper');
</script>
</body>
</html>
/*******************************************************************************
* 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;
/******************************************************************************/
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging()
.plugin('aurelia-kendoui-bridge', kendo => kendo.pro());
aurelia.start().then(a => a.setRoot());
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment