force running spinner

This commit is contained in:
Oliver Gorwits
2017-12-25 13:13:13 +00:00
parent 6618fba548
commit 9578215349

View File

@@ -26,9 +26,46 @@ function resizeGraphContainer() {
var netmap_pane = jQuery('#netmap_pane');
graph.width( parseInt(netmap_pane.parent().css('width')) ).resume();
graph.height( window.innerHeight - 100 ).resume();
d3.select("#nd2_netmap-spinner-container").attr("transform",
"translate(" + (graph.width() - 16) + "," + (graph.height() - 16) + ")")
}, 500)
}
$('#nd_sidebar-toggle-img-in').on("click", resizeGraphContainer);
$('#nd_sidebar-toggle-img-out').on("click", resizeGraphContainer);
$(window).on("resize", resizeGraphContainer);
var radius = 12;
var tau = 2 * Math.PI;
var arc = d3.svg.arc()
.innerRadius(radius * 0.5)
.outerRadius(radius * 0.9)
.startAngle(0)
.endAngle(0.33 * tau);
var arc2 = d3.svg.arc()
.innerRadius(radius * 0.5)
.outerRadius(radius * 0.9)
.startAngle(0)
.endAngle(tau);
function spin(selection, duration) {
duration = duration || 1500;
if (! graph.inspect().status.forceRunning) {
d3.select('#nd2_netmap-spinner').style('fill', '#CCFFCC').attr('d', arc2);
return;
}
d3.select('#nd2_netmap-spinner').style('fill', '#FFE4B5').attr('d', arc);
selection.transition()
.ease("linear")
.duration(duration)
.attrTween("transform", function() {
return d3.interpolateString("rotate(0)", "rotate(360)");
});
setTimeout(function() { spin(selection, duration); }, duration);
}
$.getJSON('[% uri_for('/ajax/data/device/netmap') %]?[% my_query %]', function(mapdata) {
jQuery(document).ready(function() {
@@ -58,10 +95,6 @@ $.getJSON('[% uri_for('/ajax/data/device/netmap') %]?[% my_query %]', function(m
.charge(-550)
.gravity(0.3);
jQuery('#nd_sidebar-toggle-img-in').on("click", resizeGraphContainer);
jQuery('#nd_sidebar-toggle-img-out').on("click", resizeGraphContainer);
jQuery(window).on("resize", resizeGraphContainer);
graph['nd2'] = {};
graph['nd2']['centernode'] = mapdata['v3']['centernode'];
graph['nd2']['dragging'] = false;
@@ -108,9 +141,33 @@ $.getJSON('[% uri_for('/ajax/data/device/netmap') %]?[% my_query %]', function(m
});
});
graph.inspect().main.force.on('start.nd2spinner', function() {
d3.select("#nd2_netmap-spinner").call(spin);
});
graph.inspect().main.force.on('end.setupfornetdisco', null);
});
graph.inspect().dom.svg
.append("svg:text")
.attr("id", "nd2_fullscreen_netmap")
.attr("class", "link")
.attr("x", (graph.width() - 17))
.attr("y", 17)
.attr("text-anchor", "start")
.attr("font-family", "FontAwesome")
.text(function() { return '\uf0b2' })
.on("click", function() {
requestFullScreen(document.getElementById('netmap_pane'));
});
graph.inspect().dom.svg
.append("g")
.attr("id", "nd2_netmap-spinner-container")
.attr("transform", "translate(" + (graph.width() - 16) + "," + (graph.height() - 16) + ")")
.append("path")
.attr("id", "nd2_netmap-spinner");
var netmapdata = {'data': {
'nodes': mapdata['v4']['nodes'].map(function(node) {
var index = node['index'];
@@ -119,19 +176,7 @@ $.getJSON('[% uri_for('/ajax/data/device/netmap') %]?[% my_query %]', function(m
'links': mapdata['v3']['links']
}};
graph.start(netmapdata);
graph.inspect().dom.svg
.append("svg:text")
.attr("id", "nd2_fullscreen_netmap")
.attr("class", "link")
.attr("x", (graph.width() - 17))
.attr("y", 17)
.attr("text-anchor", "start")
.attr("font-family", "FontAwesome")
.text(function() { return '\uf0b2' })
.on("click", function() {
requestFullScreen(document.getElementById('netmap_pane'));
});
d3.select("#nd2_netmap-spinner").call(spin);
if ('[% params.mapshow %]' == 'neighbors') {
setTimeout(function() {