Discussion :

[NoSmoking]

Pourquoi le scroll fonctionne bien sur le tableau mais pas sur le header ?

Il ne faut pas perdre de vue que l'on est en présence de deux <table> et que l'on interagit que sur une il faut donc synchroniser les scrolls de ces <table>, c'est trois lignes de code.

Le code modifié devient

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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
// réalisation et injection de la copie de la table
var tableRef = document.querySelector(".tbody-scroll table");
var headerFixed = document.querySelector(".theader-fixed");
var bodyScroll = tableRef.parentNode;
var tableClone = tableRef.cloneNode(true);
headerFixed.appendChild(tableClone);
 
// ajustement hauteur de scroll propre
var nbLigne = 12;
// calcul hauteur scroll-barre-X
var hScrollBar = bodyScroll.offsetHeight - bodyScroll.clientHeight;
if (nbLigne < tableRef.rows.length - 1) { // on ne tient pas compte du header
  var rect1 = tableRef.rows[0].getBoundingClientRect();
  var rect2 = tableRef.rows[nbLigne + 1].getBoundingClientRect();
  bodyScroll.style.height = ((rect2.top - rect1.top) + hScrollBar) + "px";
}
// calcul pour réajustement
var hEntete = tableRef.tHead.offsetHeight;
// calcul largeur scroll-barre-Y
var wScrollBar = bodyScroll.offsetWidth - bodyScroll.clientWidth;
// réajustement du header fixe
headerFixed.style.height = hEntete + "px";
headerFixed.style.width = "calc(100% - " + wScrollBar + "px)";
 
// synchronisation des scrolls
bodyScroll.onscroll = function () {
  tableClone.style.marginLeft = -this.scrollLeft + "px";
}

Dommage quand même que position:sticky ne soit pas mieux reconnu sur les éléments d'une <table> !

[Invité]

Hello NoSmoking,
c'est le "détail" qui me manquait

Je me suis permis de reprendre ton code, en simplifiant le HTML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
   <div class="table-thead-fixed">
     <table>
....
     </table>
   </div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* ---------------------- */
/* table avec entete fixe */
.table-thead-fixed {
  position: relative;
  overflow: hidden;
}
.theader-fixed {
  z-index: 1;
  position: absolute;
  overflow: hidden;
  background:#fff;
}
.tbody-scroll {
  position: relative;
  overflow: auto;
  margin-bottom: 5px;
}
/* ---------------------- */

Les <div> nécessaires ("tbody-scroll", "theader-fixed") sont créés via le JavaScript :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

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
"use strict";
// ----------
// on peut avoir plusieurs tables
var tableDivWraps = document.querySelectorAll(".table-thead-fixed");
tableDivWraps.forEach(function(tableDivWrap) 
{
  // ----------
  // table avec entete fixe
  var tableRef = tableDivWrap.children[0]; // table
  // ----------
  // on entoure la table d un div
  var tableBodyScroll = document.createElement("div");
  tableBodyScroll.className += "tbody-scroll"; // "tbody-scroll"
  tableDivWrap.insertBefore(tableBodyScroll, tableRef);
  tableBodyScroll.appendChild(tableRef);
  // ----------
  // entete fixe : copie (clone) de la table
  var tableHeadFixed = document.createElement("div"); // "theader-fixed"
  tableHeadFixed.className += "theader-fixed";
  tableHeadFixed.appendChild(tableRef.cloneNode(true));
  tableDivWrap.prepend(tableHeadFixed);
  // ----------
  // ajustement hauteur de scroll propre
  var nbLigne = 10;
  if (nbLigne < tableRef.rows.length - 1) 
  {
    // on ne tient pas compte du header
    var rect1 = tableRef.rows[0].getBoundingClientRect();
    var rect2 = tableRef.rows[nbLigne + 1].getBoundingClientRect();
    tableBodyScroll.style.height = rect2.top - rect1.top + "px";
  }
  // ----------
  // calcul pour réajustement
  var hEntete = tableRef.tHead.offsetHeight;
  // calcul largeur scrollbar
  var w_1 = tableRef.offsetWidth;
  var w_2 = tableRef.parentNode.offsetWidth;
  // ----------
  // réajustement du header fixe
  tableHeadFixed.style.height = hEntete + "px";
  tableHeadFixed.style.width = "calc(100% - " + (w_2 - w_1) + "px)";
  // ----------
  // synchronisation des scrolls
  tableBodyScroll.onscroll = function() {
    tableHeadFixed.style.marginLeft = -this.scrollLeft + "px";
  };
  // ----------
});

N.B. Et tant qu'à faire, on peut avoir plusieurs tables...

[NoSmoking]

Je me suis permis de reprendre ton code ...

permission accordée


A noter que du fait de la gestion de la barre de scroll horizontale j'ai modifier la façon de calculer les dimensions pour mieux coller au conteneur, de ce fait il n'y a pas ce « bug visuel » que l'on peut observer en haut à droite sur le barre de scroll verticale.

[Invité]

@NoSmoking
+1

J'ai modifié mon script :

• (v2) : https://codepen.io/jreaux62/pen/VGNZXJ

C'est en effet visuellement plus "propre"

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
   <div class="table-thead-fixed">
     <table>
....
     </table>
   </div>

ET j'ai mis le script dans 2 fonctions (activée sur le onload + onresize) :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

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
66
67
"use strict";
// ----------
function table_thead_fixed() 
{
  // on peut avoir plusieurs tables
  let tableDivWraps = document.querySelectorAll(".table-thead-fixed");
  tableDivWraps.forEach(function(tableDivWrap) {
    // ----------
    // table avec entete fixe
    let tableRef = tableDivWrap.children[0]; // table
    // ----------
    // on entoure la table d un div
    let tableBodyScroll = document.createElement("div");
    tableBodyScroll.className += "tbody-scroll"; // "tbody-scroll"
    tableDivWrap.insertBefore(tableBodyScroll, tableRef);
    tableBodyScroll.appendChild(tableRef);
    // ----------
    // entete fixe : copie (clone) de la table
    let tableHeadFixed = document.createElement("div"); // "theader-fixed"
    tableHeadFixed.className += "theader-fixed";
    tableHeadFixed.appendChild(tableRef.cloneNode(true));
    tableDivWrap.prepend(tableHeadFixed);
    // ----------
    // ajustement hauteur de scroll propre
    let nbLigne = 5; // A ADAPTER si besoin
    table_thead_fixed_resize(tableDivWrap,tableRef,tableBodyScroll,tableHeadFixed,nbLigne);
   });
}
// --------------------
// Redimensionnement de la fenêtre (horizontal)
function table_thead_fixed_resize(tableDivWrap,tableRef,tableBodyScroll,tableHeadFixed,nbLigne) 
{
   // calcul hauteur scroll-barre-X
    let hScrollBar =
      tableBodyScroll.offsetHeight - tableBodyScroll.clientHeight;
    if (nbLigne < tableRef.rows.length - 1) {
      // on ne tient pas compte du header
      let rect1 = tableRef.rows[0].getBoundingClientRect();
      let rect2 = tableRef.rows[nbLigne + 1].getBoundingClientRect();
      tableBodyScroll.style.height = rect2.top - rect1.top + hScrollBar + "px";
    }
    // ----------
    // calcul pour réajustement
    let hEntete = tableRef.tHead.offsetHeight;
    // ----------
    // calcul largeur scroll-barre-Y
    let wScrollBar = tableBodyScroll.offsetWidth - tableBodyScroll.clientWidth;
    // ----------
    // réajustement du header fixe
    tableHeadFixed.style.height = hEntete + "px";
    tableHeadFixed.style.width = "calc(100% - " + wScrollBar + "px)";
    // ----------
    // synchronisation des scrolls
    tableBodyScroll.onscroll = function() {
      tableHeadFixed.style.marginLeft = -this.scrollLeft + "px";
    };
    // ----------
}
 
// Activation :
window.onload = function(){
  table_thead_fixed();
}
// Redimensionnement de la fenêtre
window.onresize = function(){
  table_thead_fixed_resize();
}

