Fossil SCM
On the tree-view display, add some comments to better explain what is happening and simplify the javascript slightly.
Commit
cda3140d1931b25046254e8adbde81719acfff1b
Parent
b66100d3edd1be3…
2 files changed
+29
-22
+3
+29
-22
| --- src/browse.c | ||
| +++ src/browse.c | ||
| @@ -543,12 +543,20 @@ | ||
| 543 | 543 | @ <h2>%d(nFile) files from all %d(n) check-ins |
| 544 | 544 | @ %s(blob_str(&dirname))</h2> |
| 545 | 545 | } |
| 546 | 546 | |
| 547 | 547 | |
| 548 | - /* Generate a multi-column table listing the contents of zD[] | |
| 549 | - ** directory. | |
| 548 | + /* Generate tree of lists. | |
| 549 | + ** | |
| 550 | + ** Each file and directory is a list element: <li>. Files have class=file | |
| 551 | + ** and if the filename as the suffix "xyz" the file also has class=file-xyz. | |
| 552 | + ** Directories have class=dir. The directory specfied by the name= query | |
| 553 | + ** parameter (or the top-level directory if there is no name= query parameter) | |
| 554 | + ** adds class=subdir. | |
| 555 | + ** | |
| 556 | + ** The <li> element for directories also contains a sublist <ul> | |
| 557 | + ** for the contents of that directory. | |
| 550 | 558 | */ |
| 551 | 559 | @ <div class="filetree"><ul> |
| 552 | 560 | if( nD ){ |
| 553 | 561 | char *zLink = href("%s", url_render(&sURI, "name", 0, 0, 0)); |
| 554 | 562 | @ <li class="dir"> |
| @@ -595,43 +603,42 @@ | ||
| 595 | 603 | @ return window.getComputedStyle(elem).getPropertyValue(prop); |
| 596 | 604 | @ } |
| 597 | 605 | @ |
| 598 | 606 | @ function toggleAll(tree){ |
| 599 | 607 | @ var lists = tree.querySelectorAll('.subdir > ul > li ul'); |
| 600 | - @ var display = 'block'; | |
| 608 | + @ var display = 'block'; /* Default action: make all sublists visible */ | |
| 601 | 609 | @ for( var i=0; lists[i]; i++ ){ |
| 602 | 610 | @ if( style(lists[i], 'display')!='none'){ |
| 603 | - @ display = 'none'; | |
| 611 | + @ display = 'none'; /* Any already visible - make them all hidden */ | |
| 604 | 612 | @ break; |
| 605 | 613 | @ } |
| 606 | 614 | @ } |
| 607 | 615 | @ for( var i=0; lists[i]; i++ ){ |
| 608 | 616 | @ lists[i].style.display = display; |
| 609 | 617 | @ } |
| 610 | 618 | @ } |
| 611 | 619 | @ |
| 612 | - @ function initTree(tree){ | |
| 613 | - @ tree.onclick = function( e ){ | |
| 614 | - @ var a = e.target; | |
| 615 | - @ if( a.nodeName!='A' ) return; | |
| 616 | - @ if( a.parentNode.className.indexOf('subdir')>=0 ){ | |
| 617 | - @ toggleAll(tree); | |
| 618 | - @ return false; | |
| 619 | - @ } | |
| 620 | - @ if( style(a.parentNode, 'display')=='inline' ) return; | |
| 621 | - @ var ul = a.nextSibling; | |
| 622 | - @ while( ul && ul.nodeName!='UL' ) ul = ul.nextSibling; | |
| 623 | - @ ul.style.display = style(ul, 'display')=='none' ? 'block' : 'none'; | |
| 620 | + @ var outer_ul = document.querySelector('.filetree > ul'); | |
| 621 | + @ outer_ul.querySelector('.subdir > a').style.cursor = 'pointer'; | |
| 622 | + @ outer_ul.onclick = function( e ){ | |
| 623 | + @ var a = e.target; | |
| 624 | + @ if( a.nodeName!='A' ) return; | |
| 625 | + @ if( a.parentNode.className.indexOf('subdir')>=0 ){ | |
| 626 | + @ toggleAll(outer_ul); | |
| 624 | 627 | @ return false; |
| 625 | 628 | @ } |
| 626 | - @ var subdirLink = tree.querySelectorAll('.subdir > a')[0]; | |
| 627 | - @ subdirLink.style.cursor = 'pointer'; | |
| 628 | - @ toggleAll(tree); | |
| 629 | + @ if( style(a.parentNode, 'display')=='inline' ) return; | |
| 630 | + @ var ul = a.nextSibling; | |
| 631 | + @ while( ul && ul.nodeName!='UL' ) ul = ul.nextSibling; | |
| 632 | + @ ul.style.display = style(ul, 'display')=='none' ? 'block' : 'none'; | |
| 633 | + @ return false; | |
| 629 | 634 | @ } |
| 630 | - @ | |
| 631 | - @ var trees = document.querySelectorAll('.filetree > ul'); | |
| 632 | - @ for( var i=0; trees[i]; i++ ) initTree(trees[i]); | |
| 635 | + if( P("expand")==0 ){ | |
| 636 | + /* Begin with the tree collapsed, unless the "expand" query parameter | |
| 637 | + ** is present */ | |
| 638 | + @ toggleAll(outer_ul); | |
| 639 | + } | |
| 633 | 640 | @ }())</script> |
| 634 | 641 | style_footer(); |
| 635 | 642 | |
| 636 | 643 | /* We could free memory used by sTree here if we needed to. But |
| 637 | 644 | ** the process is about to exit, so doing so would not really accomplish |
| 638 | 645 |
| --- src/browse.c | |
| +++ src/browse.c | |
| @@ -543,12 +543,20 @@ | |
| 543 | @ <h2>%d(nFile) files from all %d(n) check-ins |
| 544 | @ %s(blob_str(&dirname))</h2> |
| 545 | } |
| 546 | |
| 547 | |
| 548 | /* Generate a multi-column table listing the contents of zD[] |
| 549 | ** directory. |
| 550 | */ |
| 551 | @ <div class="filetree"><ul> |
| 552 | if( nD ){ |
| 553 | char *zLink = href("%s", url_render(&sURI, "name", 0, 0, 0)); |
| 554 | @ <li class="dir"> |
| @@ -595,43 +603,42 @@ | |
| 595 | @ return window.getComputedStyle(elem).getPropertyValue(prop); |
| 596 | @ } |
| 597 | @ |
| 598 | @ function toggleAll(tree){ |
| 599 | @ var lists = tree.querySelectorAll('.subdir > ul > li ul'); |
| 600 | @ var display = 'block'; |
| 601 | @ for( var i=0; lists[i]; i++ ){ |
| 602 | @ if( style(lists[i], 'display')!='none'){ |
| 603 | @ display = 'none'; |
| 604 | @ break; |
| 605 | @ } |
| 606 | @ } |
| 607 | @ for( var i=0; lists[i]; i++ ){ |
| 608 | @ lists[i].style.display = display; |
| 609 | @ } |
| 610 | @ } |
| 611 | @ |
| 612 | @ function initTree(tree){ |
| 613 | @ tree.onclick = function( e ){ |
| 614 | @ var a = e.target; |
| 615 | @ if( a.nodeName!='A' ) return; |
| 616 | @ if( a.parentNode.className.indexOf('subdir')>=0 ){ |
| 617 | @ toggleAll(tree); |
| 618 | @ return false; |
| 619 | @ } |
| 620 | @ if( style(a.parentNode, 'display')=='inline' ) return; |
| 621 | @ var ul = a.nextSibling; |
| 622 | @ while( ul && ul.nodeName!='UL' ) ul = ul.nextSibling; |
| 623 | @ ul.style.display = style(ul, 'display')=='none' ? 'block' : 'none'; |
| 624 | @ return false; |
| 625 | @ } |
| 626 | @ var subdirLink = tree.querySelectorAll('.subdir > a')[0]; |
| 627 | @ subdirLink.style.cursor = 'pointer'; |
| 628 | @ toggleAll(tree); |
| 629 | @ } |
| 630 | @ |
| 631 | @ var trees = document.querySelectorAll('.filetree > ul'); |
| 632 | @ for( var i=0; trees[i]; i++ ) initTree(trees[i]); |
| 633 | @ }())</script> |
| 634 | style_footer(); |
| 635 | |
| 636 | /* We could free memory used by sTree here if we needed to. But |
| 637 | ** the process is about to exit, so doing so would not really accomplish |
| 638 |
| --- src/browse.c | |
| +++ src/browse.c | |
| @@ -543,12 +543,20 @@ | |
| 543 | @ <h2>%d(nFile) files from all %d(n) check-ins |
| 544 | @ %s(blob_str(&dirname))</h2> |
| 545 | } |
| 546 | |
| 547 | |
| 548 | /* Generate tree of lists. |
| 549 | ** |
| 550 | ** Each file and directory is a list element: <li>. Files have class=file |
| 551 | ** and if the filename as the suffix "xyz" the file also has class=file-xyz. |
| 552 | ** Directories have class=dir. The directory specfied by the name= query |
| 553 | ** parameter (or the top-level directory if there is no name= query parameter) |
| 554 | ** adds class=subdir. |
| 555 | ** |
| 556 | ** The <li> element for directories also contains a sublist <ul> |
| 557 | ** for the contents of that directory. |
| 558 | */ |
| 559 | @ <div class="filetree"><ul> |
| 560 | if( nD ){ |
| 561 | char *zLink = href("%s", url_render(&sURI, "name", 0, 0, 0)); |
| 562 | @ <li class="dir"> |
| @@ -595,43 +603,42 @@ | |
| 603 | @ return window.getComputedStyle(elem).getPropertyValue(prop); |
| 604 | @ } |
| 605 | @ |
| 606 | @ function toggleAll(tree){ |
| 607 | @ var lists = tree.querySelectorAll('.subdir > ul > li ul'); |
| 608 | @ var display = 'block'; /* Default action: make all sublists visible */ |
| 609 | @ for( var i=0; lists[i]; i++ ){ |
| 610 | @ if( style(lists[i], 'display')!='none'){ |
| 611 | @ display = 'none'; /* Any already visible - make them all hidden */ |
| 612 | @ break; |
| 613 | @ } |
| 614 | @ } |
| 615 | @ for( var i=0; lists[i]; i++ ){ |
| 616 | @ lists[i].style.display = display; |
| 617 | @ } |
| 618 | @ } |
| 619 | @ |
| 620 | @ var outer_ul = document.querySelector('.filetree > ul'); |
| 621 | @ outer_ul.querySelector('.subdir > a').style.cursor = 'pointer'; |
| 622 | @ outer_ul.onclick = function( e ){ |
| 623 | @ var a = e.target; |
| 624 | @ if( a.nodeName!='A' ) return; |
| 625 | @ if( a.parentNode.className.indexOf('subdir')>=0 ){ |
| 626 | @ toggleAll(outer_ul); |
| 627 | @ return false; |
| 628 | @ } |
| 629 | @ if( style(a.parentNode, 'display')=='inline' ) return; |
| 630 | @ var ul = a.nextSibling; |
| 631 | @ while( ul && ul.nodeName!='UL' ) ul = ul.nextSibling; |
| 632 | @ ul.style.display = style(ul, 'display')=='none' ? 'block' : 'none'; |
| 633 | @ return false; |
| 634 | @ } |
| 635 | if( P("expand")==0 ){ |
| 636 | /* Begin with the tree collapsed, unless the "expand" query parameter |
| 637 | ** is present */ |
| 638 | @ toggleAll(outer_ul); |
| 639 | } |
| 640 | @ }())</script> |
| 641 | style_footer(); |
| 642 | |
| 643 | /* We could free memory used by sTree here if we needed to. But |
| 644 | ** the process is about to exit, so doing so would not really accomplish |
| 645 |
+3
| --- src/style.c | ||
| +++ src/style.c | ||
| @@ -786,10 +786,13 @@ | ||
| 786 | 786 | }, |
| 787 | 787 | { ".filetree li", |
| 788 | 788 | "tree-view list items", |
| 789 | 789 | @ display: inline; |
| 790 | 790 | }, |
| 791 | + /* There is exactly one element with class="subdir". That element is | |
| 792 | + ** the name of the directory specified by the "name=" query parameter, | |
| 793 | + ** and the directory described by the text at the top of the page. */ | |
| 791 | 794 | { ".filetree .subdir ul", |
| 792 | 795 | "tree-view lists below subdir", |
| 793 | 796 | @ position: relative; |
| 794 | 797 | @ display: block; |
| 795 | 798 | @ margin: 0 0 0 21px; |
| 796 | 799 |
| --- src/style.c | |
| +++ src/style.c | |
| @@ -786,10 +786,13 @@ | |
| 786 | }, |
| 787 | { ".filetree li", |
| 788 | "tree-view list items", |
| 789 | @ display: inline; |
| 790 | }, |
| 791 | { ".filetree .subdir ul", |
| 792 | "tree-view lists below subdir", |
| 793 | @ position: relative; |
| 794 | @ display: block; |
| 795 | @ margin: 0 0 0 21px; |
| 796 |
| --- src/style.c | |
| +++ src/style.c | |
| @@ -786,10 +786,13 @@ | |
| 786 | }, |
| 787 | { ".filetree li", |
| 788 | "tree-view list items", |
| 789 | @ display: inline; |
| 790 | }, |
| 791 | /* There is exactly one element with class="subdir". That element is |
| 792 | ** the name of the directory specified by the "name=" query parameter, |
| 793 | ** and the directory described by the text at the top of the page. */ |
| 794 | { ".filetree .subdir ul", |
| 795 | "tree-view lists below subdir", |
| 796 | @ position: relative; |
| 797 | @ display: block; |
| 798 | @ margin: 0 0 0 21px; |
| 799 |