Fossil SCM

Set/unset new "collapsed" class on tree-view lists instead of setting display property.

joel 2014-01-16 23:43 UTC trunk
Commit 75b96a2912f6f34b212876e58c481aabf887241d
Parent cdab54ed7804117…
2 files changed +5 -7 +4
~ src/browse.c ~ src/style.c
M src/browse.c
+5 -7
--- 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,13 +660,13 @@
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 || {};
675673
--- 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,13 +660,13 @@
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
--- 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,13 +660,13 @@
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
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