no message
@ -0,0 +1,232 @@
|
|||||||
|
function treeSupport(conf) {
|
||||||
|
var selector = conf.selector,
|
||||||
|
dur = 200,
|
||||||
|
support = {
|
||||||
|
_tree: $(selector).jstree(true),
|
||||||
|
_folding: "collapsed",
|
||||||
|
setData:function(elements) {
|
||||||
|
|
||||||
|
if (support._obj) {
|
||||||
|
support._obj.jstree("destroy").empty();
|
||||||
|
}
|
||||||
|
|
||||||
|
support._obj = $(selector).html(conf.data = elements).jstree(conf);
|
||||||
|
support._tree = $(selector).jstree(true);
|
||||||
|
support._tree.refresh();
|
||||||
|
support.bindEvent();
|
||||||
|
return support;
|
||||||
|
},
|
||||||
|
log:function(msg) {
|
||||||
|
if (conf.trace)
|
||||||
|
console.log(msg);
|
||||||
|
},
|
||||||
|
open: function(id) {
|
||||||
|
if (!id) {
|
||||||
|
support._tree.open_all(null, dur);
|
||||||
|
this._folding = "expand";
|
||||||
|
return support.log("All nodes opened.");
|
||||||
|
}
|
||||||
|
|
||||||
|
if ("string" == typeof(id)) {
|
||||||
|
support._tree.open_node(id, null, dur);
|
||||||
|
var parent = support._tree.get_parent(id);
|
||||||
|
if (parent)
|
||||||
|
support.open(parent);
|
||||||
|
support.log("The node('" + id + "') opened.");
|
||||||
|
} else if ("number" == typeof(id)) {
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
close: function(id) {
|
||||||
|
if (!id) {
|
||||||
|
support._tree.close_all(null, dur);
|
||||||
|
this._folding = "collapsed";
|
||||||
|
return support.log("All nodes closed.");
|
||||||
|
}
|
||||||
|
if ("string" == typeof(id)) {
|
||||||
|
support._tree.close_node(id, null, dur);
|
||||||
|
support.log("The node('" + id + "') closed.");
|
||||||
|
}
|
||||||
|
if ("number" == typeof(id)) {
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
toggleFolding: function(expand, handler) {
|
||||||
|
if (this._folding == "collapsed") {
|
||||||
|
this.open();
|
||||||
|
} else {
|
||||||
|
this.close();
|
||||||
|
}
|
||||||
|
return support._folding;
|
||||||
|
/*
|
||||||
|
if (!expand)
|
||||||
|
support.close();
|
||||||
|
else
|
||||||
|
support.open();
|
||||||
|
if (handler)
|
||||||
|
handler(support._folding = !expand ? "collapsed" : "expanded");
|
||||||
|
return support._folding;
|
||||||
|
*/
|
||||||
|
},
|
||||||
|
getChildIDs:function(parentID) {
|
||||||
|
var parent = support.getNode(parentID);
|
||||||
|
return parent.children;
|
||||||
|
},
|
||||||
|
getNode: function(id) {return support._tree.get_node(id);},
|
||||||
|
selectNode: function(obj) {return support._tree.select_node(obj);},
|
||||||
|
checkNodes: function(obj, check) {
|
||||||
|
if (obj == false)
|
||||||
|
return support._tree.uncheck_all();
|
||||||
|
if (obj == true || !obj)
|
||||||
|
return support._tree.check_all();
|
||||||
|
|
||||||
|
if (check != false) {
|
||||||
|
support._tree.check_node(obj);
|
||||||
|
} else {
|
||||||
|
support._tree.uncheck_node(obj);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
selectedNodes: function() {return support._tree.get_selected();},
|
||||||
|
checkedNodes: function() {return support._tree.get_checked();},
|
||||||
|
add: function(parent, label, onAdd) {
|
||||||
|
if ($.isFunction(parent)) {
|
||||||
|
onAdd = parent;
|
||||||
|
parent = label = null;
|
||||||
|
}
|
||||||
|
if (!parent) {
|
||||||
|
var selected = support.selectedNodes();
|
||||||
|
if (selected)
|
||||||
|
parent = selected[0];
|
||||||
|
}
|
||||||
|
if (!parent)
|
||||||
|
return support.log("A parent node is required.");
|
||||||
|
|
||||||
|
if (!label)
|
||||||
|
label = "New node";
|
||||||
|
var added = support._tree.create_node(parent, label, "last", null, true);
|
||||||
|
support._tree.open_node(parent);
|
||||||
|
support._tree.edit(added, null, function(node){
|
||||||
|
support.log("A node added: " + JSON.stringify(node));
|
||||||
|
if (onAdd)
|
||||||
|
onAdd(node);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
edit: function(node, onEdit) {
|
||||||
|
if ($.isFunction(node)) {
|
||||||
|
onEdit = node;
|
||||||
|
node = null;
|
||||||
|
}
|
||||||
|
if (!node) {
|
||||||
|
var selected = support.selectedNodes();
|
||||||
|
if (selected)
|
||||||
|
node = selected[0];
|
||||||
|
}
|
||||||
|
if (!node)
|
||||||
|
return support.log("A node is required to edit.");
|
||||||
|
|
||||||
|
support._tree.edit(node, null, function(node, status, cancel) {
|
||||||
|
if (cancel) return;
|
||||||
|
support.log("A node edited: " + JSON.stringify(node));
|
||||||
|
if (onEdit)
|
||||||
|
onEdit(node);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
remove: function(id, onRemove) {
|
||||||
|
if ($.isFunction(id)) {
|
||||||
|
onRemove = id;
|
||||||
|
id = null;
|
||||||
|
}
|
||||||
|
if (!id) {
|
||||||
|
var selected = support.selectedNodes();
|
||||||
|
if (selected)
|
||||||
|
id = selected[0];
|
||||||
|
}
|
||||||
|
if (!id)
|
||||||
|
return support.log("A node is required to remove.");
|
||||||
|
|
||||||
|
var node = support.getNode(id),
|
||||||
|
parent = support.getNode(node.parent),
|
||||||
|
temp = node.original && node.original.temp;
|
||||||
|
support._tree.delete_node(node);
|
||||||
|
if (!temp)
|
||||||
|
support.log("A node removed: " + JSON.stringify(node));
|
||||||
|
if (onRemove)
|
||||||
|
onRemove(node);
|
||||||
|
if (!temp)
|
||||||
|
support.selectNode(parent);
|
||||||
|
},
|
||||||
|
dragStart: function(evt, dragged, onDrop) {
|
||||||
|
support._ondrop = onDrop;
|
||||||
|
return $.vakata.dnd.start(evt, {jstree:true, nodes:[{id:true, text:"temporary", dragged:dragged, temp:true}]});
|
||||||
|
},
|
||||||
|
onNodeSelect: conf.onNodeSelect,
|
||||||
|
onNodeCheck: conf.onNodeCheck,
|
||||||
|
onNodeReorder: conf.onNodeReorder,
|
||||||
|
onNodeMove: conf.onNodeMove,
|
||||||
|
bindEvent: function() {
|
||||||
|
$(selector)
|
||||||
|
.on("changed.jstree", function(e, data){
|
||||||
|
var selected = !data || !data.selected ? [] : data.selected;
|
||||||
|
support.log("Node(s) selected: " + selected);
|
||||||
|
if (support.onNodeSelect)
|
||||||
|
support.onNodeSelect(selected);
|
||||||
|
}).on("move_node.jstree", function(e, data) {
|
||||||
|
var move = data.old_parent != data.parent;
|
||||||
|
if (move) {
|
||||||
|
support.log(data.node.id + " moved to " + data.parent);
|
||||||
|
if (support.onNodeMove)
|
||||||
|
support.onNodeMove({node:data.node, parent:data.parent});
|
||||||
|
} else {
|
||||||
|
if (data.old_position == data.position) return;
|
||||||
|
|
||||||
|
var offset = data.position - data.old_position;
|
||||||
|
support.log(data.node.id + " reorderd in " + data.parent + " with offset: " + offset + ".");
|
||||||
|
if (support.onNodeReorder)
|
||||||
|
support.onNodeReorder({node:data.node, parent:data.parent, offset:offset});
|
||||||
|
}
|
||||||
|
}).on("copy_node.jstree", function(e, data) {
|
||||||
|
var node = data.node,
|
||||||
|
org = node.original;
|
||||||
|
if (!node || !org || !org.temp) return;
|
||||||
|
|
||||||
|
var target = support.getNode(node.parent),
|
||||||
|
dragged = org.dragged;
|
||||||
|
support.remove(node.id);
|
||||||
|
support.log(dragged + " dropped onto " + JSON.stringify(target) + ".");
|
||||||
|
if (support._ondrop)
|
||||||
|
support._ondrop({dragged:dragged, target:target});
|
||||||
|
delete support._ondrop;
|
||||||
|
}).on("check_node.jstree", function(e, data) {
|
||||||
|
if (support.onNodeCheck)
|
||||||
|
support.onNodeCheck({node:data.node, checked:true});
|
||||||
|
}).on("uncheck_node.jstree", function(e, data) {
|
||||||
|
if (support.onNodeCheck)
|
||||||
|
support.onNodeCheck({node:data.node, checked:false});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
if (conf.data)
|
||||||
|
support._obj = $(selector).html(conf.data).jstree(conf);
|
||||||
|
support.bindEvent();
|
||||||
|
return support;
|
||||||
|
}
|
||||||
|
|
||||||
|
function treeHtml(elements, getters) {
|
||||||
|
var length = !elements ? 0 : elements.length;
|
||||||
|
if (!length) return "";
|
||||||
|
|
||||||
|
if (!getters)
|
||||||
|
getters = {
|
||||||
|
id:function(e){return e.id;},
|
||||||
|
text:function(e){return e.name;}
|
||||||
|
};
|
||||||
|
|
||||||
|
var result = "<ul>";
|
||||||
|
for (var i = 0; i < length; ++i) {
|
||||||
|
var e = elements[i];
|
||||||
|
result += "<li id=\"" + getters.id(e) + "\">" + getters.text(e);
|
||||||
|
result += treeHtml(e.children, getters);
|
||||||
|
result += "</li>";
|
||||||
|
}
|
||||||
|
return result + "</ul>";
|
||||||
|
}
|
After Width: | Height: | Size: 1.5 KiB |
After Width: | Height: | Size: 6.4 KiB |
After Width: | Height: | Size: 1.4 KiB |
After Width: | Height: | Size: 5.5 KiB |
After Width: | Height: | Size: 2.2 KiB |
After Width: | Height: | Size: 1.4 KiB |
After Width: | Height: | Size: 6.3 KiB |
After Width: | Height: | Size: 3.3 KiB |
After Width: | Height: | Size: 132 KiB |
After Width: | Height: | Size: 137 KiB |
After Width: | Height: | Size: 147 KiB |
After Width: | Height: | Size: 1.7 KiB |
@ -0,0 +1,111 @@
|
|||||||
|
/*
|
||||||
|
* demo.css
|
||||||
|
* File include item demo only specific css only
|
||||||
|
******************************************************************************/
|
||||||
|
|
||||||
|
.menu .app-brand.demo {
|
||||||
|
height: 64px;
|
||||||
|
margin-top: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-brand-logo.demo svg {
|
||||||
|
width: 22px;
|
||||||
|
height: 38px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-brand-text.demo {
|
||||||
|
font-size: 1.75rem;
|
||||||
|
letter-spacing: -0.5px;
|
||||||
|
text-transform: lowercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ! For .layout-navbar-fixed added fix padding top to .layout-page */
|
||||||
|
/* Detached navbar */
|
||||||
|
.layout-navbar-fixed .layout-wrapper:not(.layout-horizontal):not(.layout-without-menu) .layout-page {
|
||||||
|
padding-top: 76px !important;
|
||||||
|
}
|
||||||
|
/* Default navbar */
|
||||||
|
.layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page {
|
||||||
|
padding-top: 64px !important;
|
||||||
|
}
|
||||||
|
.docs-page .layout-navbar-fixed.layout-wrapper:not(.layout-without-menu) .layout-page,
|
||||||
|
.docs-page .layout-menu-fixed.layout-wrapper:not(.layout-without-menu) .layout-page {
|
||||||
|
padding-top: 62px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Navbar page z-index issue solution */
|
||||||
|
.content-wrapper .navbar {
|
||||||
|
z-index: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Content
|
||||||
|
******************************************************************************/
|
||||||
|
|
||||||
|
.demo-blocks > * {
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-inline-spacing > * {
|
||||||
|
margin: 1rem 0.375rem 0 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ? .demo-vertical-spacing class is used to have vertical margins between elements. To remove margin-top from the first-child, use .demo-only-element class with .demo-vertical-spacing class. For example, we have used this class in forms-input-groups.html file. */
|
||||||
|
.demo-vertical-spacing > * {
|
||||||
|
margin-top: 1rem !important;
|
||||||
|
margin-bottom: 0 !important;
|
||||||
|
}
|
||||||
|
.demo-vertical-spacing.demo-only-element > :first-child {
|
||||||
|
margin-top: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-vertical-spacing-lg > * {
|
||||||
|
margin-top: 1.875rem !important;
|
||||||
|
margin-bottom: 0 !important;
|
||||||
|
}
|
||||||
|
.demo-vertical-spacing-lg.demo-only-element > :first-child {
|
||||||
|
margin-top: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-vertical-spacing-xl > * {
|
||||||
|
margin-top: 5rem !important;
|
||||||
|
margin-bottom: 0 !important;
|
||||||
|
}
|
||||||
|
.demo-vertical-spacing-xl.demo-only-element > :first-child {
|
||||||
|
margin-top: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rtl-only {
|
||||||
|
display: none !important;
|
||||||
|
text-align: left !important;
|
||||||
|
direction: ltr !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[dir='rtl'] .rtl-only {
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Layout demo
|
||||||
|
******************************************************************************/
|
||||||
|
|
||||||
|
.layout-demo-wrapper {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-ms-flex-direction: column;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
.layout-demo-placeholder img {
|
||||||
|
width: 900px;
|
||||||
|
}
|
||||||
|
.layout-demo-info {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
After Width: | Height: | Size: 6.3 KiB |
After Width: | Height: | Size: 3.3 KiB |
After Width: | Height: | Size: 132 KiB |
After Width: | Height: | Size: 137 KiB |
After Width: | Height: | Size: 147 KiB |
After Width: | Height: | Size: 1.7 KiB |