N.B. il reste quelques soucis à résoudre lors du redimensionnent de la fenêtre (onresize) ... pour le 2ème tableau...

+ éventuellement définir un nombre de lignes différent, d'un tableau à l'autre (via un attribut data-nbreligne ?).

[Invité]

+ éventuellement définir un nombre de lignes différent, d'un tableau à l'autre (via un attribut data-nbreligne ?).

N.B. il reste ENCORE quelques soucis à résoudre lors du redimensionnent de la fenêtre (onresize) ... pour le 2ème tableau...

Problèmes résolus :

• (v3) https://codepen.io/jreaux62/pen/eLoOKM

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
    <div class="table-thead-fixed" data-nbreligne="10">
...
    </div>
    <div class="table-thead-fixed" data-nbreligne="5">
...
    </div>

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
"use strict";
// ----------
function table_thead_fixed() 
{
	// on peut avoir plusieurs tables
	let tableDivWraps = document.querySelectorAll(".table-thead-fixed");
	tableDivWraps.forEach(function(tableDivWrap) 
	{
		// ----------
		// table avec entete fixe
		let tableRef = tableDivWrap.children[0]; // table
		// ----------
		// on entoure la table d un div
		let tableBodyScroll = document.createElement("div");
		tableBodyScroll.className += "tbody-scroll"; // "tbody-scroll"
		tableDivWrap.insertBefore(tableBodyScroll, tableRef);
		tableBodyScroll.appendChild(tableRef);
		// ----------
		// entete fixe : copie (clone) de la table
		let tableHeadFixed = document.createElement("div"); // "theader-fixed"
		tableHeadFixed.className += "theader-fixed";
		tableHeadFixed.appendChild(tableRef.cloneNode(true));
		tableDivWrap.prepend(tableHeadFixed);
		// ----------
		// SPECIAL : on change l id "pointsTable" -> "pointsTable2"
		document.querySelector('.theader-fixed #pointsTable').id = 'pointsTable2';
		// ----------
	});
	// ----------
	// ajustement hauteur de scroll propre
	table_thead_fixed_resize();
}
// --------------------
// Redimensionnement de la fenêtre (horizontal)
function table_thead_fixed_resize() 
{
	// on peut avoir plusieurs tables
	let tableDivWraps = document.querySelectorAll(".table-thead-fixed");
	tableDivWraps.forEach(function(tableDivWrap) 
	{
		let nbLigne = tableDivWrap.dataset.nbreligne !== undefined ? tableDivWrap.dataset.nbreligne : 12; // défaut 12 (A ADAPTER)
		// ----------
		let tableHeadFixed = tableDivWrap.children[0];
		let tableBodyScroll = tableDivWrap.children[1];
		let tableRef = tableBodyScroll.children[0];
		// ----------
		// calcul hauteur scroll-barre-X
		let hScrollBar = tableBodyScroll.offsetHeight - tableBodyScroll.clientHeight;
		// ----------
		// nombre de lignes à montrer
		let nbLigneToShow = Math.min(nbLigne, tableRef.rows.length) + 1;
		let rect1 = tableRef.rows[0].getBoundingClientRect();
		let rect2 = tableRef.rows[nbLigneToShow].getBoundingClientRect();
		tableBodyScroll.style.height = rect2.top - rect1.top + hScrollBar + "px";
		// ----------
		// calcul pour réajustement
		let hEntete = tableRef.tHead.offsetHeight;
		// ----------
		// calcul largeur scroll-barre-Y
		let wScrollBar = tableBodyScroll.offsetWidth - tableBodyScroll.clientWidth;
		// ----------
		// réajustement du header fixe
		tableHeadFixed.style.height = hEntete + "px";
		tableHeadFixed.style.width = "calc(100% - " + wScrollBar + "px)";
		// ----------
		// synchronisation des scrolls
		tableBodyScroll.onscroll = function() {
		tableHeadFixed.style.marginLeft = -this.scrollLeft + "px";
		};
		// ----------
	});
}
 
// Activation :
window.onload = function(){
  table_thead_fixed();
}
// Redimensionnement de la fenêtre
window.onresize = function(){
  table_thead_fixed_resize();
}

[rlelamer]

@NoSmoking et @jreaux62

Bonsoir,
J'viens de me replonger dans mes histoires de css pour mon extension, j'ai du mettre ça de coté pour l'été j'avais trop de taf.

J'ai quasi rien modifié au code vu que c'est le rendu que je souhaitais avoir.

popup.html

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="popup.css">
    </head>
    <style>
 
    </style>
    <body>
        <main>
            <div class="table-container">
                <div class="theader-fixe">
                </div>
                <div class="tbody-scroll">
                    <table>
                        <thead>
                            <tr>
                                <th>Date</th>
                                <th>Time</th>
                                <th title="Timezone">TZ</th>
                                <th>Position</th>
                                <th title="Time To Waypoint">TTW</th>
                                <th title="Distance To Waypoint">DTW</th>
                                <th title="Distance To Go">DTG</th>
                                <th title="True Wind Direction">TWD</th>
                                <th title="True Wind Speed">TWS</th>
                                <th title="True Wind Angle">TWA</th>
                                <th title="Bearing To Waypoint - Heading">BTW</th>
                                <th>Sail</th>
                                <th title="Speed Through Water - Boat speed">STW</th>
                                <th title="Average True Wind Angle">ATWA</th>
                                <th title="Average Bearing To Waypoint">ABTW</th>
                            </tr>
                        </thead>
                        <tbody id="pointsTable">
                        </tbody>
                    </table>
                </div>
                <br />
                <div id="localtimeDiv">
                    <input type="checkbox" id="localtime" tabindex="-1">
                    <label>Local Time</label>
                </div>
                <div id="versionDiv">
                    <label>Version</label>
                    <label id="version"></label>
                </div>
                <div id="gpxDiv">
                    <input class="cssButton" type="button" id="gpxExport" value=".GPX" tabindex="-1">
                </div>
                <textarea id="gpxOutput" rows="2" readonly tabindex="-1">...::: Click on GPX button for generate file :::...
Select All | Copy selection | Paste on your text editor | Save the file with the .gpx extension</textarea>
            </div>
        </main>
        <script src="bundle.js"></script>
        <script>
        "use strict";
        // réalisation et injection de la copie de la table
        var tableRef = document.querySelector(".tbody-scroll table");
        var headerFixe = document.querySelector(".theader-fixe");
        headerFixe.appendChild(tableRef.cloneNode(true));
        // ajustement hauteur de scroll propre
        var nbLigne = 27;
        if (nbLigne < tableRef.rows.length - 1) { // on ne tient pas compte du header
            var bodyScroll = document.querySelector(".tbody-scroll");
            var rect1 = tableRef.rows[0].getBoundingClientRect();
            var rect2 = tableRef.rows[nbLigne + 1].getBoundingClientRect();
            bodyScroll.style.height = (rect2.top - rect1.top) + "px";
        }
        // calcul pour réajustement
        var hEntete = tableRef.tHead.offsetHeight;
        // calcul largeur scroll-barre
        var w_1 = tableRef.offsetWidth;
        var w_2 = tableRef.parentNode.offsetWidth;
        // réajustement du header fixe
        headerFixe.style.height = hEntete + "px";
        headerFixe.style.width = "calc(100% - " + (w_2 - w_1) + "px)";
        // synchronisation des scrolls
        bodyScroll.onscroll = function () {
            tableClone.style.marginLeft = -this.scrollLeft + "px";
        }
        </script>
    </body>
</html>

popup.css

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
html, body {
    margin: 2;
    padding: 0;
    min-height: 100vh;
    font: 1em/1.25 Arial;
}
 
main {
    display: block;
    max-width: 100%;
    margin: auto;
    border-top: 1px solid transparent;
}
 
.table-container {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    border: 1px solid black;
    font-size: 11px;
}
 
.theader-fixe {
    z-index: 1;
    position: absolute;
    overflow: hidden;
    background: #FFF;
}
 
