OrgChart JS

OrgChart JS | BALKANGraph

by therm81

HTML

<script src="https://balkangraph.com/js/latest/OrgChart.js"></script>
    
    <div id="editForm" style="display:none; text-align:center; position:absolute; border: 1px solid #aeaeae;width:300px;background-color:#F57C00;z-index:10000; ">
        <div style="padding: 10px 0 10px 0; background-color:#039BE5; color: #ffffff;">Edit Form</div>
        <div>
            <div style="padding: 10px 0 5px 0;">
                <label style="color:#ffffff; width:50px; display:inline-block;" for="name">Name</label>
                <input style="background-color:#FFCA28" id="name" value="" />
            </div>
            <div style="padding: 5px 0 10px 0;">
                <label style="color:#ffffff; width:50px; display:inline-block;" for="title">Title</label>
                <input style="background-color:#FFCA28"  id="title" value="" />
            </div>
            <div style="padding: 5px 0 15px 0;">
                <button style="width:108px;" id="cancel">Cancel</button>
                <button style="width:108px;" id="save">Save</button>
            </div>
        </div>
    </div>


<div id="tree"/>

CSS

html, body{
  width: 100%;
  height: 100%;
  padding: 0;
  margin:0;
  overflow: hidden;
  font-family: Helvetica;
}
#tree{
  width:100%;
  height:100%;
}

JavaScript

var editForm = function () {
            this.nodeId = null;
        };

        editForm.prototype.init = function (obj) {
            var that = this;
            this.obj = obj;
            this.editForm = document.getElementById("editForm");
            this.nameInput = document.getElementById("name");
            this.titleInput = document.getElementById("title");
            this.cancelButton = document.getElementById("cancel");
            this.saveButton = document.getElementById("save");

            this.cancelButton.addEventListener("click", function () {
                that.hide();
            });

            this.saveButton.addEventListener("click", function () {
            		var node = chart.get(that.nodeId);
                node.name = that.nameInput.value;
                node.title = that.titleInput.value;

                chart.updateNode(node);
                that.hide();
            });
        };

        editForm.prototype.show = function (nodeId, ...e) {
            console.log(nodeId, e);
            
            this.nodeId = nodeId;

            var left = document.body.offsetWidth / 2 - 150;
            this.editForm.style.display = "block";
            this.editForm.style.left = left + "px";
            var node = chart.get(nodeId);
            this.nameInput.value = node.name;
            this.titleInput.value = node.title;
        };

        editForm.prototype.hide = function (showldUpdateTheNode) {
            this.editForm.style.display = "none";
        };


        var chart = new OrgChart(document.getElementById("tree"), {
        		nodeMouseClick: OrgChart.action.details,
            nodeMenu:{
            	edit: {text:"Edit"},
            	add: {text:"Add"},
            	remove: {text:"Remove"}
            },
            editUI: new editForm(),
            nodeBinding: {
                field_0: "name",
                field_1: "title"
            },
            nodes: [
                { id: 1, name: "Amber McKenzie",...