Skip to content

CIRCLE / cloud

Go to a project
Commit 638dba54 by Estók Dániel
Options

dded improved mobile support.

parent c8576bdc
Showing with 470 additions and 265 deletions
circle/setty/static/setty/setty.js
jsPlumb.ready(function(){
/**
* Global variables.
*/
(function($){
$.event.special.doubletap = {
bindType: 'touchend',
delegateType: 'touchend',
handle: function(event) {
var handleObj = event.handleObj,
targetData = jQuery.data(event.target),
now = new Date().getTime(),
delta = targetData.lastTouch ? now - targetData.lastTouch : 0,
delay = delay === null ? 300 : delay;
if (delta < delay && delta > 30) {
targetData.lastTouch = null;
event.type = handleObj.origType;
['clientX', 'clientY', 'pageX', 'pageY'].forEach(function(property) {
event[property] = event.originalEvent.changedTouches[0][property];
})
// let jQuery handle the triggering of "doubletap" event handlers
handleObj.handler.apply(this, arguments);
} else {
targetData.lastTouch = now;
}
}
};
})(jQuery);
jsPlumb.ready(function() {
var jsPlumbInstance = jsPlumb.getInstance({
DragOptions: {
cursor: 'pointer',
zIndex: 2000
},
EndpointHoverStyle: {
fillStyle: "green"
},
HoverPaintStyle: {
strokeStyle: "red"
strokeStyle: "green"
},
Container: "dropContainer"
});
var jsPlumbEndpoint = {
endpoint: ["Dot", {
radius: 10,
radius: 10
}],
paintStyle: {
fillStyle: "#9932cc",
fillStyle: "#9932cc"
},
isSource: true,
isTarget: true,
......@@ -28,72 +54,184 @@ jsPlumb.ready(function(){
zIndex: 20,
connectorStyle: {
strokeStyle: "#9932cc",
lineWidth: 8,
lineWidth: 8
},
connector: ["Bezier", {
curviness: 180,
curviness: 180
}],
maxConnections: 1,
dropOptions: {
tolerance: "fit",
},
tolerance: "fit"
}
};
var elementConnections = [];
var elementIndex = 0;
var dragContainerScroll = 0;
var saveWarning = 0;
var clickEvent = 0;
var stackIndexer = 0;
var stackSize = 0;
var objectStack = [];
var undoStack = [];
var redoStack = [];
$("#dropContainer").attr('unselectable', 'on')
.css({
'user-select': 'none',
'MozUserSelect': 'none'
})
.on('selectstart', false)
.on('mousedown', false);
/**
* Function for updating saved status.
*/
setServiceStatus = function(status){
if(status == "unsaved" && $("#unsavedDiv").length < 1){
$("#serviceName").parent().append('<h3 id="unsavedDiv"> (unsaved)</h3>');
setServiceStatus = function(status) {
if (status == "unsaved") {
$("#serviceStatus").text("Unsaved");
}
if(status == "saved"){
$("#unsavedDiv").remove();
if (status == "saved") {
$("#serviceStatus").empty();
}
};
addInfo = function(title, info, type, object) {
$("#informationContainer").empty();
/**
* Function for displaying information panel content.
*/
addInfo = function(title, info, type, element){
div = '<div class="row"><div class="col-xs-12 text-center"><h3>' + title + '</h3></div></div>&nbsp;<div class="row"><div class="col-xs-12">' + '<textarea class="form-control" rows="30" id="infoInput"' + 'placeholder="Config data"' + (type=="info"?'readonly':'') + '>' + '</textarea></div></div>';
if(type=="element")
div += '&nbsp;<div class="row text-center"><label>Endpoints</label></div><div class="row">' + '<div class="col-xs-6 text-center">' + '<button id="addEndpoint" class="btn btn-success">+</button></div>' + '<div class="col-xs-6 text-center">' + '<button id="removeEndpoint" class="btn btn-danger">-</button></div></div>';
switch(type){
case "connection":
div =
'<div class="row">' +
'<div class="col-xs-12 text-center">' +
'<h4>' + title + '</h4>' +
'</div>' +
'</div>&nbsp;' +
'<div class="row">' +
'<div class="col-xs-12">' +
'<textarea class="form-control" rows="28" id="infoInput" placeholder="Config data"></textarea>' +
'</div>' +
'</div>&nbsp;' +
'<div class="row">' +
'<div class="col-xs-12 text-center">' +
'<button id="removeConnection" class="btn btn-info">Remove connection</button>' +
'</div>' +
'</div>';
break;
case "element":
div =
'<div class="row">' +
'<div class="col-xs-12 text-center">' +
'<h4>' + title + '</h4>' +
'</div>' +
'</div>&nbsp;' +
'<div class="row">' +
'<div class="col-xs-12">' +
'<textarea class="form-control" rows="24" id="infoInput" placeholder="Config data"></textarea>' +
'</div>' +
'</div>&nbsp;' +
'<div class="row text-center">' +
'<label>Endpoints</label>' +
'</div>' +
'<div class="row">' +
'<div class="col-xs-6 text-center">' +
'<button id="addEndpoint" class="btn btn-success"><i class="fa fa-plus"></i></button>' +
'</div>' +
'<div class="col-xs-6 text-center">' +
'<button id="removeEndpoint" class="btn btn-danger"><i class="fa fa-minus"></i></button>' +
'</div>' +
'</div>&nbsp;' +
'<div class="row">' +
'<div class="col-xs-12 text-center">' +
'<button id="removeFromWorkspace" class="btn btn-info">Remove from workspace</button>' +
'</div>' +
'</div>';
break;
case "elementTemplate":
div =
'<div class="row">' +
'<div class="col-xs-12 text-center">' +
'<h4>' + title + '</h4>' +
'</div>' +
'</div>&nbsp;' +
'<div class="row">' +
'<div class="col-xs-12">' +
'<textarea class="form-control" rows="28" id="infoInput" placeholder="Config data"></textarea>' +
'</div>' +
'</div>&nbsp;' +
'<div class="row">' +
'<div class="col-xs-12 text-center">' +
'<button id="addElementToWorkspace" class="btn btn-success">Add to workspace</button>' +
'</div>' +
'</div>';
break;
}
$("#informationContainer").empty().append(div);
$("#informationContainer").append(div);
$("#infoInput").val(info).keyup(function(){
$("#infoInput").val(info).keyup(function() {
setServiceStatus("unsaved");
newParams = $("#infoInput").val();
if(type=="connection") element.parameters = newParams;
if(type=="element") element.attr("parameters", newParams);
if (type == "connection") object.parameters = newParams;
if (type == "element") object.attr("parameters", newParams);
});
$("#addEndpoint").click(function(){
addEndpoint(element);
$("#addEndpoint").click(function() {
addEndpoint(object);
undoStack.splice(stackIndexer, 0, removeEndoint);
redoStack.splice(stackIndexer, 0, addEndpoint);
objectStack.splice(stackIndexer, 0, object);
stackIndexer++;
stackSize++;
});
$("#removeEndpoint").click(function(){
removeEndoint(element);
$("#removeEndpoint").click(function() {
removeEndoint(object);
undoStack.splice(stackIndexer, 0, addEndpoint);
redoStack.splice(stackIndexer, 0, removeEndoint);
objectStack.splice(stackIndexer, 0, object);
stackIndexer++;
stackSize++;
});
};
$("#removeFromWorkspace").click(function() {
$('.element').removeClass('elementSelected');
removeElement(object);
/**
* Function for updating connection array whether an event was fired.
*/
updateConnections = function(connection, remove){
setServiceStatus("unsaved");
if (!remove)
$("#informationPanel").hide();
$("#dragPanel").show();
undoStack.splice(stackIndexer, 0, addElement);
redoStack.splice(stackIndexer, 0, removeElement);
objectStack.splice(stackIndexer, 0, object);
stackSize++;
stackIndexer++;
});
$("#removeConnection").click(function() {
jsPlumbInstance.detach(object);
$("#informationPanel").hide();
$("#dragPanel").show();
});
$("#addElementToWorkspace").click(function() {
addElement(object.attr("id"), (++elementIndex) + "_" + object.attr("id"), (elementIndex % 21) * 30, 4, "", (elementIndex % 21) * 30);
undoStack.splice(stackIndexer, 0, removeElement);
redoStack.splice(stackIndexer, 0, addElement);
objectStack.splice(stackIndexer, 0, newInstance);
stackSize++;
stackIndexer++;
});
$("#dragPanel").hide();
$("#informationPanel").show();
};
updateConnections = function(connection, remove) {
if (!remove) {
elementConnections.push(connection);
else {
} else {
index = -1;
for (var i = 0; i < elementConnections.length; i++) {
if (elementConnections[i] == connection) {
......@@ -101,20 +239,27 @@ jsPlumb.ready(function(){
break;
}
}
if (index != -1)
if (index != -1) {
elementConnections.splice(index, 1);
}
}
setServiceStatus("unsaved");
};
/**
* Function for checking and ignoring duplicate connections.
*/
checkDuplicateConnection = function(connection){
checkDuplicateConnection = function(connection) {
for (var i = 0; i < elementConnections.length; i++) {
if ((elementConnections[i].targetId == connection.targetId && elementConnections[i].sourceId == connection.sourceId) ||
(elementConnections[i].targetId == connection.sourceId && elementConnections[i].sourceId == connection.targetId)) {
addMessage("Duplicate connection.", "danger");
if (((elementConnections[i].targetId ==
connection.targetId &&
elementConnections[i].sourceId ==
connection.sourceId) ||
(elementConnections[i].targetId ==
connection.sourceId &&
elementConnections[i].sourceId ==
connection.targetId)) &&
elementConnections[i] != connection) {
addMessage("Twofold connection is forbidden.", "danger");
return false;
}
}
......@@ -122,36 +267,25 @@ jsPlumb.ready(function(){
};
/**
* Function for checking element compatibility.
*/
checkCompatibility = function(sourceId, targetId){
checkCompatibility = function(sourceId, targetId) {
validTargets = $("#" + sourceId).attr("type").split(',');
if (jQuery.inArray(targetId.split('_')[1], validTargets) == -1) {
addMessage("Elements are incompatible.", "danger");
addMessage("Connecting incompatible elements is forbidden.", "danger");
return false;
}
return true;
};
/**
* Function for checking source and target equality.
*/
checkSourceTargetEquality = function(connection){
checkSourceTargetEquality = function(connection) {
if (connection.targetId == connection.sourceId) {
addMessage("Source element is the same as target element.", "danger");
addMessage("Connecting element to itself is forbidden.", "danger");
return false;
}
return true;
};
/**
* Function for determining anchor positions for an element.
*/
getAnchorCoordinate = function(rate){
getAnchorCoordinate = function(rate) {
x = Math.cos(2.0 * Math.PI * rate) / 2;
y = Math.sin(2.0 * Math.PI * rate) / 2;
dx = 0;
......@@ -173,23 +307,21 @@ jsPlumb.ready(function(){
x = -0.5;
dx = -1;
} else {
x = Math.sqrt(2) * Math.cos(2 * Math.PI * rate) / 2;
y = Math.sqrt(2) * Math.sin(2 * Math.PI * rate) / 2;
x = Math.sqrt(2) * Math.cos(2 * Math.PI *
rate) / 2;
y = Math.sqrt(2) * Math.sin(2 * Math.PI *
rate) / 2;
dx = Math.round(2 * x);
}
return [y + 0.5, -x + 0.5, dy, -dx];
};
/**
* Check whether an anchor is connected.
*/
isConnected = function(anchorId){
isConnected = function(anchorId) {
returnValue = false;
$.each(elementConnections, function(index) {
if(elementConnections[index].endpoints[0].getUuid()==anchorId ||
elementConnections[index].endpoints[1].getUuid()==anchorId){
if (elementConnections[index].endpoints[0].getUuid() == anchorId ||
elementConnections[index].endpoints[1].getUuid() == anchorId) {
returnValue = true;
return;
}
......@@ -197,45 +329,38 @@ jsPlumb.ready(function(){
return returnValue;
};
/**
* Get connection parameters and other connected anchor concerning an anchor coming from parameters.
*/
getConnectionparamAndAnchor = function(anchorId){
getConnectionparamAndAnchor = function(anchorId) {
parameters = "";
otherAnchor = "";
$.each(elementConnections, function(index) {
if(elementConnections[index].endpoints[0].getUuid()==anchorId)
{
parameters = elementConnections[index];
if (elementConnections[index].endpoints[0].getUuid() == anchorId) {
parameters = elementConnections[index].parameters;
otherAnchor = elementConnections[index].endpoints[1].getUuid();
return;
}
if(elementConnections[index].endpoints[1].getUuid()==anchorId)
{
if (elementConnections[index].endpoints[1].getUuid() == anchorId) {
parameters = elementConnections[index].parameters;
otherAnchor = elementConnections[index].endpoints[0].getUuid();
return;
}
});
return [parameters, otherAnchor];
};
return [otherAnchor, parameters];
};
/**
* Function to add new element to service.
*/
addEndpoint = function(element){
addEndpoint = function(element) {
anchors = element.attr("anchors");
if(anchors==8) return;
if (anchors == 8) return;
anchors++;
jsPlumbInstance.addEndpoint(document.getElementById(element.attr("id")), {
anchor: getAnchorCoordinate((anchors-1) / anchors),
uuid: (anchors-1) + "_" + element.attr("id")
jsPlumbInstance.addEndpoint(document.getElementById(
element.attr("id")), {
anchor: getAnchorCoordinate((anchors - 1) / anchors),
uuid: (anchors - 1) + "_" + element.attr("id")
},
jsPlumbEndpoint);
......@@ -246,55 +371,74 @@ jsPlumb.ready(function(){
jsPlumbInstance.repaintEverything();
};
/**
* Function for removing an endpoint of an element.
*/
removeEndoint = function(element){
removeEndoint = function(element) {
anchors = element.attr("anchors");
if(anchors==4) return;
if (anchors == 4) return;
i = anchors-1;
i = anchors - 1;
anchors--;
while(isConnected(i + "_" + element.attr("id")) && i>=0){
i--;
}
while (isConnected(i + "_" + element.attr("id")) &&
i >= 0) i--;
if(i==-1){
addMessage("All the anchors are connected so that removing any is forbidden.", "danger");
if (i == -1) {
addMessage("Removing anchors is obstructed.", "danger");
return;
}
else if(i==anchors){
jsPlumbInstance.deleteEndpoint(jsPlumbInstance.getEndpoint(anchors + "_" + element.attr("id")));
}
else{
} else if (i == anchors) {
jsPlumbInstance.deleteEndpoint(
jsPlumbInstance.getEndpoint(anchors + "_" + element.attr("id")));
} else {
newId = i + "_" + element.attr("id");
oldId = anchors + "_" + element.attr("id");
data = getConnectionparamAndAnchor(oldId);
data.splice(0, 0, newId);
jsPlumbInstance.deleteEndpoint(jsPlumbInstance.getEndpoint(oldId));
connectionObject = jsPlumbInstance.connect({
uuids: [newId, data[1]]
});
connectionObject.parameters = data[0];
connectEndpoints(data);
}
for (i=0;i<anchors;i++) jsPlumbInstance.getEndpoint(i + "_" + element.attr("id")).setAnchor(getAnchorCoordinate(i / (anchors)));
for (i = 0; i < anchors; i++) jsPlumbInstance.getEndpoint(
i + "_" + element.attr("id")).setAnchor(getAnchorCoordinate(i / (anchors)));
element.attr("anchors", anchors);
jsPlumbInstance.repaintEverything();
};
connectEndpoints = function(data) {
connectionObject =
jsPlumbInstance.connect({
uuids: [data[0], data[1]]
});
connectionObject.parameters = data[2];
/**
* Function for managing instantiation of new elements based on their templates.
*/
addElement = function(templateId, newId, newPositionY, endpoints, parameters, newPositionX){
newInstance = $('#' + templateId)
setServiceStatus("unsaved");
};
disconnectEndpoints = function(data) {
for (var i = 0; i < elementConnections.length; i++) {
if (elementConnections[i].endpoints[0].getUuid() == data[0] &&
elementConnections[i].endpoints[1].getUuid() == data[1]) {
jsPlumbInstance.detach(elementConnections[i]);
return;
}
}
return;
};
addElement = function(idOrInstance, newId, newPositionY, endpoints, parameters, newPositionX) {
newInstance = "";
if (typeof idOrInstance != "string") {
newInstance = idOrInstance;
endpoints = newInstance.attr("anchors");
newInstance.attr("anchors", 0);
} else {
newInstance = $('#' + idOrInstance)
.clone()
.prop("id", newId)
.prop("title", "Right click to delete")
......@@ -304,6 +448,7 @@ jsPlumb.ready(function(){
.attr("parameters", parameters)
.css("top", newPositionY)
.css("left", newPositionX);
}
$("#dropContainer").append(newInstance);
......@@ -315,16 +460,28 @@ jsPlumb.ready(function(){
containment: $("#dropContainer")
});
newInstance.mousedown(function(e){
if(e.button === 0){
newInstance.on('dblclick doubletap', function() {
element = $(this);
$('.element').removeClass('elementSelected');
jsPlumbInstance.select().setPaintStyle({strokeStyle:'#9932cc', lineWidth: 8});
element.addClass("elementSelected");
addInfo(element.attr("alt"), element.attr("parameters"), "element", element);
return false;
}
if(e.button == 2){
}).mousedown(function(e) {
if (e.button == 2) {
setServiceStatus("unsaved");
$("#informationContainer").empty();
jsPlumbInstance.remove($(this).prop("id"));
$("#informationPanel").hide();
$("#dragPanel").show();
$('.element').removeClass('elementSelected');
jsPlumbInstance.select().setPaintStyle({strokeStyle:'#9932cc', lineWidth: 8});
removeElement($(this));
undoStack.splice(stackIndexer, 0, addElement);
redoStack.splice(stackIndexer, 0, removeElement);
objectStack.splice(stackIndexer, 0, $(this));
stackSize++;
stackIndexer++;
return false;
}
return true;
......@@ -335,31 +492,60 @@ jsPlumb.ready(function(){
jsPlumbInstance.repaintEverything();
};
removeElement = function(object) {
jsPlumbInstance.detachAllConnections(object);
jsPlumbInstance.remove(object.attr("id"));
};
/**
* Handling events on workspace.
*/
jsPlumbInstance.bind("connection", function(info){
jsPlumbInstance.bind("connection", function(info) {
updateConnections(info.connection);
info.connection.parameters = "";
if (clickEvent === 0) {
undoStack.splice(stackIndexer, 0, disconnectEndpoints);
redoStack.splice(stackIndexer, 0, connectEndpoints);
connectionArray = [];
connectionArray.push(info.connection.endpoints[0].getUuid(),
info.connection.endpoints[1].getUuid(),
info.connection.parameters);
objectStack.splice(stackIndexer, 0, connectionArray);
stackIndexer++;
stackSize++;
}
});
jsPlumbInstance.bind("beforeDrop", function(info){
jsPlumbInstance.bind("beforeDrop", function(info) {
return checkDuplicateConnection(info.connection) &&
checkSourceTargetEquality(info.connection) &&
checkCompatibility(info.connection.sourceId, info.connection.targetId);
});
jsPlumbInstance.bind("connectionDetached", function(info){
jsPlumbInstance.bind("connectionDetached", function(info) {
updateConnections(info.connection, true);
if (clickEvent === 0) {
undoStack.splice(stackIndexer, 0, connectEndpoints);
redoStack.splice(stackIndexer, 0, disconnectEndpoints);
connectionArray = [];
connectionArray.push(info.connection.endpoints[0].getUuid(),
info.connection.endpoints[1].getUuid(),
info.connection.parameters);
objectStack.splice(stackIndexer, 0, connectionArray);
stackIndexer++;
stackSize++;
}
});
jsPlumbInstance.bind("connectionMoved", function(info){
jsPlumbInstance.bind("connectionMoved", function(info) {
updateConnections(info.connection, true);
});
jsPlumbInstance.bind("contextmenu", function(info){
jsPlumbInstance.bind("contextmenu", function(info) {
jsPlumbInstance.detach(info);
$("#informationContainer").empty();
});
jsPlumbInstance.bind("click", function(info){
addInfo($("#"+info.sourceId.split('_')[1]).attr("alt") + ' - ' + $("#"+info.targetId.split('_')[1]).attr("alt"),
$("#informationPanel").hide();
$("#dragPanel").show();
});
jsPlumbInstance.bind("dblclick", function(info) {
$('.element').removeClass('elementSelected');
jsPlumbInstance.select().setPaintStyle({strokeStyle:'#9932cc', lineWidth: 8});
info.setPaintStyle({strokeStyle:"red", lineWidth: 8});
addInfo($("#" + info.sourceId.split('_')[1]).attr("alt") + ' - ' + $("#" + info.targetId.split('_')[1]).attr("alt"),
info.parameters,
"connection",
info);
......@@ -368,33 +554,26 @@ jsPlumb.ready(function(){
containment: $("#dropContainer")
});
$(".elementTemplate").click(function() {
addElement($(this).attr("id"), (++elementIndex) + "_" + $(this).attr("id"), (elementIndex % 21) * 30, 4, "", (elementIndex % 21) * 30);
/**
* Handling click event on elements.
*/
$(".elementTemplate").click(function(){
addElement($(this).prop("id"),
(++elementIndex) + "_" + $(this).prop("id"),
$(this).position().top,
4,
"");
undoStack.splice(stackIndexer, 0, removeElement);
redoStack.splice(stackIndexer, 0, addElement);
objectStack.splice(stackIndexer, 0, newInstance);
stackSize++;
stackIndexer++;
});
/**
* Handling mouse enter event on elementTemplate for diplaying info.
*/
$(".elementTemplate").mouseenter(function(){
addInfo($(this).attr("alt"), $(this).attr("desc"), "info");
$("#closeInfoPanel").click(function(){
$('#informationPanel').hide();
$('#dragPanel').show();
$('.element').removeClass('elementSelected');
jsPlumbInstance.select().setPaintStyle({strokeStyle:'#9932cc', lineWidth: 8});
});
/**
* Handling click event on clear button.
*/
$("#clearService").click(function(e){
jsPlumbInstance.detachEveryConnection()
.deleteEveryEndpoint();
$("#clearService").click(function() {
jsPlumbInstance.detachEveryConnection();
jsPlumbInstance.deleteEveryEndpoint();
$(".element").remove();
setServiceStatus("unsaved");
......@@ -403,23 +582,40 @@ jsPlumb.ready(function(){
elementIndex = 0;
});
$("#undoMovement").click(function() {
if (stackIndexer <= 0) return;
stackIndexer--;
clickEvent = 1;
object = objectStack[stackIndexer];
undoStack[stackIndexer](object);
clickEvent = 0;
});
/**
* Handling status change in case of renaming service.
*/
$("#serviceName").keydown(function(){
$("#redoMovement").click(function() {
if (stackIndexer >= stackSize) return;
clickEvent = 1;
object = objectStack[stackIndexer];
redoStack[stackIndexer++](object);
clickEvent = 0;
});
$(".elementTemplateInfo").click(function() {
id = $(this).attr("element");
addInfo($("#" + id).attr("alt"), $("#" + id).attr("desc"), "elementTemplate", $("#" + id));
});
$("#serviceName").keydown(function() {
setServiceStatus("unsaved");
});
/**
* Handling click event on save button.
*/
$("#saveService").click(function(){
$("#saveService").click(function() {
serviceName = $("#serviceName").text();
connectionSet = [];
instanceSet = [];
$.each(elementConnections, function(index){
$.each(elementConnections, function(index) {
connectionSet.push({
"sourceId": elementConnections[index].sourceId,
"sourceEndpoint": elementConnections[index].endpoints[0].getUuid(),
......@@ -429,7 +625,7 @@ jsPlumb.ready(function(){
});
});
$.each($(".element"), function(index){
$.each($(".element"), function() {
instanceSet.push({
"displayId": $(this).prop("id"),
"posX": Math.floor($(this).position().left),
......@@ -447,66 +643,81 @@ jsPlumb.ready(function(){
"elements": instanceSet
})
}, function(resultValue) {
if (window.location.href.indexOf("/create") >= 0) {
window.location = "../" + resultValue;
if (window.location.href.indexOf(
"/create") >= 0) {
window.location = "../" +
resultValue;
} else {
addMessage("Saved successfully.", "success");
addMessage("Saved successfully.","success");
setServiceStatus("saved");
}
});
});
/**
* Handling window resize event for preventing elements against overflow.
*/
$(window).resize(function(){
$(".element").each(function(){
$(window).resize(function() {
$(".element").each(function() {
if ($(this).position().left + $(this).width() > $("#dropContainer").position().left + $("#dropContainer").width()) {
$(this).css("left", $("#dropContainer").position().left + $("#dropContainer").width() - $(this).width() + 4);
$(this).css("left", $("#dropContainer").position().left + $("#dropContainer").width() - $(this).width() +4);
}
});
jsPlumbInstance.repaintEverything();
});
/**
* Handling click events on scroll buttons.
*/
$("#dragContainerScrollUp").click(function(){
if (dragContainerScroll > 0) dragContainerScroll -= 1;
$("#dragContainer").scrollTop(dragContainerScroll * $("#elementTemplatePanel").height());
scrollContainer = function(direction) {
dragContainerScroll += direction;
if (dragContainerScroll == $(".elementTemplate").length - 2) dragContainerScroll--;
if (dragContainerScroll == -1) dragContainerScroll++;
$("#dragContainer").scrollTop(
dragContainerScroll * $("#elementTemplatePanel").height()
);
};
mouseScrollContainer = function(ev) {
var e = window.event || ev;
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
$('body').addClass("noScroll");
scrollContainer(-delta);
$('body').removeClass("noScroll");
};
$("#dragContainerScrollUp").click(function() {
scrollContainer(-1);
});
$("#dragContainerScrollDown").click(function(){
if (dragContainerScroll < $(".elementTemplate").length - 3) dragContainerScroll += 1;
$("#dragContainer").scrollTop(dragContainerScroll * $("#elementTemplatePanel").height());
$("#dragContainerScrollDown").click(function() {
scrollContainer(1);
});
var dragContainer = document.getElementById("dragContainer");
if (dragContainer.addEventListener) {
dragContainer.addEventListener("mousewheel", mouseScrollContainer, false);
dragContainer.addEventListener("DOMMouseScroll", mouseScrollContainer, false);
} else dragContainer.attachEvent("onmousewheel", mouseScrollContainer);
/**
* Handling search feature.
*/
$("#searchElementTemplate").keyup(function(){
$(".elementTemplate").each(function(){
$("#searchElementTemplate").keyup(function() {
$(".elementTemplate").each(function() {
$(this).parent().parent().hide();
if ($(this).attr("alt").toLowerCase()
.indexOf($("#searchElementTemplateInput")
.val().toLowerCase()) >= 0) {
if ($(this).attr("alt").toLowerCase().indexOf($("#searchElementTemplateInput").val().toLowerCase()) >= 0)
$(this).parent().parent().show();
}
});
});
/**
* Handling page load event.
*/
$(document).ready(function(){
$(document).ready(function() {
$.post("", {
event: "loadService"
}, function(resultValue) {
if(resultValue === "") return;
if (resultValue === "") return;
result = jQuery.parseJSON(resultValue);
$("#serviceName").text(result.serviceName);
......@@ -518,18 +729,17 @@ jsPlumb.ready(function(){
element.anchors,
element.parameters,
element.posX + "px");
if (elementIndex < element.displayId.split('_')[0]) {
if (elementIndex < element.displayId.split('_')[0])
elementIndex = element.displayId.split('_')[0];
}
elementIndex++;
});
$.each(result.elementConnections, function(i, connection) {
connectionObject = jsPlumbInstance.connect({
uuids: [connection.sourceEndpoint, connection.targetEndpoint]
});
connectionObject.parameters = connection.parameters;
clickEvent = 1;
$.each(result.elementConnections,
function(i, connection) {
connectEndpoints([connection.sourceEndpoint, connection.targetEndpoint, connection.parameters]);
});
clickEvent = 0;
setServiceStatus("saved");
});
});
......
circle/setty/templates/setty/index.html
......@@ -10,33 +10,62 @@
<link type="text/css" rel="stylesheet" href="{% static 'setty/style.css' %}">
<div class="row" id="workspace">
<div class="col-xs-2" id="dragPanel">
<div class="panel panel-default text-center">
<div class="col-md-3">
<div class="panel panel-default initHidden" id="informationPanel">
<div class="panel-heading text-center">
<div class="row">
<div class="col-xs-2 text-left">
<button class="btn btn-danger btn-xs" id="closeInfoPanel">
<i class="fa fa-times"></i>
</button>
</div>
<div class="col-xs-8">
<h3 class="no-margin">{% trans 'Information' %}</h3>
</div>
<div class="col-xs-2">
</div>
</div>
</div>
<div class="panel-body" id="informationContainer">
</div>
<div class="panel-footer">
<label></label>
</div>
</div>
<div class="panel panel-default text-center" id="dragPanel">
<div class="panel-heading">
<div class="row">
<h3 class="no-margin">{% trans 'Elements' %}</h3>
</div>
</div>
<div class="panel-heading">
<div class="panel-heading text-center">
<div class="row" id="searchElementTemplate">
<div class="col-md-12">
<input type="text" class="form-control" id="searchElementTemplateInput" placeholder="{% trans 'Search' %}"/>
</div>
&nbsp;
</div>
<div class="row">
<div class="col-md-12">
<button class="btn btn-primary btn-xs btn-block" id="dragContainerScrollUp"><i class="fa fa-chevron-up"></i></button>
<button class="btn btn-primary btn-xs btn-block" id="dragContainerScrollUp">
<i class="fa fa-chevron-up"></i>
</button>
</div>
</div>
</div>
<div class="panel-body" id="dragContainer">
<div class="panel-body container-fluid" id="dragContainer">
{% for element in elementTemplateList %}
<div class="row" id="elementTemplatePanel">
<div class="col-md-12 col-sm-4" id="elementTemplatePanel">
<div class="panel panel-default">
<div class="panel-heading">
<div class="row text-center">
<div class="col-xs-9 text-center">
<label class="no-margin">{{ element.name }}</label>
</div>
<div class="col-xs-3 text-right">
<button class="btn btn-primary btn-xs elementTemplateInfo" element="{{ element.id }}"><i class="fa fa-info"></i></button>
</div>
</div>
</div>
<div class="panel-body">
<img class="elementTemplate" type="{% for target in element.compatibles.all %}{{ target.id }},{% endfor %}"
id="{{ element.id }}" desc="{{ element.description }}"
......@@ -57,68 +86,34 @@
</div>
</div>
<div class="col-xs-8">
<div class="col-md-9">
<div class="panel panel-default">
<div class="panel-heading text-center">
<div class="row">
<div class="col-xs-4">
<div class="col-xs-2">
<button class="btn btn-info btn-xs" id="undoMovement" title="{% trans 'Undo' %}"><i class="fa fa-undo"></i></button>
</div>
<div class="col-xs-2">
<button class="btn btn-info btn-xs" id="redoMovement" title="{% trans 'Redo' %}"><i class="fa fa-repeat"></i></button>
</div>
<div class="col-xs-4">
<h3 class="no-margin" id="serviceName" contenteditable="true">Service</h3>
</div>
<div class="col-xs-2 text-right">
<button class="btn btn-info btn-xs" id="clearService">{% trans 'Clear' %}</button>
<button class="btn btn-info btn-xs" id="clearService" title="{% trans 'Clear workspace' %}"><i class="fa fa-trash-o"></i></button>
</div>
<div class="col-xs-2 text-right">
<button class="btn btn-success btn-xs" id="saveService">{% trans 'Save' %}</button>
<button class="btn btn-success btn-xs" id="saveService" title="{% trans 'Save workspace' %}"><i class="fa fa-floppy-o"></i></button>
</div>
</div>
</div>
<div class="panel-body" id="dropContainer" oncontextmenu="return false;"></div>
<div class="panel-footer"></div>
<div class="panel-footer no-margin text-left">
<label class="no-margin" id="serviceStatus"></label>
</div>
</div>
<div class="col-xs-2" id="informationPanel">
<div class="panel panel-default no-margin">
<div class="panel-heading text-center">
<div class="row">
<h3 class="no-margin">{% trans 'Information' %}</h3>
</div>
</div>
<div class="panel-body no-margin" id="informationContainer"></div>
<div class="panel-footer"></div>
</div>
</div>
</div>
<!-- Modal dialogs -->
<div class="modal fade" id="saveWarningDialog" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">{% trans 'Connection info' %}</h4>
</div>
<div class="modal-body">
<textarea id="connectionInfoParameters" class="form-control" rows="3" placeholder="Parameters" style="resize: none;"></textarea>
</div>
<div class="modal-footer">
<div class="row">
<div class="col-md-2 col-md-push-8">
<button type="button" class="btn btn-success" data-dismiss="modal" onclick="return false;">{% trans 'Return' %}</button>
</div>
<div class="col-md-2 col-md-push-8">
<button type="button" class="btn btn-danger" data-dismiss="modal" onclick="return true;">{% trans 'Close' %}</button>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment