<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap, from Twitter</title>
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css" rel="stylesheet">
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.bootstrap.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="span1"></div>
<div class="span10">
<h2>YouTube Search For Clippy</h2>
<p>Mouse over thubmnails to see a tooltip with info on likes, comments and views.</p>
<hr>
<div id="results"></div>
<div id="pager"></div>
</div>
</div>
</div> <!-- /container -->
<!-- this is the template for the list view items -->
<script type="text/x-kendo-template" id="listview-template">
<div style="padding-top: 10px;">
<div style="float: left;">
<a href="\#" data-id="${id}" data-title="${title}" class="k-youtube-popup">
<img height="90" width="120" src="${thumbnail.sqDefault}" alt="thumbnail" data-comments="${commentCount}" data-likes="${likeCount}" data-views="${viewCount}"/>
</a>
</div>
<div style="margin-left: 130px; height: 90px;">
<h4 style="margin: 2px">
<a href="${player.default}" target="_blank">${title}</a>
</h4>
<div style="font-size: .8em">
<p>${description}</p>
</div>
</div>
</div>
</script>
<!-- this is the template for this tooltips -->
<script type="text/x-kendo-template" id="tooltip-template">
<div style="text-align: left"
<p>
<i class="icon-thumbs-up"></i>: #: target.data("likes") #
</p>
<p>
<i class="icon-comment"></i>: #: target.data("comments") #
</p>
<p>
<i class="icon-eye-open"></i>: #: target.data("views") #
</p>
</div>
</script>
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<script src="script.js"></script>
<script>
(function($, kendo) {
// create the listview
$("#results").kendoListView({
dataSource: window.APP.youtube,
template: kendo.template($("#listview-template").html())
});
// create the pager
$("#pager").kendoPager({
dataSource: window.APP.youtube
});
// attach a tooltips to the results listview
$("#results").kendoTooltip({
content: kendo.template($("#tooltip-template").html()),
position: "left",
// put the tooltip on all img elements
filter: "img",
// define some custom sexy animation
animation: {
open: {
effects: "zoom:in slideIn:right",
duration: 200
},
close: {
effects: "zoom:in slideIn:right",
reverse: true,
duration: 200
}
},
// give the tooltips a static width
width: 100
});
}(jQuery, kendo));
</script>
</body>
</html>
window.APP = window.APP || {};
(function($, kendo) {
window.APP.youtube = new kendo.data.DataSource({
transport: {
read: {
url: "http://gdata.youtube.com/feeds/api/videos?v=2&alt=jsonc",
dataType: "jsonp"
},
parameterMap: function(options) {
console.log(options);
return {
// the q is set to the current value of the autoComplete
q: "clippy",
// the start index dictates paging
"start-index": options.skip === 0 ? 1 : options.skip,
"max-results": 5,
}
}
},
schema: {
data: "data",
total: "total",
parse: function(data) {
var result = { total: data.data.totalItems, data: [] };
result.data = $.map(data.data.items, function(item) {
item.description = item.description || "";
item.description = item.description.length > 100 ? (item.description.substring(0,100) + "...") : item.description;
item.commentCount = item.commentCount || 0;
item.likeCount = item.likeCount || 0;
item.viewCount = item.viewCount || 0;
return item;
});
return result;
}
},
pageSize: 20,
serverPaging: true
});
}(jQuery, kendo));
body {
padding-top: 60px;
}
@media (max-width: 979px) {
/* Remove any padding from the body */
body {
padding-top: 0;
}
}
.k-listview {
border: none;
box-shadow: none;
}