Skip to content

Instantly share code, notes, and snippets.

@adriatic

adriatic/app.html

Last active July 20, 2016 06:35
Show Gist options
  • Save adriatic/5aa34a94bc5591f5a3c676607559f28e to your computer and use it in GitHub Desktop.
Save adriatic/5aa34a94bc5591f5a3c676607559f28e to your computer and use it in GitHub Desktop.
Download ZIP
Tabstrip: events
Raw
app.html
<template>
<require from="./logger.js"></require>
<require from="./events.css"></require>
<div id="example">
<div class="demo-section k-content">
<div id="tabstrip" ak-tabstrip="k-content-urls.bind: contentUrls"
k-on-select.delegate="select($event.detail)"
k-on-activate.delegate="onActivate($event.detail)"
k-on-show.delegate="show($event.detail)"
k-on-content-load.delegate="contentLoad($event.detail)"
k-on-error.delegate="error($event.detail)">
<ul>
<li class="k-state-active">
First Tab
</li>
<li>
Ajax Tab
</li>
<li>
Error Tab
</li>
</ul>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer felis libero, lobortis ac rutrum quis, varius a velit. Donec lacus erat, cursus sed porta quis, adipiscing et ligula. Duis volutpat, sem pharetra accumsan pharetra, mi ligula cursus felis, ac aliquet leo diam eget risus. Integer facilisis, justo cursus venenatis vehicula, massa nisl tempor sem, in ullamcorper neque mauris in orci. Proin sagittis elementum odio, eu vestibulum arcu rhoncus eu. Pellentesque lorem arcu, tempus at dapibus nec, tincidunt a ante. Cras eget arcu id augue sollicitudin fermentum. Quisque ullamcorper ultrices ante, ut mollis neque tincidunt nec. Aenean sollicitudin lobortis nibh, vitae sagittis justo placerat et. Fusce laoreet consequat arcu, quis placerat massa lacinia vel. Etiam fringilla purus ac ipsum euismod nec aliquet lorem aliquet. Aliquam a nunc ac lorem lobortis pulvinar. Integer eleifend lobortis risus vel commodo. Integer nisl turpis, facilisis a porttitor nec, tempus ac enim. Proin pulvinar vestibulum ligula id mattis. Integer posuere faucibus accumsan.</p>
</div>
<div></div>
<div></div>
</div>
</div>
<div class="box">
<h4>Console log</h4>
<logger view-model.ref="logger"></logger>
</div>
</div>
</template>
Raw
app.js
export class Events {
contentUrls = [
'',
'https://kendo.jeroenvinke.nl/shared/web/tabstrip/ajax/ajaxContent1.html',
'http:s//demos.telerik.com/kendo-ui/tabstrip/error.html'
];
select(e) {
this.logger.log('Selected: ' + $(e.item).find('> .k-link').text());
}
show(e) {
this.logger.log('Shown: ' + $(e.item).find('> .k-link').text());
}
onActivate(e) {
this.logger.log('Activated: ' + $(e.item).find('> .k-link').text());
}
contentLoad(e) {
this.logger.log('Content loaded in <b>' + $(e.item).find('> .k-link').text() + '</b> and starts with <b>' + $(e.contentElement).text().substr(0, 20) + '...</b>');
}
error(e) {
this.logger.error('Loading failed with ' + e.xhr.statusText + ' ' + e.xhr.status);
}
}
Raw
events.css
.k-tabstrip > .k-content {
padding: 1em;
}
.specification {
max-width: 670px;
margin: 10px 0;
padding: 0;
}
.specification dt, dd {
max-width: 140px;
float: left;
margin: 0;
padding: 5px 0 8px 0;
}
.specification dt {
clear: left;
width: 100px;
margin-right: 7px;
padding-right: 0;
opacity: 0.7;
}
.specification:after, .wrapper:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
Raw
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>
Raw
logger.html
<template>
<div class="console">
</div>
</template>
Raw
logger.js
export class Logger {
attached() {
this.overrideStyles();
}
log(message, isError, container) {
let lastContainer = $('.console div:first', container);
let counter = lastContainer.find('.count').detach();
let lastMessage = lastContainer.text();
let count = 1 * (counter.text() || 1);
lastContainer.append(counter);
if (!lastContainer.length || message !== lastMessage) {
$('<div' + (isError ? ' class=\'error\'' : '') + '/>')
.css({
marginTop: -24,
backgroundColor: isError ? '#ffbbbb' : '#b2ebf2'
})
.html(message)
.prependTo($('.console', container))
.animate({ marginTop: 0 }, 300)
.animate({ backgroundColor: isError ? '#ffdddd' : '#ffffff' }, 800);
} else {
count++;
if (counter.length) {
counter.html(count);
} else {
lastContainer.html(lastMessage)
.append('<span class=\'count\'>' + count + '</span>');
}
}
}
error(message) {
this.log(message, true);
}
overrideStyles() {
jQuery.each(['backgroundColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor', 'color', 'outlineColor'], function(i, attr) {
jQuery.fx.step[attr] = function(fx) {
if (!fx.state || typeof fx.end === typeof '') {
fx.start = getColor(fx.elem, attr);
fx.end = getRGB(fx.end);
}
fx.elem.style[attr] = ['rgb(', [
Math.max(Math.min(parseInt((fx.pos * (fx.end[0] - fx.start[0])) + fx.start[0], 10), 255), 0),
Math.max(Math.min(parseInt((fx.pos * (fx.end[1] - fx.start[1])) + fx.start[1], 10), 255), 0),
Math.max(Math.min(parseInt((fx.pos * (fx.end[2] - fx.start[2])) + fx.start[2], 10), 255), 0)
].join(','), ')'].join('');
};
});
}
}
// Color Conversion functions from highlightFade
// By Blair Mitchelmore
// http://jquery.offput.ca/highlightFade/
// Parse strings looking for color tuples [255,255,255]
function getRGB(color) {
let result;
// Check if we're already dealing with an array of colors
if (color && color.constructor === Array && color.length === 3) {
return color;
}
// Look for rgb(num,num,num)
result = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color);
if (result) {
return [parseInt(result[1], 10), parseInt(result[2], 10), parseInt(result[3], 10)];
}
// Look for #a0b1c2
result = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color);
if (result) {
return [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)];
}
// Otherwise, we're most likely dealing with a named color
return jQuery.trim(color).toLowerCase();
}
function getColor(elem, attr) {
let color;
do {
color = jQuery.css(elem, attr);
// Keep going until we find an element that has color, or we hit the body
if (color && color !== 'transparent' || jQuery.nodeName(elem, 'body')) {
break;
}
attr = 'backgroundColor';
elem = elem.parentNode;
} while (elem);
return getRGB(color);
}
Raw
main.js
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