Fossil SCM
Rename 'Timeline' submenu link into 'View X branches' that is shown only if two or more branches are selected. Also some minor code refactoring for better compatability with old versions of WebView.
Commit
00891cba00a6987cfb6d589670d7e01a273bdfda5bc7f78f4eb5dbae01e659c7
Parent
73ebf81b9331ee8…
2 files changed
+8
+52
-42
+8
| --- src/default.css | ||
| +++ src/default.css | ||
| @@ -1773,16 +1773,24 @@ | ||
| 1773 | 1773 | |
| 1774 | 1774 | input[type="checkbox"].diff-toggle { |
| 1775 | 1775 | float: right; |
| 1776 | 1776 | } |
| 1777 | 1777 | |
| 1778 | +body.branch .brlist > table > tbody > tr:hover > td:first-child, | |
| 1779 | +body.branch .brlist > table > tbody > tr.selected { | |
| 1780 | + font-weight: bold; | |
| 1781 | +} | |
| 1778 | 1782 | body.branch .brlist > table > tbody > tr > td:nth-child(1) { |
| 1779 | 1783 | display: flex; |
| 1780 | 1784 | flex-direction: row; |
| 1781 | 1785 | justify-content: space-between; |
| 1786 | +} | |
| 1787 | +body.branch a.label.timeline-link { | |
| 1788 | + display: none; | |
| 1782 | 1789 | } |
| 1783 | 1790 | body.branch a.label.timeline-link.selected { |
| 1791 | + display: inline; | |
| 1784 | 1792 | font-weight: bold; |
| 1785 | 1793 | } |
| 1786 | 1794 | |
| 1787 | 1795 | /* Objects in the "desktoponly" class are invisible on mobile */ |
| 1788 | 1796 | @media screen and (max-width: 600px) { |
| 1789 | 1797 |
| --- src/default.css | |
| +++ src/default.css | |
| @@ -1773,16 +1773,24 @@ | |
| 1773 | |
| 1774 | input[type="checkbox"].diff-toggle { |
| 1775 | float: right; |
| 1776 | } |
| 1777 | |
| 1778 | body.branch .brlist > table > tbody > tr > td:nth-child(1) { |
| 1779 | display: flex; |
| 1780 | flex-direction: row; |
| 1781 | justify-content: space-between; |
| 1782 | } |
| 1783 | body.branch a.label.timeline-link.selected { |
| 1784 | font-weight: bold; |
| 1785 | } |
| 1786 | |
| 1787 | /* Objects in the "desktoponly" class are invisible on mobile */ |
| 1788 | @media screen and (max-width: 600px) { |
| 1789 |
| --- src/default.css | |
| +++ src/default.css | |
| @@ -1773,16 +1773,24 @@ | |
| 1773 | |
| 1774 | input[type="checkbox"].diff-toggle { |
| 1775 | float: right; |
| 1776 | } |
| 1777 | |
| 1778 | body.branch .brlist > table > tbody > tr:hover > td:first-child, |
| 1779 | body.branch .brlist > table > tbody > tr.selected { |
| 1780 | font-weight: bold; |
| 1781 | } |
| 1782 | body.branch .brlist > table > tbody > tr > td:nth-child(1) { |
| 1783 | display: flex; |
| 1784 | flex-direction: row; |
| 1785 | justify-content: space-between; |
| 1786 | } |
| 1787 | body.branch a.label.timeline-link { |
| 1788 | display: none; |
| 1789 | } |
| 1790 | body.branch a.label.timeline-link.selected { |
| 1791 | display: inline; |
| 1792 | font-weight: bold; |
| 1793 | } |
| 1794 | |
| 1795 | /* Objects in the "desktoponly" class are invisible on mobile */ |
| 1796 | @media screen and (max-width: 600px) { |
| 1797 |
+52
-42
| --- src/fossil.page.brlist.js | ||
| +++ src/fossil.page.brlist.js | ||
| @@ -1,55 +1,65 @@ | ||
| 1 | 1 | /* |
| 2 | 2 | * This script adds multiselect facility for the list of branches. |
| 3 | + * | |
| 4 | + * Some info on 'const': | |
| 5 | + * https://caniuse.com/const | |
| 6 | + * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const#browser_compatibility | |
| 7 | + * | |
| 8 | + * According to MDN 'const' requires Android's WebView 37, | |
| 9 | + * which may not be available. | |
| 10 | + * For the time being, continueing without 'const' and 'indexOf' | |
| 11 | + * (but that may be reconsidered later). | |
| 3 | 12 | */ |
| 4 | 13 | window.addEventListener( 'load', function() { |
| 5 | 14 | |
| 6 | 15 | var anchor = document.querySelector("div.submenu > a.label" ); |
| 7 | 16 | if( !anchor || anchor.innerText != "Timeline" ) return; |
| 8 | -var prefix = anchor.href.toString() + "?ms=regexp&rel&t="; | |
| 9 | -anchor.classList.add('timeline-link'); | |
| 10 | -const selectedCheckboxes = []/*currently-selected checkboxes*/; | |
| 11 | -var onChange = function( event ){ | |
| 12 | - const cbx = event.target; | |
| 13 | - const tag = cbx.parentElement.children[0].innerText; | |
| 14 | - var re = anchor.href.substr(prefix.length); | |
| 15 | - if( cbx.checked ){ | |
| 16 | - if( re != "" ){ | |
| 17 | - re += "|"; | |
| 18 | - } | |
| 19 | - re += tag; | |
| 20 | - selectedCheckboxes.push(cbx); | |
| 21 | - anchor.classList.add('selected'); | |
| 22 | - }else{ | |
| 23 | - const ndx = selectedCheckboxes.indexOf(cbx); | |
| 24 | - if(ndx>=0){ | |
| 25 | - selectedCheckboxes.splice(ndx,1); | |
| 26 | - if(!selectedCheckboxes.length){ | |
| 27 | - anchor.classList.remove('selected'); | |
| 28 | - } | |
| 29 | - } | |
| 30 | - if( re == tag ){ | |
| 31 | - re = ""; | |
| 32 | - removeSelected(cbx); | |
| 33 | - }else { | |
| 34 | - var a = re.split("|"); | |
| 35 | - var i = a.length; | |
| 36 | - while( --i >= 0 ){ | |
| 37 | - if( a[i] == tag ) | |
| 38 | - a.splice(i,1); | |
| 39 | - } | |
| 40 | - re = a.join("|"); | |
| 41 | - } | |
| 42 | - } | |
| 43 | - anchor.href = prefix + re; | |
| 44 | -} | |
| 45 | - | |
| 46 | -var selected = []; | |
| 17 | +var prefix = anchor.href.toString() + "?ms=regexp&rel&t="; | |
| 18 | +anchor.classList.add('timeline-link'); | |
| 19 | + | |
| 20 | +var onChange = function( event ){ | |
| 21 | + var cbx = event.target; | |
| 22 | + var tr = cbx.parentElement.parentElement; | |
| 23 | + var tag = cbx.parentElement.children[0].innerText; | |
| 24 | + var re = anchor.href.substr(prefix.length); | |
| 25 | + var selected = ( re != "" ? re.split("|") : [] ); | |
| 26 | + if( cbx.checked ){ | |
| 27 | + selected.push(tag); | |
| 28 | + tr.classList.add('selected'); | |
| 29 | + } | |
| 30 | + else { | |
| 31 | + tr.classList.remove('selected'); | |
| 32 | + for( var i = selected.length; --i >= 0 ;) | |
| 33 | + if( selected[i] == tag ) | |
| 34 | + selected.splice(i,1); | |
| 35 | + } | |
| 36 | + if( selected.length >= 2 ) | |
| 37 | + anchor.classList.add('selected'); | |
| 38 | + else | |
| 39 | + anchor.classList.remove('selected'); | |
| 40 | + | |
| 41 | + anchor.href = prefix + selected.join("|"); | |
| 42 | + anchor.innerHTML = "View " + selected.length + " branches"; | |
| 43 | + // console.log("Link:",anchor.href); | |
| 44 | +} | |
| 45 | + | |
| 46 | +var stags = []; /* initially selected tags, not used above */ | |
| 47 | 47 | document.querySelectorAll("div.brlist > table td:first-child > input") |
| 48 | 48 | .forEach( function( cbx ){ |
| 49 | 49 | cbx.onchange = onChange; |
| 50 | 50 | cbx.disabled = false; |
| 51 | - if( cbx.checked ) | |
| 52 | - selected.push(cbx.parentElement.children[0].innerText); | |
| 51 | + if( cbx.checked ){ | |
| 52 | + stags.push(cbx.parentElement.children[0].innerText); | |
| 53 | + cbx.parentElement.parentElement.classList.add('selected'); | |
| 54 | + } | |
| 53 | 55 | }); |
| 54 | -anchor.href = selected.length != 0 ? prefix + selected.join("|") : "#"; | |
| 56 | + | |
| 57 | +if( stags.length != 0 ){ | |
| 58 | + anchor.href = prefix + stags.join("|"); | |
| 59 | + if( stags.length >= 2 ) { | |
| 60 | + anchor.innerHTML = "View " + stags.length + " branches"; | |
| 61 | + anchor.classList.add('selected'); | |
| 62 | + } | |
| 63 | +} | |
| 64 | + | |
| 55 | 65 | }); // window.addEventListener( 'load' ... |
| 56 | 66 |
| --- src/fossil.page.brlist.js | |
| +++ src/fossil.page.brlist.js | |
| @@ -1,55 +1,65 @@ | |
| 1 | /* |
| 2 | * This script adds multiselect facility for the list of branches. |
| 3 | */ |
| 4 | window.addEventListener( 'load', function() { |
| 5 | |
| 6 | var anchor = document.querySelector("div.submenu > a.label" ); |
| 7 | if( !anchor || anchor.innerText != "Timeline" ) return; |
| 8 | var prefix = anchor.href.toString() + "?ms=regexp&rel&t="; |
| 9 | anchor.classList.add('timeline-link'); |
| 10 | const selectedCheckboxes = []/*currently-selected checkboxes*/; |
| 11 | var onChange = function( event ){ |
| 12 | const cbx = event.target; |
| 13 | const tag = cbx.parentElement.children[0].innerText; |
| 14 | var re = anchor.href.substr(prefix.length); |
| 15 | if( cbx.checked ){ |
| 16 | if( re != "" ){ |
| 17 | re += "|"; |
| 18 | } |
| 19 | re += tag; |
| 20 | selectedCheckboxes.push(cbx); |
| 21 | anchor.classList.add('selected'); |
| 22 | }else{ |
| 23 | const ndx = selectedCheckboxes.indexOf(cbx); |
| 24 | if(ndx>=0){ |
| 25 | selectedCheckboxes.splice(ndx,1); |
| 26 | if(!selectedCheckboxes.length){ |
| 27 | anchor.classList.remove('selected'); |
| 28 | } |
| 29 | } |
| 30 | if( re == tag ){ |
| 31 | re = ""; |
| 32 | removeSelected(cbx); |
| 33 | }else { |
| 34 | var a = re.split("|"); |
| 35 | var i = a.length; |
| 36 | while( --i >= 0 ){ |
| 37 | if( a[i] == tag ) |
| 38 | a.splice(i,1); |
| 39 | } |
| 40 | re = a.join("|"); |
| 41 | } |
| 42 | } |
| 43 | anchor.href = prefix + re; |
| 44 | } |
| 45 | |
| 46 | var selected = []; |
| 47 | document.querySelectorAll("div.brlist > table td:first-child > input") |
| 48 | .forEach( function( cbx ){ |
| 49 | cbx.onchange = onChange; |
| 50 | cbx.disabled = false; |
| 51 | if( cbx.checked ) |
| 52 | selected.push(cbx.parentElement.children[0].innerText); |
| 53 | }); |
| 54 | anchor.href = selected.length != 0 ? prefix + selected.join("|") : "#"; |
| 55 | }); // window.addEventListener( 'load' ... |
| 56 |
| --- src/fossil.page.brlist.js | |
| +++ src/fossil.page.brlist.js | |
| @@ -1,55 +1,65 @@ | |
| 1 | /* |
| 2 | * This script adds multiselect facility for the list of branches. |
| 3 | * |
| 4 | * Some info on 'const': |
| 5 | * https://caniuse.com/const |
| 6 | * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const#browser_compatibility |
| 7 | * |
| 8 | * According to MDN 'const' requires Android's WebView 37, |
| 9 | * which may not be available. |
| 10 | * For the time being, continueing without 'const' and 'indexOf' |
| 11 | * (but that may be reconsidered later). |
| 12 | */ |
| 13 | window.addEventListener( 'load', function() { |
| 14 | |
| 15 | var anchor = document.querySelector("div.submenu > a.label" ); |
| 16 | if( !anchor || anchor.innerText != "Timeline" ) return; |
| 17 | var prefix = anchor.href.toString() + "?ms=regexp&rel&t="; |
| 18 | anchor.classList.add('timeline-link'); |
| 19 | |
| 20 | var onChange = function( event ){ |
| 21 | var cbx = event.target; |
| 22 | var tr = cbx.parentElement.parentElement; |
| 23 | var tag = cbx.parentElement.children[0].innerText; |
| 24 | var re = anchor.href.substr(prefix.length); |
| 25 | var selected = ( re != "" ? re.split("|") : [] ); |
| 26 | if( cbx.checked ){ |
| 27 | selected.push(tag); |
| 28 | tr.classList.add('selected'); |
| 29 | } |
| 30 | else { |
| 31 | tr.classList.remove('selected'); |
| 32 | for( var i = selected.length; --i >= 0 ;) |
| 33 | if( selected[i] == tag ) |
| 34 | selected.splice(i,1); |
| 35 | } |
| 36 | if( selected.length >= 2 ) |
| 37 | anchor.classList.add('selected'); |
| 38 | else |
| 39 | anchor.classList.remove('selected'); |
| 40 | |
| 41 | anchor.href = prefix + selected.join("|"); |
| 42 | anchor.innerHTML = "View " + selected.length + " branches"; |
| 43 | // console.log("Link:",anchor.href); |
| 44 | } |
| 45 | |
| 46 | var stags = []; /* initially selected tags, not used above */ |
| 47 | document.querySelectorAll("div.brlist > table td:first-child > input") |
| 48 | .forEach( function( cbx ){ |
| 49 | cbx.onchange = onChange; |
| 50 | cbx.disabled = false; |
| 51 | if( cbx.checked ){ |
| 52 | stags.push(cbx.parentElement.children[0].innerText); |
| 53 | cbx.parentElement.parentElement.classList.add('selected'); |
| 54 | } |
| 55 | }); |
| 56 | |
| 57 | if( stags.length != 0 ){ |
| 58 | anchor.href = prefix + stags.join("|"); |
| 59 | if( stags.length >= 2 ) { |
| 60 | anchor.innerHTML = "View " + stags.length + " branches"; |
| 61 | anchor.classList.add('selected'); |
| 62 | } |
| 63 | } |
| 64 | |
| 65 | }); // window.addEventListener( 'load' ... |
| 66 |