blob: b13732760a4b45ad8bcd89c35d743c7837ace1cb [file] [log] [blame]
/**
* JavaScript functions enhancing the SVG diagrams.
*
* @author Damien Obrist
*/
var diagrams = {};
/**
* Initializes the diagrams in the main window.
*/
$(document).ready(function()
{
// hide diagrams in browsers not supporting SVG
if(Modernizr && !Modernizr.inlinesvg)
return;
if($("#content-diagram").length)
$("#inheritance-diagram").css("padding-bottom", "20px");
$(".diagram-container").css("display", "block");
$(".diagram").each(function() {
// store initial dimensions
$(this).data("width", $("svg", $(this)).width());
$(this).data("height", $("svg", $(this)).height());
// store unscaled clone of SVG element
$(this).data("svg", $(this).get(0).childNodes[0].cloneNode(true));
});
// make diagram visible, hide container
$(".diagram").css("display", "none");
$(".diagram svg").css({
"position": "static",
"visibility": "visible",
"z-index": "auto"
});
// enable linking to diagrams
if($(location).attr("hash") == "#inheritance-diagram") {
diagrams.toggle($("#inheritance-diagram-container"), true);
} else if($(location).attr("hash") == "#content-diagram") {
diagrams.toggle($("#content-diagram-container"), true);
}
$(".diagram-link").click(function() {
diagrams.toggle($(this).parent());
});
// register resize function
$(window).resize(diagrams.resize);
// don't bubble event to parent div
// when clicking on a node of a resized
// diagram
$("svg a").click(function(e) {
e.stopPropagation();
});
diagrams.initHighlighting();
$("button#diagram-fs").click(function() {
$(".diagram-container").toggleClass("full-screen");
$(".diagram-container > div.diagram").css({
height: $("svg").height() + "pt"
});
$panzoom.panzoom("reset", { animate: false, contain: false });
});
});
/**
* Initializes highlighting for nodes and edges.
*/
diagrams.initHighlighting = function()
{
// helper function since $.hover doesn't work in IE
function hover(elements, fn)
{
elements.mouseover(fn);
elements.mouseout(fn);
}
// inheritance edges
hover($("svg .edge.inheritance"), function(evt){
var toggleClass = evt.type == "mouseout" ? diagrams.removeClass : diagrams.addClass;
var parts = $(this).attr("id").split("_");
toggleClass($("#" + parts[0] + "_" + parts[1]));
toggleClass($("#" + parts[0] + "_" + parts[2]));
toggleClass($(this));
});
// nodes
hover($("svg .node"), function(evt){
var toggleClass = evt.type == "mouseout" ? diagrams.removeClass : diagrams.addClass;
toggleClass($(this));
var parts = $(this).attr("id").split("_");
var index = parts[1];
$("svg#" + parts[0] + " .edge.inheritance").each(function(){
var parts2 = $(this).attr("id").split("_");
if(parts2[1] == index)
{
toggleClass($("#" + parts2[0] + "_" + parts2[2]));
toggleClass($(this));
} else if(parts2[2] == index)
{
toggleClass($("#" + parts2[0] + "_" + parts2[1]));
toggleClass($(this));
}
});
});
// incoming implicits
hover($("svg .node.implicit-incoming"), function(evt){
var toggleClass = evt.type == "mouseout" ? diagrams.removeClass : diagrams.addClass;
toggleClass($(this));
toggleClass($("svg .edge.implicit-incoming"));
toggleClass($("svg .node.this"));
});
hover($("svg .edge.implicit-incoming"), function(evt){
var toggleClass = evt.type == "mouseout" ? diagrams.removeClass : diagrams.addClass;
toggleClass($(this));
toggleClass($("svg .node.this"));
$("svg .node.implicit-incoming").each(function(){
toggleClass($(this));
});
});
// implicit outgoing nodes
hover($("svg .node.implicit-outgoing"), function(evt){
var toggleClass = evt.type == "mouseout" ? diagrams.removeClass : diagrams.addClass;
toggleClass($(this));
toggleClass($("svg .edge.implicit-outgoing"));
toggleClass($("svg .node.this"));
});
hover($("svg .edge.implicit-outgoing"), function(evt){
var toggleClass = evt.type == "mouseout" ? diagrams.removeClass : diagrams.addClass;
toggleClass($(this));
toggleClass($("svg .node.this"));
$("svg .node.implicit-outgoing").each(function(){
toggleClass($(this));
});
});
};
/**
* Resizes the diagrams according to the available width.
*/
diagrams.resize = function() {
// available width
var availableWidth = $(".diagram-container").width();
$(".diagram-container").each(function() {
// unregister click event on whole div
$(".diagram", this).unbind("click");
var diagramWidth = $(".diagram", this).data("width");
var diagramHeight = $(".diagram", this).data("height");
if (diagramWidth > availableWidth) {
// resize diagram
var height = diagramHeight / diagramWidth * availableWidth;
$(".diagram svg", this).width(availableWidth);
$(".diagram svg", this).height(height);
} else {
// restore full size of diagram
$(".diagram svg", this).width(diagramWidth);
$(".diagram svg", this).height(diagramHeight);
// don't show custom cursor any more
$(".diagram", this).removeClass("magnifying");
}
});
};
/**
* Shows or hides a diagram depending on its current state.
*/
diagrams.toggle = function(container, dontAnimate)
{
// change class of link
$(".diagram-link", container).toggleClass("open");
// get element to show / hide
var div = $(".diagram", container);
if (div.is(':visible')) {
$(".diagram-help", container).hide();
div.unbind("click");
div.slideUp(100);
$("#diagram-controls", container).hide();
$("#inheritance-diagram-container").unbind('mousewheel.focal');
} else {
diagrams.resize();
if(dontAnimate)
div.show();
else
div.slideDown(100);
$(".diagram-help", container).show();
$("#diagram-controls", container).show();
$(".diagram-container").on('mousewheel.focal', function(e) {
e.preventDefault();
var delta = e.delta || e.originalEvent.wheelDelta;
var zoomOut = delta ? delta < 0 : e.originalEvent.deltaY > 0;
$panzoom.panzoom('zoom', zoomOut, {
increment: 0.1,
animate: true,
focal: e
});
});
}
};
/**
* Helper method that adds a class to a SVG element.
*/
diagrams.addClass = function(svgElem, newClass) {
newClass = newClass || "over";
var classes = svgElem.attr("class");
if ($.inArray(newClass, classes.split(/\s+/)) == -1) {
classes += (classes ? ' ' : '') + newClass;
svgElem.attr("class", classes);
}
};
/**
* Helper method that removes a class from a SVG element.
*/
diagrams.removeClass = function(svgElem, oldClass) {
oldClass = oldClass || "over";
var classes = svgElem.attr("class");
classes = $.grep(classes.split(/\s+/), function(n, i) { return n != oldClass; }).join(' ');
svgElem.attr("class", classes);
};