giblish 0.8.2 → 1.0.0.rc2

data/lib/giblish/indexbuilders/templates/tree.html.erb

@@ -0,0 +1,366 @@
+<style type="text/css">
+  .node {
+    cursor: pointer;
+  }
+
+  .overlay {
+    background-color: white;
+  }
+
+  .node circle {
+    fill: lightblue;
+    stroke: steelblue;
+    stroke-width: 1.5px;
+  }
+
+  .node text {
+    font-size: 12px;
+    font-family: sans-serif;
+  }
+
+  .link {
+    fill: none;
+    stroke: #ccc;
+    stroke-width: 1.5px;
+  }
+</style>
+
+<div id="tree-container"></div>
+<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
+<script src="http://d3js.org/d3.v3.min.js"></script>
+<script>
+  /*Copyright (c) 2013-2016, Rob Schmuecker
+  All rights reserved.
+ 
+  Redistribution and use in source and binary forms, with or without
+  modification, are permitted provided that the following conditions are met:
+ 
+  * Redistributions of source code must retain the above copyright notice, this
+  list of conditions and the following disclaimer.
+ 
+  * Redistributions in binary form must reproduce the above copyright notice,
+  this list of conditions and the following disclaimer in the documentation
+  and/or other materials provided with the distribution.
+ 
+  * The name Rob Schmuecker may not be used to endorse or promote products
+  derived from this software without specific prior written permission.
+ 
+  THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+  AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+  IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+  DISCLAIMED. IN NO EVENT SHALL MICHAEL BOSTOCK BE LIABLE FOR ANY DIRECT,
+  INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING,
+  BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+  DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
+  OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
+  NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE,
+  EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.*/
+
+
+  treeData = <%= @tree.to_json %>;
+
+  // Calculate total nodes, max label length
+  var maxLabelLength = 0;
+  // panning variables
+  var panSpeed = 200;
+  // Misc. variables
+  var i = 0;
+  var duration = 750;
+  var root;
+
+  // size of the diagram
+  var viewerWidth = $(document).width() / 2;
+  var viewerHeight = $(document).height() / 2;
+  // var viewerWidth = $(document).width();
+  //  var viewerHeight = $(document).height();
+
+  var tree = d3.layout.tree()
+    .size([viewerHeight, viewerWidth])
+    .separation(function (a, b) {
+      // return (a.parent == b.parent ? 1 : 2);//  * 3 * a.depth;
+      return 1;
+    });
+
+  // define a d3 diagonal projection for use by the node paths later on.
+  var diagonal = d3.svg.diagonal()
+    .projection(function (d) {
+      return [d.y, d.x];
+      // return [d.x, d.y];
+    });
+
+  // A recursive helper function for performing some setup by walking through all nodes
+  function visit(parent, visitFn, childrenFn) {
+    if (!parent) return;
+
+    visitFn(parent);
+
+    var children = childrenFn(parent);
+    if (children) {
+      var count = children.length;
+      for (var i = 0; i < count; i++) {
+        visit(children[i], visitFn, childrenFn);
+      }
+    }
+  }
+
+  // Call visit function to establish maxLabelLength
+  visit(treeData, function (d) {
+    maxLabelLength = Math.max(d.name.length, maxLabelLength);
+
+  }, function (d) {
+    return d.children && d.children.length > 0 ? d.children : null;
+  });
+
+  function pan(domNode, direction) {
+    var speed = panSpeed;
+    if (panTimer) {
+      clearTimeout(panTimer);
+      translateCoords = d3.transform(svgGroup.attr("transform"));
+      if (direction == 'left' || direction == 'right') {
+        translateX = direction == 'left' ? translateCoords.translate[0] + speed : translateCoords.translate[0] - speed;
+        translateY = translateCoords.translate[1];
+      } else if (direction == 'up' || direction == 'down') {
+        translateX = translateCoords.translate[0];
+        translateY = direction == 'up' ? translateCoords.translate[1] + speed : translateCoords.translate[1] - speed;
+      }
+      scaleX = translateCoords.scale[0];
+      scaleY = translateCoords.scale[1];
+      scale = zoomListener.scale();
+      svgGroup.transition().attr("transform", "translate(" + translateX + "," + translateY + ")scale(" + scale + ")");
+      d3.select(domNode).select('g.node').attr("transform", "translate(" + translateX + "," + translateY + ")");
+      zoomListener.scale(zoomListener.scale());
+      zoomListener.translate([translateX, translateY]);
+      panTimer = setTimeout(function () {
+        pan(domNode, speed, direction);
+      }, 50);
+    }
+  }
+
+  // Define the zoom function for the zoomable tree
+  function zoom() {
+    svgGroup.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
+  }
+
+
+  // define the zoomListener which calls the zoom function on the "zoom" event constrained within the scaleExtents
+  var zoomListener = d3.behavior.zoom().scaleExtent([0.1, 3]).on("zoom", zoom);
+
+  // define the baseSvg, attaching a class for styling and the zoomListener
+  var baseSvg = d3.select("#tree-container").append("svg")
+    .attr("width", viewerWidth)
+    .attr("height", viewerHeight)
+    .attr("class", "overlay")
+    .call(zoomListener);
+
+  // Function to center node when clicked/dropped so node doesn't get lost when collapsing/moving with large amount of children.
+
+  function centerNode(source) {
+    scale = zoomListener.scale();
+    x = -source.y0;
+    y = -source.x0;
+    x = x * scale + viewerWidth / 2;
+    y = y * scale + viewerHeight / 2;
+    d3.select('g').transition()
+      .duration(duration)
+      .attr("transform", "translate(" + x + "," + y + ")scale(" + scale + ")");
+    zoomListener.scale(scale);
+    zoomListener.translate([x, y]);
+  }
+
+  // Toggle children function
+
+  function toggleChildren(d) {
+    if (d.children) {
+      d._children = d.children;
+      d.children = null;
+    } else if (d._children) {
+      d.children = d._children;
+      d._children = null;
+    }
+    return d;
+  }
+
+  // Toggle children on click.
+  function click(d) {
+    if (d3.event.defaultPrevented) return; // click suppressed
+    d = toggleChildren(d);
+    update(d);
+    centerNode(d);
+  }
+
+  function update(source) {
+    // Compute the new height, function counts total children of root node and sets tree height accordingly.
+    // This prevents the layout looking squashed when new nodes are made visible or looking sparse when nodes are removed
+    // This makes the layout more consistent.
+    var levelWidth = [1];
+    var childCount = function (level, n) {
+
+      if (n.children && n.children.length > 0) {
+        if (levelWidth.length <= level + 1) levelWidth.push(1);
+
+        levelWidth[level + 1] += n.children.length;
+        n.children.forEach(function (d) {
+          childCount(level + 1, d);
+        });
+      }
+    };
+    childCount(0, root);
+    var newHeight = d3.max(levelWidth) * 50; // 50 pixels per line
+    tree = tree.size([newHeight, viewerWidth]);
+
+    // Compute the new tree layout.
+    var nodes = tree.nodes(root).reverse(),
+      links = tree.links(nodes);
+
+    // Set widths between levels based on maxLabelLength.
+    nodes.forEach(function (d) {
+      d.y = (d.depth * (maxLabelLength * 5)); //maxLabelLength * 10px
+      // alternatively to keep a fixed scale one can set a fixed depth per level
+      // Normalize for fixed-depth by commenting out below line
+      // d.y = (d.depth * 500); //500px per level.
+    });
+
+    // Update the nodes…
+    node = svgGroup.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);
+
+    nodeEnter.append("circle")
+      .attr('class', 'nodeCircle')
+      .attr("r", 0)
+      .style("fill", function (d) {
+        return d._children ? "lightsteelblue" : "#fff";
+      });
+
+    nodeEnter.append("svg:a").attr("xlink:href", function (d) { return d.dst_ref })
+      .append("text")
+      .attr("x", function (d) {
+        return d.children || d._children ? -20 : 20;
+      })
+      .attr("dy", ".35em")
+      .attr('class', 'nodeText')
+      .attr("text-anchor", function (d) {
+        return d.children || d._children ? "end" : "start";
+      })
+      .text(function (d) {
+        return d.name;
+      })
+      .style("fill-opacity", 50);
+
+    // Update the text to reflect whether node has children or not.
+    node.select('text')
+      .attr("x", function (d) {
+        return d.children || d._children ? -20 : 20;
+      })
+      .attr("text-anchor", function (d) {
+        return d.children || d._children ? "end" : "start";
+      })
+      .text(function (d) {
+        return d.name;
+      });
+
+    // Change the circle fill depending on whether it has children and is collapsed
+    node.select("circle.nodeCircle")
+      .attr("r", 7)
+      .style("fill", function (d) {
+        return d._children ? "lightsteelblue" : "#fff";
+      });
+
+    // Transition nodes to their new position.
+    var nodeUpdate = node.transition()
+      .duration(duration)
+      .attr("transform", function (d) {
+        // var x = d.x + (d.depth % 2 * 15)
+        // return "translate(" + d.y + "," + x + ")";
+        return "translate(" + d.y + "," + d.x + ")";
+        // return "translate(" + d.x + "," + d.y + ")";
+      });
+
+    // Fade the text in
+    nodeUpdate.select("text")
+      .style("fill-opacity", 1);
+
+    // Transition exiting nodes to the parent's new position.
+    var nodeExit = node.exit().transition()
+      .duration(duration)
+      .attr("transform", function (d) {
+        return "translate(" + source.y + "," + source.x + ")";
+        // return "translate(" + source.x + "," + source.y + ")";
+      })
+      .remove();
+
+    nodeExit.select("circle")
+      .attr("r", 0);
+
+    nodeExit.select("text")
+      .style("fill-opacity", 0);
+
+    // Update the links…
+    var link = svgGroup.selectAll("path.link")
+      .data(links, function (d) {
+        return d.target.id;
+      });
+
+    // Enter any new links at the parent's previous position.
+    link.enter().insert("path", "g")
+      .attr("class", "link")
+      .attr("d", function (d) {
+        var o = {
+          x: source.x0,
+          y: source.y0
+        };
+        return diagonal({
+          source: o,
+          target: o
+        });
+      });
+
+    // Transition links to their new position.
+    link.transition()
+      .duration(duration)
+      .attr("d", diagonal);
+
+    // Transition exiting nodes to the parent's new position.
+    link.exit().transition()
+      .duration(duration)
+      .attr("d", function (d) {
+        var o = {
+          x: source.x,
+          y: source.y
+        };
+        return diagonal({
+          source: o,
+          target: o
+        });
+      })
+      .remove();
+
+    // Stash the old positions for transition.
+    nodes.forEach(function (d) {
+      d.x0 = d.x;
+      d.y0 = d.y;
+    });
+  }
+
+  // Append a group which holds all nodes and which the zoom Listener can act upon.
+  var svgGroup = baseSvg.append("g");
+
+  // Define the root
+  root = treeData;
+  //  root.x0 = viewerHeight / 2;
+  root.x0 = 0;
+  root.y0 = viewerWidth / 2;
+
+  // Layout the tree initially and center on the root node.
+  update(root);
+//  centerNode(root);
+</script>

