<< Click to Display Table of Contents >> Navigation:  Using script in HTML document > Usage examples > Directory tree with background loading

*HTML Report Library is required.

 

<style>
 body {font-family: Verdana; font-size: 14px}
 ul {list-style-type: none; transition: height 0.3s; 
  overflow: hidden}
 a {text-decoration: none}
 a:hover {text-decoration: underline}
 li>ul {height: 0px}
 li[type="DIRECTORY"]>img {display: none}
 li.show>ul {height: auto}
 li {padding: 3px 3px}
 .fa {color: green}
</style>
 
<script type="passcript">
 
procedure ShowFiles();
begin
 { Disable onclick event for parent li nodes}
 if Assigned(Event) then
   event.StopPropagation();
 { file or processed directory }
 if this.hasclass('processed') or 
  (this.Attr['type'] <> 'DIRECTORY') then 
 begin
   { open / close }
   if this.Attr['type'] = 'DIRECTORY' then 
     this.toggleClass('show'); 
   { update folder icons }
   $('li[type="DIRECTORY"]>i').removeClass('fa-folder-open-o').
     addClass('fa').addClass('fa-folder-o');  
   $('li.show>i').removeClass('fa-folder-o').
     addClass('fa-folder-open-o');  
   document.Refresh();
   exit;
 end;
 { Report code }
 s := '<report-objects><object name="files" type="directory" '+
       ' sql="{{DIR}}\*.*"/></report-objects>'+
  '<ul>'+
  '{{#files.ROWDATA}}'+
  '<li dirname="{{PATH}}{{NAME}}" type="{{FILETYPE}}">'+
  '<i/> <img src="_shellsmallicons/{{EXT}}"> <a href="#">{{NAME}}</a></li>'+
  '{{/files.ROWDATA}}'+
  '</ul>';
 
  Async(

   function(E: TElement): string; 
   begin 
    Result := RunHtReport(s, '<CONTEXT DIR="'+E.attr['dirname']+'"/>'); 
   end, 

   procedure(E: TElement; s: string); 
   begin 
     E.innerhtml := E.innerhtml + s;  
     $('li').on('click', 'ShowFiles()');  
     E.addClass('processed'); 
     document.Refresh();
     $('li[type="DIRECTORY"]>i').addClass('fa').
       addClass('fa-folder-o');  
     E.addClass('show'); 
     $('li.show>i').removeClass('fa-folder-o').
        addClass('fa-folder-open-o');  
     { we need second Refresh for open/close animation. 
       First refresh calculate zero <ul> height, second 
      (after setting .show class) calculates 'auto' height and starts transition }
     document.Refresh();
   end, 
   [this]
 );
end;
 
{ set onclick handler for list items }
$('li').on('click', 'ShowFiles()');
 
this := document.getElementbyId('root');
ShowFiles();
 
</script>
 
<ul>
 <li id ="root" dirname="c:" type="DIRECTORY"><i/> <a>Root</a></li>
</ul>