Improved tree rendering
This commit is contained in:
Deon George
parent
6620b9147e
commit
7a195bb844
@ -24,10 +24,8 @@ class APIController extends Controller
|
||||
return [
|
||||
'title'=>$item,
|
||||
'item'=>Crypt::encryptString($item),
|
||||
//'folder'=>TRUE,
|
||||
'lazy'=>TRUE,
|
||||
//'key'=>0,
|
||||
//'autoexpand'=>TRUE,
|
||||
'icon'=>'fa-fw fas fa-sitemap',
|
||||
];
|
||||
});
|
||||
}
|
||||
@ -45,10 +43,8 @@ class APIController extends Controller
|
||||
return [
|
||||
'title'=>$item->getDistinguishedName(),
|
||||
'item'=>Crypt::encryptString($item->getDistinguishedName()),
|
||||
//'folder'=>TRUE,
|
||||
'icon'=>'fa-fw fas fa-sitemap',
|
||||
'lazy'=>TRUE,
|
||||
//'key'=>0,
|
||||
//'autoexpand'=>TRUE,
|
||||
];
|
||||
});
|
||||
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
<h3 class="mb-1">Welcome to phpLDAPadmin</h3>
|
||||
<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>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>
|
||||
|
||||
@ -41,20 +41,21 @@
|
||||
@section('page-scripts')
|
||||
@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')
|
||||
@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">
|
||||
function expandChildren(node) {
|
||||
if (node.data.autoExpand && !node.isExpanded()) {
|
||||
node.setExpanded(true);
|
||||
}
|
||||
|
||||
if (node.children && node.children.length > 0) {
|
||||
try {
|
||||
node.children.forEach(expandChildren);
|
||||
} catch (error) {
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
$(document).ready(function() {
|
||||
// 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.
|
||||
autoScroll: true, // Automatically scroll nodes into visible area.
|
||||
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) {
|
||||
console.log(data);
|
||||
if (data.targetType == 'title')
|
||||
return false;
|
||||
},
|
||||
init: function(event, data) {
|
||||
expandChildren(data.tree.rootNode);
|
||||
},
|
||||
icon: function(event, data) {
|
||||
return ! data.node.isTopLevel();
|
||||
},
|
||||
source: {
|
||||
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>
|
||||
{{--
|
||||
<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
|
||||
|
||||
@ -1,16 +1,5 @@
|
||||
<li class="nav-header">{{ $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 class="nav-header pl-1">{{ $server ?? 'Server Name' }}</li>
|
||||
|
||||
<li>
|
||||
<div id="tree"></div>
|
||||
</li>
|
||||
@endforeach
|
||||
|
||||
Loading…
Reference in New Issue
Block a user