.tbody-scroll {
    margin-bottom: 2px;
    overflow: auto;
}
 
table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 1px;
    text-align: center;
    cursor: pointer;
}
 
thead {
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.2) )repeat scroll 0% 0% #EEE;
    text-shadow: 1px 1px 1px #FFF;
}
 
th, td {
    padding: 1px;
    border: 1px solid #CCC;
    white-space: nowrap;
}
 
tr:hover td {
    background-color: #CDE;
}
 
tr {
    background-color: transparent;
}
 
#localtimeDiv {
    float: left;
}
 
#versionDiv {
    float: right;
}
 
#gpxDiv {
    margin: 0 auto;
    text-align: center;
}
 
.cssButton {
    font-size: inherit;
}
 
#gpxOutput {
    display: block;
    box-sizing: border-box;
    width: calc(100% - 4px);
    margin: 1em 2px 2px;
    font-size: inherit;
    resize: none;
}

Mais le scroll du tableau ne fonctionne pas

Local Time désactivé:


Local Time activé:


Seul le scroll du tableau est inactif ...

En allant faire un tour sur la console, j'ai ce message d'erreur:



Je me renseigne donc et j'apprends que Chrome n'est pas fan de code JS dans la balise <script> du fichier html.
Je modifie donc le code comme ceci:

popup.html

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="popup.css">
    </head>
    <style>
 
    </style>
    <body>
        <main>
            <div class="table-container">
                <div class="theader-fixe">
                </div>
                <div class="tbody-scroll">
                    <table>
                        <thead>
                            <tr>
                                <th>Date</th>
                                <th>Time</th>
                                <th title="Timezone">TZ</th>
                                <th>Position</th>
                                <th title="Time To Waypoint">TTW</th>
                                <th title="Distance To Waypoint">DTW</th>
                                <th title="Distance To Go">DTG</th>
                                <th title="True Wind Direction">TWD</th>
                                <th title="True Wind Speed">TWS</th>
                                <th title="True Wind Angle">TWA</th>
                                <th title="Bearing To Waypoint - Heading">BTW</th>
                                <th>Sail</th>
                                <th title="Speed Through Water - Boat speed">STW</th>
                                <th title="Average True Wind Angle">ATWA</th>
                                <th title="Average Bearing To Waypoint">ABTW</th>
                            </tr>
                        </thead>
                        <tbody id="pointsTable">
                        </tbody>
                    </table>
                </div>
                <br />
                <div id="localtimeDiv">
                    <input type="checkbox" id="localtime" tabindex="-1">
                    <label>Local Time</label>
                </div>
                <div id="versionDiv">
                    <label>Version</label>
                    <label id="version"></label>
                </div>
                <div id="gpxDiv">
                    <input class="cssButton" type="button" id="gpxExport" value=".GPX" tabindex="-1">
                </div>
                <textarea id="gpxOutput" rows="2" readonly tabindex="-1">...::: Click on GPX button for generate file :::...
Select All | Copy selection | Paste on your text editor | Save the file with the .gpx extension</textarea>
            </div>
        </main>
        <script src="bundle.js"></script>
        <script src="resizeTables.js"></script>
    </body>
</html>

resizeTables.js

Code JS :

Sélectionner tout - Visualiser dans une fenêtre à part

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
"use strict";
// réalisation et injection de la copie de la table
var tableRef = document.querySelector(".tbody-scroll table");
var headerFixe = document.querySelector(".theader-fixe");
headerFixe.appendChild(tableRef.cloneNode(true));
// ajustement hauteur de scroll propre
var nbLigne = 27;
if (nbLigne < tableRef.rows.length - 1) { // on ne tient pas compte du header
    var bodyScroll = document.querySelector(".tbody-scroll");
    var rect1 = tableRef.rows[0].getBoundingClientRect();
    var rect2 = tableRef.rows[nbLigne + 1].getBoundingClientRect();
    bodyScroll.style.height = (rect2.top - rect1.top) + "px";
}
// calcul pour réajustement
var hEntete = tableRef.tHead.offsetHeight;
// calcul largeur scroll-barre
var w_1 = tableRef.offsetWidth;
var w_2 = tableRef.parentNode.offsetWidth;
// réajustement du header fixe
headerFixe.style.height = hEntete + "px";
headerFixe.style.width = "calc(100% - " + (w_2 - w_1) + "px)";
// synchronisation des scrolls
bodyScroll.onscroll = function () {
    tableClone.style.marginLeft = -this.scrollLeft + "px";
}

et la cool, ça fonctionne ! Je pensais avoir "résolu" le soucis mais j'étais trop confiant ...

Local Time désactivé: (tout roule )


Local Time activé: (Là c'est le drame ...)


thead évolue bien en revanche le tableau n'est pas rechargé, on le voit au niveau de la colonne TZ entre le thead et le tableau y'a un décalage parce que les valeurs de TZ devaient être UTC+2 ...

Je passe à coté de quoi ?
Merci de vos lumières parce que là j'vois pas ...

[rlelamer]

Je reviens sur le point où je disais que Google Chrome n'aimait pas du code JS sur une page HTML.
Enfaite il est possible de mettre le code "brut" (non imbriqué dans resizeTables.js pour mon cas), mais il faut le "déclarer" dans manifest.json

donc si je récapitule:

popup.html

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="popup.css">
    </head>
    <body>
        <main>
            <div class="table-container">
                <div class="theader-fixe">
                </div>
                <div class="tbody-scroll">
                    <table>
                        <thead>
                            <tr>
                                <th>Date</th>
                                <th>Time</th>
                                <th title="Timezone">TZ</th>
                                <th>Position</th>
                                <th title="Time To Waypoint">TTW</th>
                                <th title="Distance To Waypoint">DTW</th>
                                <th title="Distance To Go">DTG</th>
                                <th title="True Wind Direction">TWD</th>
                                <th title="True Wind Speed">TWS</th>
                                <th title="True Wind Angle">TWA</th>
                                <th title="Bearing To Waypoint">BTW</th>
                                <th>Sail</th>
                                <th title="Speed Through Water">STW</th>
                                <th title="Average True Wind Angle">ATWA</th>
                                <th title="Average Bearing To Waypoint">ABTW</th>
                            </tr>
                        </thead>
                        <tbody id="pointsTable">
                        </tbody>
                    </table>
                </div>
                <br />
                <div id="localtimeDiv">
                    <input type="checkbox" id="localtime" tabindex="-1">
                    <label>Local Time</label>
                </div>
                <div id="versionDiv">
                    <label>Version</label>
                    <label id="version"></label>
                </div>
                <div id="gpxDiv">
                    <input class="cssButton" type="button" id="gpxExport" value=".GPX" tabindex="-1">
                </div>
                <textarea id="gpxOutput" rows="2" readonly tabindex="-1">...::: Click on GPX button for generate file :::...
Select All | Copy selection | Paste on your text editor | Save the file with the .gpx extension</textarea>
            </div>
        </main>
        <script src="bundle.js"></script>
        <script>"use strict";
        // réalisation et injection de la copie de la table
        var tableRef = document.querySelector(".tbody-scroll table");
        var headerFixe = document.querySelector(".theader-fixe");
        headerFixe.appendChild(tableRef.cloneNode(true));
        // ajustement hauteur de scroll propre
        var nbLigne = 27;
        if (nbLigne < tableRef.rows.length - 1) { // on ne tient pas compte du header
            var bodyScroll = document.querySelector(".tbody-scroll");
            var rect1 = tableRef.rows[0].getBoundingClientRect();
            var rect2 = tableRef.rows[nbLigne + 1].getBoundingClientRect();
            bodyScroll.style.height = (rect2.top - rect1.top) + "px";
        }
        // calcul pour réajustement
        var hEntete = tableRef.tHead.offsetHeight;
        // calcul largeur scroll-barre
        var w_1 = tableRef.offsetWidth;
        var w_2 = tableRef.parentNode.offsetWidth;
        // réajustement du header fixe
        headerFixe.style.height = hEntete + "px";
        headerFixe.style.width = "calc(100% - " + (w_2 - w_1) + "px)";
        // synchronisation des scrolls
        bodyScroll.onscroll = function () {
            tableClone.style.marginLeft = -this.scrollLeft + "px";
        }
        </script>
    </body>
</html>

Seul, il génère cette erreur en console:


Il faut donc copier le ('sha256-###=') et dans manifest.json le déclarer comme ceci

Code JSON :

Sélectionner tout - Visualiser dans une fenêtre à part

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
{
    "manifest_version": 2,
    "name": "Route zezo.org v3.1",
    "description": "Extract route for MultiRaces",
    "version": "3.1",
    "page_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html"
    },
    "permissions": ["tabs","storage"],
    "content_scripts": [
        {
            "matches": ["http://*.zezo.org/*/chart.pl*"],
            "js": ["myscript.js"]
        }
    ],
    "content_security_policy": "script-src 'self' 'sha256-kbBt+geyuTGD4n894ScFEcsN+WQdV+N+IVcbKRMB9AQ='; object-src 'self'",
    "icons": {
        "16": "icon16.png",
        "48": "icon48.png",
        "128": "icon128.png"
    },
    "background": {
        "scripts": ["eventPage.js"]
    }
}

