Fossil SCM
Experimental change to scroll the focused entry into view with a Fossil-style scrolling function to keep the entry centered vertically. This is much better than `Element.scrollIntoView()' for FF (but maybe a matter of tweaking the function arguments). Kudos to the wiz who programmed the `scrollToSelected()' function!
Commit
ad3a8e0b87ea716f416daa0719ad161c151eb02f7403161cc0930fa9df1c5548
Parent
ec8b53a9bc6490c…
1 file changed
+11
-2
+11
-2
| --- src/graph.js | ||
| +++ src/graph.js | ||
| @@ -905,10 +905,18 @@ | ||
| 905 | 905 | 'hash': ti.rowinfo[k].h, |
| 906 | 906 | 'branch': ti.rowinfo[k].br }; |
| 907 | 907 | } |
| 908 | 908 | } |
| 909 | 909 | return null; |
| 910 | + } | |
| 911 | + function focusScrollToIntoViewTheFossilWay(e){ | |
| 912 | + var y = 0; | |
| 913 | + do{ | |
| 914 | + y += e.offsetTop; | |
| 915 | + }while( e = e.offsetParent ); | |
| 916 | + y -= window.innerHeight/2; | |
| 917 | + if( y>0 ) window.scrollTo(0,y); | |
| 910 | 918 | } |
| 911 | 919 | function focusVisualize(id,scroll){ |
| 912 | 920 | var td = document.querySelector('.timelineFocused'); |
| 913 | 921 | if( td ) td.classList.remove('timelineFocused'); |
| 914 | 922 | if( !id ) return true; |
| @@ -916,12 +924,13 @@ | ||
| 916 | 924 | if( tn ){ |
| 917 | 925 | td = tn.parentElement.nextElementSibling; |
| 918 | 926 | if( td ) { |
| 919 | 927 | td.classList.add('timelineFocused'); |
| 920 | 928 | if( scroll ){ |
| 921 | - if( td.scrollIntoViewIfNeeded ) td.scrollIntoViewIfNeeded(); | |
| 922 | - else td.scrollIntoView(false); | |
| 929 | + focusScrollToIntoViewTheFossilWay(td); | |
| 930 | + //if( td.scrollIntoViewIfNeeded ) td.scrollIntoViewIfNeeded(); | |
| 931 | + //else td.scrollIntoView(false); | |
| 923 | 932 | } |
| 924 | 933 | return true; |
| 925 | 934 | } |
| 926 | 935 | } |
| 927 | 936 | return false; |
| 928 | 937 |
| --- src/graph.js | |
| +++ src/graph.js | |
| @@ -905,10 +905,18 @@ | |
| 905 | 'hash': ti.rowinfo[k].h, |
| 906 | 'branch': ti.rowinfo[k].br }; |
| 907 | } |
| 908 | } |
| 909 | return null; |
| 910 | } |
| 911 | function focusVisualize(id,scroll){ |
| 912 | var td = document.querySelector('.timelineFocused'); |
| 913 | if( td ) td.classList.remove('timelineFocused'); |
| 914 | if( !id ) return true; |
| @@ -916,12 +924,13 @@ | |
| 916 | if( tn ){ |
| 917 | td = tn.parentElement.nextElementSibling; |
| 918 | if( td ) { |
| 919 | td.classList.add('timelineFocused'); |
| 920 | if( scroll ){ |
| 921 | if( td.scrollIntoViewIfNeeded ) td.scrollIntoViewIfNeeded(); |
| 922 | else td.scrollIntoView(false); |
| 923 | } |
| 924 | return true; |
| 925 | } |
| 926 | } |
| 927 | return false; |
| 928 |
| --- src/graph.js | |
| +++ src/graph.js | |
| @@ -905,10 +905,18 @@ | |
| 905 | 'hash': ti.rowinfo[k].h, |
| 906 | 'branch': ti.rowinfo[k].br }; |
| 907 | } |
| 908 | } |
| 909 | return null; |
| 910 | } |
| 911 | function focusScrollToIntoViewTheFossilWay(e){ |
| 912 | var y = 0; |
| 913 | do{ |
| 914 | y += e.offsetTop; |
| 915 | }while( e = e.offsetParent ); |
| 916 | y -= window.innerHeight/2; |
| 917 | if( y>0 ) window.scrollTo(0,y); |
| 918 | } |
| 919 | function focusVisualize(id,scroll){ |
| 920 | var td = document.querySelector('.timelineFocused'); |
| 921 | if( td ) td.classList.remove('timelineFocused'); |
| 922 | if( !id ) return true; |
| @@ -916,12 +924,13 @@ | |
| 924 | if( tn ){ |
| 925 | td = tn.parentElement.nextElementSibling; |
| 926 | if( td ) { |
| 927 | td.classList.add('timelineFocused'); |
| 928 | if( scroll ){ |
| 929 | focusScrollToIntoViewTheFossilWay(td); |
| 930 | //if( td.scrollIntoViewIfNeeded ) td.scrollIntoViewIfNeeded(); |
| 931 | //else td.scrollIntoView(false); |
| 932 | } |
| 933 | return true; |
| 934 | } |
| 935 | } |
| 936 | return false; |
| 937 |