adriatic/app.html

## app.html
<template>
  <require from="./customizing-actions.css"></require>
  <div id="example">
    <div id="window"
         ak-window="k-width: 500px; k-title: About Josef Hoffmann; k-actions.bind: actions; k-widget.bind: window"
         k-on-close.delegate="onClose()">
      <div class="armchair-cust"><img src="http://demos.telerik.com/kendo-ui/content/web/window/kubus-armchair.png" alt="Josef Hoffmann - Kubus Armchair" /> Josef Hoffmann - Kubus Armchair</div>
      <p>Josef Hoffmann studied architecture at the Academy of Fine Arts in Vienna, Austria, under Art Nouveau architect Otto Wagner, whose theories of functional, modern architecture profoundly influenced his works, and in 1896 he joined his office.</p>

      <p>In 1898, he established his own practice in Vienna. In 1897, inspired by Mackintosh and the Glasgow School, he was one of the founding members with Gustav Klimt, of an association of revolutionary artists and architects, the Vienna Secession.</p>

      <p>In 1903, he founded with architects Koloman Moser and Joseph Maria Olbrich, the Wiener Werkst&auml;tte for decorative arts.</p>
      <p>They aspired to the renaissance of the arts and crafts and to bring more abstract and purer forms to the designs of buildings and furniture, glass and metalwork, following the concept of total work of art. Hoffman's works combined functionality and simplicity of craft production with refined and innovative ornamental details and geometric elements. He is an important precursor of the Modern Movement and Art Deco. </p>

      <p>Source: <a href="http://www.senses-artnouveau.com/biography.php?artist=hof" title="About Josef Hoffmann">http://www.senses-artnouveau.com/</a></p>
    </div>

    <span id="undo" ref="undo" style="display:none" ak-button click.delegate="open()">Click here to open the window.</span>

    <div class="responsive-message"></div>
  </div>
</template>

## app.js
import {TaskQueue, inject} from 'aurelia-framework';

@inject(TaskQueue)
export class CustomizingActions {
  actions = ['Custom', 'Minimize', 'Maximize', 'Close'];

  constructor(taskQueue) {
    this.taskQueue = taskQueue;
  }

  attached() {
    this.taskQueue.queueTask(() => {
      this.window.wrapper
      .find('.k-i-custom').click((e) => {
        alert('Custom action button clicked');
        e.preventDefault();
      });
    });
  }

  open() {
    this.window.open();
    $(this.undo).fadeOut();
  }

  onClose() {
    $(this.undo).fadeIn();
  }
}

## customizing-actions.css
#example
{
  min-height:500px;
}

#undo {
  text-align: center;
  position: absolute;
  white-space: nowrap;
  padding: 1em;
  cursor: pointer;
}
.armchair-cust {
    float: left;
    margin: 20px 30px;
    text-align: center;
}
.armchair-cust img {
    display: block;
    margin-bottom: 10px;
}

## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia KendoUI bridge</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.5/config2.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
</html>

## main.js
export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-kendoui-bridge', kendo => kendo.pro());

  aurelia.start().then(a => a.setRoot());
}
	<template>
	<require from="./customizing-actions.css"></require>
	<div id="example">
	<div id="window"
	ak-window="k-width: 500px; k-title: About Josef Hoffmann; k-actions.bind: actions; k-widget.bind: window"
	k-on-close.delegate="onClose()">
	<div class="armchair-cust"><img src="http://demos.telerik.com/kendo-ui/content/web/window/kubus-armchair.png" alt="Josef Hoffmann - Kubus Armchair" /> Josef Hoffmann - Kubus Armchair</div>
	<p>Josef Hoffmann studied architecture at the Academy of Fine Arts in Vienna, Austria, under Art Nouveau architect Otto Wagner, whose theories of functional, modern architecture profoundly influenced his works, and in 1896 he joined his office.</p>

	<p>In 1898, he established his own practice in Vienna. In 1897, inspired by Mackintosh and the Glasgow School, he was one of the founding members with Gustav Klimt, of an association of revolutionary artists and architects, the Vienna Secession.</p>

	<p>In 1903, he founded with architects Koloman Moser and Joseph Maria Olbrich, the Wiener Werkstätte for decorative arts.</p>
	<p>They aspired to the renaissance of the arts and crafts and to bring more abstract and purer forms to the designs of buildings and furniture, glass and metalwork, following the concept of total work of art. Hoffman's works combined functionality and simplicity of craft production with refined and innovative ornamental details and geometric elements. He is an important precursor of the Modern Movement and Art Deco. </p>

	<p>Source: <a href="http://www.senses-artnouveau.com/biography.php?artist=hof" title="About Josef Hoffmann">http://www.senses-artnouveau.com/</a></p>
	</div>

	<span id="undo" ref="undo" style="display:none" ak-button click.delegate="open()">Click here to open the window.</span>

	<div class="responsive-message"></div>
	</div>
	</template>
	import {TaskQueue, inject} from 'aurelia-framework';

	@inject(TaskQueue)
	export class CustomizingActions {
	actions = ['Custom', 'Minimize', 'Maximize', 'Close'];

	constructor(taskQueue) {
	this.taskQueue = taskQueue;
	}

	attached() {
	this.taskQueue.queueTask(() => {
	this.window.wrapper
	.find('.k-i-custom').click((e) => {
	alert('Custom action button clicked');
	e.preventDefault();
	});
	});
	}

	open() {
	this.window.open();
	$(this.undo).fadeOut();
	}

	onClose() {
	$(this.undo).fadeIn();
	}
	}
	#example
	{
	min-height:500px;
	}

	#undo {
	text-align: center;
	position: absolute;
	white-space: nowrap;
	padding: 1em;
	cursor: pointer;
	}
	.armchair-cust {
	float: left;
	margin: 20px 30px;
	text-align: center;
	}
	.armchair-cust img {
	display: block;
	margin-bottom: 10px;
	}
	<!doctype html>
	<html>
	<head>
	<title>Aurelia KendoUI bridge</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.5/config2.js"></script>
	<script>
	System.import('aurelia-bootstrapper');
	</script>
	</body>
	</html>
	export function configure(aurelia) {
	aurelia.use
	.standardConfiguration()
	.developmentLogging()
	.plugin('aurelia-kendoui-bridge', kendo => kendo.pro());

	aurelia.start().then(a => a.setRoot());
	}