##// END OF EJS Templates
upstream » mercurial-mirror
RSS

Clone from https://www.mercurial-scm.org/repo/hg-all

hgweb: calculate <canvas> width and height client-side...
hgweb: calculate <canvas> width and height client-side hgweb determines and passes to templates some variables related to graph appearance, like bg_height, canvaswidth and canvasheight. bg_height was and still is used for graph.scale() call in graph.tmpl, and the two latter variables were used in <canvas> element as width and height properties, and they were set before JS code got to run. Setting these properties server-side doesn't make a lot of sense, because a graph that has been scaled should calculate things like width and height on its own when being rendered. Let's move (re)sizing <canvas> to JavaScript (to Graph.render function) and stop parsing HTML with regular expressions just to know new width and height. That extra loop that only counts cols is required because <canvas> can't be resized after or in the process of rendering (or it gets cleared). Incidentally, SVG doesn't have this problem and I'm hoping to switch graph to using it in future. There also was truecanvasheight, but according to hg grep --all it was never used, see d490edc71146.
av6 - - Load All Authors

File last commit:

r35408:27ab3150 default
r35408:27ab3150 default
Show More
graph.tmpl
73 lines | 2.8 KiB | application/x-cheetah | CheetahLexer
/ mercurial / templates / monoblue / graph.tmpl
History | Annotation | Raw |Copy content |Copy permalink
{header}
<title>{repo|escape}: graph</title>
<link rel="alternate" type="application/atom+xml" href="{url|urlescape}atom-log" title="Atom feed for {repo|escape}"/>
<link rel="alternate" type="application/rss+xml" href="{url|urlescape}rss-log" title="RSS feed for {repo|escape}"/>
<!--[if IE]><script type="text/javascript" src="{staticurl|urlescape}excanvas.js"></script><![endif]-->
</head>
<body>
<div id="container">
<div class="page-header">
<h1 class="breadcrumb"><a href="/">Mercurial</a> {pathdef%breadcrumb} / graph</h1>
{searchform}
<ul class="page-nav">
<li><a href="{url|urlescape}summary{sessionvars%urlparameter}">summary</a></li>
<li><a href="{url|urlescape}shortlog{sessionvars%urlparameter}">shortlog</a></li>
<li><a href="{url|urlescape}changelog{sessionvars%urlparameter}">changelog</a></li>
<li class="current">graph</li>
<li><a href="{url|urlescape}tags{sessionvars%urlparameter}">tags</a></li>
<li><a href="{url|urlescape}bookmarks{sessionvars%urlparameter}">bookmarks</a></li>
<li><a href="{url|urlescape}branches{sessionvars%urlparameter}">branches</a></li>
<li><a href="{url|urlescape}file/{symrev}{sessionvars%urlparameter}">files</a></li>
<li><a href="{url|urlescape}help{sessionvars%urlparameter}">help</a></li>
</ul>
</div>
<h2 class="no-link no-border">graph</h2>
<div id="noscript">The revision graph only works with JavaScript-enabled browsers.</div>
<div id="wrapper">
<ul id="nodebgs"></ul>
<canvas id="graph"></canvas>
<ul id="graphnodes">{nodes%graphentry}</ul>
</div>
<script{if(nonce, ' nonce="{nonce}"')}>
<!-- hide script content
document.getElementById('noscript').style.display = 'none';
var data = {jsdata|json};
var graph = new Graph();
graph.scale({bg_height});
graph.vertex = function(x, y, radius, color, parity, cur) \{
Graph.prototype.vertex.apply(this, arguments);
return ['<li class="bg parity' + parity + '"></li>', ''];
}
graph.render(data);
// stop hiding script -->
</script>
<div class="page-path">
<a href="{url|urlescape}graph/{symrev}{lessvars%urlparameter}">less</a>
<a href="{url|urlescape}graph/{symrev}{morevars%urlparameter}">more</a>
| {changenav%navgraph}
</div>
<script type="text/javascript"{if(nonce, ' nonce="{nonce}"')}>
ajaxScrollInit(
'{url|urlescape}graph/{rev}?revcount=%next%&style={style}',
{revcount}+60,
function (htmlText, previousVal) \{ return previousVal + 60; },
'#wrapper',
'<div class="%class%" style="text-align: center;">%text%</div>',
'graph'
);
</script>
{footer}