Fossil

Check-in [00891cba00]
Login

Check-in [00891cba00]

Many hyperlinks are disabled.
Use anonymous login to enable hyperlinks.

Overview
Comment: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.
Downloads: Tarball | ZIP archive
Timelines: family | ancestors | descendants | both | brlist-timeline
Files: files | file ages | folders
SHA3-256: 00891cba00a6987cfb6d589670d7e01a273bdfda5bc7f78f4eb5dbae01e659c7
User & Date: george 2021-04-19 01:01:04.147
Context
2021-04-19
16:08
Display "View 1 branch" hyperlink if just one branch is selected. Add documentation to the <tt>www/javascript.md</tt> and to the changelog. Also minor CSS tweaks. ... (check-in: c6a061f2a0 user: george tags: brlist-timeline)
01:01
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. ... (check-in: 00891cba00 user: george tags: brlist-timeline)
2021-04-18
21:08
Cosmetic tweaks: align the new checkboxes consistently and toggle a class on the Timeline link when any checkboxes are selected, to give the user some indication that the checkboxes are doing something. ... (check-in: 73ebf81b93 user: stephan tags: brlist-timeline)
Changes
Unified Diff Ignore Whitespace Patch
Changes to src/default.css.
︙︙
1771
1772
1773
1774
1775
1776
1777




1778
1779
1780
1781
1782



1783

1784
1785
1786
1787
1788
1789
1790

  max-height: 45%;
}

input[type="checkbox"].diff-toggle {
  float: right;
}





body.branch .brlist > table > tbody > tr > td:nth-child(1) {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}



body.branch a.label.timeline-link.selected {

  font-weight: bold;
}

/* Objects in the "desktoponly" class are invisible on mobile */
@media screen and (max-width: 600px) {
  .desktoponly {
    display: none;








>
>
>
>





>
>
>

>








1771
1772
1773
1774
1775
1776
1777
1778
1779
1780
1781
1782
1783
1784
1785
1786
1787
1788
1789
1790
1791
1792
1793
1794
1795
1796
1797
1798

  max-height: 45%;
}

input[type="checkbox"].diff-toggle {
  float: right;
}

body.branch .brlist > table > tbody > tr:hover > td:first-child,
body.branch .brlist > table > tbody > tr.selected {
  font-weight: bold;
}
body.branch .brlist > table > tbody > tr > td:nth-child(1) {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
body.branch a.label.timeline-link {
  display: none;
}
body.branch a.label.timeline-link.selected {
  display: inline;
  font-weight: bold;
}

/* Objects in the "desktoponly" class are invisible on mobile */
@media screen and (max-width: 600px) {
  .desktoponly {
    display: none;
︙︙
Changes to src/fossil.page.brlist.js. 
1
2









3
4
5
6
7
8
9
10
11
12

13
14

15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

36
37
38
39
40



41
42
43


44
45
46
47
48
49
50
51
52


53
54








55

/*
 * This script adds multiselect facility for the list of branches.









*/
window.addEventListener( 'load', function() {

var anchor = document.querySelector("div.submenu > a.label" );
if( !anchor || anchor.innerText != "Timeline" ) return;
var prefix = anchor.href.toString() + "?ms=regexp&rel&t=";
anchor.classList.add('timeline-link');
const selectedCheckboxes = []/*currently-selected checkboxes*/;
var onChange = function( event ){
  const cbx = event.target;

  const tag = cbx.parentElement.children[0].innerText;
  var re = anchor.href.substr(prefix.length);

  if( cbx.checked ){
    if( re != "" ){
      re += "|";
    }
    re += tag;
    selectedCheckboxes.push(cbx);
    anchor.classList.add('selected'); 
  }else{
    const ndx = selectedCheckboxes.indexOf(cbx);
    if(ndx>=0){
      selectedCheckboxes.splice(ndx,1);
      if(!selectedCheckboxes.length){
        anchor.classList.remove('selected');
      }
    }
    if( re == tag ){
      re = "";
      removeSelected(cbx);
    }else {
      var a = re.split("|");
      var i = a.length;

      while( --i >= 0 ){
        if( a[i] == tag )
          a.splice(i,1);
      }
      re = a.join("|");



    }
  }
  anchor.href = prefix + re;


}

var selected = [];
document.querySelectorAll("div.brlist > table td:first-child > input")
  .forEach( function( cbx ){
    cbx.onchange = onChange;
    cbx.disabled = false;
    if( cbx.checked )
      selected.push(cbx.parentElement.children[0].innerText);


  });
anchor.href = selected.length != 0 ? prefix + selected.join("|") : "#";








}); // window.addEventListener( 'load' ...



>
>
>
>
>
>
>
>
>





|

|

|
>
|
|
>

<
<
<
<
|
|
<
<
<
<
<
<
|
<
<
<
<
|
<
<
>
|
|
|
|
|
>
>
>
|
<
|
>
>


|




|
|
>
>

|
>
>
>
>
>
>
>
>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26




27
28






29




30


31
32
33
34
35
36
37
38
39
40

41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

/*
 * This script adds multiselect facility for the list of branches.
 *
 * Some info on 'const':
 *   https://caniuse.com/const
 *   https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const#browser_compatibility
 *
 * According to MDN 'const' requires Android's WebView 37,
 * which may not be available.
 * For the time being, continueing without 'const' and 'indexOf'
 * (but that may be reconsidered later).
*/
window.addEventListener( 'load', function() {

var anchor = document.querySelector("div.submenu > a.label" );
if( !anchor || anchor.innerText != "Timeline" ) return;
var prefix   = anchor.href.toString() + "?ms=regexp&rel&t=";
anchor.classList.add('timeline-link');

var onChange = function( event ){
  var cbx = event.target;
  var tr  = cbx.parentElement.parentElement;
  var tag = cbx.parentElement.children[0].innerText;
  var re  = anchor.href.substr(prefix.length);
  var selected = ( re != "" ? re.split("|") : [] );
  if( cbx.checked ){




    selected.push(tag);
    tr.classList.add('selected');






  }




  else {


    tr.classList.remove('selected');
    for( var i = selected.length; --i >= 0 ;)
      if( selected[i] == tag )
        selected.splice(i,1);
  }
  if( selected.length >= 2 )
    anchor.classList.add('selected');
  else
    anchor.classList.remove('selected');


  anchor.href = prefix + selected.join("|");
  anchor.innerHTML = "View " + selected.length + " branches";
  // console.log("Link:",anchor.href);
}

var stags = []; /* initially selected tags, not used above */
document.querySelectorAll("div.brlist > table td:first-child > input")
  .forEach( function( cbx ){
    cbx.onchange = onChange;
    cbx.disabled = false;
    if( cbx.checked ){
      stags.push(cbx.parentElement.children[0].innerText);
      cbx.parentElement.parentElement.classList.add('selected');
    }
  });

if( stags.length != 0 ){
  anchor.href =  prefix + stags.join("|");
  if( stags.length >= 2 ) {
    anchor.innerHTML = "View " + stags.length + " branches";
    anchor.classList.add('selected');
  }
}

}); // window.addEventListener( 'load' ...