-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
4 changed files
with
224 additions
and
70 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| var x, i, j, l, ll, selElmnt, a, b, c; | ||
| /*look for any elements with the class "custom-select":*/ | ||
| x = document.getElementsByClassName("custom-select"); | ||
| l = x.length; | ||
| for (i = 0; i < l; i++) { | ||
| selElmnt = x[i].getElementsByTagName("select")[0]; | ||
| ll = selElmnt.length; | ||
| /*for each element, create a new DIV that will act as the selected item:*/ | ||
| a = document.createElement("DIV"); | ||
| a.setAttribute("class", "select-selected"); | ||
| a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML; | ||
| x[i].appendChild(a); | ||
| /*for each element, create a new DIV that will contain the option list:*/ | ||
| b = document.createElement("DIV"); | ||
| b.setAttribute("class", "select-items select-hide"); | ||
| for (j = 1; j < ll; j++) { | ||
| /*for each option in the original select element, | ||
| create a new DIV that will act as an option item:*/ | ||
| c = document.createElement("DIV"); | ||
| c.innerHTML = selElmnt.options[j].innerHTML; | ||
| c.addEventListener("click", function(e) { | ||
| /*when an item is clicked, update the original select box, | ||
| and the selected item:*/ | ||
| var y, i, k, s, h, sl, yl; | ||
| s = this.parentNode.parentNode.getElementsByTagName("select")[0]; | ||
| sl = s.length; | ||
| h = this.parentNode.previousSibling; | ||
| for (i = 0; i < sl; i++) { | ||
| if (s.options[i].innerHTML == this.innerHTML) { | ||
| s.selectedIndex = i; | ||
| h.innerHTML = this.innerHTML; | ||
| y = this.parentNode.getElementsByClassName("same-as-selected"); | ||
| yl = y.length; | ||
| for (k = 0; k < yl; k++) { | ||
| y[k].removeAttribute("class"); | ||
| } | ||
| this.setAttribute("class", "same-as-selected"); | ||
| break; | ||
| } | ||
| } | ||
| h.click(); | ||
| }); | ||
| b.appendChild(c); | ||
| } | ||
| x[i].appendChild(b); | ||
| a.addEventListener("click", function(e) { | ||
| /*when the select box is clicked, close any other select boxes, | ||
| and open/close the current select box:*/ | ||
| e.stopPropagation(); | ||
| closeAllSelect(this); | ||
| this.nextSibling.classList.toggle("select-hide"); | ||
| this.classList.toggle("select-arrow-active"); | ||
| }); | ||
| } | ||
| function closeAllSelect(elmnt) { | ||
| /*a function that will close all select boxes in the document, | ||
| except the current select box:*/ | ||
| var x, y, i, xl, yl, arrNo = []; | ||
| x = document.getElementsByClassName("select-items"); | ||
| y = document.getElementsByClassName("select-selected"); | ||
| xl = x.length; | ||
| yl = y.length; | ||
| for (i = 0; i < yl; i++) { | ||
| if (elmnt == y[i]) { | ||
| arrNo.push(i) | ||
| } else { | ||
| y[i].classList.remove("select-arrow-active"); | ||
| } | ||
| } | ||
| for (i = 0; i < xl; i++) { | ||
| if (arrNo.indexOf(i)) { | ||
| x[i].classList.add("select-hide"); | ||
| } | ||
| } | ||
| } | ||
| /*if the user clicks anywhere outside the select box, | ||
| then close all select boxes:*/ | ||
| document.addEventListener("click", closeAllSelect); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,4 @@ | ||
| script("config/selector.js") | ||
| script("config/log.js") | ||
| script("config/compile.js") | ||
| script("config/save.js") | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,70 +1,143 @@ | ||
| body { | ||
| margin:0px; | ||
| margin: 0px; | ||
| } | ||
|
|
||
| .terminal { | ||
| height: calc(97vh - 1px); | ||
| width:100%; | ||
| width: 100%; | ||
| } | ||
|
|
||
| body { | ||
| margin:0px; | ||
| background-size: 1500px; | ||
| background-position: center; | ||
| background-image: url(https://www.raspberrypi.com/app/uploads/2024/01/raspberry-pi-5-xray-black-jeff-geerling-1024x651.jpg); | ||
| } | ||
| nav { | ||
| display:flex; | ||
| margin:4px; | ||
| border-radius:5px; | ||
| background:black; | ||
| padding:5px; | ||
| justify-content:center; | ||
| align-items:center; | ||
| } | ||
| nav button{ | ||
| background:#252525; | ||
| border:white 1px; | ||
| border-radius:5px; | ||
| margin-right:5px; | ||
| margin-left:5px; | ||
| color:white; | ||
| font-size:20px; | ||
| } | ||
|
|
||
| editor { | ||
| display:block; | ||
| margin-left:1vw; | ||
| margin-right:1vw; | ||
| margin-top:1vh; | ||
| margin-bottom:1vh; | ||
| height:91.5vh; | ||
| width:98vw; | ||
| margin: 0px; | ||
| background-size: 1500px; | ||
| background-position: center; | ||
| background-image: url(https://www.raspberrypi.com/app/uploads/2024/01/raspberry-pi-5-xray-black-jeff-geerling-1024x651.jpg); | ||
| } | ||
|
|
||
| nav { | ||
| display: flex; | ||
| margin: 4px; | ||
| border-radius: 5px; | ||
| background: black; | ||
| padding: 5px; | ||
| justify-content: center; | ||
| align-items: center; | ||
| } | ||
|
|
||
| nav button { | ||
| background: #252525; | ||
| border: white 1px; | ||
| border-radius: 5px; | ||
| margin-right: 5px; | ||
| margin-left: 5px; | ||
| color: white; | ||
| font-size: 20px; | ||
| } | ||
|
|
||
| editor { | ||
| display: block; | ||
| margin-left: 1vw; | ||
| margin-right: 1vw; | ||
| margin-top: 1vh; | ||
| margin-bottom: 1vh; | ||
| height: 91.5vh; | ||
| width: 98vw; | ||
| overflow: auto; | ||
| background:black; | ||
| color:white; | ||
| border-radius:5px; | ||
| border:none; | ||
| display:flex; | ||
| } | ||
| #editor { | ||
| overflow-wrap: unset; | ||
| line-break: unset; | ||
| white-space: nowrap; | ||
| width:95vw; | ||
| } | ||
| #editor:focus-visible { | ||
| border:none; | ||
| outline:none; | ||
| } | ||
| .editorLines { | ||
| color:White; | ||
| } | ||
| #line-numbers { | ||
| min-width:1vw; | ||
| margin-right:1vw; | ||
| } | ||
| line-number { | ||
| display: inline-block; width: 2vw; | ||
| background: black; | ||
| color: white; | ||
| border-radius: 5px; | ||
| border: none; | ||
| display: flex; | ||
| } | ||
|
|
||
| #editor { | ||
| overflow-wrap: unset; | ||
| line-break: unset; | ||
| white-space: nowrap; | ||
| width: 95vw; | ||
| } | ||
|
|
||
| #editor:focus-visible { | ||
| border: none; | ||
| outline: none; | ||
| } | ||
|
|
||
| .editorLines { | ||
| color: White; | ||
| } | ||
|
|
||
| #line-numbers { | ||
| min-width: 1vw; | ||
| margin-right: 1vw; | ||
| } | ||
|
|
||
| line-number { | ||
| display: inline-block; | ||
| width: 2vw; | ||
| text-align: right; | ||
| margin-right: 0.5em; | ||
| } | ||
| } | ||
|
|
||
|
|
||
| .custom-select { | ||
| position: relative; | ||
| font-family: Arial; | ||
| } | ||
|
|
||
| .custom-select select { | ||
| display: none; | ||
| /*hide original SELECT element:*/ | ||
| } | ||
|
|
||
| .select-selected { | ||
| background-color: rgb(117, 117, 117); | ||
| } | ||
|
|
||
| /*style the arrow inside the select element:*/ | ||
| .select-selected:after { | ||
| position: absolute; | ||
| content: ""; | ||
| top: 14px; | ||
| right: 10px; | ||
| width: 0; | ||
| height: 0; | ||
| border: 6px solid transparent; | ||
| border-color: #fff transparent transparent transparent; | ||
| } | ||
|
|
||
| /*point the arrow upwards when the select box is open (active):*/ | ||
| .select-selected.select-arrow-active:after { | ||
| border-color: transparent transparent #fff transparent; | ||
| top: 7px; | ||
| } | ||
|
|
||
| /*style the items (options), including the selected item:*/ | ||
| .select-items div, | ||
| .select-selected { | ||
| color: #ffffff; | ||
| padding: 8px 16px; | ||
| border: 1px solid transparent; | ||
| border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent; | ||
| cursor: pointer; | ||
| user-select: none; | ||
| } | ||
|
|
||
| /*style items (options):*/ | ||
| .select-items { | ||
| position: absolute; | ||
| background-color: rgb(51, 51, 51); | ||
| top: 100%; | ||
| left: 0; | ||
| right: 0; | ||
| z-index: 99; | ||
| } | ||
|
|
||
| /*hide the items when the select box is closed:*/ | ||
| .select-hide { | ||
| display: none; | ||
| } | ||
|
|
||
| .select-items div:hover, | ||
| .same-as-selected { | ||
| background-color: rgba(0, 0, 0, 0.1); | ||
| } |