MediaWiki:Mpfunctions.js

function MPSSC() {
	let li = document.querySelectorAll('.MPSSC-list-header')
	for (var i=0;i<li.length;i++) {
		li[i].addEventListener('click', function(){this.classList.toggle('active')}, false)
	}
}


function keybindsPage() {
document.addEventListener('click',function(e){
var a = document.querySelector('.SB-keybind-active')
		if (a) {
			a.classList.remove('SB-keybind-active')
		}
if(e.target && e.target.classList.contains('SB-keybind-key') && e.target != a){
  e.target.classList.toggle('SB-keybind-active')
 }
});

var ele = document.querySelectorAll('.SB-keybind-info-group div[data-trigger]')
for (var i=0;i<ele.length;i++) {
  ele[i].addEventListener('mouseenter', function(ele) {
		var a = document.querySelectorAll('.SB-keybind-key[data-keycap='+ele.target.getAttribute('data-trigger')+']')
  	for (var i=0;i<a.length;i++) {
      a[i].classList.add('fakeHover')
    }
	})
	ele[i].addEventListener('mouseleave', function(ele) {
		var a = document.querySelectorAll('.SB-keybind-key[data-keycap='+ele.target.getAttribute('data-trigger')+']')
  	for (var i=0;i<a.length;i++) {
      a[i].classList.remove('fakeHover')
    }
	})
}


var styles = `
.SB-keybind-key:hover, .fakeHover {
  filter:brightness(1.5);
}

.SB-keybind-active {
  z-index: 2;
  border-color: #ffffff40;
  filter: brightness(1.5);
}
`

var styleSheet = document.createElement("style")
styleSheet.type = "text/css"
styleSheet.innerText = styles
document.head.appendChild(styleSheet)

var a = `<input type="radio" class="hidden" id="inf" name="keybind layers" value="inf" checked>
<input type="radio" class="hidden" id="ship" name="keybind layers" value="ship">
<input type="radio" class="hidden" id="shipEditor" name="keybind layers" value="shipEditor">
<input type="radio" class="hidden" id="sharedDesignerControls" name="keybind layers" value="sharedDesignerControls">
<input type="radio" class="hidden" id="gp" name="keybind layers" value="gp">
<div class="SB-keybind-layer-row">
  <label class="SB-keybind-layer-label label-inf"for="inf">Infantry</label>
  <label class="SB-keybind-layer-label label-ship"for="ship">Ship</label>
  <label class="SB-keybind-layer-label label-shipEditor"for="shipEditor">Ship Editor</label>
  <label class="SB-keybind-layer-label label-sharedDesignerControls"for="sharedDesignerControls">Shared Designer Controls</label>
  <label class="SB-keybind-layer-label label-gp" for="gp">General</label>
</div>`
document.querySelector('.SB-keybind-superwrap').insertAdjacentHTML('beforebegin', a)

}

switch(mw.config.get('wgPageName')) {
	case 'Keybinds':
		keybindsPage();
		break;
	case 'User:DustyFB/Sandbox/Main_Page':
		MPSSC();
		break;
	case 'Keybinds/test':
		keybindsPage();
		break;
}