view release on metacpan or  search on metacpan

lib/Repo/html/requires_tree_html.template  view on Meta::CPAN

        <div style="height: 16px; font: 14px 'Roboto', sans-serif; font-weight: bold; color: White;"></div>
        <div style="height: 20px; float: right; text-align: right; padding-right: 16px; width:512px; font: 14px 'Roboto', sans-serif; font-weight: bold; color: White;">
        <span style="font: 10px 'Roboto', sans-serif; font-weight: bold;  color: #dcdbdc;">DISTRIBUTION:</span> @DISTRIBUTION@
        </div>
      </div>
      <div style="height: 42px; padding-left: 16px; font: 28px 'Roboto', sans-serif; font-weight: bold; color: White;">
      <span style="color: #dcdbdc;">@ROOT@</span> - Requires Tree
      </div>
    </div> <!-- "navigator" -->
  </div> <!-- "header_wrapper" -->

  <div class="content-wrapper">
    <div class="content">

      <div id="tree_view" class="ui-widget-content">
      </div>

    </div> <!-- "content" -->
  </div> <!-- "content_wrapper" -->

  <div class="footer-wrapper">
    <div class="footer">

      <div class="footer-top">
        <a class="copyright" target="_blank" href="@BUG_URL@"
          onmouseover="show_link( 'copyright' );"
          onmouseout="hide_link( 'copyright' );">Bug Report URL</a>
      </div>
      <div class="footer-bottom">
      </div>
    </div> <!-- "footer" -->
  </div> <!-- "footer_wrapper" -->
</div> <!-- "front_wrapper" -->

<script type="text/javascript">
  var margin = {top: 20, right: 120, bottom: 20, left: 220},
      width = @SVG_WIDTH@ - margin.right - margin.left,
      height = @SVG_HEIGHT@ - margin.top - margin.bottom;

  var i = 0,
      duration = 750,
      root;

  var tree = d3.layout.tree()
      .size([height, width]);

  var diagonal = d3.svg.diagonal()
      .projection(function(d) { return [d.y, d.x]; });

  var svg = d3.select(document.getElementById( 'tree_view' )).append("svg")
      .attr("width", width + margin.right + margin.left)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  var div = d3.select(document.getElementById( 'front_wrapper' )).append("div")
      .attr("class", "tree-tooltip")
      .style("opacity", 0);

  d3.json("@JSON_DATA_FILE@", function(error, requires) {
    root = requires;
    root.x0 = height / 2;
    root.y0 = 0;

    function collapse(d) {
      if (d.children) {
        d._children = d.children;
        d._children.forEach(collapse);
        d.children = null;
      }
    }

    root.children.forEach(collapse);
    update(root);
  });

  function update(source) {

    /* Compute the new tree layout. */
    var nodes = tree.nodes(root).reverse(),
        links = tree.links(nodes);

    /* Normalize for fixed-depth. */
    nodes.forEach(function(d) { d.y = d.depth * 180; });

    /* Update the nodes . . . */
    var node = svg.selectAll("g.node")
        .data(nodes, function(d) { return d.id || (d.id = ++i); });

    /* Enter any new nodes at the parent's previous position. */
    var nodeEnter = node.enter().append("g")
        .attr("class", "node")
        .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
        .on("click", click)
        .on("mouseover", function(d) {
            div.transition()
                .duration(200)
                .style("opacity", .92);
            if (d.description == undefined) {
              if (d.name == "void") {
                div.html('<div style="text-align: left; padding-left: 0.5em; padding-right: 0.5em; font: 11px Cousine,monospace; font-weight: bold; color: DarkRed;">' + "void" + "</div>")
                    .style("left", (d3.event.pageX + document.getElementById( 'front_wrapper' ).scrollLeft + 12) + "px")
                    .style("top", (d3.event.pageY + document.getElementById( 'front_wrapper' ).scrollTop + 12) + "px");
              }
              else
              {
                div.html('<div style="text-align: left; padding-left: 0.5em; padding-right: 0.5em; font: 11px Cousine,monospace; font-weight: bold; color: DarkRed;">' + "not packaged collection" + "</div>")
                    .style("left", (d3.event.pageX + document.getElementById( 'front_wrapper' ).scrollLeft + 12) + "px")
                    .style("top", (d3.event.pageY + document.getElementById( 'front_wrapper' ).scrollTop + 12) + "px");
              }
            }
            else
            {
              var content = '<div style="text-align: left; font: 14px Roboto,sans-serif; font-weight: bold; color: DarkRed;">' +
                            d.name + "</div>" +
                            '<div style="text-align: left; padding-left: 1.5em; padding-top: .5em; font: 14px Roboto,sans-serif; font-weight: bold; font-style: italic; color: #343434;">' +
                            d.description + "</div><br/>" +
                            "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;version: " + d.version + "<br/>" +
                            "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;release: " + d.release + "<br/>" +
                            "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;arch: " + d.arch + "<br/>";
                 content += "&nbsp;&nbsp;&nbsp;distribution name: " + root.distro[0] + "<br/>" +