Cette façon de faire n'est pas très "propre", il est préférable de faire comme le dernier point (code dans resizeTables.js et mettre <script src="resizeTables.js"></script> dans le fichier html.

Pour mon cas, les 2 méthodes me donne exactement le même résultat ... le tableau ne recharge pas donc l'affichage reste UTC alors qu'il devrait afficher UTC+2, la date et l'heure serait également modifiées.

Ce comportement est bien lié au code js ci dessous:

Code JS :

Sélectionner tout - Visualiser dans une fenêtre à part

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
"use strict";
// réalisation et injection de la copie de la table
var tableRef = document.querySelector(".tbody-scroll table");
var headerFixe = document.querySelector(".theader-fixe");
headerFixe.appendChild(tableRef.cloneNode(true));
// ajustement hauteur de scroll propre
var nbLigne = 27;
if (nbLigne < tableRef.rows.length - 1) { // on ne tient pas compte du header
    var bodyScroll = document.querySelector(".tbody-scroll");
    var rect1 = tableRef.rows[0].getBoundingClientRect();
    var rect2 = tableRef.rows[nbLigne + 1].getBoundingClientRect();
    bodyScroll.style.height = (rect2.top - rect1.top) + "px";
}
// calcul pour réajustement
var hEntete = tableRef.tHead.offsetHeight;
// calcul largeur scroll-barre
var w_1 = tableRef.offsetWidth;
var w_2 = tableRef.parentNode.offsetWidth;
// réajustement du header fixe
headerFixe.style.height = hEntete + "px";
headerFixe.style.width = "calc(100% - " + (w_2 - w_1) + "px)";
// synchronisation des scrolls
bodyScroll.onscroll = function () {
    tableClone.style.marginLeft = -this.scrollLeft + "px";
}

J'vois pas ce qui cloche et un coup de main serait le bienvenu ...

Merci

[Invité]

Bonjour,

1- Tu n'as pas utilisé mon dernier script (v3)...
[EDIT] (J'ai recréé mes codepen (que j'avais effacés...))

2- Sans un lien vers ta page en ligne, on ne peut rien en dire.

Sinon, on ne peut pas tester : il nous manque des infos (scripts bundle.js,...)

[rlelamer]

Merci jreaux62,

Les liens codepen ne fonctionnaient plus et tu disais qu'il y avait encore un soucis è gérer du coup je croyais que tu avais laissé tomber ..., je test tout ça ce soir et je reviens vers toi.

Pour la page en ligne (codepen), faut que je regarde comment dois je faire pour que la checkbox soit fonctionnelle.

[Invité]

1- Concernant le "souci" : il n'y en a plus.
(et il ne concernait que le cas avec un 2ème tableau).

2- Pour ta page en ligne, je doute qu'un codepen suffise.
Ou en tout cas, il faut qu'elle ait accès à tout tes scripts et autres... qui doivent eux aussi être en ligne.

[rlelamer]

@jreaux62 et @NoSmoking

J'ai séparé vos 2 codes dans 2 extensions distinctes pour Google Chrome et le même "soucis" existe sur les 2 versions.

J'ai cherché un moyen pour que la checkbox Local Time soit fonctionnelle dans codepen ou autres mais en vain.

Je vais détailler ici chaque version et mettre à dispo les 2 versions de l'extension.

Vous pourrez les tester en les installant en mode développeur sur cet URL, il est important d'avoir Adblock sinon l'extraction du tableau ne se fait pas (je dois corriger ça après avoir résolu le soucis actuel)



# Version jreaux62 :
popup.html

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="popup.css">
    </head>
    <body>
        <div class="container">
            <div class="table-wrap table-thead-fixed" data-nbreligne="25">
                <table>
                    <thead>
                        <tr>
                            <th>Date</th>
                            <th>Time</th>
                            <th title="Timezone">TZ</th>
                            <th>Position</th>
                            <th title="Time To Waypoint">TTW</th>
                            <th title="Distance To Waypoint">DTW</th>
                            <th title="Distance To Go">DTG</th>
                            <th title="True Wind Direction">TWD</th>
                            <th title="True Wind Speed">TWS</th>
                            <th title="True Wind Angle">TWA</th>
                            <th title="Bearing To Waypoint">BTW</th>
                            <th>Sail</th>
                            <th title="Speed Through Water">STW</th>
                            <th title="Average True Wind Angle">ATWA</th>
                            <th title="Average Bearing To Waypoint">ABTW</th>
                        </tr>
                    </thead>
                    <tbody id="pointsTable">
                    </tbody>
                </table>
            </div>
            <br>
            <div id="localtimeDiv">
                <input type="checkbox" id="localtime" tabindex="-1">
                <label>Local Time</label>
            </div>
            <div id="versionDiv">
                <label>Version</label>
                <label id="version"></label>
            </div>
            <div id="gpxDiv">
                <input class="cssButton" type="button" id="gpxExport" value=".GPX" tabindex="-1">
            </div>
            <br>
            <textarea id="gpxOutput" rows="2" readonly tabindex="-1">...::: Click on GPX button for generate file :::...
Select All | Copy selection | Paste on your text editor | Save the file with the .gpx extension</textarea>
        </div>
    </body>
    <script src="bundle.js"></script>
    <script src="resizeTables.js"></script>
</html>

popup.css

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
body {
  font: Arial;
  font-size: 11px;
  margin: 5px;
}
 
.container {
  width: 100%;
  /*max-width: 800px;*/
  margin:0 auto;
}
 
.table-wrap {
  border: 1px solid black;
}
 
.table-wrap table {
  text-align: center;
  width: 100%;
}
 
.table-wrap table th {
  /*position: sticky;*/
  top: 2px;
  border: 1px solid #CCC;
}
 
.table-wrap table td {
  border: 1px solid #CCC;
  padding: 1px;
  white-space: nowrap;
}
 
thead {
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.2) )repeat scroll 0% 0% #EEE;
    text-shadow: 1px 1px 1px #FFF;
}
 
tr:hover td {
  background-color: #CDE;
}
 
tr {
  background-color: transparent;
}
 
#localtimeDiv {
  float: left;
}
 
#versionDiv {
  float: right;
}
 
#gpxDiv {
  margin: 0 auto;
  text-align: center;
}
 
.cssButton {
  font-size: 11px;
}
 
#gpxOutput {
  width: calc(100% - 5px);
  resize: none;
  font-size: 11px;
}
 
/* ---------------------- */
/* table avec entete fixe */
/* ---------------------- */
.table-thead-fixed {
  position: relative;
  overflow: hidden;
}
 
.theader-fixed {
  z-index: 1;
  position: absolute;
  overflow: hidden;
  background:#FFF;
}
 
.tbody-scroll {
  position: relative;
  overflow: auto;
  margin-bottom: 2px;
}

resizeTables.js

Code JS :

Sélectionner tout - Visualiser dans une fenêtre à part

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
"use strict";
 
function table_thead_fixed() {
  // on peut avoir plusieurs tables
  let tableDivWraps = document.querySelectorAll(".table-thead-fixed");
  tableDivWraps.forEach(function(tableDivWrap) {
    // table avec entete fixe
    let tableRef = tableDivWrap.children[0]; // table
    // on entoure la table d un div
    let tableBodyScroll = document.createElement("div");
    tableBodyScroll.className += "tbody-scroll"; // "tbody-scroll"
    tableDivWrap.insertBefore(tableBodyScroll, tableRef);
    tableBodyScroll.appendChild(tableRef);
    // entete fixe : copie (clone) de la table
    let tableHeadFixed = document.createElement("div"); // "theader-fixed"
    tableHeadFixed.className += "theader-fixed";
    tableHeadFixed.appendChild(tableRef.cloneNode(true));
    tableDivWrap.prepend(tableHeadFixed);
    // ajustement hauteur de scroll propre
    let nbLigne =
      tableDivWrap.dataset.nbreligne !== undefined
        ? tableDivWrap.dataset.nbreligne
        : 12; // défaut 12 (A ADAPTER)
    table_thead_fixed_resize(tableDivWrap,nbLigne);
  });
}
 
// Redimensionnement de la fenêtre (horizontal)
function table_thead_fixed_resize(tableDivWrap,nbLigne) 
{
  let tableHeadFixed = tableDivWrap.children[0];
  let tableBodyScroll = tableDivWrap.children[1];
  let tableRef = tableBodyScroll.children[0];
  // calcul hauteur scroll-barre-X
  let hScrollBar = tableBodyScroll.offsetHeight - tableBodyScroll.clientHeight;
  // nombre de lignes à montrer
  let nbLigneToShow = Math.min(nbLigne, tableRef.rows.length) + 1;
  let rect1 = tableRef.rows[0].getBoundingClientRect();
  let rect2 = tableRef.rows[nbLigneToShow].getBoundingClientRect();
  tableBodyScroll.style.height = rect2.top - rect1.top + hScrollBar + "px";
  // calcul pour réajustement
  let hEntete = tableRef.tHead.offsetHeight;
  // calcul largeur scroll-barre-Y
  let wScrollBar = tableBodyScroll.offsetWidth - tableBodyScroll.clientWidth;
  // réajustement du header fixe
  tableHeadFixed.style.height = hEntete + "px";
  tableHeadFixed.style.width = "calc(100% - " + wScrollBar + "px)";
  // synchronisation des scrolls
  tableBodyScroll.onscroll = function() {
    tableHeadFixed.style.marginLeft = -this.scrollLeft + "px";
  };
}
 
// Activation :
window.onload = function(){
  table_thead_fixed();
}
// Redimensionnement de la fenêtre
window.onresize = function(){
  table_thead_fixed_resize();
}

Sans la Checkbox Local Time cochée:


Avec la Checkbox Local Time cochée:




# version NoSmoking :
popup.html

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="popup.css">
    </head>
    <body>
        <main>
            <div class="table-container">
                <div class="theader-fixed">
                </div>
                <div class="tbody-scroll">
                    <table>
                        <thead>
                            <tr>
                                <th>Date</th>
                                <th>Time</th>
                                <th title="Timezone">TZ</th>
                                <th>Position</th>
                                <th title="Time To Waypoint">TTW</th>
                                <th title="Distance To Waypoint">DTW</th>
                                <th title="Distance To Go">DTG</th>
                                <th title="True Wind Direction">TWD</th>
                                <th title="True Wind Speed">TWS</th>
                                <th title="True Wind Angle">TWA</th>
                                <th title="Bearing To Waypoint">BTW</th>
                                <th>Sail</th>
                                <th title="Speed Through Water">STW</th>
                                <th title="Average True Wind Angle">ATWA</th>
                                <th title="Average Bearing To Waypoint">ABTW</th>
                            </tr>
                        </thead>
                        <tbody id="pointsTable">
                        </tbody>
                    </table>
                </div>
                <br />
                <div id="localtimeDiv">
                    <input type="checkbox" id="localtime" tabindex="-1">
                    <label>Local Time</label>
                </div>
                <div id="versionDiv">
                    <label>Version</label>
                    <label id="version"></label>
                </div>
                <div id="gpxDiv">
                    <input class="cssButton" type="button" id="gpxExport" value=".GPX" tabindex="-1">
                </div>
                <textarea id="gpxOutput" rows="2" readonly tabindex="-1">...::: Click on GPX button for generate file :::...
Select All | Copy selection | Paste on your text editor | Save the file with the .gpx extension</textarea>
            </div>
        </main>
        <script src="bundle.js"></script>
        <script src="resizeTables.js"></script>
    </body>
</html>

popup.css

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
html, body {
    margin: 2;
    padding: 0;
    min-height: 100vh;
    font: 1em/1.25 Arial;
}
 
main {
    display: block;
    max-width: 100%;
    margin: auto;
    border-top: 1px solid transparent;
}
 
.table-container {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    border: 1px solid black;
    font-size: 11px;
}
 
.theader-fixed {
    z-index: 1;
    position: absolute;
    overflow: hidden;
    background: #FFF;
}
 
.tbody-scroll {
    margin-bottom: 2px;
    overflow: auto;
}
 
table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 1px;
    text-align: center;
    cursor: pointer;
}
 
thead {
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.2) )repeat scroll 0% 0% #EEE;
    text-shadow: 1px 1px 1px #FFF;
}
 
th, td {
    padding: 1px;
    border: 1px solid #CCC;
    white-space: nowrap;
}
 
tr:hover td {
    background-color: #CDE;
}
 
tr {
    background-color: transparent;
}
 
#localtimeDiv {
    float: left;
}
 
#versionDiv {
    float: right;
}
 
#gpxDiv {
    margin: 0 auto;
    text-align: center;
}
 
.cssButton {
    font-size: inherit;
}
 
#gpxOutput {
    display: block;
    box-sizing: border-box;
    width: calc(100% - 4px);
    margin: 1em 2px 2px;
    font-size: inherit;
    resize: none;
}

resizeTables.js

Code JS :

Sélectionner tout - Visualiser dans une fenêtre à part

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
"use strict";
// réalisation et injection de la copie de la table
var tableRef = document.querySelector(".tbody-scroll table");
var headerFixed = document.querySelector(".theader-fixed");
headerFixed.appendChild(tableRef.cloneNode(true));
// ajustement hauteur de scroll propre
var nbLigne = 27;
if (nbLigne < tableRef.rows.length - 1) { // on ne tient pas compte du header
    var bodyScroll = document.querySelector(".tbody-scroll");
    var rect1 = tableRef.rows[0].getBoundingClientRect();
    var rect2 = tableRef.rows[nbLigne + 1].getBoundingClientRect();
    bodyScroll.style.height = (rect2.top - rect1.top) + "px";
}
// calcul pour réajustement
var hEntete = tableRef.tHead.offsetHeight;
// calcul largeur scroll-barre
var w_1 = tableRef.offsetWidth;
var w_2 = tableRef.parentNode.offsetWidth;
// réajustement du header fixe
headerFixed.style.height = hEntete + "px";
headerFixed.style.width = "calc(100% - " + (w_2 - w_1) + "px)";
// synchronisation des scrolls
bodyScroll.onscroll = function () {
    tableClone.style.marginLeft = -this.scrollLeft + "px";
}

Sans la Checkbox Local Time cochée:


Avec la Checkbox Local Time cochée:



Dans l'onglet des extensions, on peut y voir ceci:


Pour la version jreaux62, l'erreur est


Pour la version NoSmoking, l'erreur est


Pour les 2 versions quand la checkbox Local Time est cochée, la valeur de la colonne TZ devrait être UTC+2 mais là la valeur reste à CEST.


Dans bundle.js, les 8279 premières lignes sont les librairies xml et moment-timezone, mon code commence à la ligne 8280 et correspond à ceci
bundle.js (sans les librairies additionnelles)

Code JS :

