Skip to content

Instantly share code, notes, and snippets.

@freeart

freeart/index.html

Created February 17, 2011 21:14
Show Gist options
  • Save freeart/832711 to your computer and use it in GitHub Desktop.
Save freeart/832711 to your computer and use it in GitHub Desktop.
Download ZIP
Пример использования tmpl модуля
Raw
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.treeView li li
{
margin-left: 18px;
}
.expand
{
vertical-align: middle;
margin-right: 7px;
display: inline-block;
border: 1px solid #555;
text-align: center;
height: 12px;
width: 12px;
line-height: 11px;
background-color: #f8f8f8;
color: Blue;
font-size:10px;
font-weight: bold;
}
.treeView, .treeView ul
{
padding: 0;
margin: 0;
}
.treeView li
{
margin-left: 8px;
list-style-type: none;
padding: 2px;
cursor: pointer;
}
</style>
<script type="text/javascript">
window.onerror = function (errorMsg, url, lineNumber) {
alert('Error in file ' + url + ' at line ' + lineNumber + '\n' + 'message: ' + errorMsg);
}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.js" type="text/javascript"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"
type="text/javascript"></script>
<script src="test.js" type="text/javascript"></script>
</head>
<body>
<script id="tmpl" type="text/x-jquery-tmpl">
<ul class="treeView">
{{each $item.data}}
<li class="toggle" key="${$index}">
<span class="expand">${expanderPic($value)}</span>
<span>${$index}</span>
</li>
{{if expanded}}
<li>
Price: ${$value.minPrice}
</li>
{{/if}}
{{/each}}
</ul>
</script>
<div id="indicator"></div>
<div id="wrapper"></div>
</body>
</html>
Raw
test.js
(function a() {
var collect = {};
//===========================================================================================================
$.fn.poll = function (options) {
var $this = $(this);
var opts = $.extend({}, $.fn.poll.defaults, options);
setTimeout(update, opts.interval);
function update() {
$.getJSON(opts.url, function (data) {
if (opts.completeKey === undefined || opts.completeValue === undefined) {
opts.success();
setTimeout(update, opts.interval);
} else {
if (opts.indicate) opts.indicate(data[opts.completeKey]);
if (data[opts.completeKey] == opts.completeValue) {
opts.success();
} else {
setTimeout(update, opts.interval);
}
}
});
};
}
$.fn.poll.defaults = {
url: ".",
success: '',
interval: 13,
completeValue: 100,
completeKey: 'Completed',
indicate: function (percent) {
$("#indicator").html('status: ' + percent + '%');
if (percent == 100) {
$("#indicator").html('status: idle');
}
}
}
//===========================================================================================================
var findMinValue = function (in_array, fieldName) {
var min = Infinity;
for (var i = 0; i < in_array.length; i++) {
var value = (in_array[i][fieldName] | 0); // force to integer value
if (value < min) {
min = value;
}
}
return min;
}
var findMinPrice = function (prices) {
var minPrice = { TotalAmount: Infinity };
for (var i = 0; i < prices.length; i++) {
var value = (prices[i].TotalAmount | 0);
if (value < minPrice.TotalAmount) {
minPrice = prices[i];
}
}
return minPrice.TotalAmount + ' ' + minPrice.Currency;
}
var sortJsonName = function (a, b) {
return findMinValue(a.FaresFull, "TotalAmount") > findMinValue(b.FaresFull, "TotalAmount") ? 1 : -1;
};
//===========================================================================================================
var search = function () {
$("#indicator").html('status: update');
$.getJSON('http://api.anywayanyday.com/api/NewRequest/?Route=2408MOWLON&AD=1&CN=0&CS=E&Partner=testapic&_Serialize=JSON&callback=?', function (data, status, xhr) {
var dataId = data.Id;
if (status == "success" && data && data.Error == null) {
$('#wrapper').poll({
url: "http://api.anywayanyday.com/api/RequestState/?R=" + dataId + "&_Serialize=JSON&callback=?",
success: function (data) {
$.getJSON('http://api.anywayanyday.com/api/Fares/?R=' + dataId + '&V=Matrix&VB=true&L=ru&_Serialize=JSON&callback=?', function (data, status, xhr) {
if (status == "success" && data && data.Error == null) {
var resort = $(data.Airlines).sort(sortJsonName);
for (var i = 0; i < data.Airlines.length; i++) {
var oldSetting;
if (collect[resort[i].Name]) {
oldSetting = collect[resort[i].Name].expanded;
}
collect[resort[i].Name] = resort[i];
collect[resort[i].Name].expanded = oldSetting;
collect[resort[i].Name].minPrice = findMinPrice(collect[resort[i].Name].FaresFull);
}
$('#wrapper').trigger({ type: "refresh", msg: collect });
} else {
$("#indicator").html('status: error');
}
setTimeout(search, 10000);
});
}
});
} else {
$("#indicator").html('status: error');
setTimeout(search, 10000);
}
})
}
//===========================================================================================================
$(document).ready(function () {
$.extend(window, {
expanderPic: function (tmplItem) {
return tmplItem.expanded ? "-" : "+";
}
});
$('#wrapper').bind('refresh', function (data) {
if ($('.treeView').tmplItem().key === 0) {
$('#tmpl').tmpl(data.msg).appendTo('#wrapper');
$("#wrapper").delegate(".toggle", "click", function () {
var tmplItem = $.tmplItem(this);
var key = $(this).attr('key');
tmplItem.data[key].expanded = !tmplItem.data[key].expanded;
tmplItem.update();
});
} else {
var tmplItem = $('.treeView').tmplItem();
tmplItem.data = data.msg;
tmplItem.update();
}
});
search();
});
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment