Improved tree rendering

This commit is contained in:
Deon George 2020-09-01 00:13:27 +10:00
parent 6620b9147e
commit 7a195bb844
3 changed files with 9 additions and 94 deletions

View File

@ -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,
]; ];
}); });

View File

@ -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

View File

@ -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