Sélectionner tout - Visualiser dans une fenêtre à part

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
const builder = require('xmlbuilder');
const moment = require('moment-timezone');
 
var background = chrome.extension.getBackgroundPage();
 
var twaList = [];
var btwList = [];
var ttwLast = "T+ 0:00";
var twaLast = undefined;
var btwLast = undefined;
 
function createCell(value, row) {
    var cell = document.createElement("td");
    cell.innerHTML = value;
    row.appendChild(cell);
}
 
function ttwStyling(value, cell) {
    cell.align = "left";
    cell.innerHTML = value;
}
 
function dtwStyling(value, cell) {
    cell.align = "left";
    cell.innerHTML = value;
}
 
function dtgStyling(value, cell) {
    cell.align = "left";
    cell.innerHTML = value;
}
 
function twsStyling(value1, value2, cell) {
    var tws_foil = value1.replace(" kt", "");
    var twa_bd = value2.replace("\u00B0", "");
    if (tws_foil >= 11.1 && tws_foil <= 39.9 && Math.abs(twa_bd) >= 71 && Math.abs(twa_bd) <= 169) {
        cell.style.backgroundColor = "black";
        cell.style.color = "white";
    }
    cell.innerHTML = tws_foil + " kt";
}
 
function twaStyling(value, cell) {
    var twa_bd = value.replace("\u00B0", "");
    if (twa_bd >= 0) {
        cell.style.color = "green";
    } else {
        cell.style.color = "red";
    }
    cell.innerHTML = Math.abs(twa_bd) + "\u00B0";
}
 
function btwStyling(value, cell) {
    cell.style.color = "blue";
    cell.innerHTML = value;
}
 
function sailStyling(value, cell) {
    switch (value.trim()) {
            // Upwind sail
        case "Jib":
            cell.style.backgroundColor = "#FFD479";
            break;
        case "LJ":
            cell.style.backgroundColor = "#FFFC79";
            break;
        case "Stay":
            cell.style.backgroundColor = "#D4FB79";
            break;
            // Downwind sail
        case "Spi":
            cell.style.backgroundColor = "#76D6FF";
            break;
        case "LG":
            cell.style.backgroundColor = "#7A81FF";
            break;
        case "HG":
            cell.style.backgroundColor = "#D783FF";
            break;
            // Reaching sail
        case "C0":
            cell.style.backgroundColor = "#FF7E79";
            break;
    }
    cell.innerHTML = value;
}
 
function atwaStyling(value, cell) {
    if (value >= 0) {
        cell.style.color = "green";
    } else {
        cell.style.color = "red";
    }
    if (value !== "-") {
        cell.innerHTML = Math.abs(value) + "\u00B0";
    } else {
        cell.style.color = "black";
        cell.innerHTML = value;
    }
}
 
function abtwStyling(value, cell) {
    cell.style.color = "blue";
    if (value !== "-") {
        cell.innerHTML = value + "\u00B0";
    } else {
        cell.style.color = "black";
        cell.innerHTML = value;
    }
}
 
function createCellWithCustomStyling(value, row, customStyling) {
    var cell = document.createElement("td");
    customStyling(value, cell);
    row.appendChild(cell);
}
 
function createCellWithCustomStyling2(value1, value2, row, customStyling) {
    var cell = document.createElement("td");
    customStyling(value1, value2, cell);
    row.appendChild(cell);
}
 
function space(value) {
    if (value < 10) {
        value = " " + value;
    }
    return value;
}
 
function zero(value) {
    if (value < 10) {
        value = "0" + value;
    }
    return value;
}
 
function dmsConv(latitude, longitude) {
    var latAbs = Math.abs(latitude);
    var latDeg = Math.trunc(latAbs);
    var latMin = Math.trunc((latAbs - latDeg) * 60);
    var latSec = Math.trunc((((latAbs - latDeg) * 60) - latMin ) * 60);
    var latCard = (latitude >= 0) ? "N" : "S";
 
    var lonAbs = Math.abs(longitude);
    var lonDeg = Math.trunc(lonAbs);
    var lonMin = Math.trunc((lonAbs - lonDeg) * 60);
    var lonSec = Math.trunc((((lonAbs - lonDeg) * 60) - lonMin ) * 60);
    var lonCard = (longitude >= 0) ? "E" : "W";
 
    return zero(latDeg) + "\u00B0" + zero(latMin) + "\u0027" + zero(latSec) + "\u0022" + latCard + " - " + zero(lonDeg) + "\u00B0" + zero(lonMin) + "\u0027" + zero(lonSec) + "\u0022" + lonCard;
}
 
function atwaCalc(twaList) {
    const
    twaData = twaList;
    Math.radians = function (degrees) {
        return degrees * Math.PI / 180;
    },
        Math.degrees = function (radians) {
        return radians * 180 / Math.PI;
    };
 
    let
    arX = [],
        arY = [],
        somX = 0,
        somY = 0,
        avgX = 0,
        avgY = 0,
        atwa = 0;
 
    for (const [i, angle] of twaData.entries()) {
        arX[i] = Math.cos(Math.radians(angle));
        arY[i] = Math.sin(Math.radians(angle));
    }
 
    for (const value of arX) {
        somX += value;
    }
    avgX = somX / arX.length;
 
    for (const value of arY) {
        somY += value;
    }
    avgY = somY / arY.length;
 
    atwa = Math.round(Math.degrees(Math.atan2(avgY, avgX)));
    if (isNaN (atwa)) {
        atwa = "-";
    }
    return atwa ;
}
 
function abtwCalc(btwList) {
    const
    btwData = btwList;
    Math.radians = function (degrees) {
        return degrees * Math.PI / 180;
    },
        Math.degrees = function (radians) {
        return radians * 180 / Math.PI;
    };
 
    let
    arX = [],
        arY = [],
        somX = 0,
        somY = 0,
        avgX = 0,
        avgY = 0,
        abtw = 0;
 
    for (const [i, angle] of btwData.entries()) {
        arX[i] = Math.cos(Math.radians(angle));
        arY[i] = Math.sin(Math.radians(angle));
    }
 
    for (const value of arX) {
        somX += value;
    }
    avgX = somX / arX.length;
 
    for (const value of arY) {
        somY += value;
    }
    avgY = somY / arY.length;
 
    abtw = Math.round(Math.degrees(Math.atan2(avgY, avgX)));
    if (isNaN (abtw)) {
        abtw = "-";
    } else if (abtw < 0) {
        abtw += 360;
    }
    return abtw;
}
 
function reinitializeDisplay() {
    document.getElementById("pointsTable").innerHTML = "";
}
 
function TzToLocal(date, time, timezone) {
    var tzGuess = moment.tz.guess();
 
    if ((timezone === "CET") || (timezone === "CEST")) {
        var CetOrCestToUtc = moment.tz(date + " " + time, "Europe/Paris").utc();
        var localDateTz = moment.utc(CetOrCestToUtc).tz(tzGuess);
    } else if (timezone === "UTC") {
        var localDateTz = moment.utc(date + " " + time).tz(tzGuess);
    }
 
    var offset = localDateTz.utcOffset();
    var absOffset = Math.abs(offset);
    var sign = (offset > 0) ? "+" : "-";
    var hoursOffset = Math.trunc(absOffset / 60);
    var MinutesHoursOffset = (hoursOffset === 0) ? "\u00b1" + "0" : sign + hoursOffset;
    var minutesOffset = absOffset % 60;
    var HoursMinutesOffset = (minutesOffset === 0) ? MinutesHoursOffset : sign + hoursOffset + ":" + minutesOffset;
 
    var formatDate = localDateTz.format('YYYY-MM-DD');
    var formatTime = localDateTz.format('HH:mm');
    var formatTimeZone = "UTC" + HoursMinutesOffset;
    return [formatDate, formatTime, formatTimeZone];
}
 
