force running spinner
This commit is contained in:
@@ -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() {
|
||||
|
||||
Reference in New Issue
Block a user