diff options
| author | Kumar Priyansh <[email protected]> | 2019-01-03 06:06:55 +0530 |
|---|---|---|
| committer | GitHub <[email protected]> | 2019-01-03 06:06:55 +0530 |
| commit | d8ebd83f689b3a40d2a7b04b7d3fe0297e8dd635 (patch) | |
| tree | 15a903512053b80a10721b0ccdb9c08ea5400c2c /dist/js/win98.js | |
| parent | f58bc825dcc927377ee6bab556953a406ce5f3dd (diff) | |
| download | win98css-0.1.0.tar.xz win98css-0.1.0.zip | |
Add files via upload0.1.0
Diffstat (limited to 'dist/js/win98.js')
| -rw-r--r-- | dist/js/win98.js | 74 |
1 files changed, 74 insertions, 0 deletions
diff --git a/dist/js/win98.js b/dist/js/win98.js new file mode 100644 index 0000000..5664804 --- /dev/null +++ b/dist/js/win98.js @@ -0,0 +1,74 @@ +var x, i, j, selElmnt, a, b, c; +/* Look for any elements with the class "form-select": */ +x = document.getElementsByClassName("form-select"); +for (i = 0; i < x.length; i++) { + selElmnt = x[i].getElementsByTagName("select")[0]; + /* 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 < selElmnt.length; 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; + s = this.parentNode.parentNode.getElementsByTagName("select")[0]; + h = this.parentNode.previousSibling; + for (i = 0; i < s.length; i++) { + if (s.options[i].innerHTML == this.innerHTML) { + s.selectedIndex = i; + h.innerHTML = this.innerHTML; + y = this.parentNode.getElementsByClassName("same-as-selected"); + for (k = 0; k < y.length; 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, arrNo = []; + x = document.getElementsByClassName("select-items"); + y = document.getElementsByClassName("select-selected"); + for (i = 0; i < y.length; i++) { + if (elmnt == y[i]) { + arrNo.push(i) + } else { + y[i].classList.remove("select-arrow-active"); + } + } + for (i = 0; i < x.length; 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);
\ No newline at end of file |
