view mercurial/templates/spartan/graph.tmpl @ 14046:b24e5a708fad

web: Made elapsed time calculation dynamic (javascript). This allow safe caching of the pages by the browser and still display the right amount of elapsed time upon page refresh. If javascript is disabled, absolute time is displayed, leaving it readable. All the templates have been updated.
author Benoit Allard <benoit@aeteurope.nl>
date Thu, 28 Apr 2011 17:02:39 +0200
parents 7359cb753a54
children 8fd18eb8aab7
line wrap: on
line source

{header}
<title>{repo|escape}: graph</title>
<link rel="alternate" type="application/atom+xml"
   href="{url}atom-tags" title="Atom feed for {repo|escape}: tags">
<link rel="alternate" type="application/rss+xml"
   href="{url}rss-tags" title="RSS feed for {repo|escape}: tags">
<!--[if IE]><script type="text/javascript" src="{staticurl}excanvas.js"></script><![endif]-->
</head>
<body>

<div class="buttons">
<a href="{url}log{sessionvars%urlparameter}">changelog</a>
<a href="{url}shortlog{sessionvars%urlparameter}">shortlog</a>
<a href="{url}tags{sessionvars%urlparameter}">tags</a>
<a href="{url}branches{sessionvars%urlparameter}">branches</a>
<a href="{url}file/{node|short}/{sessionvars%urlparameter}">files</a>
<a href="{url}help{sessionvars%urlparameter}">help</a>
</div>

<h2>graph</h2>

<form action="{url}log">
{sessionvars%hiddenformentry}
<p>
<label for="search1">search:</label>
<input name="rev" id="search1" type="text" size="30">
navigate: <small class="navigate">{changenav%navgraph}</small>
</p>
</form>

<noscript>The revision graph only works with JavaScript-enabled browsers.</noscript>

<div id="wrapper">
<ul id="nodebgs"></ul>
<canvas id="graph" width="480" height="{canvasheight}"></canvas>
<ul id="graphnodes"></ul>
</div>

<script type="text/javascript">
<!-- hide script content

var data = {jsdata|json};
var graph = new Graph();
graph.scale({bg_height});

graph.edge = function(x0, y0, x1, y1, color) \{
	
	this.setColor(color, 0.0, 0.65);
	this.ctx.beginPath();
	this.ctx.moveTo(x0, y0);
	this.ctx.lineTo(x1, y1);
	this.ctx.stroke();
	
}

var revlink = '<li style="_STYLE"><span class="desc">';
revlink += '<a href="{url}rev/_NODEID{sessionvars%urlparameter}" title="_NODEID">_DESC</a>';
revlink += '</span><span class="info">_DATE, by _USER</span></li>';

graph.vertex = function(x, y, color, parity, cur) \{
	
	this.ctx.beginPath();
	color = this.setColor(color, 0.25, 0.75);
	this.ctx.arc(x, y, radius, 0, Math.PI * 2, true);
	this.ctx.fill();
	
	var bg = '<li class="bg parity' + parity + '"></li>';
	var left = (this.columns + 1) * this.bg_height;
	var nstyle = 'padding-left: ' + left + 'px;';
	var item = revlink.replace(/_STYLE/, nstyle);
	item = item.replace(/_PARITY/, 'parity' + parity);
	item = item.replace(/_NODEID/, cur[0]);
	item = item.replace(/_NODEID/, cur[0]);
	item = item.replace(/_DESC/, cur[3]);
	item = item.replace(/_USER/, cur[4]);
	item = item.replace(/_DATE/, cur[5]);
	
	return [bg, item];
	
}

graph.render(data);

// stop hiding script -->
</script>

<form action="{url}log">
{sessionvars%hiddenformentry}
<p>
<label for="search1">search:</label>
<input name="rev" id="search1" type="text" size="30">
navigate: <small class="navigate">{changenav%navgraph}</small>
</p>
</form>

{footer}