data/lib/giblish/indexbuilders/templates/treemap.html.erb

@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<head>
+  <head>
+    <meta charset="utf-8">
+    <style>
+     html, body {
+         padding: 0;
+         margin: 0;
+         width: 100%;
+         height: 100%;
+         overflow: hidden;
+     }
+
+     text {
+         font: 12px sans-serif;
+     }
+
+     tspan:last-child {
+         font-size: 12px;
+         fill-opacity: 0.8;
+     }
+
+     .node rect {
+         shape-rendering: crispEdges;
+     }
+
+     .node--hover rect {
+         stroke: #000;
+     }
+
+    </style>
+    <svg width="100%" height="100%"></svg>
+    <script src="http://d3js.org/d3.v4.0.0-alpha.35.min.js"></script>
+    <script>
+
+     var svg = d3.select("svg"),
+         width = window.innerWidth,
+         height = window.innerHeight;
+
+     svg.attr("width", width + "px");
+     svg.attr("height", height + "px");
+
+     var format = d3.format(",d");
+
+     var color = d3.scaleMagma()
+                   .domain([-4, 4]);
+
+     var treemap = d3.treemap()
+                     .size([width, height])
+                     .paddingOuter(3)
+                     .paddingTop(19)
+                     .paddingInner(1)
+                     .round(true);
+
+
+     var data = <%= tree.to_json %>
+     var root = d3.hierarchy(data)
+                  .sum(function(d) {
+                      var value = 1;
+                      d.children.forEach(function(i){ value += i.value; })
+                      return value;
+                  })
+                  .sort(function(a, b) { return b.height - a.height || b.value - a.value; })
+
+     var counter = 0;
+     root.each(function(d){ d.id = counter++; })
+     treemap(root)
+
+     var cell = svg
+         .selectAll(".node")
+         .data(root.descendants())
+         .enter().append("g")
+         .attr("transform", function(d) { return "translate(" + d.x0 + "," + d.y0 + ")"; })
+         .attr("class", "node")
+         .each(function(d) { d.node = this; })
+         .on("mouseover", hovered(true))
+         .on("mouseout", hovered(false));
+
+     cell.append("rect")
+         .attr("id", function(d) { return "rect-" + d.id; })
+         .attr("width", function(d) { return d.x1 - d.x0; })
+         .attr("height", function(d) { return d.y1 - d.y0; })
+         .style("fill", function(d) { return color(d.depth); });
+
+     cell.append("clipPath")
+         .attr("id", function(d) { return "clip-" + d.id; })
+         .append("use")
+         .attr("xlink:href", function(d) { return "#rect-" + d.id + ""; });
+
+     var label = cell.append("text")
+                     .attr("clip-path", function(d) { return "url(#clip-" + d.id + ")"; });
+
+     label
+         .filter(function(d) { return d.children; })
+         .selectAll("tspan")
+         .data(function(d) { return [d.data.name]; })
+         .enter().append("tspan")
+         .attr("x", function(d, i) { return i ? null : 4; })
+         .attr("y", 13)
+         .text(function(d) { return d; });
+
+     label
+         .filter(function(d) { return !d.children; })
+         .selectAll("tspan")
+         .data(function(d) { return [d.data.name]; })
+         .enter().append("tspan")
+         .attr("x", 4)
+         .attr("y", function(d, i) { return 13 + i * 10; })
+         .text(function(d) { return d; });
+
+     cell.append("title")
+         .text(function(d) { return d.data.name; });
+
+     function hovered(hover) {
+         return function(d) {
+             d3.selectAll(d.ancestors().map(function(d) { return d.node; }))
+               .classed("node--hover", hover)
+               .select("rect")
+               .attr("width", function(d) { return d.x1 - d.x0 - hover; })
+               .attr("height", function(d) { return d.y1 - d.y0 - hover; });
+         };
+     }
+
+    </script>
+  </head>
+  <body></body>
+</head>

