Fossil

Check-in [cda3140d19]
Login

Check-in [cda3140d19]

Many hyperlinks are disabled.
Use anonymous login to enable hyperlinks.

Overview
Comment:On the tree-view display, add some comments to better explain what is happening and simplify the javascript slightly.
Downloads: Tarball | ZIP archive
Timelines: family | ancestors | descendants | both | trunk
Files: files | file ages | folders
SHA1: cda3140d1931b25046254e8adbde81719acfff1b
User & Date: drh 2014-01-07 02:20:58.512
Context
2014-01-07
02:23
Document the "expand" query parameter for "tree" in the on-line help. ... (check-in: 273dd2c007 user: drh tags: trunk)
02:20
On the tree-view display, add some comments to better explain what is happening and simplify the javascript slightly. ... (check-in: cda3140d19 user: drh tags: trunk)
2014-01-06
23:42
Add JS for collapsing/expanding directories in tree-view. ... (check-in: b66100d3ed user: joel tags: trunk)
Changes
Unified Diff Ignore Whitespace Patch
Changes to src/browse.c.
︙︙
541
542
543
544
545
546
547
548








549
550
551
552
553
554
555
556

  }else{
    int n = db_int(0, "SELECT count(*) FROM plink");
    @ <h2>%d(nFile) files from all %d(n) check-ins
    @ %s(blob_str(&dirname))</h2>
  }


  /* Generate a multi-column table listing the contents of zD[]








  ** directory.
  */
  @ <div class="filetree"><ul>
  if( nD ){
    char *zLink = href("%s", url_render(&sURI, "name", 0, 0, 0));
    @ <li class="dir">
    @ %z(zLink)%h(zProjectName)</a>
  }else{








|
>
>
>
>
>
>
>
>
|








541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564

  }else{
    int n = db_int(0, "SELECT count(*) FROM plink");
    @ <h2>%d(nFile) files from all %d(n) check-ins
    @ %s(blob_str(&dirname))</h2>
  }


  /* Generate tree of lists.
  **
  ** Each file and directory is a list element: <li>.  Files have class=file
  ** and if the filename as the suffix "xyz" the file also has class=file-xyz.
  ** Directories have class=dir.  The directory specfied by the name= query
  ** parameter (or the top-level directory if there is no name= query parameter)
  ** adds class=subdir.
  **
  ** The <li> element for directories also contains a sublist <ul>
  ** for the contents of that directory.
  */
  @ <div class="filetree"><ul>
  if( nD ){
    char *zLink = href("%s", url_render(&sURI, "name", 0, 0, 0));
    @ <li class="dir">
    @ %z(zLink)%h(zProjectName)</a>
  }else{
︙︙
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612

613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630



631
632

633
634
635
636
637
638
639

  @ <script>(function(){
  @ function style(elem, prop){
  @   return window.getComputedStyle(elem).getPropertyValue(prop);
  @ }
  @
  @ function toggleAll(tree){
  @   var lists = tree.querySelectorAll('.subdir > ul > li ul');
  @   var display = 'block';
  @   for( var i=0; lists[i]; i++ ){
  @     if( style(lists[i], 'display')!='none'){
  @       display = 'none';
  @       break;
  @     }
  @   }
  @   for( var i=0; lists[i]; i++ ){
  @     lists[i].style.display = display;
  @   }
  @ }
  @ 
  @ function initTree(tree){

  @   tree.onclick = function( e ){
  @     var a = e.target;
  @     if( a.nodeName!='A' ) return;
  @     if( a.parentNode.className.indexOf('subdir')>=0 ){
  @       toggleAll(tree);
  @       return false;
  @     }
  @     if( style(a.parentNode, 'display')=='inline' ) return;
  @     var ul = a.nextSibling;
  @     while( ul && ul.nodeName!='UL' ) ul = ul.nextSibling;
  @     ul.style.display = style(ul, 'display')=='none' ? 'block' : 'none';
  @     return false;
  @   }
  @   var subdirLink = tree.querySelectorAll('.subdir > a')[0];
  @   subdirLink.style.cursor = 'pointer';
  @   toggleAll(tree);
  @ }
  @ 



  @ var trees = document.querySelectorAll('.filetree > ul');
  @ for( var i=0; trees[i]; i++ ) initTree(trees[i]);

  @ }())</script>
  style_footer();

  /* We could free memory used by sTree here if we needed to.  But
  ** the process is about to exit, so doing so would not really accomplish
  ** anything useful. */
}








|


|








|
>
|
|
|
|
|
|
|
|
|
|
|
|
<
<
<
<

<
>
>
>
|
<
>








601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633




634

635
636
637
638

639
640
641
642
643
644
645
646

  @ <script>(function(){
  @ function style(elem, prop){
  @   return window.getComputedStyle(elem).getPropertyValue(prop);
  @ }
  @
  @ function toggleAll(tree){
  @   var lists = tree.querySelectorAll('.subdir > ul > li ul');
  @   var display = 'block';  /* Default action: make all sublists visible */
  @   for( var i=0; lists[i]; i++ ){
  @     if( style(lists[i], 'display')!='none'){
  @       display = 'none'; /* Any already visible - make them all hidden */
  @       break;
  @     }
  @   }
  @   for( var i=0; lists[i]; i++ ){
  @     lists[i].style.display = display;
  @   }
  @ }
  @ 
  @ var outer_ul = document.querySelector('.filetree > ul');
  @ outer_ul.querySelector('.subdir > a').style.cursor = 'pointer';
  @ outer_ul.onclick = function( e ){
  @   var a = e.target;
  @   if( a.nodeName!='A' ) return;
  @   if( a.parentNode.className.indexOf('subdir')>=0 ){
  @     toggleAll(outer_ul);
  @     return false;
  @   }
  @   if( style(a.parentNode, 'display')=='inline' ) return;
  @   var ul = a.nextSibling;
  @   while( ul && ul.nodeName!='UL' ) ul = ul.nextSibling;
  @   ul.style.display = style(ul, 'display')=='none' ? 'block' : 'none';
  @   return false;




  @ }

  if( P("expand")==0 ){
    /* Begin with the tree collapsed, unless the "expand" query parameter
    ** is present */
    @ toggleAll(outer_ul);

  }
  @ }())</script>
  style_footer();

  /* We could free memory used by sTree here if we needed to.  But
  ** the process is about to exit, so doing so would not really accomplish
  ** anything useful. */
}
︙︙
Changes to src/style.c.
︙︙
784
785
786
787
788
789
790



791
792
793
794
795
796
797

    @   margin: 0;
    @   padding: 0;
  },
  { ".filetree li",
    "tree-view list items",
    @   display: inline;
  },



  { ".filetree .subdir ul",
    "tree-view lists below subdir",
    @   position: relative;
    @   display: block;
    @   margin: 0 0 0 21px;
    @   padding: 0;
  },








>
>
>








784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800

    @   margin: 0;
    @   padding: 0;
  },
  { ".filetree li",
    "tree-view list items",
    @   display: inline;
  },
  /* There is exactly one element with class="subdir".  That element is
  ** the name of the directory specified by the "name=" query parameter,
  ** and the directory described by the text at the top of the page. */
  { ".filetree .subdir ul",
    "tree-view lists below subdir",
    @   position: relative;
    @   display: block;
    @   margin: 0 0 0 21px;
    @   padding: 0;
  },
︙︙