Fossil SCM

Tree-view expand/collapse enhancements. Press "Reload" after upgraded in order to reload CSS.

drh 2014-01-17 13:35 trunk merge
Commit 0647dd38b853e3c097d548a58314068fb271e172
Parent 7b30a7c7ef8977a…
2 files changed +8 -9 +4
~ src/browse.c ~ src/style.c
M src/browse.c
+8 -9
--- src/browse.c
+++ src/browse.c
@@ -612,11 +612,11 @@
612612
 @ <li class="dir%s(zSubdirClass)%s(zLastClass)">
613613
 @ %z(href("%s",url_render(&sURI,"name",p->zFullName,0,0)))%h(p->zName)</a>
614614
 if( startExpanded || p->nFullName<=nD ){
615615
 @ <ul id="dir%d(nDir)">
616616
 }else{
617
- @ <ul id="dir%d(nDir)" style='display:none;'>
617
+ @ <ul id="dir%d(nDir)" class="collapsed">
618618
 }
619619
 nDir++;
620620
 }else if( !showDirOnly ){
621621
 const char *zFileClass = fileext_class(p->zName);
622622
 char *zLink;
@@ -636,21 +636,19 @@
636636
 }
637637
 @ </ul>
638638
 @ </ul></div>
639639
 @ <script>(function(){
640640
 @ function isExpanded(ul){
641
- @ var ulStyle = window.getComputedStyle && window.getComputedStyle(ul,null);
642
- @ var display = (ulStyle && ulStyle.getPropertyValue('display')) || 'none';
643
- @ return display!='none';
641
+ @ return ul.className=='';
644642
 @ }
645643
 @
646644
 @ function toggleDir(ul, useInitValue){
647645
 @ if( !useInitValue ){
648646
 @ expandMap[ul.id] = !isExpanded(ul);
649647
 @ history.replaceState(expandMap, '');
650648
 @ }
651
- @ ul.style.display = expandMap[ul.id] ? 'block' : 'none';
649
+ @ ul.className = expandMap[ul.id] ? '' : 'collapsed';
652650
 @ }
653651
 @
654652
 @ function toggleAll(tree, useInitValue){
655653
 @ var lists = tree.querySelectorAll('.subdir > ul > li ul');
656654
 @ if( !useInitValue ){
@@ -662,19 +660,19 @@
662660
 @ }
663661
 @ }
664662
 @ expandMap = {'*': expand};
665663
 @ history.replaceState(expandMap, '');
666664
 @ }
667
- @ var display = expandMap['*'] ? 'block' : 'none';
665
+ @ var className = expandMap['*'] ? '' : 'collapsed';
668666
 @ for( var i=0; lists[i]; i++ ){
669
- @ lists[i].style.display = display;
667
+ @ lists[i].className = className;
670668
 @ }
671669
 @ }
672670
 @
673671
 @ function checkState(){
674672
 @ expandMap = history.state || {};
675
- @ if( expandMap['*'] ) toggleAll(outer_ul, true);
673
+ @ if( '*' in expandMap ) toggleAll(outer_ul, true);
676674
 @ for( var id in expandMap ){
677675
 @ if( id!=='*' ) toggleDir(gebi(id), true);
678676
 @ }
679677
 @ }
680678
 @
@@ -691,11 +689,12 @@
691689
 @ var outer_ul = document.querySelector('.filetree > ul');
692690
 @ var subdir = outer_ul.querySelector('.subdir');
693691
 @ var expandMap = {};
694692
 @ checkState();