data/lib/giblish/indexbuilders/verbatimtree.rb

@@ -0,0 +1,94 @@
+# frozen_string_literal: true
+
+module Giblish
+  # Generate asciidoc that represents a given pathtree as a
+  # verbatim block with indented, clickable entries.
+  class VerbatimTree
+    # options:
+    # dir_index_base_name: String - the basename of the index file
+    # residing in each directory
+    def initialize(tree, options = {dir_index_base_name: "index"})
+      @tree = tree
+      @nof_missing_titles = 0
+      @options = options.dup
+    end
+
+    def source
+      # output tree intro
+      tree_string = +<<~DOC_HEADER
+        [subs=\"normal\"]
+        ----
+      DOC_HEADER
+
+      # generate each tree entry string
+      @tree.traverse_preorder do |level, node|
+        next if level == 0
+
+        tree_string << tree_entry_string(level, node)
+      end
+
+      # generate the tree footer
+      tree_string << "\n----\n"
+    end
+
+    private
+
+    def tree_entry_string(level, node)
+      # indent 2 * level
+      prefix_str = "  " * (level + 1)
+
+      # return only name for directories
+      return directory_entry(prefix_str, node) unless node.leaf?
+
+      # return links to content and details for files
+      d = node.data
+      if d.converted
+        tree_entry_converted(prefix_str, node)
+      else
+        # no converted file exists, show what we know
+        "#{prefix_str} FAIL: #{d.src_basename}      <<#{d.src_basename},details>>\n"
+      end
+    end
+
+    def directory_entry(prefix_str, node)
+      p = node.pathname.relative_path_from(@tree.pathname).join(@options[:dir_index_base_name])
+      "#{prefix_str} <<#{p}#,#{node.segment}>>\n"
+    end
+
+    # Generate an adoc string that will display as
+    # DocTitle         (conv issues)  details
+    # Where the DocTitle and details are links to the doc itself and a section
+    # identified with the doc's title respectively.
+    def tree_entry_converted(prefix_str, node)
+      # Get the elements of the entry
+      doc_title, doc_link, doc_details = format_title_and_ref(node)
+      warning_label = node.data.stderr.empty? ? "" : "(conv issues)"
+
+      # Calculate padding to get (conv issues) and details aligned in columns
+      padding = 70
+      [doc_title, prefix_str, warning_label].each { |p| padding -= p.length }
+      padding = 0 unless padding.positive?
+
+      "#{prefix_str} #{doc_link}#{" " * padding}#{warning_label} #{doc_details}"
+    end
+
+    # Private: Return adoc elements for displaying a clickable title
+    # and a 'details' ref that points to a section that uses the title as an id.
+    #
+    # Returns [ title, clickableTitleStr, clickableDetailsStr ]
+    def format_title_and_ref(node)
+      conv_info = node.data
+
+      # Use docid and title in title reference
+      title_ref = (conv_info.docid.nil? ? "" : "#{conv_info.docid} - ") + conv_info.title
+
+      # find relative source path from the file to this tree's root
+      p = node.pathname.relative_path_from(@tree.pathname).sub_ext(".adoc")
+
+      # remove html markup in the title for displaying in the tree
+      stripped_title = title_ref.gsub(/<.*?>/, "")
+      [stripped_title, "<<#{p}#,#{stripped_title}>>",
+        "<<#{Giblish.to_valid_id(node.pathname.to_s, "_", "_", true)},details>>\n"]
+    end
+  end
+end