Skip to content

Commit 71df93c

Browse files
authored
Merge pull request #302 from longo-andrea/review/event-delegation
Review Event delegation
2 parents 5b9ffea + 22ef782 commit 71df93c

File tree

10 files changed

+26
-26
lines changed

10 files changed

+26
-26
lines changed

2-ui/2-events/03-event-delegation/1-hide-message-delegate/source.view/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ <h3>Cat</h3>
2828
</div>
2929

3030
<script>
31-
// ...your code...
31+
// ...il vostro codice...
3232
</script>
3333

3434
</body>

2-ui/2-events/03-event-delegation/1-hide-message-delegate/task.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ importance: 5
44

55
# Nascondere messaggi traminte delegation
66

7-
C'è una lista di messaggi con il pulsante di rimozione `[x]`. Fare in modo che il pulsante funzioni.
7+
Avete a disposizione una lista di messaggi con il pulsante di rimozione `[x]`. Fate in modo che il pulsante funzioni.
88

99
Come questo per esempio:
1010

2-ui/2-events/03-event-delegation/2-sliding-tree/solution.view/index.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -54,23 +54,23 @@
5454
</ul>
5555

5656
<script>
57-
// move all text into <span>
58-
// they occupy exactly the place necessary for the text,
57+
// spostiamo tutto il testo all'interno dello <span>
58+
// questi occupano esattamente lo spazio necessario per contenere il testo,
5959
for (let li of tree.querySelectorAll('li')) {
6060
let span = document.createElement('span');
6161
li.prepend(span);
62-
span.append(span.nextSibling); // move the text node into span
62+
span.append(span.nextSibling); // spostiamo il nodo di testo dentro allo span
6363
}
6464

65-
// catch clicks on whole tree
65+
// catturiamo i click in tutto l'albero
6666
tree.onclick = function(event) {
6767

6868
if (event.target.tagName != 'SPAN') {
6969
return;
7070
}
7171

7272
let childrenContainer = event.target.parentNode.querySelector('ul');
73-
if (!childrenContainer) return; // no children
73+
if (!childrenContainer) return; // nessun figlio
7474

7575
childrenContainer.hidden = !childrenContainer.hidden;
7676
}

2-ui/2-events/03-event-delegation/2-sliding-tree/task.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ importance: 5
44

55
# Menù ad albero
66

7-
Creare una struttura ad albero che al click, mostra o nasconde i nodi figli:
7+
Create una struttura ad albero che al click, mostra o nasconde i nodi figli:
88

99
[iframe border=1 src="solution"]
1010

2-ui/2-events/03-event-delegation/3-sortable-table/solution.view/index.html

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -59,10 +59,10 @@
5959
if (e.target.tagName != 'TH') return;
6060

6161
let th = e.target;
62-
// if TH, then sort
63-
// cellIndex is the number of th:
64-
// 0 for the first column
65-
// 1 for the second column, etc
62+
// se TH, allora ordina
63+
// cellIndex è il numero di th:
64+
// 0 per la prima colonna
65+
// 1 per la seconda colonna, etc
6666
sortGrid(th.cellIndex, th.dataset.type);
6767
};
6868

@@ -71,7 +71,7 @@
7171

7272
let rowsArray = Array.from(tbody.rows);
7373

74-
// compare(a, b) compares two rows, need for sorting
74+
// compare(a, b) confronta due righe, utile per l'ordinamento
7575
let compare;
7676

7777
switch (type) {
@@ -87,7 +87,7 @@
8787
break;
8888
}
8989

90-
// sort
90+
// ordiniamo
9191
rowsArray.sort(compare);
9292

9393
tbody.append(...rowsArray);

2-ui/2-events/03-event-delegation/3-sortable-table/source.view/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@
5454
</table>
5555

5656
<script>
57-
// ...your code...
57+
// ...il vostro codice...
5858
</script>
5959

6060
</body>

2-ui/2-events/03-event-delegation/3-sortable-table/task.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ importance: 4
44

55
# Tabella ordinabile
66

7-
Rendere la tabella ordinabile: i click sui `<th>` dovrebbero ordinarne i valori secondo la colonna corrispondente.
7+
Rendete la tabella ordinabile: i click sui `<th>` dovrebbero ordinarne i valori secondo la colonna corrispondente.
88

99
Ogni `<th>` ha il suo tipo specificato nell'attributo, come in questo esempio:
1010

2-ui/2-events/03-event-delegation/4-behavior-tooltip/solution.view/index.html

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<style>
77
body {
88
height: 2000px;
9-
/* make body scrollable, the tooltip should work after the scroll */
9+
/* rendiamo il body scrollabile, la tooltip dovrebbe funzionare dopo lo scroll */
1010
}
1111

1212
.tooltip {
@@ -40,25 +40,25 @@
4040
document.onmouseover = function(event) {
4141
let target = event.target;
4242

43-
// if we have tooltip HTML...
43+
// se abbiamo l'HTML di una tooltip...
4444
let tooltipHtml = target.dataset.tooltip;
4545
if (!tooltipHtml) return;
4646

47-
// ...create the tooltip element
47+
// ...creiamo l'elemento tooltip
4848

4949
tooltipElem = document.createElement('div');
5050
tooltipElem.className = 'tooltip';
5151
tooltipElem.innerHTML = tooltipHtml;
5252
document.body.append(tooltipElem);
5353

54-
// position it above the annotated element (top-center)
54+
// la posizioniamo sopra l'elemento annotato (sopra e centrata)
5555
let coords = target.getBoundingClientRect();
5656

5757
let left = coords.left + (target.offsetWidth - tooltipElem.offsetWidth) / 2;
58-
if (left < 0) left = 0; // don't cross the left window edge
58+
if (left < 0) left = 0; // per non attraversare il bordo sinistro della finestra
5959

6060
let top = coords.top - tooltipElem.offsetHeight - 5;
61-
if (top < 0) { // if crossing the top window edge, show below instead
61+
if (top < 0) { // se attraversiamo il bordo superiore della finestra, la mostriamo sotto
6262
top = coords.top + target.offsetHeight + 5;
6363
}
6464

2-ui/2-events/03-event-delegation/4-behavior-tooltip/source.view/index.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@
66
<style>
77
body {
88
height: 2000px;
9-
/* make body scrollable, the tooltip should work after the scroll */
9+
/* rendiamo il body scrollabile, la tooltip dovrebbe funzionare dopo lo scroll */
1010
}
1111

1212
.tooltip {
13-
/* some styles for the tooltip, you can use your own instead */
13+
/* aggiungiamo un po' di stile alla tooltip, potete definirlo voi a piacimento */
1414
position: fixed;
1515
padding: 10px 20px;
1616
border: 1px solid #b3c9ce;
@@ -36,7 +36,7 @@
3636

3737

3838
<script>
39-
// ...your code...
39+
// ...il vostro codice...
4040
</script>
4141

4242
</body>

2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ importance: 5
44

55
# Comportamento tooltip
66

7-
Creare uno script JS per un tooltip.
7+
Create uno script JS per un tooltip.
88

99
Quando il mouse passa sopra un elemento HTML con `data-tooltip`, dovrebbe comparire su di esso un tooltip, e scomparire dopo che ha abbandonato la usa area.
1010

0 commit comments

Comments
 (0)