function displayTable(localTime) {
    points.forEach(function (element) {
        var row = document.createElement("tr");
        document.getElementById("pointsTable").appendChild(row);
        if (localTime) {
            var localTZ = TzToLocal(element.date, element.time, element.timezone);
            createCell(localTZ[0], row);
            createCell(localTZ[1], row);
            createCell(localTZ[2], row);
        } else {
            createCell(element.date, row);
            createCell(element.time, row);
            createCell(element.timezone, row);
        }
        var position = dmsConv(element.latitude, element.longitude);
        createCell(position, row);
        createCellWithCustomStyling(element.ttw, row, ttwStyling);
        createCellWithCustomStyling(element.dtw, row, dtwStyling);
        createCellWithCustomStyling(element.dtg, row, dtgStyling);
        createCell(element.twd, row);
        createCellWithCustomStyling2(element.tws, element.twa, row, twsStyling);
        createCellWithCustomStyling(element.twa, row, twaStyling);
        createCellWithCustomStyling(element.btw, row, btwStyling);
        createCellWithCustomStyling(element.sail, row, sailStyling);
        createCell(element.stw, row);
        createCellWithCustomStyling(element.atwa, row, atwaStyling);
        createCellWithCustomStyling(element.abtw, row, abtwStyling);
        var manifest = chrome.runtime.getManifest();
        document.getElementById("version").innerHTML = manifest.version;
    });
}
 
var displayLocal = function () {
    reinitializeDisplay();
    if (document.getElementById("localtime").checked) {
        chrome.storage.local.set({"localTime" : true});
        displayTable(true);
    } else {
        chrome.storage.local.set({"localTime" : false});
        displayTable(false);
    }
};
 
document.getElementById("localtime").addEventListener("change", displayLocal);
var exportGpx = function () {
    let xml = builder.create('gpx');
    xml.att('xmlns','http://www.topografix.com/GPX/1/1');
    xml.att('xmlns:xsi','http://www.w3.org/2001/XMLSchema-instance');
    xml.att('xsi:schemaLocation','http://www.topografix.com/GPX/1/1 http://www.topografix.com/GPX/1/1/gpx.xsd');
    xml.att('version','1.0');
    xml.att('creator','Route Zezo.org');
 
    let route = xml.ele('rte');
    route.ele('name', 'RZ ' + points[0].race);
    for (point of points) {
        if (point.latitude !== undefined && point.longitude !== undefined) {
            let routePoint = route.ele('rtept', {lat: point.latitude, lon: point.longitude});
            if ((point.timezone === "CET") || (point.timezone === "CEST")) {
                routePoint.ele('time', moment.tz(point.date + " " + point.time, "Europe/Paris").toISOString());
            } else if (point.timezone === "UTC") {
                routePoint.ele('time', moment.utc(point.date + " " + point.time).toISOString());
            }
            routePoint.ele('name', point.ttw);
        }
    }
    let xmlString = xml.end({pretty: true});
    let gpxOutput = document.getElementById("gpxOutput");
    gpxOutput.innerText = "";
    gpxOutput.innerText = xmlString;
};
document.getElementById("gpxExport").addEventListener("click", exportGpx);
 
chrome.storage.local.get("localTime", function (result) {
    if (result.localTime === true) {
        document.getElementById("localtime").checked = true;
        displayLocal();
    } else {
        document.getElementById("localtime").checked = false;
    }
});
reinitializeDisplay();
var points = background.points[background.currentTab];
 
function genIteNext(ttwCurr) {
    var ttwCurr = ttwCurr.match(/.*?([0-9]{1,3}):([0-9]{2})/);
    var ttwHours = parseInt(ttwCurr[1], 10);
    var ttwMinutes = parseInt(ttwCurr[2], 10);
    var ttwNext = [];
    if (ttwMinutes + 10 < 60) {
        ttwNext = "T+" + space(ttwHours) + ":" + zero(ttwMinutes + 10);
    } else {
        ttwNext = "T+" + space(ttwHours + 1) + ":" + zero(ttwMinutes - 50);
    }
    return ttwNext;
}
 
for (var i = 0; i < points.length; i++) {
    points[i].atwa = atwaCalc(twaList);
    points[i].abtw = abtwCalc(btwList);
    while (points[i].ttw !== ttwLast) {
        twaList.push(parseInt(twaLast,10));
        btwList.push(parseInt(btwLast,10));
        ttwLast = genIteNext(ttwLast);
    }
    twaLast = parseInt(points[i].twa, 10);
    btwLast = parseInt(points[i].btw, 10);
    if (twaList.length === 0) {
        twaList.push(twaLast);
        btwList.push(btwLast);
    } else if (twaList[0] * twaLast < 0) {
        twaList = [twaLast];
        btwList = [btwLast];
    } else {
        twaList.push(twaLast);
        btwList.push(btwLast);
    }
    ttwLast = genIteNext(ttwLast);
}
 
displayTable(false);

et il est en relation direct avec myscript.js
myscript.js

Code JS :

Sélectionner tout - Visualiser dans une fenêtre à part

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
"use strict";
 
