Config Menu

by roomyrooms

HTML

<div id='config_tab_container'>
  <div class='config_tab' id='config_profile'>
    <span class='config_tab_text'>
      Profile
    </span>
  </div>
  <div class='config_tab active' id='config_game'>
    <span class='config_tab_text'>
      Game
    </span>
  </div>
  <div class='config_tab' id='config_audio'>
    <span class='config_tab_text'>
      Audio
    </span>
  </div>
  <div class='config_tab' id='config_keys'>
    <span class='config_tab_text'>
      Keys
    </span>
  </div>
  <div class='config_dragbar'></div>
</div>

<div id='config_container'>
  <div id='config_scroll'>

    <div class='config_contents' id='config_profile_contents'>
      
      <div class='config_profile_container'>
        <span class='config_section'>Flavor Text</span>
        <input class='config_profile_input' placeholder='A brief description of your character.'>
        <br>
        <br>
        <span class='config_section'>Avatar Link</span>
        <input class='config_profile_input' placeholder='A direct link to a square image.'>
        <br>
        <br>
        <span class='config_section'>Audio Link</span>
        <input class='config_profile_input' placeholder='A link to a YouTube video to play.'>
        <br>
        <br>
        <span class='config_section'>HTML Description</span>
        <textarea id='config_profile_html'></textarea>
      </div>
      <br>
      <span class='config_section'>Profile Options</span>
      <div class='config_input'>
        <input type='checkbox' class='config_checkbox'>
        <div class='config_input_text'>Autoplay Your Audio</div>
      </div>
      <div class='config_input'>
        <input type='checkbox' class='config_checkbox'>
        <div class='config_input_text'>Autoplay Others' Audio</div>
      </div>
      <div class='config_input'>
        <input type='checkbox' class='config_checkbox'>
        <div class='config_input_text'>Open Profile On Right Click</div>
        <div class='config_input_desc'>Instead of opening the...

CSS

#config_tab_container {
  padding-left: 4px;
  padding-top: 4px;
  user-select: none;
}


.config_tab {
  background-image: url('https://i.gyazo.com/0d947d27cd9d766c5a02bcd23c211fda.png');
  filter: brightness(0.7) grayscale(0.4);
  width: 48px;
  height: 32px;
  background-repeat: no-repeat;
  display: inline-block;
  text-align: center;
}
.config_tab.active {
  filter: none;
}
.config_tab_text {
  color: #eee;
  font-size: 14px;
  top: 20%;
  position: relative;
  text-shadow: 1px 1px #000;
}
.config_dragbar {
  display: inline-block;
  width: 70%;
  height: 25px;
  float: right;
  background-image: url(https://i.gyazo.com/2a827a32d033bff17d943bc96075d885.png), url(https://i.gyazo.com/3e7d6cd4268f3b325f4d7005c76cb137.png), url(https://i.gyazo.com/f02e594ee137f1530095f5d49eb38670.png);
  background-repeat: no-repeat, no-repeat, repeat-x;
  background-position: left bottom, right bottom, center bottom;
}




#config_container {
  z-index: 1;
  position: relative;
  height: 300px;
  margin-top: -8px;
  border: 10px solid;
  border-image: url(https://i.gyazo.com/34a29fe2749b507b0ab6e8358baaf798.png) 10 round;
  background: #191919;
  border-radius: 5px;
  padding-left: 2px;
  user-select: none;
}

#config_scroll {
  max-height: 300px;
  overflow-x: hidden;
  overflow-y: scroll;
  padding-left: 2px;
  width: 100%;
}



.config_contents {
  color: #ddd;
  display: none;
  text-shadow: 1px 1px #000;
  font-size: 14px;
}

.config_section {
  display: block;
  font-size: 13px;
  font-style: italic;
  padding-top: 2px;
  margin-bottom: -2px;
  width: 100%;
  margin-left: -2px;
}

.config_input {
  background-color: #333;
  padding-left: 4px;
  padding-right: 4px;
  margin-top: 2px;
  border: 1px solid #555;
  border-radius: 5px;
  display: inline-block;
  width: 98%;
}
.config_input_desc {
  color: #bbb;
  margin-top: -2px;
}
.config_input_warn {
  color: #bbb;
  font-style: italic;
  font-size: 13px;
  margin-top: -2px;
  margin-bottom: 1px;
}

.config_input_text {
 ...

JavaScript

var coll = document.getElementsByClassName("config_tab");
var allConfigs = [];
var i;

for (i = 0; i < coll.length; i++) {
	allConfigs.push(coll[i].id);
  coll[i].addEventListener("click", function() {
    for (var y in allConfigs) {
    	var curConfig = allConfigs[y];
      if (curConfig == this.id) {
      	document.getElementById(curConfig+"_contents").style.display = "block";
      } else {
      	document.getElementById(curConfig+"_contents").style.display = "none";
      }
    }
    var newColl = document.getElementsByClassName("config_tab");
  	this.classList.add("active");
    for (var x = 0; x < newColl.length; x++) {
    	if (newColl[x] != this) {
 		 		newColl[x].classList.remove("active");
      }
    }
  });
  coll[0].click();
}

coll = document.getElementsByClassName("config_input_text");
for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
  	if (this.previousElementSibling && this.previousElementSibling.className == "config_checkbox") {
			this.previousElementSibling.checked = !this.previousElementSibling.checked;
    }
  })
}

function clickCastClicked(ele) {
	if (!ele.checked) {
		ele.parentElement.previousElementSibling.firstElementChild.checked=false;
		ele.parentElement.previousElementSibling.previousElementSibling.firstElementChild.checked=true;
  }
}


function updateCensorRange(ele) {
	document.getElementById('config_range_jerk').innerHTML = {"0": "None", "1": "Slurs", "2": "Curses"}[ele.value];
}
function updateProjInt(ele) {
	document.getElementById('config_range_projint').innerHTML = "1:"+ele.value+" FPS";
}
function updateTileRange(ele) {
	document.getElementById('config_range_tileload').innerHTML = ele.value+" tiles/sec.";
}
function updateTargetRange(ele) {
	document.getElementById('config_range_target').innerHTML = {"0": "Closest", "1": "Furthest", "2": "Highest HP", "3": "Lowest HP"}[ele.value];
}


function updateGlobalVolume(ele) {
	document.getElementById('config_range_globalvolume').innerHTML =...