Skip to content

Commit 019ae57

Browse files
ishyvermaishyverma
authored
migrated all the innerHTML concatenation to template literals (sugarlabs#4307)
* migrated all the innerHTML concatination to template literals * migrated all the innerHTML concatination to template literals and resolved the conflicts
1 parent 24169b5 commit 019ae57

18 files changed

+645
-861
lines changed

‎js/palette.js‎

Lines changed: 31 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -117,11 +117,21 @@ class Palettes {
117117
"position: absolute; z-index: 1000; left :0px; top:" + this.top + "px"
118118
);
119119
element.innerHTML =
120-
'<div style="height:fit-content"><table width ="' +
121-
1.5 * this.cellSize +
122-
'px"bgcolor="white"><thead><tr></tr></thead></table><table width ="' +
123-
4.5 * this.cellSize +
124-
'px"bgcolor="white"><thead><tr><td style= "width:28px"></tr></thead><tbody></tbody></table></div>';
120+
`<div style="height:fit-content">
121+
<table width="${1.5 * this.cellSize}" bgcolor="white">
122+
<thead>
123+
<tr></tr>
124+
</thead>
125+
</table>
126+
<table width ="${4.5 * this.cellSize}" bgcolor="white">
127+
<thead>
128+
<tr>
129+
<td style= "width:28px"></td>
130+
</tr>
131+
</thead>
132+
<tbody></tbody>
133+
</table>
134+
</div>`;
125135
element.childNodes[0].style.border = `1px solid ${platformColor.selectorSelected}`;
126136
document.body.appendChild(element);
127137
}
@@ -428,11 +438,22 @@ class Palettes {
428438
`position: fixed; z-index: 1000; left: 0px; top: ${60+this.top}px; overflow-y: auto;`
429439
);
430440
element.innerHTML =
431-
'<div style="height:fit-content"><table width ="' +
432-
1.5 * this.cellSize +
433-
'px"bgcolor="white"><thead><tr></tr></thead></table><table width ="' +
434-
4.5 * this.cellSize +
435-
'px"bgcolor="white"><thead><tr><td style= "width:28px"></tr></thead><tbody></tbody></table></div>';
441+
`<div style="height:fit-content">
442+
<table width="${1.5 * this.cellSize}" bgcolor="white">
443+
<thead>
444+
<tr></tr>
445+
</thead>
446+
</table>
447+
<table width="${4.5 * this.cellSize}" bgcolor="white">
448+
<thead>
449+
<tr>
450+
<td style= "width:28px"></td>
451+
</tr>
452+
</thead>
453+
<tbody>
454+
</tbody>
455+
</table>
456+
</div>`;
436457
element.childNodes[0].style.border = `1px solid ${platformColor.selectorSelected}`;
437458
document.body.appendChild(element);
438459

