Fossil SCM
Update the all-diffs-toggle button's label dynamically to clarify whether it will show or hide the diffs on its next click, per request in [forum:516f1ba3d82ed249|forum post 516f1ba3d82ed249]. The semantics haven't checked: if any are hidden, its action will be to reveal them, else it will be to hide them.
Commit
903142fef8a3c62451406bd7ae3d3d44d6b8a535ba5738d93ecf6c5a7e343254
Parent
02eb97d801a899f…
1 file changed
+15
-13
+15
-13
| --- src/fossil.diff.js | ||
| +++ src/fossil.diff.js | ||
| @@ -29,47 +29,49 @@ | ||
| 29 | 29 | /** |
| 30 | 30 | Adds toggle checkboxes to each file entry in the diff views for |
| 31 | 31 | /info and similar pages. |
| 32 | 32 | */ |
| 33 | 33 | const D = window.fossil.dom; |
| 34 | - const allToggles = [/*collection of all diff-toggle checkboxes */]; | |
| 34 | + const allToggles = [/*collection of all diff-toggle checkboxes*/]; | |
| 35 | + let checkedCount = | |
| 36 | + 0 /* When showing more than one diff, keep track of how many | |
| 37 | + "show/hide" checkboxes are are checked so we can update the | |
| 38 | + "show/hide all" label dynamically. */; | |
| 39 | + let btnAll /* show/hide all diffs UI control */; | |
| 35 | 40 | const addToggle = function(diffElem){ |
| 36 | 41 | const sib = diffElem.previousElementSibling, |
| 37 | 42 | ckbox = sib ? D.addClass(D.checkbox(true), 'diff-toggle') : 0; |
| 38 | 43 | if(!sib) return; |
| 39 | 44 | const lblToggle = D.label(); |
| 40 | 45 | D.append(lblToggle, ckbox, D.text(" show/hide ")); |
| 41 | 46 | const wrapper = D.append(D.span(), lblToggle); |
| 42 | 47 | allToggles.push(ckbox); |
| 48 | + ++checkedCount; | |
| 43 | 49 | D.append(sib, D.append(wrapper, lblToggle)); |
| 44 | 50 | ckbox.addEventListener('change', function(){ |
| 45 | 51 | diffElem.classList[this.checked ? 'remove' : 'add']('hidden'); |
| 52 | + if(btnAll){ | |
| 53 | + checkedCount += (this.checked ? 1 : -1); | |
| 54 | + btnAll.innerText = (checkedCount < allToggles.length) | |
| 55 | + ? "Show diffs" : "Hide diffs"; | |
| 56 | + } | |
| 46 | 57 | }, false); |
| 47 | 58 | }; |
| 48 | 59 | if( !document.querySelector('body.fdiff') ){ |
| 49 | 60 | /* Don't show the diff toggle button for /fdiff because it only |
| 50 | 61 | has a single file to show (and also a different DOM layout). */ |
| 51 | 62 | document.querySelectorAll('table.diff').forEach(addToggle); |
| 52 | 63 | } |
| 53 | 64 | const icm = allToggles.length>1 ? window.fossil.page.diffControlContainer : 0; |
| 54 | 65 | if(icm) { |
| 55 | - const btnAll = D.addClass(D.a("#", "Show/Hide"), "button"); | |
| 66 | + btnAll = D.addClass(D.a("#", "Hide diffs"), "button"); | |
| 56 | 67 | D.append( icm, btnAll ); |
| 57 | 68 | btnAll.addEventListener('click', function(ev){ |
| 58 | 69 | ev.preventDefault(); |
| 59 | 70 | ev.stopPropagation(); |
| 60 | - /* Figure out whether we want to show all or hide all: if any diffs are | |
| 61 | - toggled off, show all, else hide all. */ | |
| 62 | - let show = false; | |
| 63 | - let ckbox; | |
| 64 | - for( ckbox of allToggles ){ | |
| 65 | - if( !ckbox.checked ){ | |
| 66 | - show = true; | |
| 67 | - break; | |
| 68 | - } | |
| 69 | - } | |
| 70 | - for( ckbox of allToggles ){ | |
| 71 | + const show = checkedCount < allToggles.length; | |
| 72 | + for( const ckbox of allToggles ){ | |
| 71 | 73 | /* Toggle all entries to match this new state. We use click() |
| 72 | 74 | instead of ckbox.checked=... so that the on-change event handler |
| 73 | 75 | fires. */ |
| 74 | 76 | if(ckbox.checked!==show) ckbox.click(); |
| 75 | 77 | } |
| 76 | 78 |
| --- src/fossil.diff.js | |
| +++ src/fossil.diff.js | |
| @@ -29,47 +29,49 @@ | |
| 29 | /** |
| 30 | Adds toggle checkboxes to each file entry in the diff views for |
| 31 | /info and similar pages. |
| 32 | */ |
| 33 | const D = window.fossil.dom; |
| 34 | const allToggles = [/*collection of all diff-toggle checkboxes */]; |
| 35 | const addToggle = function(diffElem){ |
| 36 | const sib = diffElem.previousElementSibling, |
| 37 | ckbox = sib ? D.addClass(D.checkbox(true), 'diff-toggle') : 0; |
| 38 | if(!sib) return; |
| 39 | const lblToggle = D.label(); |
| 40 | D.append(lblToggle, ckbox, D.text(" show/hide ")); |
| 41 | const wrapper = D.append(D.span(), lblToggle); |
| 42 | allToggles.push(ckbox); |
| 43 | D.append(sib, D.append(wrapper, lblToggle)); |
| 44 | ckbox.addEventListener('change', function(){ |
| 45 | diffElem.classList[this.checked ? 'remove' : 'add']('hidden'); |
| 46 | }, false); |
| 47 | }; |
| 48 | if( !document.querySelector('body.fdiff') ){ |
| 49 | /* Don't show the diff toggle button for /fdiff because it only |
| 50 | has a single file to show (and also a different DOM layout). */ |
| 51 | document.querySelectorAll('table.diff').forEach(addToggle); |
| 52 | } |
| 53 | const icm = allToggles.length>1 ? window.fossil.page.diffControlContainer : 0; |
| 54 | if(icm) { |
| 55 | const btnAll = D.addClass(D.a("#", "Show/Hide"), "button"); |
| 56 | D.append( icm, btnAll ); |
| 57 | btnAll.addEventListener('click', function(ev){ |
| 58 | ev.preventDefault(); |
| 59 | ev.stopPropagation(); |
| 60 | /* Figure out whether we want to show all or hide all: if any diffs are |
| 61 | toggled off, show all, else hide all. */ |
| 62 | let show = false; |
| 63 | let ckbox; |
| 64 | for( ckbox of allToggles ){ |
| 65 | if( !ckbox.checked ){ |
| 66 | show = true; |
| 67 | break; |
| 68 | } |
| 69 | } |
| 70 | for( ckbox of allToggles ){ |
| 71 | /* Toggle all entries to match this new state. We use click() |
| 72 | instead of ckbox.checked=... so that the on-change event handler |
| 73 | fires. */ |
| 74 | if(ckbox.checked!==show) ckbox.click(); |
| 75 | } |
| 76 |
| --- src/fossil.diff.js | |
| +++ src/fossil.diff.js | |
| @@ -29,47 +29,49 @@ | |
| 29 | /** |
| 30 | Adds toggle checkboxes to each file entry in the diff views for |
| 31 | /info and similar pages. |
| 32 | */ |
| 33 | const D = window.fossil.dom; |
| 34 | const allToggles = [/*collection of all diff-toggle checkboxes*/]; |
| 35 | let checkedCount = |
| 36 | 0 /* When showing more than one diff, keep track of how many |
| 37 | "show/hide" checkboxes are are checked so we can update the |
| 38 | "show/hide all" label dynamically. */; |
| 39 | let btnAll /* show/hide all diffs UI control */; |
| 40 | const addToggle = function(diffElem){ |
| 41 | const sib = diffElem.previousElementSibling, |
| 42 | ckbox = sib ? D.addClass(D.checkbox(true), 'diff-toggle') : 0; |
| 43 | if(!sib) return; |
| 44 | const lblToggle = D.label(); |
| 45 | D.append(lblToggle, ckbox, D.text(" show/hide ")); |
| 46 | const wrapper = D.append(D.span(), lblToggle); |
| 47 | allToggles.push(ckbox); |
| 48 | ++checkedCount; |
| 49 | D.append(sib, D.append(wrapper, lblToggle)); |
| 50 | ckbox.addEventListener('change', function(){ |
| 51 | diffElem.classList[this.checked ? 'remove' : 'add']('hidden'); |
| 52 | if(btnAll){ |
| 53 | checkedCount += (this.checked ? 1 : -1); |
| 54 | btnAll.innerText = (checkedCount < allToggles.length) |
| 55 | ? "Show diffs" : "Hide diffs"; |
| 56 | } |
| 57 | }, false); |
| 58 | }; |
| 59 | if( !document.querySelector('body.fdiff') ){ |
| 60 | /* Don't show the diff toggle button for /fdiff because it only |
| 61 | has a single file to show (and also a different DOM layout). */ |
| 62 | document.querySelectorAll('table.diff').forEach(addToggle); |
| 63 | } |
| 64 | const icm = allToggles.length>1 ? window.fossil.page.diffControlContainer : 0; |
| 65 | if(icm) { |
| 66 | btnAll = D.addClass(D.a("#", "Hide diffs"), "button"); |
| 67 | D.append( icm, btnAll ); |
| 68 | btnAll.addEventListener('click', function(ev){ |
| 69 | ev.preventDefault(); |
| 70 | ev.stopPropagation(); |
| 71 | const show = checkedCount < allToggles.length; |
| 72 | for( const ckbox of allToggles ){ |
| 73 | /* Toggle all entries to match this new state. We use click() |
| 74 | instead of ckbox.checked=... so that the on-change event handler |
| 75 | fires. */ |
| 76 | if(ckbox.checked!==show) ckbox.click(); |
| 77 | } |
| 78 |