Skip to content

Commit 3201125

Browse files
Jmsm19Jmsm19
committed
Enable lang select
1 parent ca1f300 commit 3201125

File tree

6 files changed

+1573
-734
lines changed

6 files changed

+1573
-734
lines changed

‎public/bundle.js

Lines changed: 47 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -561,11 +561,10 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
561561

562562

563563
// Loading JSON
564-
var lecciones, config;
564+
var json;
565565
var oReq = new XMLHttpRequest();
566566
oReq.onload = (e) => {
567-
lecciones = JSON.parse(e.target.responseText).lecciones;
568-
config = JSON.parse(e.target.responseText).config;
567+
json = JSON.parse(e.target.responseText);
569568
loadPage();
570569
};
571570
oReq.onerror = function () {
@@ -575,7 +574,7 @@ oReq.onerror = function () {
575574
</div>`;
576575
document.body.style.opacity = 1;
577576
}
578-
oReq.open("get", "https://s3.us-east-2.amazonaws.com/manten-files/config.json", true);
577+
oReq.open("get", "https://s3.us-east-2.amazonaws.com/manten-files/test/config.json", true);
579578
oReq.send();
580579

581580
function loadPage() {
@@ -584,6 +583,9 @@ function loadPage() {
584583
// GLOBAL VARIABLES
585584
// ==================================================
586585

586+
var lang = document.querySelector('#lang').value;
587+
var lecciones = json.lecciones[lang];
588+
var config = json.config;
587589
var leccionActual = 1;
588590
var leccionesTotal = getObjLength(lecciones);
589591
var avanceActual = 0;
@@ -593,6 +595,7 @@ function loadPage() {
593595
var commandHist = [];
594596
var commandPos = 1;
595597
// General areas
598+
var langSwitch = document.querySelector('#lang');
596599
var navbar = document.querySelector('nav');
597600
var consoleArea = document.querySelector('.console-area');
598601
var textarea = document.querySelector('#console-input');
@@ -998,6 +1001,44 @@ function loadPage() {
9981001
}, 1000);
9991002
});
10001003

1004+
// Cambiar lenguaje
1005+
langSwitch.addEventListener('change', () => {
1006+
lang = langSwitch.value;
1007+
lecciones = json.lecciones[lang];
1008+
1009+
consoleArea.appendChild(clearTerminal());
1010+
addTextareaListener();
1011+
actualizarInfoLeccion();
1012+
// Actualizar Staged
1013+
deleteAllChilds(repoStagedArea, 'h3');
1014+
if (lecciones[leccionActual].repoStatus.staged != undefined) {
1015+
let folderStructure = createFolderStructure(lecciones[leccionActual].repoStatus.staged);
1016+
repoStagedArea.appendChild(folderStructure);
1017+
} else {
1018+
let ul = document.createElement('ul');
1019+
let li = createElementNode("li", config.emptyStageAreaMessage);
1020+
ul.appendChild(li).classList.add('commit');
1021+
repoStagedArea.appendChild(ul);
1022+
}
1023+
// Actualizar Repo Commits
1024+
deleteAllChilds(repoCommitsArea, 'h3');
1025+
if (lecciones[leccionActual].repoStatus.commits != undefined) {
1026+
let ul = document.createElement('ul');
1027+
for (let i = 0; i < lecciones[leccionActual].repoStatus.commits.length; i++) {
1028+
let li = createElementNode("li", lecciones[leccionActual].repoStatus.commits[i]);
1029+
ul.appendChild(li).classList.add('commit');
1030+
}
1031+
repoCommitsArea.appendChild(ul)
1032+
} else {
1033+
let ul = document.createElement('ul');
1034+
let li = createElementNode("li", config.emptyCommitsAreaMessage);
1035+
ul.appendChild(li).classList.add('commit');
1036+
repoCommitsArea.appendChild(ul);
1037+
}
1038+
// Ayudar listener para el textarea
1039+
textarea.focus();
1040+
});
1041+
10011042
// Mostrar y ocultar Menu principal
10021043
navbar.addEventListener('click', (e) => {
10031044
if (navbar.classList.contains('expanded') === false) {
@@ -1022,7 +1063,7 @@ function loadPage() {
10221063
navbar.classList.remove('expanded');
10231064
});
10241065

1025-
// Ocultar columna del repositorio
1066+
// Mostrar y ccultar columna del repositorio
10261067
document.querySelector('.hide-repo').addEventListener('click', () => {
10271068
let column1 = document.querySelector('.column-1');
10281069
let column2 = document.querySelector('.column-2');
@@ -1041,7 +1082,7 @@ function loadPage() {
10411082
terminal.style.height = '100%';
10421083
terminal.style.marginTop = '38.39px';
10431084
})
1044-
// Volver a mostrar columna del repositorio
1085+
10451086
document.querySelector('.show-repo').addEventListener('click', () => {
10461087
let column1 = document.querySelector('.column-1');
10471088
let column2 = document.querySelector('.column-2');

‎public/compare/style.css

Lines changed: 22 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@
1212
display: none;
1313
}
1414

15-
::-webkit-scrollbar {
16-
display: none;
15+
::-webkit-scrollbar {
16+
display: none;
1717
}
1818

1919
html {
@@ -121,7 +121,7 @@ li {
121121
NAVIGATION
122122
=================================== */
123123

124-
nav ul,
124+
nav ul,
125125
nav li {
126126
outline: 0;
127127
margin: 0;
@@ -207,7 +207,7 @@ a.logo-link {
207207
-webkit-box-orient: horizontal;
208208
-webkit-box-direction: normal;
209209
-ms-flex-direction: row;
210-
flex-direction: row;
210+
flex-direction: row;
211211
}
212212

213213
.main-menu li:hover > a {
@@ -396,7 +396,7 @@ div#terminal {
396396
font-size: .8rem !important;
397397
height: 340px;
398398
padding: 10px 30px;
399-
font-family: 'Source Code Pro', monospace;
399+
font-family: 'Source Code Pro', monospace;
400400
background-color: hsl(220, 13%, 18%);
401401
overflow-y: auto;
402402
overflow-x: hidden;
@@ -415,7 +415,7 @@ div#terminal {
415415

416416
.line-marker + p {
417417
display: inline-block;
418-
padding: 0 10px 5px 10px;
418+
padding: 0 10px 5px 10px;
419419
margin: 0 !important;
420420
}
421421

@@ -467,14 +467,14 @@ div#terminal {
467467
.console-area textarea {
468468
height: 43.4px;
469469
overflow: auto;
470-
font-family: 'Source Code Pro', monospace !important;
470+
font-family: 'Source Code Pro', monospace !important;
471471
width: 100%;
472472
resize: none;
473473
background-color: transparent;
474474
color: #eee;
475475
border: none;
476476
padding: 0 10px 5px 10px;
477-
line-height: 1.5;
477+
line-height: 1.5;
478478
}
479479

480480
.console-area textarea:focus {
@@ -671,6 +671,16 @@ footer a:hover {
671671
font-weight: bold;
672672
}
673673

674+
footer div {
675+
height: 100%;
676+
display: flex;
677+
flex-direction: row;
678+
}
679+
680+
#lang {
681+
border: none;
682+
}
683+
674684
/* =================================
675685
ANIMACIONES
676686
=================================== */
@@ -682,10 +692,10 @@ footer a:hover {
682692
animation: type 4s steps(60, end);
683693
}
684694

685-
@-webkit-keyframes type{
686-
from { width: 0; }
695+
@-webkit-keyframes type{
696+
from { width: 0; }
687697
}
688698

689-
@keyframes type{
690-
from { width: 0; }
699+
@keyframes type{
700+
from { width: 0; }
691701
}

‎public/css/style.css

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -690,14 +690,15 @@ footer {
690690
-ms-flex-pack: justify;
691691
justify-content: space-between;
692692
font-size: .8rem !important;
693-
padding: 13px;
693+
padding: 0 13px 13px 13px;
694694
background-color: #434343;
695695
color: #EEE !important;
696696
z-index: 99;
697697
height: 45px;
698698
}
699699

700700
footer > p {
701+
margin-top: 13px;
701702
margin-left: 50px;
702703
}
703704

@@ -710,6 +711,34 @@ footer a:hover {
710711
font-weight: bold;
711712
}
712713

714+
footer div {
715+
position: relative;
716+
height: 45px;
717+
display: flex;
718+
flex-direction: row;
719+
justify-content: space-between;
720+
}
721+
722+
.coder {
723+
margin-top: 13px;
724+
margin-right: 75px;
725+
}
726+
727+
#lang {
728+
background-color: #EEE;
729+
color: #1976D2;
730+
font-weight: bold;
731+
position: absolute;
732+
right: 0;
733+
top: 10px;
734+
width: 65px;
735+
padding:5px;
736+
border: 0;
737+
border-radius: 0;
738+
height: 25px;
739+
-webkit-appearance: none;
740+
}
741+
713742
/* =================================
714743
ANIMACIONES
715744
=================================== */

‎public/index.html

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,13 @@ <h3>Commits</h3>
7979
<a href="https://4geeksacademy.co/" target="_blank">4Geeks Academy LLC</a> 2017.
8080
All rights reserved.
8181
</p>
82-
<p class="coder">Coded by <a href="//manten-dev.me" target="_blank">Manten Dev</a>, a 4Geeks Academy student</p>
82+
<div>
83+
<p class="coder">Coded by <a href="//manten-dev.me" target="_blank">Manten Dev</a>, a 4Geeks Academy student</p>
84+
<select id="lang">
85+
<option value="en">English</option>
86+
<option value="es" selected>Español</option>
87+
</select>
88+
</div>
8389
</footer>
8490
<!-- My script -->
8591
<script src="./bundle.js"></script>

0 commit comments

Comments
 (0)