grim/hgkeeper-theme

Finish implementing the graph page. There's some rough edges yet but it works.
draft
2020-03-19, Gary Kramlich
daac8d3d89e9
Parents 78079bced6d4
Children dbeac8d89a39
Finish implementing the graph page. There's some rough edges yet but it works.
5 files changed, 42 insertions(+), 3 deletions(-)
  • +4 -0
    hgkeeper/graph/entry.tmpl
  • +34 -0
    hgkeeper/graph/list.tmpl
  • +1 -1
    hgkeeper/header.tmpl
  • +3 -0
    hgkeeper/map
  • +0 -2
    static/js/graph.js
    • --- /dev/null Thu Jan 01 00:00:00 1970 +0000
    +++ b/hgkeeper/graph/entry.tmpl Thu Mar 19 06:29:30 2020 -0500
    @@ -0,0 +1,4 @@
    +<li class="list-group-item" data-node="{node|short}" style="text-overflow: ellipsis; overflow: hidden; white-space: nowrap;">
    + <a href="{url|urlescape}rev/{node|short}{sessionvars%urlparameter}">{desc|strip|firstline|escape|nonempty}</a><br>
    + {date|age}, {author|person}
    +</li>
    \ No newline at end of file
    --- /dev/null Thu Jan 01 00:00:00 1970 +0000
    +++ b/hgkeeper/graph/list.tmpl Thu Mar 19 06:29:30 2020 -0500
    @@ -0,0 +1,34 @@
    +{dict(graph=1)%header}
    +
    +<div class="card position-relative">
    + <canvas id="graph" class="position-absolute" style="z-index: 5;"></canvas>
    + <ul class="list-group" id="graphnodes">
    + {nodes%graphentry}
    + </ul>
    +</div>
    +
    +<script type="text/javascript"{if(nonce, ' nonce="{nonce}"')}>
    +var data = {jsdata|json};
    +var graph = new GraphV2();
    +graph.colors = [
    + "#8dd3c7", "#feffb3", "#bfbbd9", "#fa8174", "#81b1d2",
    + "#fdb462", "#b3de69", "#bc82bd", "#ccebc4", "#ffed6f"
    +];
    +graph.render(data);
    +</script>
    +
    +<script type="text/javascript"{if(nonce, ' nonce="{nonce}"')}>
    + ajaxScrollInit(
    + '{url|urlescape}graph/%next%{graphvars%urlparameter}',
    + '{nextentry%"{node}"}', <!-- NEXTHASH
    + function (htmlText) \{
    + var m = htmlText.match(/'(\w+)', <!-- NEXTHASH/);
    + return m ? m[1] : null;
    + },
    + '.card',
    + '<div class="%class%" style="text-align: center;">%text%</div>',
    + 'graph'
    + );
    +</script>
    +
    +{footer}
    --- a/hgkeeper/header.tmpl Thu Mar 19 05:59:46 2020 -0500
    +++ b/hgkeeper/header.tmpl Thu Mar 19 06:29:30 2020 -0500
    @@ -9,7 +9,7 @@
    <link rel="stylesheet" href="{staticurl|urlescape}css/bootstrap.min.css" type="text/css" />
    <script type="text/javascript" src="{staticurl|urlescape}js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="{staticurl|urlescape}js/bootstrap.bundle.min.js"></script>
    -
    + <script type="text/javascript" src="{staticurl|urlescape}js/graph.js"></script>
    <script type="text/javascript" src="{staticurl|urlescape}mercurial.js"></script>
    <head>
    <body>
    --- a/hgkeeper/map Thu Mar 19 05:59:46 2020 -0500
    +++ b/hgkeeper/map Thu Mar 19 06:29:30 2020 -0500
    @@ -40,3 +40,6 @@
    fileentry = manifest/fileentry.tmpl
    reponav = nav/repo.tmpl
    +
    +graph = graph/list.tmpl
    +graphentry = graph/entry.tmpl
    --- a/static/js/graph.js Thu Mar 19 05:59:46 2020 -0500
    +++ b/static/js/graph.js Thu Mar 19 06:29:30 2020 -0500
    @@ -175,8 +175,6 @@
    */
    this.canvas.height = height;
    this.canvas.width = this.trackWidth * (columns + 1) + (this.padding * 2);
    -
    - console.log("set canvas to "+this.canvas.width+"x"+this.canvas.height);
    },
    render: function(data) {