$(document).ready( function() {
$('body').layout({
west__size: 250
, east__size: 250
// RESIZE Accordion widget when panes resize
, west__onresize: $.layout.callbacks.resizePaneAccordions
, east__onresize: $.layout.callbacks.resizePaneAccordions
, east__initClosed: true
});
// ACCORDION - in the West pane
$("#accordion1").accordion({
fillSpace: true
, active: 1
});
// ACCORDION - in the East pane
$("#accordion2").accordion({
fillSpace: true
, active: 1
});
// load last saved graph - from localStorage or have
// an open saved graph function?
jsPlumb.bind("ready", function() {
// chrome fix.
document.onselectstart = function () { return false; };
jsPlumb.setRenderMode(jsPlumb.SVG);
jsPlumbDiagram.init();
});
});
;(function() {
window.jsPlumbDiagram = {
init :function() {
jsPlumb.importDefaults({
Endpoint: "Blank",
PaintStyle: {lineWidth:2,strokeStyle:"black"},
Anchor: "Continuous",
Connector: "StateMachine"
});
}
};
})();
;(function() {
jsPlumbDiagram.initEndpoints = function() {
$(".ep").each(function(i,e) {
var p = $(e).parent();
jsPlumb.makeSource($(e), {
parent:p,
isSource: true,
});
});
jsPlumb.makeTarget($(".w"), {
dropOptions:{ hoverClass:"dragHover" },
anchor:"Continuous",
isTarget: true,
beforeDrop: function(params) {
// Don't allow recursive connections
if (params.sourceId === params.targetId){
return false;
} else {
$( "#dialog-create-connector" )
.data('params', params)
.dialog( "open" );
}
}
});
};
})();
;$(function() {
var dialogLayout = false
, dialogLayout_settings = {
zIndex: 0 // HANDLE BUG IN CHROME - required if using 'modal' (background mask)
, resizeWithWindow: false // resizes with the dialog, not the window
, spacing_open: 1
, spacing_closed: 1
, closable: false
, resizable: false
, slidable: false
, west__size: '47%'
, east__size: '48%'
, south__size: 'auto'
, south__closable: false
, south__resizable: false
, south__slidable: false
, north__size: 'auto'
, north__closable: false
, north__resizable: false
, north__slidable: false
// , applyDefaultStyles: true // DEBUGGING
};
var winid = 0,
connid = 0,
tips = $( ".validateTips" ),
code_name = $( "#code_name" ),
branch_name = $( "#branch_name" );
var codeline_col = [];
var connection_col = [];
function updateTips( t ) {
tips
.text( t )
.addClass( "ui-state-highlight" );
setTimeout(function() {
tips.removeClass( "ui-state-highlight", 1500 );
}, 500 );
}
function checkLength( o, n, min, max ) {
if ( o.val().length > max || o.val().length < min ) {
o.addClass( "ui-state-error" );
updateTips( "Length of " + n + " must be between " +
min + " and " + max + "." );
return false;
} else {
return true;
}
}
function exportGraph() {
var xmlOutput = "";
$.each(codeline_col, function(key, value) {
xmlOutput = key + ': ' + value + "\n";
});
alert(xmlOutput);
return xmlOutput;
}
// Connector class
function Connector(type, conn_name) {
// Info needed for Eclipse xml export
// height: 0, //"41"
// id: 0, // codeline1, codeline2
// name: "Not specified", // "Chris Main"
// type: "Not specified", // development, main, release
//
// width: 0, // "121"
// x: 0, // "265"
// y: 0, // "395
var conn = type; // branch or path
var name = conn_name;
var img = conn + "_conn";
var id = conn + connid++;
this.connId = function() {
return id;
};
this.htmlTag = function() {
var conn_tag = "<div class='c" +
"' id='" + id + "'>" +
"<div id='" + img + "' title='" + name + "'></div>" +
"<div class='cex'></div></div>";
return conn_tag;
};
this.xmlExport = function() {
var xmlTag = "name:" + name +
"type:" + type;
return xmlTag;
};
}
// Codeline class
function Codeline(selection, codeline_name) {
var type = selection;
var name = codeline_name;
var img = type + "_img";
var id = type + winid++;
this.htmlTag = function() {
var code_tag = "<div class='w " + type +
"' id=" + id + ">" +
"<div id=" + img + "></div>" +
name +
"<div class='ex'></div>" +
"<div class='ep' title='Drag to another codeline to establish connection'></div></div>";
return code_tag;
};
this.xmlExport = function() {
var xmlTag = "name:" + name +
"type:" + type;
return xmlTag;
};
}
$( "#dialog-create-codeline" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Finish": function() {
var bValid = true;
code_name.removeClass( "ui-state-error" );
bValid = bValid && checkLength( code_name, "codeline name", 1, 25 );
if ( bValid ) {
var codeline = new Codeline($("#codeline_type option:selected").val(), code_name.val());
codeline_col.push(codeline);
var code_tag = codeline.htmlTag();
$( "#JSPlumbDiagram" ).append( code_tag );
console.log(code_tag);
$(".ex").unbind("click")
.click(function(){
$( "#dialog-confirm-delete" )
.data('params', $(this).parent())
.dialog( "open" );
});
jsPlumb.draggable(jsPlumb.getSelector(".w"));
jsPlumbDiagram.initEndpoints();
$( this ).dialog( "close" );
}
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
code_name.val( "" ).removeClass( "ui-state-error" );
},
open: openCreateCodelineDialog
});
function openCreateCodelineDialog() {
$('#codeline_type').change(function() {
switch($(this).val())
{
case "development":
$("#code_image").attr('src', 'url(css/images/branch_dev.png)');
break;
case "main":
$("#code_image").attr('src', 'url(css/images/branch_main.png)');
break;
case "release":
$("#code_image").attr('src', 'url(css/images/branch_staging.png)');
break;
}
});
code_name.focus();
};
function getInterchanges( me, param1, param2) {
if (param2 === undefined ) {
p4.getInterchanges(null, null, {branchName: param1}, function(changelists) {
var connector = new Connector("branch", param1);
connection_col.push(connector);
var numOfChangelists = changelists.length;
drawConnection(me, numOfChangelists, connector);
$( me ).dialog( "close" );
});
}
else {
p4.getInterchanges(param1, param2, {}, function(changelists) {
var paths = param1 + " " + param2;
var connector = new Connector("path", paths);
connection_col.push(connector);
var numOfChangelists = changelists.length;
drawConnection(me, numOfChangelists, connector);
$( me ).dialog( "close" );
});
}
}
function drawConnection(me, numOfChangelists, connector) {
var cssConnClass = "connInteg";
if (numOfChangelists === 0) {
cssConnClass = "connNoInteg";
}
var conn_tag = connector.connectorTag();
$( "#JSPlumbDiagram" ).append( conn_tag );
console.log(conn_tag);
$(".cex").unbind("click")
.click(function(){
$( "#dialog-confirm-delete" )
.data('params', $(this).parent())
.dialog( "open" );
});
// This calculates the offset to draw the connector
// between the source and the target
var params = $(me).data('params'); // Get the passed param
var source = params.sourceId;
var target = params.targetId;
var offset_s = $("#" + source).offset();
var offset_t = $("#" + target).offset();
var conn_top = (offset_s.top + offset_t.top) / 2;
var conn_left =(offset_s.left + offset_t.left) / 2;
$("#" + connector.connId()).offset({ top: conn_top , left: conn_left});
// Style the connectors
var beginConnector = {
connector:"StateMachine",
paintStyle:{lineWidth:1,strokeStyle:"black"},
anchor:"Continuous",
};
var endConnector = {
connector:"StateMachine",
paintStyle:{lineWidth:1,strokeStyle:"black"},
anchor:"Continuous",
overlays: [["Arrow", {location:1, width:10, length:10} ],
[ "Label", { label: numOfChangelists.toString(),
id:"label",
cssClass: cssConnClass }]]
};
jsPlumb.connect({
source:source,
target:connector.connId()},
beginConnector);
jsPlumb.connect({
source:connector.connId(),
target:target},
endConnector);
jsPlumb.draggable(jsPlumb.getSelector(".c"));
}
$( "#dialog-create-connector" ).dialog({
autoOpen: false,
width: 900,
height: 500,
modal: true,
buttons: {
"Finish": function() {
var bValid = true;
branch_name.removeClass( "ui-state-error" );
bValid = bValid && checkLength( branch_name, "branch name", 1, 25 );
if ( bValid ) {
var me = this;
// what type? branch or paths
// path
if ( $("#conn_type option:selected").val() == "path") {
var sourcePath = "//depot/Talkhouse/main-dev/...";
var targetPath = "//depot/Talkhouse/rel1.0/...";
getInterchanges(me, sourcePath, targetPath);
}
else {
// branch
p4.getBranchSpecs({nameFilter: branch_name.val()}, function(branch) {
if (branch.length === 1) { // branch exists
getInterchanges(me, branch_name.val());
} // end of if (branch.length === 1)
else {
branch_name.addClass( "ui-state-error" );
updateTips( "Branch " + branch_name.val() + " does not exist.");
}
}); // end of p4.getBranchSpec
}
} // end of bValid
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
branch_name.val( "" ).removeClass( "ui-state-error" );
},
open: function() {
branch_name.focus();
branch_name.val( "" ).removeClass( "ui-state-error" );
// TODO uncomment after dialog is ready
// var params = $(this).data('params'); // Get the stored result
// var source = params.sourceId;
// var target = params.targetId;
// $("#source_name").val($("#" + source).text());
// $("#target_name").val($("#" + target).text());
// TODO remove these two hardcode lines
$("#source_name").val("Chris Dev");
$("#target_name").val("Release 1.0");
if (!dialogLayout)
// init layout *the first time* dialog opens
dialogLayout = $("#dialog-create-connector").layout( dialogLayout_settings );
else
// just in case - probably not required
dialogLayout.resizeAll();
$( "#radio" ).buttonset();
// Fix corners of buttons for vertical layout
$('label:first', "#radio" ).removeClass('ui-corner-left').addClass('ui-corner-top');
$('label:last', "#radio").removeClass('ui-corner-right').addClass('ui-corner-bottom');
},
resize: function(){ if (dialogLayout) dialogLayout.resizeAll(); }
});
var branch_id = null;
$( "#dialog-browse-branch" ).dialog({
autoOpen: false
, width: Math.floor($('body').width() * .70)
, height: Math.floor($('body').height() * .65)
, modal: true,
buttons: {
"Finish": function() {
// set #branch_name to selected value
$('#branch_name').val(branch_id);
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
open: function() {
p4.getBranchSpecs(null, function(branches) {
//console.log( "inside getBranches: " + branches.length );
var num = branches.length;
$("#branches tbody").find("tr").remove();
if (num > 0) {
$.each( branches, function( n, branch ){
$( "#branches tbody" ).append( "<tr>" +
"<td class=branchtd id = branch_id data-branch-id=" + branch.id + ">" + branch.id + "</td>" +
"<td class=branchtd >" + branch.owner + "</td>" +
"<td class=branchtd >" + branch.description + "</td>" +
"</tr>" );
});
$(".branchtd").click(function( event ) {
$("tr").removeClass("diffColor");
$(this).parents("tr").addClass("diffColor");
branch_id = event.target.getAttribute("data-branch-id");
});
}
else {
// Put something in the table that there are no branches
}
}); // end of p4.getBranches callback
}
});
$( "#dialog-confirm-delete" ).dialog({
resizable: false,
autoOpen: false,
height:200,
modal: true,
buttons: {
"Delete all items": function() {
var element = $(this).data('params');
var element_id = element.attr("id");
// If it's a codeline, remove all connections to/from this codeline
if ((element_id.substring(0, 6) !== "branch") && (element_id.substring(0, 4) !== "path") ) {
var src_conn = jsPlumb.getConnections({source: element_id});
var tar_conn = jsPlumb.getConnections({target: element_id});
// Does the element has connections to be deleted?
// First, delete all connections when element is a source
if (src_conn.length > 0) {
$.each(src_conn, function(n, conn) {
jsPlumb.removeAllEndpoints(conn.targetId);
jsPlumb.removeAllEndpoints(conn.sourceId);
$("#" + conn.sourceId).remove();
$("#" + conn.targetId).remove();
});
}
// Second, delete all connections when element is a target
if (tar_conn.length > 0) {
$.each(tar_conn, function(n, conn) {
jsPlumb.removeAllEndpoints(conn.targetId);
jsPlumb.removeAllEndpoints(conn.sourceId);
$("#" + conn.sourceId).remove();
$("#" + conn.targetId).remove();
});
}
} else { // if it's a connection just delete its endpoints
jsPlumb.removeAllEndpoints(element_id);
}
// Finally delete the element itself
element.remove();
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
$( "#dialog-export-graph" ).dialog({
resizable: false,
autoOpen: false,
height:200,
modal: true,
buttons: {
"Export": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
open: function() {
$( ".xml-export" ).val(exportGraph());
}
});
$( "#radio1" ).button({
text: false,
icons: {
primary: 'ui-icon-arrowthick-1-e'
}
});
$( "#radio2" ).button({
text: false,
icons: {
primary: 'ui-icon-arrowthick-2-e-w'
}
});
$( "#radio3" ).button({
text: false,
icons: {
primary: 'ui-icon-arrowthick-1-w'
}
});
$( "#create-devel" )
.button({ icons: {primary:'ui-icon-devel'} })
.click(function() {
$('#codeline_type').val('development');
$("#code_image").attr('src', 'url(css/images/branch_dev.png)');
$( "#dialog-create-codeline" )
.dialog( "open" );
});
$( "#create-main" )
.button({ icons: {primary:'ui-icon-main'} })
.click(function() {
$('#codeline_type').val('main');
$("#code_image").attr('src', 'url(css/images/branch_main.png)');
$( "#dialog-create-codeline" )
.dialog( "open" );
});
$( "#create-release" )
.button({ icons: {primary:'ui-icon-rel'} })
.click(function() {
$('#codeline_type').val('release');
$("#code_image").attr('src', 'url(css/images/branch_staging.png)');
$( "#dialog-create-codeline" )
.dialog( "open" );
});
$( "#create-branch" )
.button({ icons: {primary:'ui-icon-branch'} })
.click(function() {
$( "#dialog-create-connector" ).dialog( "open" );
});
$( "#create-path" )
.button({ icons: {primary:'ui-icon-path'} })
.click(function() {
$( "#dialog-create-connector" ).dialog( "open" );
});
$( "#browse_branch" )
.button()
.click(function() {
$( "#dialog-browse-branch" ).dialog( "open" );
});
$( "#export-graph" )
.button()
.click(function() {
$( "#dialog-export-graph" ).dialog( "open" );
});
$( "#import-graph" )
.button()
.click(function() {
$( "#dialog-export-graph" ).dialog( "open" );
});
$( "#refresh-graph" )
.button()
.click(function() {
$( "#dialog-export-graph" ).dialog( "open" );
});
});