Skip to content

Instantly share code, notes, and snippets.

@JeroenVinke
Forked from genericuser-me/app.html
Last active August 1, 2016 11:45
Show Gist options
  • Save JeroenVinke/3e68125d8fe58fe04d96e1035aab5e91 to your computer and use it in GitHub Desktop.
Save JeroenVinke/3e68125d8fe58fe04d96e1035aab5e91 to your computer and use it in GitHub Desktop.
Aurelia - JQueryUI DatePicker
<!-- put your view here -->
<template>
<require from='./products.css'></require>
<ak-list-view k-data-source.bind="dataSource"
k-widget.bind="listview"
click.trigger="onListviewSelect($event.target)"
dblclick.trigger="onListItemDoubleClick($event.target)"
id="listview" ref="listviewref">
<ak-template>
<div class="content">
<input id="cb_${name}" type="checkbox" class="click" />
<img src="https://demos.telerik.com/kendo-ui/content/web/foods/${ProductID}.jpg" alt="${ProductName}" />
<a href="#/product/${ProductName}/content/${ProductID}">
<h3 title="${ProductName}">
${ProductName}</h3>
</a>
</div>
</ak-template>
<div ref="pager" class="k-pager-wrap"></div>
</template>
export class App {
pager;
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: '//demos.telerik.com/kendo-ui/service/Products',
dataType: 'jsonp'
}
},
pageSize: 10
});
activate()
{
}
attached() {
$(this.pager).kendoPager({
dataSource: this.dataSource
});
}
onListviewSelect(e) {
var target;
if (e.tagName == "DIV" || e.tagName == "H3" || e.tagName == "SPAN") {
target = $(e).closest('.content')
var checkbox = target.find("input:checkbox");
console.log(checkbox);
if (checkbox.is(":checked")) {
checkbox.prop("checked", false);
} else {
checkbox.prop("checked", true);
}
}
this.highlightItems();
return true;
}
highlightItems() {
var checkboxes = $('#listview').find("input:checkbox");
$(checkboxes).each(function (i, checkbox) {
//checkbox = $(checkbox);
if ($(checkbox).is(":checked")) {
$(checkbox).parent().addClass("k-state-selected");
} else {
$(checkbox).parent().removeClass("k-state-selected");
}
});
}
}
<!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.15/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());
}
#listView {
padding: 10px 5px;
margin-bottom: -1px;
min-height: 510px;
}
.product {
width: 100%;
height: 50px;
float: left;
/*width: 220px;
height: 50px;*/
margin: 0;
padding: 5px;
cursor: pointer;
}
/*#product .convert{
width: 151px;
height: 10px;
}*/
.product input
{
float: left;
top: 0;
left: 100%;
}
.product img {
float: left;
width: 25x;
height: 25px;
}
.product a h3 {
margin: 0;
padding: 10px 0 0 10px;
font-size: .9em;
overflow: hidden;
font-weight: normal;
float: left;
width: 500px;
}
.product h3
{
margin: 0;
padding: 10px 0 0 10px;
font-size: .9em;
overflow: hidden;
font-weight: normal;
float: left;
width: 500px;
}
.product p {
visibility: hidden;
}
.product:hover p {
visibility: visible;
position: absolute;
width: 110px;
height: 110px;
top: 0;
margin: 0;
padding: 0;
line-height: 110px;
vertical-align: middle;
text-align: center;
color: #fff;
background-color: rgba(0,0,0,0.75);
transition: background .2s linear, color .2s linear;
-moz-transition: background .2s linear, color .2s linear;
-webkit-transition: background .2s linear, color .2s linear;
-o-transition: background .2s linear, color .2s linear;
}
.content {
width: 99%;
height: 50px;
float: left;
/*width: 220px;
height: 50px;*/
margin: 0;
padding: 5px;
cursor: pointer;
}
/*#product .convert{
width: 151px;
height: 10px;
}*/
.content input
{
padding: 2px 0 0 2px;
float:left;
top: 0;
left: 100%;
}
.content img {
float: left;
width: 25x;
height: 25px;
}
.content a h3 {
margin: 0;
padding: 10px 0 0 10px;
font-size: .9em;
overflow: hidden;
font-weight: normal;
float: left;
width: 500px;
color: black;
}
.content h3
{
margin: 0;
padding: 10px 0 0 10px;
font-size: .9em;
overflow: hidden;
font-weight: normal;
float: left;
width: 500px;
}
.content p {
visibility: hidden;
}
.content:hover p {
visibility: visible;
position: absolute;
width: 110px;
height: 110px;
top: 0;
margin: 0;
padding: 0;
line-height: 110px;
vertical-align: middle;
text-align: center;
color: #fff;
background-color: rgba(0,0,0,0.75);
transition: background .2s linear, color .2s linear;
-moz-transition: background .2s linear, color .2s linear;
-webkit-transition: background .2s linear, color .2s linear;
-o-transition: background .2s linear, color .2s linear;
}
.k-listview:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
@media screen and (max-width: 620px) {
.content h3 {
max-width: 100px;
white-space: nowrap;
text-overflow: ellipsis;
height: 15px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment