Improved tree rendering
This commit is contained in:
parent
6620b9147e
commit
7a195bb844
@ -24,10 +24,8 @@ class APIController extends Controller
|
|||||||
return [
|
return [
|
||||||
'title'=>$item,
|
'title'=>$item,
|
||||||
'item'=>Crypt::encryptString($item),
|
'item'=>Crypt::encryptString($item),
|
||||||
//'folder'=>TRUE,
|
|
||||||
'lazy'=>TRUE,
|
'lazy'=>TRUE,
|
||||||
//'key'=>0,
|
'icon'=>'fa-fw fas fa-sitemap',
|
||||||
//'autoexpand'=>TRUE,
|
|
||||||
];
|
];
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@ -45,10 +43,8 @@ class APIController extends Controller
|
|||||||
return [
|
return [
|
||||||
'title'=>$item->getDistinguishedName(),
|
'title'=>$item->getDistinguishedName(),
|
||||||
'item'=>Crypt::encryptString($item->getDistinguishedName()),
|
'item'=>Crypt::encryptString($item->getDistinguishedName()),
|
||||||
//'folder'=>TRUE,
|
'icon'=>'fa-fw fas fa-sitemap',
|
||||||
'lazy'=>TRUE,
|
'lazy'=>TRUE,
|
||||||
//'key'=>0,
|
|
||||||
//'autoexpand'=>TRUE,
|
|
||||||
];
|
];
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -23,7 +23,7 @@
|
|||||||
<h3 class="mb-1">Welcome to phpLDAPadmin</h3>
|
<h3 class="mb-1">Welcome to phpLDAPadmin</h3>
|
||||||
<h4 class="mb-3"><small>{{ config('app.version') }}</small></h4>
|
<h4 class="mb-3"><small>{{ config('app.version') }}</small></h4>
|
||||||
<p>phpLDAPadmin (or PLA for short) is an LDAP data management tool for administrators.</p>
|
<p>phpLDAPadmin (or PLA for short) is an LDAP data management tool for administrators.</p>
|
||||||
<p>PLA aims to adhere to the LDAP standards (<a href="https://tools.ietf.org/html/rfc4511">RFC4511</a>) so that it can interact with any LDAP server that implements those standards.</p>
|
<p>PLA aims to adhere to the LDAP standards so that it can interact with any LDAP server that implements those standards.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -41,20 +41,21 @@
|
|||||||
@section('page-scripts')
|
@section('page-scripts')
|
||||||
@js('https://code.jquery.com/ui/1.12.1/jquery-ui.min.js','jquery-ui')
|
@js('https://code.jquery.com/ui/1.12.1/jquery-ui.min.js','jquery-ui')
|
||||||
@js('https://cdnjs.cloudflare.com/ajax/libs/jquery.fancytree/2.36.1/jquery.fancytree-all.min.js','fancytree-js-all')
|
@js('https://cdnjs.cloudflare.com/ajax/libs/jquery.fancytree/2.36.1/jquery.fancytree-all.min.js','fancytree-js-all')
|
||||||
@css('https://cdnjs.cloudflare.com/ajax/libs/jquery.fancytree/2.36.1/skin-bootstrap-n/ui.fancytree.min.css','fancytree-css')
|
@css('https://cdnjs.cloudflare.com/ajax/libs/jquery.fancytree/2.36.1/skin-xp/ui.fancytree.min.css','fancytree-css')
|
||||||
|
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
function expandChildren(node) {
|
function expandChildren(node) {
|
||||||
if (node.data.autoExpand && !node.isExpanded()) {
|
if (node.data.autoExpand && !node.isExpanded()) {
|
||||||
node.setExpanded(true);
|
node.setExpanded(true);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (node.children && node.children.length > 0) {
|
if (node.children && node.children.length > 0) {
|
||||||
try {
|
try {
|
||||||
node.children.forEach(expandChildren);
|
node.children.forEach(expandChildren);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
// Attach the fancytree widget to an existing <div id="tree"> element
|
// Attach the fancytree widget to an existing <div id="tree"> element
|
||||||
@ -65,31 +66,13 @@
|
|||||||
autoCollapse: true, // Automatically collapse all siblings, when a node is expanded.
|
autoCollapse: true, // Automatically collapse all siblings, when a node is expanded.
|
||||||
autoScroll: true, // Automatically scroll nodes into visible area.
|
autoScroll: true, // Automatically scroll nodes into visible area.
|
||||||
focusOnSelect: true, // Set focus when node is checked by a mouse click
|
focusOnSelect: true, // Set focus when node is checked by a mouse click
|
||||||
glyph: {
|
|
||||||
preset: 'awesome5',
|
|
||||||
map: {
|
|
||||||
//doc: "fas fa-file-o fa-lg",
|
|
||||||
//docOpen: "fas fa-file-o fa-lg",
|
|
||||||
error: "fas fa-bomb fa-lg fa-fw",
|
|
||||||
expanderClosed: "far fa-plus-square fa-lg fa-fw",
|
|
||||||
expanderLazy: "far fa-plus-square fa-lg fa-fw",
|
|
||||||
expanderOpen: "far fa-minus-square fa-lg fa-fw",
|
|
||||||
//folder: "fas fa-folder fa-lg",
|
|
||||||
//folderOpen: "fas fa-folder-open fa-lg",
|
|
||||||
loading: "fas fa-spinner fa-pulse"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
click: function(event, data) {
|
click: function(event, data) {
|
||||||
console.log(data);
|
|
||||||
if (data.targetType == 'title')
|
if (data.targetType == 'title')
|
||||||
return false;
|
return false;
|
||||||
},
|
},
|
||||||
init: function(event, data) {
|
init: function(event, data) {
|
||||||
expandChildren(data.tree.rootNode);
|
expandChildren(data.tree.rootNode);
|
||||||
},
|
},
|
||||||
icon: function(event, data) {
|
|
||||||
return ! data.node.isTopLevel();
|
|
||||||
},
|
|
||||||
source: {
|
source: {
|
||||||
url: "{{ url('api/bases') }}"
|
url: "{{ url('api/bases') }}"
|
||||||
},
|
},
|
||||||
@ -110,60 +93,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
/*
|
|
||||||
// For our demo: toggle auto-collapse mode:
|
|
||||||
$("input[name=autoCollapse]").on("change", function(e){
|
|
||||||
$.ui.fancytree.getTree().options.autoCollapse = $(this).is(":checked");
|
|
||||||
});
|
|
||||||
|
|
||||||
*/
|
|
||||||
});
|
});
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
{{--
|
|
||||||
<style>
|
|
||||||
.fancytree-node {
|
|
||||||
display: flex !important;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.fancytree-exp-nl .fancytree-expander,
|
|
||||||
.fancytree-exp-n .fancytree-expander {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
.fancytree-exp-nl + ul,
|
|
||||||
.fancytree-exp-n + ul {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
span.fancytree-expander,
|
|
||||||
span.fancytree-icon,
|
|
||||||
span.fancytree-title {
|
|
||||||
line-height: 1em;
|
|
||||||
}
|
|
||||||
span.fancytree-expander {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
span.fancytree-icon {
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
|
||||||
span.fancytree-title {
|
|
||||||
margin-left: 2px;
|
|
||||||
padding: 2px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
}
|
|
||||||
.fancytree-focused span.fancytree-title {
|
|
||||||
border: 1px solid #999;
|
|
||||||
}
|
|
||||||
.fancytree-active span.fancytree-title {
|
|
||||||
background-color: #ddd;
|
|
||||||
}
|
|
||||||
ul.fancytree-container ul {
|
|
||||||
padding: 2px 0 0 0px;
|
|
||||||
}
|
|
||||||
ul.fancytree-container li {
|
|
||||||
padding: 2px 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
--}}
|
|
||||||
@append
|
@append
|
||||||
|
@ -1,16 +1,5 @@
|
|||||||
<li class="nav-header">{{ $server ?? 'Server Name' }}</li>
|
<li class="nav-header pl-1">{{ $server ?? 'Server Name' }}</li>
|
||||||
|
|
||||||
<div id="tree"></div>
|
|
||||||
|
|
||||||
@foreach (($bases ?? []) as $base)
|
|
||||||
<li class="nav-item has-treeview">
|
|
||||||
<a href="#" class="nav-link">
|
|
||||||
<i class="nav-icon fas fa-tree"></i>
|
|
||||||
<p>
|
|
||||||
{{ $base }}
|
|
||||||
<i class="fas fa-angle-left right"></i>
|
|
||||||
</p>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<div id="tree"></div>
|
||||||
</li>
|
</li>
|
||||||
@endforeach
|
|
||||||
|
Loading…
Reference in New Issue
Block a user