‎js/piemenus.js‎

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1080,9 +1080,7 @@ const piemenuNthModalPitch = (block, noteValues, note) => {
10801080
// enable changing values while pie-menu is open
10811081
const labelElem = docById("labelDiv");
10821082
labelElem.innerHTML =
1083-
'<input id="numberLabel" style="position: absolute; -webkit-user-select: text;-moz-user-select: text;-ms-user-select: text;" class="number" type="number" value="' +
1084-
note +
1085-
'" />';
1083+
`<input id="numberLabel" style="position: absolute; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text;" class="number" type="number" value="${note}" />`;
10861084
labelElem.classList.add("hasKeyboard");
10871085

10881086
block.label = docById("numberLabel");
@@ -1522,9 +1520,7 @@ const piemenuNoteValue = (block, noteValue) => {
15221520

15231521
const labelElem = docById("labelDiv");
15241522
labelElem.innerHTML =
1525-
'<input id="numberLabel" style="position: absolute; -webkit-user-select: text;-moz-user-select: text;-ms-user-select: text;" class="number" type="number" value="' +
1526-
noteValue +
1527-
'" />';
1523+
`<input id="numberLabel" style="position: absolute; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text;" class="number" type="number" value="${noteValue}" />`;
15281524
labelElem.classList.add("hasKeyboard");
15291525
block.label = docById("numberLabel");
15301526

@@ -1755,9 +1751,7 @@ const piemenuNumber = (block, wheelValues, selectedValue) => {
17551751

17561752
const labelElem = docById("labelDiv");
17571753
labelElem.innerHTML =
1758-
'<input id="numberLabel" style="position: absolute; -webkit-user-select: text;-moz-user-select: text;-ms-user-select: text;" class="number" type="number" value="' +
1759-
selectedValue +
1760-
'" />';
1754+
`<input id="numberLabel" style="position: absolute; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text;" class="number" type="number" value="${selectedValue}" />`;
17611755
labelElem.classList.add("hasKeyboard");
17621756
block.label = docById("numberLabel");
17631757

@@ -2041,9 +2035,7 @@ const piemenuColor = (block, wheelValues, selectedValue, mode) => {
20412035

20422036
const labelElem = docById("labelDiv");
20432037
labelElem.innerHTML =
2044-
'<input id="numberLabel" style="position: absolute; -webkit-user-select: text;-moz-user-select: text;-ms-user-select: text;" class="number" type="number" value="' +
2045-
selectedValue +
2046-
'" />';
2038+
`<input id="numberLabel" style="position: absolute; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text;" class="number" type="number" value="${selectedValue}" />`;
20472039
labelElem.classList.add("hasKeyboard");
20482040
block.label = docById("numberLabel");
20492041

‎js/widgets/aiwidget.js‎

Lines changed: 16 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -130,15 +130,14 @@ function AIWidget() {
130130
*/
131131
this.resume = function () {
132132
this.playBtn.innerHTML =
133-
'<img src="header-icons/pause-button.svg" title="' +
134-
_("Pause") +
135-
'" alt="' +
136-
_("Pause") +
137-
'" height="' +
138-
ICONSIZE +
139-
'" width="' +
140-
ICONSIZE +
141-
'" vertical-align="middle">';
133+
`<img
134+
src="header-icons/pause-button.svg"
135+
title="${_("Pause")}"
136+
alt="${_("Pause")}"
137+
height="${ICONSIZE}"
138+
width="${ICONSIZE}"
139+
vertical-align="middle"
140+
>`;
142141
this.isMoving = true;
143142
};
144143

@@ -650,15 +649,14 @@ function AIWidget() {
650649
if (this.isMoving) {
651650
this.pause();
652651
this.playBtn.innerHTML =
653-
'<img src="header-icons/play-button.svg" title="' +
654-
_("Play") +
655-
'" alt="' +
656-
_("Play") +
657-
'" height="' +
658-
ICONSIZE +
659-
'" width="' +
660-
ICONSIZE +
661-
'" vertical-align="middle">';
652+
`<img
653+
src="header-icons/play-button.svg"
654+
title="${_("Play")}"
655+
alt="${_("Play")}"
656+
height="${ICONSIZE}"
657+
width="${ICONSIZE}"
658+
vertical-align="middle"
659+
>`;
662660
this.isMoving = false;
663661

664662
} else {

‎js/widgets/arpeggio.js‎

Lines changed: 39 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -171,7 +171,9 @@ class Arpeggio {
171171
arpeggioCell = arpeggioTableRow.insertCell();
172172
// Create tables to store individual notes.
173173
arpeggioCell.innerHTML =
174-
'<table cellpadding="0px" id="arpeggioCellTable' + j + '"><tr></tr></table>';
174+
`<table cellpadding="0px" id="arpeggioCellTable${j}">
175+
<tr></tr>
176+
</table>`;
175177
arpeggioCellTable = docById("arpeggioCellTable" + j);
176178

177179
// We'll use this element to put the clickable notes for this row.
@@ -295,17 +297,15 @@ class Arpeggio {
295297
_addButton(row, icon, iconSize, label) {
296298
const cell = row.insertCell(-1);
297299
cell.innerHTML =
298-
'&nbsp;&nbsp;<img src="header-icons/' +
299-
icon +
300-
'" title="' +
301-
label +
302-
'" alt="' +
303-
label +
304-
'" height="' +
305-
iconSize +
306-
'" width="' +
307-
iconSize +
308-
'" vertical-align="middle" align-content="center">&nbsp;&nbsp;';
300+
`&nbsp;&nbsp;<img
301+
src="header-icons/${icon}"
302+
title="${label}"
303+
alt="${label}"
304+
height="${iconSize}"
305+
width="${iconSize}"
306+
vertical-align="middle"
307+
align-content="center"
308+
>&nbsp;&nbsp;`;
309309
cell.style.width = Arpeggio.BUTTONSIZE + "px";
310310
cell.style.minWidth = cell.style.width;
311311
cell.style.maxWidth = cell.style.width;
@@ -528,30 +528,26 @@ class Arpeggio {
528528
const icon = this.playButton;
529529
if (this._playing) {
530530
icon.innerHTML =
531-
'&nbsp;&nbsp;<img src="header-icons/' +
532-
"stop-button.svg" +
533-
'" title="' +
534-
_("Stop") +
535-
'" alt="' +
536-
_("Stop") +
537-
'" height="' +
538-
Arpeggio.ICONSIZE +
539-
'" width="' +
540-
Arpeggio.ICONSIZE +
541-
'" vertical-align="middle" align-content="center">&nbsp;&nbsp;';
531+
`&nbsp;&nbsp;<img
532+
src="header-icons/stop-button.svg"
533+
title="${_("Stop")}"
534+
alt="${_("Stop")}"
535+
height="${Arpeggio.ICONSIZE}"
536+
width="${Arpeggio.ICONSIZE}"
537+
vertical-align="middle"
538+
align-content="center"
539+
>&nbsp;&nbsp;`;
542540
} else {
543541
icon.innerHTML =
544-
'&nbsp;&nbsp;<img src="header-icons/' +
545-
"play-button.svg" +
546-
'" title="' +
547-
_("Play") +
548-
'" alt="' +
549-
_("Play") +
550-
'" height="' +
551-
Arpeggio.ICONSIZE +
552-
'" width="' +
553-
Arpeggio.ICONSIZE +
554-
'" vertical-align="middle" align-content="center">&nbsp;&nbsp;';
542+
`&nbsp;&nbsp;<img
543+
src="header-icons/play-button.svg"
544+
title="${_("Play")}"
545+
alt="${_("Play")}"
546+
height="${Arpeggio.ICONSIZE}"
547+
width="${Arpeggio.ICONSIZE}"
548+
vertical-align="middle"
549+
align-content="center"
550+
>&nbsp;&nbsp;`;
555551
this._playing = false;
556552
return;
557553
}
@@ -638,17 +634,15 @@ class Arpeggio {
638634
} else {
639635
const icon = this.playButton;
640636
icon.innerHTML =
641-
'&nbsp;&nbsp;<img src="header-icons/' +
642-
"play-button.svg" +
643-
'" title="' +
644-
_("Play") +
645-
'" alt="' +
646-
_("Play") +
647-
'" height="' +
648-
Arpeggio.ICONSIZE +
649-
'" width="' +
650-
Arpeggio.ICONSIZE +
651-
'" vertical-align="middle" align-content="center">&nbsp;&nbsp;';
637+
`&nbsp;&nbsp;<img
638+
src="header-icons/play-button.svg"
639+
title="${_("Play")}"
640+
alt="${_("Play")}"
641+
height="${Arpeggio.ICONSIZE}"
642+
width="${Arpeggio.ICONSIZE}"
643+
vertical-align="middle"
644+
align-content="center"
645+
>&nbsp;&nbsp;`;
652646
this._playing = false;
653647
}
654648
}

‎js/widgets/meterwidget.js‎

Lines changed: 27 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -190,27 +190,25 @@ class MeterWidget {
190190
this._click_lock = true;
191191
if (this.__getPlayingStatus()) {
192192
playBtn.innerHTML =
193-
'&nbsp;&nbsp;<img src="header-icons/play-button.svg" title="' +
194-
_("Play all") +
195-
'" alt="' +
196-
_("Play all") +
197-
'" height="' +
198-
MeterWidget.ICONSIZE +
199-
'" width="' +
200-
MeterWidget.ICONSIZE +
201-
'" vertical-align="middle">&nbsp;&nbsp;';
193+
`&nbsp;&nbsp;<img
194+
src="header-icons/play-button.svg"
195+
title="${_("Play all")}"
196+
alt="${_("Play all")}"
197+
height="${MeterWidget.ICONSIZE}"
198+
width="${MeterWidget.ICONSIZE}"
199+
vertical-align="middle"
200+
>&nbsp;&nbsp;`;
202201
this._playing = false;
203202
} else {
204203
playBtn.innerHTML =
205-
'&nbsp;&nbsp;<img src="header-icons/stop-button.svg" title="' +
206-
_("Stop") +
207-
'" alt="' +
208-
_("Stop") +
209-
'" height="' +
210-
MeterWidget.ICONSIZE +
211-
'" width="' +
212-
MeterWidget.ICONSIZE +
213-
'" vertical-align="middle">&nbsp;&nbsp;';
204+
`&nbsp;&nbsp;<img
205+
src="header-icons/stop-button.svg"
206+
title="${_("Stop")}"
207+
alt="${_("Stop")}"
208+
height="${MeterWidget.ICONSIZE}"
209+
width="${MeterWidget.ICONSIZE}"
210+
vertical-align="middle"
211+
>&nbsp;&nbsp;`;
214212
this._playing = true;
215213
this.activity.logo.turtleDelay = 0;
216214
this.activity.logo.resetSynth(0);
@@ -257,16 +255,12 @@ class MeterWidget {
257255
const divInput = document.createElement("div");
258256
divInput.className = "wfbtItem";
259257
divInput.innerHTML =
260-
'<input style="float: left ;" value="' +
261-
v1 +
262-
'" type="number" id="beatValue" min="1" max="16" >';
258+
`<input style="float: left;" value="${v1}" type="number" id="beatValue" min="1" max="16" >`;
263259

264260
const divInput2 = document.createElement("div");
265261
divInput2.className = "wfbtItem";
266262
divInput2.innerHTML =
267-
'<input style="float: left;" value="' +
268-
1 / this._beatValue +
269-
'" type="number" id="beatValue" min="1" max="35">';
263+
`<input style="float: left;" value="${1 / this._beatValue}" type="number" id="beatValue" min="1" max="35">`;
270264

271265
widgetWindow._toolbar.appendChild(divInput);
272266
widgetWindow._toolbar.appendChild(divInput2);
@@ -423,17 +417,15 @@ class MeterWidget {
423417
_addButton(row, icon, iconSize, label) {
424418
const cell = row.insertCell(-1);
425419
cell.innerHTML =
426-
'&nbsp;&nbsp;<img src="header-icons/' +
427-
icon +
428-
'" title="' +
429-
label +
430-
'" alt="' +
431-
label +
432-
'" height="' +
433-
iconSize +
434-
'" width="' +
435-
iconSize +
436-
'" vertical-align="middle" align-content="center">&nbsp;&nbsp;';
420+
`&nbsp;&nbsp;<img
421+
src="header-icons/${icon}"
422+
title="${label}"
423+
alt="${label}"
424+
height="${iconSize}"
425+
width="${iconSize}"
426+
vertical-align="middle"
427+
align-content="center"
428+
>&nbsp;&nbsp;`;
437429
cell.style.width = MeterWidget.BUTTONSIZE + "px";
438430
cell.style.minWidth = cell.style.width;
439431
cell.style.maxWidth = cell.style.width;

0 commit comments

Comments
 (0)