roobie
Version:
A collection of CSS classes to keep you writing business logic in your HTML. Easily build maintainable web & mobile applications with 100s of pre-built CSS classes at your fingertips.
1 lines • 7.29 kB
JavaScript
ready(()=>{Accordion.check()});class Accordion{static check(){let e=document.getElementsByClassName("accordion-header");console.log("Found "+e.length+" accordion headers");for(let t of e)t.removeEventListener("click",Accordion.toggleNextSibling),t.addEventListener("click",Accordion.toggleNextSibling)}static toggleNextSibling(){this.classList.toggle("accordion-active");let e=this.nextElementSibling;"block"===e.style.display?(e.style.display="none",console.log("Accordion panel toggle [display=none]")):(e.style.display="block",console.log("Accordion panel toggle [display=block]"))}}ready(()=>{Carousel.check()});class Carousel{static check(){let e=document.getElementsByClassName("carousel");for(let t of e){let e=t.getAttribute("index");""!=e&&null!=e||(e=0,t.setAttribute("index","0")),Carousel.showSlide(t.getAttribute("id"),e)}let t=document.getElementsByClassName("carousel-previous");for(let e of t)e.removeEventListener("click",Carousel.showPrevious),e.addEventListener("click",Carousel.showPrevious);let s=document.getElementsByClassName("carousel-next");for(let e of s)e.removeEventListener("click",Carousel.showNext),e.addEventListener("click",Carousel.showNext);let a=document.getElementsByClassName("carousel-indicators");for(let e of a)for(let t of e.children)t.removeEventListener("click",Carousel.showIndicator),t.addEventListener("click",Carousel.showIndicator)}static showPrevious(){Carousel.showSlide(this.closest(".carousel").getAttribute("id"),+this.closest(".carousel").getAttribute("index")-1)}static showNext(){Carousel.showSlide(this.closest(".carousel").getAttribute("id"),+this.closest(".carousel").getAttribute("index")+1)}static showIndicator(){Carousel.showSlide(this.closest(".carousel").getAttribute("id"),+this.getAttribute("index"))}static showSlide(e,t){console.log("Show slide [index="+t+"] => [id="+e+"]");let s=document.getElementById(e),a=s.querySelectorAll(".carousel-slide");t>a.length-1&&(t=0),t<0&&(t=a.length-1);for(let e=0;e<a.length;e++)a[e].style.display="none";a[t]&&(a[t].style.display="block");let l=s.querySelectorAll(".carousel-indicators")[0];if(l){l=l.children;for(let e=0;e<l.length;e++)l[e].classList.remove("carousel-active");l[t]&&l[t].classList.add("carousel-active")}s.setAttribute("index",t)}}ready(()=>{Navbar.check()});class Navbar{static check(){const e=window.matchMedia("(min-width: 600px)"),t=window.matchMedia("(max-width: 600px)"),s=window.matchMedia("(min-width: 1000px)"),a=window.matchMedia("(max-width: 1000px)"),l=window.matchMedia("(min-width: 1200px)"),n=window.matchMedia("(max-width: 1200px)"),i=window.matchMedia("(min-width: 1400px)"),o=window.matchMedia("(max-width: 1400px)");e.removeEventListener("change",e=>Navbar.expand(e,"rsp-menu-s")),t.removeEventListener("change",e=>Navbar.collapse(e,"rsp-menu-s")),s.removeEventListener("change",e=>Navbar.expand(e,"rsp-menu")),a.removeEventListener("change",e=>Navbar.collapse(e,"rsp-menu")),s.removeEventListener("change",e=>Navbar.expand(e,"rsp-menu-m")),a.removeEventListener("change",e=>Navbar.collapse(e,"rsp-menu-m")),l.removeEventListener("change",e=>Navbar.expand(e,"rsp-menu-l")),n.removeEventListener("change",e=>Navbar.collapse(e,"rsp-menu-l")),i.removeEventListener("change",e=>Navbar.expand(e,"rsp-menu-xl")),o.removeEventListener("change",e=>Navbar.collapse(e,"rsp-menu-xl")),e.addEventListener("change",e=>Navbar.expand(e,"rsp-menu-s")),t.addEventListener("change",e=>Navbar.collapse(e,"rsp-menu-s")),s.addEventListener("change",e=>Navbar.expand(e,"rsp-menu")),a.addEventListener("change",e=>Navbar.collapse(e,"rsp-menu")),s.addEventListener("change",e=>Navbar.expand(e,"rsp-menu-m")),a.addEventListener("change",e=>Navbar.collapse(e,"rsp-menu-m")),l.addEventListener("change",e=>Navbar.expand(e,"rsp-menu-l")),n.addEventListener("change",e=>Navbar.collapse(e,"rsp-menu-l")),i.addEventListener("change",e=>Navbar.expand(e,"rsp-menu-xl")),o.addEventListener("change",e=>Navbar.collapse(e,"rsp-menu-xl")),console.log("Checking menu media queries"),Navbar.collapse(t,"rsp-menu-s"),Navbar.expand(e,"rsp-menu-s"),Navbar.collapse(a,"rsp-menu"),Navbar.expand(s,"rsp-menu"),Navbar.collapse(a,"rsp-menu-m"),Navbar.expand(s,"rsp-menu-m"),Navbar.collapse(n,"rsp-menu-l"),Navbar.expand(l,"rsp-menu-l"),Navbar.collapse(o,"rsp-menu-xl"),Navbar.expand(i,"rsp-menu-xl")}static expand(e,t){if(e.matches){console.log("Expand Menu [class="+t+"]");var s=document.getElementsByClassName(t);for(let e=0;e<s.length;e++){let t=s[e].querySelector(".rsp-cnt");t&&t.classList.contains("rsp-cnt")&&(s[e].innerHTML=t.innerHTML)}}}static collapse(e,t){if(e.matches){console.log("Collapse Menu [class="+t+"]");var s=document.getElementsByClassName(t);for(let e=0;e<s.length;e++){let t=s[e].innerHTML;s[e].classList.contains("rsp-cnt")||(s[e].innerHTML='<div class="drp"> <button type="button" class="drp-btn btn btn-primary"><i class="icon icon-menu"></i></button><div class = "drp-cnt pad2 br rsp-cnt">'+t+"</div> </div>")}}}}ready(()=>{Select.check(),document.addEventListener("click",Select.closeAll())});class Select{static check(){let e=document.getElementsByClassName("select");for(let t of e){let e=t.getElementsByTagName("select")[0],s=document.createElement("div");s.setAttribute("class","select-selected"),s.innerHTML=e.options[e.selectedIndex].innerHTML,t.appendChild(s);let a=document.createElement("div");a.setAttribute("class","select-items hide"),t.appendChild(a);for(let t of e.options){let e=document.createElement("div");e.innerHTML=t.innerHTML,e.addEventListener("click",function(e){let t=0,s=this.parentNode.parentNode.getElementsByTagName("select")[0],a=this.parentNode.previousSibling;for(let e of s.options){if(e.innerHTML==this.innerHTML){s.selectedIndex=t,a.innerHTML=this.innerHTML;let e=this.parentNode.getElementsByClassName("is-selected");for(let t of e)t.removeAttribute("class");this.setAttribute("class","is-selected");break}t++}a.click()}),a.appendChild(e)}t.appendChild(a),s.addEventListener("click",function(e){e.stopPropagation(),Select.closeAll(this),this.nextSibling.classList.toggle("hide"),this.classList.toggle("select-active")})}}static closeAll(e){var t,s,a,l,n=[];t=document.getElementsByClassName("select-items"),s=document.getElementsByClassName("select-selected"),a=t.length,l=s.length;for(let t=0;t<l;t++)e==s[t]?n.push(t):s[t].classList.remove("select-active");for(let e=0;e<a;e++)n.indexOf(e)&&t[e].classList.add("hide")}}ready(()=>{Tooltip.check()});class Tooltip{static check(){let e=document.querySelectorAll("[tooltip]");for(let t of e){t.style.position="relative",t.style.display="inline-block";let e=document.createElement("span");switch(e.innerHTML=t.getAttribute("tooltip"),e.classList.add("tooltip-text"),t.getAttribute("side")){case"left":e.classList.add("tooltip-left");break;case"right":e.classList.add("tooltip-right");break;case"top":e.classList.add("tooltip-top");break;case"bottom":default:e.classList.add("tooltip-bottom")}t.appendChild(e),t.addEventListener("mouseover",function(e){let t=this.querySelectorAll(".tooltip-text");t[0].style.animationName="fade",t[0].style.animationDuration="0.5s",t[0].style.visibility="visible"}),t.addEventListener("mouseout",function(e){let t=this.querySelectorAll(".tooltip-text");t[0].style.visibility="hidden",t[0].style.animationName="",t[0].style.animationDuration=""})}}}