META-INF.resources.primefaces.organigram.organigram.js Maven / Gradle / Ivy
Go to download
Show more of this group Show more artifacts with this name
Show all versions of primefaces Show documentation
Show all versions of primefaces Show documentation
PrimeFaces is one of the most popular UI libraries in Java EE Ecosystem and widely used by software companies, world renowned brands, banks, financial institutions, insurance companies, universities and more.
PrimeFaces.widget.Organigram = PrimeFaces.widget.BaseWidget.extend({
init: function(cfg) {
this._super(cfg);
this.draw();
},
draw : function() {
this.source = this.jq.children('ul');
this.target = this.jq.children('div');
this.target.empty();
this.drawNode(this.source.find('li:first').data("rowkey"), this.source.find('li:first'), this.target, 0, 0);
this.setupSelection();
this.setupDragAndDrop();
this.setupControls();
},
setupSelection : function() {
var widget = this;
var selectableNodes = this.target.find(".ui-organigram-node.selectable");
selectableNodes.on("click", function() {
widget.selectNode(widget, $(this), "select");
});
if (this.cfg.autoScrollToSelection === true) {
this.scrollToSelection();
}
},
selectNode : function(widget, node, event) {
if (!node.hasClass("selected")) {
widget.target.find(".ui-organigram-node.selected").removeClass("selected");
node.addClass("selected");
if (widget.hasBehavior(event)) {
var options = {
params: [
{ name: widget.id + "_selectNode", value: node.data("rowkey") }
]
};
widget.cfg.behaviors[event].call(widget, options);
}
}
},
setupDragAndDrop : function() {
var widget = this;
var nodes = this.target.find(".ui-organigram-node");
var draggableNodes = nodes.filter(".draggable");
var droppableNodes = nodes.filter(".droppable");
var initialDragPosition = {
x: 0,
y: 0
};
draggableNodes.draggable({
zIndex: 100,
opacity: 0.7,
cursor: "move",
helper: "clone",
distance: 60,
revert: "invalid",
revertDuration: 200,
snapMode: "inner",
// overwrite start/drag to support browser scaling/zooming
start: function(event) {
initialDragPosition.x = event.clientX;
initialDragPosition.y = event.clientY;
},
drag: function(event, ui) {
var original = ui.originalPosition;
var zoomFactor = 1.0;
if (widget.zoomFactor) {
zoomFactor = widget.zoomFactor;
}
ui.position = {
left: (event.clientX - initialDragPosition.x + original.left) / zoomFactor,
top: (event.clientY - initialDragPosition.y + original.top ) / zoomFactor
};
}
});
droppableNodes.droppable({
accept: ".ui-organigram-node.draggable",
activeClass: "drag-active",
hoverClass: "drop-hover"
});
// drop & drop happens in the target dom
// but moving the actual nodes happens in the source li/ul dom
// after dropping, we redraw the organigram from the source
droppableNodes.bind("drop", function (event, ui) {
// lookup target node in source DOM
var targetId = $(this).data("rowkey");
var targetLi = widget.source.find("li").filter(function () {
return $(this).data("rowkey") === targetId;
});
var targetUl = targetLi.children("ul");
// lookup source node in source DOM
var sourceId = ui.draggable.data("rowkey");
var sourceLi = widget.source.find("li").filter(function () {
return $(this).data("rowkey") === sourceId;
});
var sourceUl = sourceLi.parent("ul");
// ignore the current drop?
var ignore = false;
// ignore moving to the current parent
if (sourceLi.data("parent-rowkey") === targetId)
{
ignore = true;
}
// ignore moving to the direct child
if (targetLi.data("parent-rowkey") === sourceId)
{
ignore = true;
}
// ignore moving to childs
targetLi.parents().each(function() {
if ($(this).data("parent-rowkey") === sourceId) {
ignore = true;
return false;
}
});
if (ignore) {
return false;
}
// add new children
if (targetUl.length > 0) {
targetUl.append(sourceLi);
}
else {
targetLi.append("
");
targetLi.children("ul").append(sourceLi);
}
// remove children if empty
if (sourceUl.children().length === 0) {
sourceUl.remove();
}
// add "leaf" class if the last item was removed from the parent
var oldParent = widget.source.find("li").filter(function () {
return $(this).data("rowkey") === sourceLi.data("parent-rowkey");
});
if (oldParent.children("ul").length === 0) {
oldParent.addClass("leaf");
}
// remove leave class if a node was added to a leaf node
targetLi.removeClass("leaf");
// update parent
sourceLi.data("parent-rowkey", targetId);
sourceLi.attr("data-parent-rowkey", targetId);
// call behavior
if (widget.hasBehavior("dragdrop")) {
var options = {
params: [
{ name: widget.id + "_dragNode", value: sourceId },
{ name: widget.id + "_dropNode", value: targetId }
]
};
widget.cfg.behaviors["dragdrop"].call(widget, options);
}
widget.redraw = true;
});
// redraw from source after drop
draggableNodes.bind("dragstop", function (event, ui) {
// redraw only if the item was dropped successfully
if (widget.redraw) {
widget.draw();
widget.redraw = false;
}
});
},
/**
* Setup global controls.
* Currently zoom-in and zoom-out.
*/
setupControls : function() {
var widget = this;
if (this.cfg.zoom) {
this.jq.children(".controls").remove();
var controls = $("").appendTo(this.jq);
var controlsTable = $("
").appendTo(controls);
if (!this.zoomFactor) {
this.zoomFactor = 1.0;
}
else {
this.zoom(this.zoomFactor);
}
var zoomIn = $("
").appendTo(appendTo);
var row = $("
").appendTo(cell);
for (var j = 0; j < leafChildNodes.length; j++) {
// add connector line
if (j !== 0 && this.cfg.leafNodeConnectorHeight > 0) {
leafTable.append($("
© 2015 - 2024 Weber Informatics LLC | Privacy Policy