diff options
Diffstat (limited to 'dist/js')
| -rw-r--r-- | dist/js/win98.js | 74 | ||||
| -rw-r--r-- | dist/js/win98.min.js | 1 |
2 files changed, 75 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 diff --git a/dist/js/win98.min.js b/dist/js/win98.min.js new file mode 100644 index 0000000..1d11d8d --- /dev/null +++ b/dist/js/win98.min.js @@ -0,0 +1 @@ +var x,i,j,selElmnt,a,b,c;for(x=document.getElementsByClassName("form-select"),i=0;i<x.length;i++){for(selElmnt=x[i].getElementsByTagName("select")[0],(a=document.createElement("DIV")).setAttribute("class","select-selected"),a.innerHTML=selElmnt.options[selElmnt.selectedIndex].innerHTML,x[i].appendChild(a),(b=document.createElement("DIV")).setAttribute("class","select-items select-hide"),j=1;j<selElmnt.length;j++)(c=document.createElement("DIV")).innerHTML=selElmnt.options[j].innerHTML,c.addEventListener("click",function(e){var t,s,l,n,i;for(n=this.parentNode.parentNode.getElementsByTagName("select")[0],i=this.parentNode.previousSibling,s=0;s<n.length;s++)if(n.options[s].innerHTML==this.innerHTML){for(n.selectedIndex=s,i.innerHTML=this.innerHTML,t=this.parentNode.getElementsByClassName("same-as-selected"),l=0;l<t.length;l++)t[l].removeAttribute("class");this.setAttribute("class","same-as-selected");break}i.click()}),b.appendChild(c);x[i].appendChild(b),a.addEventListener("click",function(e){e.stopPropagation(),closeAllSelect(this),this.nextSibling.classList.toggle("select-hide"),this.classList.toggle("select-arrow-active")})}function closeAllSelect(e){var t,s,l,n=[];for(t=document.getElementsByClassName("select-items"),s=document.getElementsByClassName("select-selected"),l=0;l<s.length;l++)e==s[l]?n.push(l):s[l].classList.remove("select-arrow-active");for(l=0;l<t.length;l++)n.indexOf(l)&&t[l].classList.add("select-hide")}document.addEventListener("click",closeAllSelect);
\ No newline at end of file |
