esdoc-plugin-dependency-graphs
Version:
A plugin for ESDoc that adds interactive D3 powered dependency graphs for source code including linking JSPM / NPM managed code and packages.
114 lines (96 loc) • 5.21 kB
HTML
<html>
<head>
<title><%= title %></title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
<style>
<%= css %>
</style>
</head>
<body>
<div class="graph"></div>
<div class="control-button control-zoom">
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-js-ripple-effect mdl-button--colored" data-action="zoom_in">
<i class="material-icons">add</i>
</button>
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-js-ripple-effect mdl-button--colored" data-action="zoom_out">
<i class="material-icons">remove</i>
</button>
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-js-ripple-effect mdl-button--colored" data-action="zoom_all_out">
<i class="material-icons">all_out</i>
</button>
</div>
<div class="control-level">
<input class="mdl-slider mdl-js-slider" type="range" min="0" max="<%= maxPackageLevel %>" value="<%= maxPackageLevel %>" step="1" tabindex="0">
<label class="mdl-textfield__label" style="padding-left: 5px; margin-top: -8px;"><%= maxPackageLevel %></label>
<i class="material-icons" style="float: right; margin-top: -24px;">filter_list</i>
</div>
<div class="control-toggles control-deps">
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="dep1">
<input class="mdl-radio__button" id="dep1" name="dep" type="radio" value="main">
<span class="mdl-radio__label">Main</span>
</label>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" style="margin-left: 10px" for="dep2">
<input class="mdl-radio__button" id="dep2" name="dep" type="radio" value="dev">
<span class="mdl-radio__label">Dev</span>
</label>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" style="margin-left: 10px" for="dep3">
<input checked class="mdl-radio__button" id="dep3" name="dep" type="radio" value="all">
<span class="mdl-radio__label">All</span>
</label>
</div>
<div class="control-toggles control-links">
<label for="chkbox1" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
<input type="checkbox" id="chkbox1" class="mdl-checkbox__input">
<span class="mdl-checkbox__label">Reverse Links</span>
</label>
</div>
<div class="control-button control-menu">
<button id="control-menu" class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-js-ripple-effect">
<i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" for="control-menu">
<li class="mdl-menu__item mdl-menu__item--full-bleed-divider" data-action="toggleFreezeAllNodes">Freeze nodes</li>
<li class="mdl-menu__item mdl-menu__item--full-bleed-divider flex-center-left" data-action="showFullNames"><i class="material-icons material-icon-blue">check_box_outline_blank</i>Show aliased full names</li>
<li class="mdl-menu__item mdl-menu__item--full-bleed-divider flex-center-left" data-action="showTableView"><i class="material-icons material-icon-blue">check_box_outline_blank</i>Show table view</li>
<li class="mdl-menu__item flex-center-left" data-action="maxDepthSticky"><i class="material-icons material-icon-blue">check_box</i>Max depth sticky</li>
</ul>
</div>
<div class="control-table hidden">
<div class="control-table-inner">
<table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp tablesorter" id="nodeTable">
<thead>
<tr>
<th class="mdl-data-table__cell--non-numeric">Package</th>
<th class="mdl-data-table__cell--non-numeric">Type</th>
<th class="mdl-data-table__cell--non-numeric">Version</th>
<th class="mdl-data-table__cell--non-numeric"><i class="material-icons" style="font-size:14px;">filter_list</i></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<div id="contextpopup">
<button id="context-menu" class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-js-ripple-effect hidden">
<i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" for="context-menu">
<li class="mdl-menu__item mdl-menu__item--full-bleed-divider hidden" data-action="openLink">Open on ...</li>
<li class="mdl-menu__item mdl-menu__item--full-bleed-divider hidden" data-action="openLink">Open on ...</li>
<li disabled class="mdl-menu__item hidden">Version: ...</li>
</ul>
</div>
<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>
var getPackageDataAll = function() { return <%= packageDataAll %>; };
var getPackageDataDev = function() { return <%= packageDataDev %>; };
var getPackageDataMain = function() { return <%= packageDataMain %>; };
<%= js %>
<%= js2 %>
</script>
</body>
</html>