CIRCL
/
lookyloo
mirror of https://github.com/CIRCL/lookyloo
2
0
Fork 0
Code Issues Releases Wiki Activity

fix: Improve URL overlay

pull/27/head
Raphaël Vinot 2018-06-29 14:03:52 +08:00
parent c8fb313d28
commit 5202630278
1 changed files with 25 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
lookyloo/static/tree.js
View File

@ -7,6 +7,7 @@ var margin = {top: 20, right: 200, bottom: 30, left: 90},
var node_width = 0; var node_width = 0;
var max_overlay_width = 1500; var max_overlay_width = 1500;
var default_max_overlay_height = 500;
var node_height = 45; var node_height = 45;
var main_svg = d3.select("body").append("svg") var main_svg = d3.select("body").append("svg")
@ -19,6 +20,13 @@ main_svg.append("clipPath")
.attr('width', max_overlay_width - 25) .attr('width', max_overlay_width - 25)
.attr('height', node_height); .attr('height', node_height);
main_svg.append("clipPath")
.attr("id", "overlayHeight")
.append("rect")
.attr('width', max_overlay_width)
.attr('height', default_max_overlay_height + 100);
// Add background pattern // Add background pattern
var pattern = main_svg.append("defs").append('pattern') var pattern = main_svg.append("defs").append('pattern')
.attr('id', 'backstripes') .attr('id', 'backstripes')
@ -159,7 +167,7 @@ function hostnode_click(d) {
.attr('height', overlay_header_height) .attr('height', overlay_header_height)
.attr('x', left_margin + 500) // Value updated based on the size of the rectangle max: max_overlay_width .attr('x', left_margin + 500) // Value updated based on the size of the rectangle max: max_overlay_width
.attr('y', top_margin + 25) .attr('y', top_margin + 25)
.style("font-size", overlay_header_height - 20) .style("font-size", '30px')
.text('\u2716') .text('\u2716')
.attr('cursor', 'pointer') .attr('cursor', 'pointer')
.on("click", function() { .on("click", function() {
@ -177,30 +185,35 @@ function hostnode_click(d) {
.attr('x2', 500) .attr('x2', 500)
.attr('y2', overlay_header_height); .attr('y2', overlay_header_height);
var url_entries = overlay_hostname.append('svg');
var interval_entries = 40; var interval_entries = 40;
urls.forEach(function(url, index, array) { urls.forEach(function(url, index, array) {
var jdata = JSON.parse(url) var jdata = JSON.parse(url)
overlay_hostname.datum({'data': jdata}); url_entries.datum({'data': jdata});
var text_node = text_entry(overlay_hostname, left_margin, top_margin + overlay_header_height + (interval_entries * index), urlnode_click); var text_node = text_entry(url_entries, left_margin, top_margin + overlay_header_height + (interval_entries * index), urlnode_click);
height_text = text_node.node().getBBox().height; var height_text = text_node.node().getBBox().height;
icon_list(overlay_hostname, left_margin + 5, top_margin + height_text + overlay_header_height + (interval_entries * index)); icon_list(url_entries, left_margin + 5, top_margin + height_text + overlay_header_height + (interval_entries * index));
}); });
var overlay_bbox = overlay_hostname.node().getBBox()
overlay_hostname.append('line') overlay_hostname.append('line')
.attr('id', 'overlay_separator_footer' + d.data.uuid) .attr('id', 'overlay_separator_footer' + d.data.uuid)
.style("stroke", "gray") .style("stroke", "gray")
.style('stroke-width', 2) .style('stroke-width', 2)
.attr('x1', 15) .attr('x1', 15)
.attr('y1', overlay_hostname.node().getBBox().height + 15) .attr('y1', overlay_bbox.height + 20)
.attr('x2', 500) .attr('x2', 500)
.attr('y2', overlay_hostname.node().getBBox().height); .attr('y2', overlay_bbox.height + 20);
var overlay_bbox = overlay_hostname.node().getBBox()
overlay_hostname overlay_hostname
.append('text') .append('text')
.attr('id', 'overlay_download_' + d.data.uuid) .attr('id', 'overlay_download_' + d.data.uuid)
.attr('height', overlay_header_height - 10) .attr('height', overlay_header_height - 10)
.attr('x', left_margin) .attr('x', left_margin)
.attr('y', overlay_hostname.node().getBBox().height + 40) .attr('y', overlay_bbox.height + overlay_header_height)
.style("font-size", overlay_header_height - 30) .style("font-size", '20px')
.text('Download URLs as text') .text('Download URLs as text')
.attr('cursor', 'pointer') .attr('cursor', 'pointer')
.on("click", function() { .on("click", function() {
@ -210,16 +223,16 @@ function hostnode_click(d) {
}); });
}); });
overlay_bbox = overlay_hostname.node().getBBox(); var overlay_bbox = overlay_hostname.node().getBBox();
overlay_hostname.select('rect') overlay_hostname.select('rect')
.attr('width', function() { .attr('width', function() {
optimal_size = overlay_bbox.width + left_margin optimal_size = overlay_bbox.width + left_margin
return optimal_size < max_overlay_width ? optimal_size : max_overlay_width; return optimal_size < max_overlay_width ? optimal_size : max_overlay_width;
}) })
.attr('height', overlay_bbox.height + 10); .attr('height', overlay_bbox.height + overlay_header_height);
overlay_hostname.select('#overlay_close_' + d.data.uuid) overlay_hostname.select('#overlay_close_' + d.data.uuid)
.attr('x', overlay_hostname.select('rect').node().getBBox().width - left_margin); .attr('x', overlay_hostname.select('rect').node().getBBox().width - 20);
overlay_hostname.select('#overlay_separator_header' + d.data.uuid) overlay_hostname.select('#overlay_separator_header' + d.data.uuid)
.attr('x2', overlay_hostname.select('rect').node().getBBox().width + 14); .attr('x2', overlay_hostname.select('rect').node().getBBox().width + 14);