695693
 @ outer_ul.onclick = function(e){
696
- @ var a = e.target;
694
+ @ e = e || window.event;
695
+ @ var a = e.target || e.srcElement;
697696
 @ if( a.nodeName!='A' ) return true;
698697
 @ if( a.parentNode==subdir ){
699698
 @ toggleAll(outer_ul);
700699
 @ return false;
701700
 @ }
702701
--- src/browse.c
+++ src/browse.c
@@ -612,11 +612,11 @@
612 @ <li class="dir%s(zSubdirClass)%s(zLastClass)">
613 @ %z(href("%s",url_render(&sURI,"name",p->zFullName,0,0)))%h(p->zName)</a>
614 if( startExpanded || p->nFullName<=nD ){
615 @ <ul id="dir%d(nDir)">
616 }else{
617 @ <ul id="dir%d(nDir)" style='display:none;'>
618 }
619 nDir++;
620 }else if( !showDirOnly ){
621 const char *zFileClass = fileext_class(p->zName);
622 char *zLink;
@@ -636,21 +636,19 @@
636 }
637 @ </ul>
638 @ </ul></div>
639 @ <script>(function(){
640 @ function isExpanded(ul){
641 @ var ulStyle = window.getComputedStyle && window.getComputedStyle(ul,null);
642 @ var display = (ulStyle && ulStyle.getPropertyValue('display')) || 'none';
643 @ return display!='none';
644 @ }
645 @
646 @ function toggleDir(ul, useInitValue){
647 @ if( !useInitValue ){
648 @ expandMap[ul.id] = !isExpanded(ul);
649 @ history.replaceState(expandMap, '');
650 @ }
651 @ ul.style.display = expandMap[ul.id] ? 'block' : 'none';
652 @ }
653 @
654 @ function toggleAll(tree, useInitValue){
655 @ var lists = tree.querySelectorAll('.subdir > ul > li ul');
656 @ if( !useInitValue ){
@@ -662,19 +660,19 @@
662 @ }
663 @ }
664 @ expandMap = {'*': expand};
665 @ history.replaceState(expandMap, '');
666 @ }
667 @ var display = expandMap['*'] ? 'block' : 'none';
668 @ for( var i=0; lists[i]; i++ ){
669 @ lists[i].style.display = display;
670 @ }
671 @ }
672 @
673 @ function checkState(){
674 @ expandMap = history.state || {};
675 @ if( expandMap['*'] ) toggleAll(outer_ul, true);
676 @ for( var id in expandMap ){
677 @ if( id!=='*' ) toggleDir(gebi(id), true);
678 @ }
679 @ }
680 @
@@ -691,11 +689,12 @@
691 @ var outer_ul = document.querySelector('.filetree > ul');
692 @ var subdir = outer_ul.querySelector('.subdir');
693 @ var expandMap = {};
694 @ checkState();
695 @ outer_ul.onclick = function(e){
696 @ var a = e.target;
 
697 @ if( a.nodeName!='A' ) return true;
698 @ if( a.parentNode==subdir ){
699 @ toggleAll(outer_ul);
700 @ return false;
701 @ }
702
--- src/browse.c
+++ src/browse.c
@@ -612,11 +612,11 @@
612 @ <li class="dir%s(zSubdirClass)%s(zLastClass)">
613 @ %z(href("%s",url_render(&sURI,"name",p->zFullName,0,0)))%h(p->zName)</a>
614 if( startExpanded || p->nFullName<=nD ){
615 @ <ul id="dir%d(nDir)">
616 }else{
617 @ <ul id="dir%d(nDir)" class="collapsed">
618 }
619 nDir++;
620 }else if( !showDirOnly ){
621 const char *zFileClass = fileext_class(p->zName);
622 char *zLink;
@@ -636,21 +636,19 @@
636 }
637 @ </ul>
638 @ </ul></div>
639 @ <script>(function(){
640 @ function isExpanded(ul){
641 @ return ul.className=='';
 
 
642 @ }
643 @
644 @ function toggleDir(ul, useInitValue){
645 @ if( !useInitValue ){
646 @ expandMap[ul.id] = !isExpanded(ul);
647 @ history.replaceState(expandMap, '');
648 @ }
649 @ ul.className = expandMap[ul.id] ? '' : 'collapsed';
650 @ }
651 @
652 @ function toggleAll(tree, useInitValue){
653 @ var lists = tree.querySelectorAll('.subdir > ul > li ul');
654 @ if( !useInitValue ){
@@ -662,19 +660,19 @@
660 @ }
661 @ }
662 @ expandMap = {'*': expand};
663 @ history.replaceState(expandMap, '');
664 @ }
665 @ var className = expandMap['*'] ? '' : 'collapsed';
666 @ for( var i=0; lists[i]; i++ ){
667 @ lists[i].className = className;
668 @ }
669 @ }
670 @
671 @ function checkState(){
672 @ expandMap = history.state || {};
673 @ if( '*' in expandMap ) toggleAll(outer_ul, true);
674 @ for( var id in expandMap ){
675 @ if( id!=='*' ) toggleDir(gebi(id), true);
676 @ }
677 @ }
678 @
@@ -691,11 +689,12 @@
689 @ var outer_ul = document.querySelector('.filetree > ul');
690 @ var subdir = outer_ul.querySelector('.subdir');
691 @ var expandMap = {};
692 @ checkState();
693 @ outer_ul.onclick = function(e){
694 @ e = e || window.event;
695 @ var a = e.target || e.srcElement;
696 @ if( a.nodeName!='A' ) return true;
697 @ if( a.parentNode==subdir ){
698 @ toggleAll(outer_ul);
699 @ return false;
700 @ }
701
M src/style.c
+4
--- src/style.c
+++ src/style.c
@@ -781,10 +781,14 @@
781781
 { ".filetree ul",
782782
 "tree-view lists",
783783
 @ margin: 0;
784784
 @ padding: 0;
785785
 @ list-style: none;
786
+ },
787
+ { ".filetree ul.collapsed",
788
+ "tree-view collapsed list",
789
+ @ display: none;
786790
 },
787791
 { ".filetree ul ul",
788792
 "tree-view lists below the root",
789793
 @ position: relative;
790794
 @ margin: 0 0 0 21px;
791795
--- src/style.c
+++ src/style.c
@@ -781,10 +781,14 @@
781 { ".filetree ul",
782 "tree-view lists",
783 @ margin: 0;
784 @ padding: 0;
785 @ list-style: none;
 
 
 
 
786 },
787 { ".filetree ul ul",
788 "tree-view lists below the root",
789 @ position: relative;
790 @ margin: 0 0 0 21px;
791
--- src/style.c
+++ src/style.c
@@ -781,10 +781,14 @@
781 { ".filetree ul",
782 "tree-view lists",
783 @ margin: 0;
784 @ padding: 0;
785 @ list-style: none;
786 },
787 { ".filetree ul.collapsed",
788 "tree-view collapsed list",
789 @ display: none;
790 },
791 { ".filetree ul ul",
792 "tree-view lists below the root",
793 @ position: relative;
794 @ margin: 0 0 0 21px;
795

Keyboard Shortcuts

Open search /
Next entry (timeline) j
Previous entry (timeline) k
Open focused entry Enter
Show this help ?
Toggle theme Top nav button