const pattern = /updi\(event,'([0-9]{4}-[0-9]{2}-[0-9]{2}) ([0-9]{2}:[0-9]{2}) ([A-Z]{3,4}).*(T[+-]{1}.*?[0-9]{1,}:[0-9]{2}).*<br>Distances:.*?([0-9]{1,}\.[0-9]{1,}nm)\/([0-9]{1,}\.[0-9]{1,}nm)<br><b>Wind:<\/b> ([0-9]*?.*) (.*? kt).*\(<b>TWA(.*?)<\/b>\)<br><b>Heading:<\/b>(.*?)<b>Sail:<\/b>(.*?)<br><b>Boat Speed:<\/b>(.*?)'/g
const points = [];
 
/**
 * Calculate latitude using the scale of the display and the css top property
 * @param top
 * @param scale
 * @returns {number}
 */
function getLatitude(top, scale) {
    return 90 - ((top + 2) / scale);
}
 
/**
 * Calculate longitude using the scale of the display and the css left property
 * @param left
 * @param scale
 * @returns {number}
 */
function getLongitude(left, scale) {
    if (((left + 2 / scale) >= -180) || ((left + 2 / scale) <= 180)) {
        return (left + 2) / scale;
    } else {
        return ((left  + 2) / scale) - 360;
    }
}
 
try {
    let textContent = document.scripts[1].textContent;
    let scale = /var scale = ([0-9]{1,3})/.exec(textContent)[1];
    console.log(scale);
 
    let layer = document.getElementById("dot_layer");
    Array.prototype.slice.call(layer.getElementsByTagName("img")).forEach(function (element) {
        let event = element.getAttribute("onmouseover");
        if (event !== null) {
 
            // Get the two css properties used to calculate both longitude and latitude
            let style = element.getAttribute("style");
            let cssProperties = style.split(";");
            let left = parseInt(cssProperties[1].split(":")[1].replace("px",""),10);
            let top =  parseInt(cssProperties[2].split(":")[1].replace("px",""),10);
 
            let match = pattern.exec(event);
 
            const date = match[1];
            const time = match[2];
            const timezone = match[3];
            const ttw = match[4];
            const dtw = match[5];
            const dtg = match[6];
            const twd = match[7];
            const tws = match[8];
            const twa = match[9];
            const btw = match[10];
            const sail = match[11];
            const stw = match[12];
 
            let race = document.title;
 
            points.push({
                race : race,
                longitude : getLongitude(left, scale),
                latitude : getLatitude(top, scale),
                date : date,
                time : time,
                timezone : timezone,
                ttw : ttw,
                dtw : dtw,
                dtg : dtg,
                twd : twd,
                tws : tws,
                twa : twa,
                btw : btw,
                sail : sail,
                stw : stw
            });
            pattern.lastIndex = 0;
        }
    });
 
    chrome.runtime.sendMessage(points);
} catch (e) {
    console.error(e);
    chrome.runtime.sendMessage([]);
}

version jreaux62
version NoSmoking

[Invité]

Bonjour,

ce n'est pas la peine de faire 2 versions, ni de nous coller 15 km de copies d'écran et de code...

Quand on ne sait pas où chercher, on réfléchit !

1- est-ce que ça fonctionnait avant (sans le code ajouté) ? Oui / Non

2- Si Oui : qu'est-ce qui a changé ?

• du code JS en plus,
• du code HTML modifié -> en effet, le code JS AJOUTE des <div>, clone des morceaux de la table initiale,... !
  => as-tu regardé de ce coté là ??

3- le contenu de la table est chargé dans :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
                    <tbody id="pointsTable">
                    </tbody>

Si on cherche un peu dans TON code, ça se passe ici :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
function displayTable(localTime) {
    points.forEach(function (element) {
        var row = document.createElement("tr");
        document.getElementById("pointsTable").appendChild(row);
        if (localTime) {
...
        } else {
...
        }...

Tu dis que le contenu ne change pas ?
Il faudrait peut-être chercher dans TON propre code ce qui s'y passe...

• As-tu vérifié que les nouvelles données ne sont pas à la suite des anciennes (dans la <table>) ?
• As-tu regardé dans la console du navigateur, si ça affiche des erreurs ?

N.B. Perso, je ne vais pas aller tester sur tes versions en ligne...

[rlelamer]

Bonjour jreaux62,

Désolé je pensais bien faire en détaillant au maximum ...

1 - Oui tout fonctionnait.

2- La checkbox faisait correctement son job avant de mettre en place les <div> et code JS dans <script> (ou <script src="resizeTables.js"></script>) dans popup.html.
Si je commente le script resizeTables, je récupère le fonctionnement initiale de l'extension donc avec la checkbox Local Time fonctionnelle.

3- Le script resizeTables, "fige" le tableau mais pas thead puisqu'au clique sur la checkbox on voit la colonne s'élargir vers la droite (normale vu que le contenu passe de CEST à UTC+2)
Je comprends pas tout de ton code (malgré les commentaires) si tu peux m'expliquer pourquoi ce fonctionnement (table figée) je suis preneur pour avancer et résoudre ce soucis.
il me manque quelque chose dans bundle.js pour rendre a nouveau fonctionnelle Local Time ?

Merci de tes lumières

Edit:
j'ai pas vu tes 2 derniers points je les relis et te réponds

[Invité]

Ce qu'il faut surtout retenir de ce que j'ai écrit, c'est : RÉFLÉCHIR.

En voici un 2ème : "LOGIQUE".

En associant les deux, ça donne :

• RÉFLÉCHIR AVEC LOGIQUE
• RÉFLÉCHIR A LA LOGIQUE

C'est comme ça qu'on trouve.

[Invité]

Tu nous parle d'une "checkbox"...

• QUELLE checkbox (un id ?) ?
• où se trouve le code de CETTE checkbox ?
• quelles sont les actions (et fonctions) activées en la cochant/décochant ?
• ...?

Si elle fonctionnait, mais ne fonctionne plus, alors il faut chercher du coté de "ce qui a changé dans son fonctionnement".

[rlelamer]

Pour réfléchir et être logique sur un point précis il faut avoir de solides connaissances, ce n'est pas mon cas ...
Il y a moins d'un an que je m'intéresse au JS avec ses copains HTML, CSS et tutti quanti...

Je peux être logique et réfléchi sur l'électronique marine de navigation car c'est mon domaine professionnel, je possède les connaissances pour mettre en oeuvre et/ou résoudre un soucis quand ça ne fonctionne pas.

Je comprends que mon cas t'exaspères mais je viens sur le forum pour comprendre les choses et les résoudre donc un peu d'indulgence stp ça serait sympa
Je lis énormément de choses pour comprendre sauf que des fois ça coince et là en l'occurence ça coince.

Pour répondre à tes questions :
dans popup.html

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
            <div id="localtimeDiv">
                <input type="checkbox" id="localtime" tabindex="-1">
                <label>Local Time</label>
            </div>

dans bundle.js

Code JS :

Sélectionner tout - Visualiser dans une fenêtre à part

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
function displayTable(localTime) {
    points.forEach(function (element) {
        var row = document.createElement("tr");
        document.getElementById("pointsTable").appendChild(row);
        if (localTime) {
            var localTZ = TzToLocal(element.date, element.time, element.timezone);
            createCell(localTZ[0], row);
            createCell(localTZ[1], row);
            createCell(localTZ[2], row);
        } else {
            createCell(element.date, row);
            createCell(element.time, row);
            createCell(element.timezone, row);
        }
        . . .
    });
}
 
var displayLocal = function () {
    reinitializeDisplay();
    if (document.getElementById("localtime").checked) {
        chrome.storage.local.set({"localTime" : true});
        displayTable(true);
    } else {
        chrome.storage.local.set({"localTime" : false});
        displayTable(false);
    }
};
 
document.getElementById("localtime").addEventListener("change", displayLocal);

Son action, quand elle est cochée, est qu'elle convertit via la librairie moment-timezone.js la date l'heure et le fuseau horaire au temps locale de celui qu'il l'exécute et ce n'importe où dans le monde.
Les instructions, du site zezo.org, sont donnés en UTC, CET ou CEST pour moi qui suis en FR, CET et CEST c'est cool j'ai pas de conversion à faire mais pour d'autres qui sont ailleurs ils doivent constamment convertir les instructions.
Quand la checkbox est active la date et l'heure sont convertis et la colonne TZ indique sous quel fuseau la date et l'heure sont affichés, j'utilise le format UTC +/- xx:xx

[Invité]

Il ne fallait pas prendre ma remarque pour une critique, encore moins comme un reproche.
Bien au contraire !

C'est un principe que je m'applique à moi-même, quand je suis face à une difficulté (ou quand je réponds aux questions des autres sur DVP !).
Un peu comme Monsieur Spoc : "Réflexion et logique".


Et ça n'a RIEN à voir avec les "connaissances".
En l'occurrence, j'en connais encore MOINS que toi sur TON code !...

[Invité]

Bon.

Maintenant que tu as ciblé les endroits du code où il faut regarder....

Mets des console.log( '..........' ); * DANS les fonctions, aux endroits "stratégiques", pour vérifier si l'action passe bien aux bons endroits.


* Pour ouvrir la console : touche "F12" du clavier, puis onglet "console".

[rlelamer]

En cochant la checkbox et en mettant des console.log comme ceci

Code JS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function displayTable(localTime) {
    points.forEach(function (element) {
        var row = document.createElement("tr");
        document.getElementById("pointsTable").appendChild(row);
        if (localTime) {
            var localTZ = TzToLocal(element.date, element.time, element.timezone);
            createCell(localTZ[0], row);
            console.log(localTZ[0]);
            createCell(localTZ[1], row);
            console.log(localTZ[1]);
            createCell(localTZ[2], row);
            console.log(localTZ[2]);
        } else {
            createCell(element.date, row);
            createCell(element.time, row);
            createCell(element.timezone, row);
        }
        . . .
    });
}

J'obtiens bien la conversion et un message d'erreur en console


Du coup le problème vient de l'affichage ?
Le calcul est fait correctement, c'est ce que j'appelle, à tord surement, que le tableau des instructions semble "figé"

[Invité]

Ben voilà !
Tu as trouvé !

Tu vois bien que ça ne servait à rien de balancer tout ton code : avec de la réflexion et de la méthode, on arrive à cibler l'erreur.
Là, il suffisait juste d'OUVRIR la console (-> ça doit devenir un REFLEXE quand on code, surtout en JS)


1- Qu'y-a-t'il dans le fichier resizeTables.js, à la ligne 31 ? à la ligne 60 ?
-> il semble qu'il ne trouve pas la propriété "children" dans les fonctions table_thead_fixed / table_thead_fixed_resize :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
// Redimensionnement de la fenêtre (horizontal)
function table_thead_fixed_resize(tableDivWrap,nbLigne) 
{
  let tableHeadFixed = tableDivWrap.children[0];
  let tableBodyScroll = tableDivWrap.children[1];
  let tableRef = tableBodyScroll.children[0];
...

2- Peux-tu copier-coller le bout de code de la <table> qui s'affiche dans la console (important)
Il faut vérifier que les éléments ont bien été créés (thead fixe,...)