User:Chaotic Enby/LightsUp.js

Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.

importStylesheet('User:Chaotic Enby/LightsUp.css');

function lightsUpSetUpLights() {
	var lights = (sessionStorage.getItem('lights') == "true");
	var moreLights = (sessionStorage.getItem('moreLights') == "true");
	var animate = (sessionStorage.getItem('animate') == "true");
	if(!lights){
	  $('#blueLight').css('opacity', '0');
	  $('#pinkLight').css('opacity', '0');
	  $('#blueLight2').css('opacity', '0');
	  $('#pinkLight2').css('opacity', '0');
	  $('#pt-lightswitch').find("span").html('Lights on');
	} else {
	  $('#blueLight').css('opacity', '1');
	  $('#pinkLight').css('opacity', '1');
	  if(moreLights){
	    $('#blueLight2').css('opacity', '1');
	    $('#pinkLight2').css('opacity', '1');
	  }
	  $('#pt-lightswitch').find("span").html('Lights off');
	}
	if(animate){
	  $('#blueLight').css('animation-play-state', 'running');
	  $('#pinkLight').css('animation-play-state', 'running');
	  $('#blueLight2').css('animation-play-state', 'running');
	  $('#pinkLight2').css('animation-play-state', 'running');
	} else {
	  $('#blueLight').css('animation-play-state', 'paused');
	  $('#pinkLight').css('animation-play-state', 'paused');
	  $('#blueLight2').css('animation-play-state', 'paused');
	  $('#pinkLight2').css('animation-play-state', 'paused');
	}
}

function lightsUpSwitchLights(e) {
	var lights = (sessionStorage.getItem('lights') == "true");
	var moreLights = (sessionStorage.getItem('moreLights') == "true");
	if(lights){
	  $('#blueLight').css('opacity', '0');
	  $('#pinkLight').css('opacity', '0');
	  $('#blueLight2').css('opacity', '0');
	  $('#pinkLight2').css('opacity', '0');
	  $('#pt-lightswitch').find("span").html('Lights on');
	  lights = false;
	} else {
	  $('#blueLight').css('opacity', '1');
	  $('#pinkLight').css('opacity', '1');
	  if(moreLights){
	    $('#blueLight2').css('opacity', '1');
	    $('#pinkLight2').css('opacity', '1');
	  }
	  $('#pt-lightswitch').find("span").html('Lights off');
	  lights = true;
	}
	sessionStorage.setItem('lights', (lights?"true":"false"));
}

function lightsUpSwitchMoreLights(e) {
	var moreLights = (sessionStorage.getItem('moreLights') == "true");
	if($('#blueLight').css('opacity') == '1'){
	  if(moreLights){
	    $('#blueLight2').css('opacity', '0');
	    $('#pinkLight2').css('opacity', '0');
	    moreLights = false;
	  } else {
	    $('#blueLight2').css('opacity', '1');
	    $('#pinkLight2').css('opacity', '1');
	    moreLights = true;
	  }
	} else {
	  moreLights = !moreLights;
	}
	sessionStorage.setItem('moreLights', (moreLights?"true":"false"));
}

function lightsUpSwitchAnims(e) {
	var animate = (sessionStorage.getItem('animate') == "true");
	if(!animate){
	  $('#blueLight').css('animation-play-state', 'running');
	  $('#pinkLight').css('animation-play-state', 'running');
	  $('#blueLight2').css('animation-play-state', 'running');
	  $('#pinkLight2').css('animation-play-state', 'running');
	  animate = true;
	} else {
	  $('#blueLight').css('animation-play-state', 'paused');
	  $('#pinkLight').css('animation-play-state', 'paused');
	  $('#blueLight2').css('animation-play-state', 'paused');
	  $('#pinkLight2').css('animation-play-state', 'paused');
	  animate = false;
	}
	sessionStorage.setItem('animate', (animate?"true":"false"));
}

function buildLights() {
  $('body').append('<div id="blueLight"></div><div id="pinkLight2"></div><div id="pinkLight"></div><div id="blueLight2"></div>');
  
  mw.util.addPortlet('p-lights', 'Lights panel', '#p-interaction');
  mw.util.addPortletLink ( 'p-lights', '#', 'Lights on', 'pt-lightswitch', 'Switch lighting on/off' );
  mw.util.addPortletLink ( 'p-lights', '#', 'More lights', 'pt-morelights', 'Adds extra lights on the edges' );
  mw.util.addPortletLink ( 'p-lights', '#', 'Animate', 'pt-animatelights', 'Swings the lights around' );
  lightsUpSetUpLights();
  // Add a listener to your button, that does something when it is clicked.
  $('#pt-lightswitch').click(lightsUpSwitchLights);
  $('#pt-morelights').click(lightsUpSwitchMoreLights);
  $('#pt-animatelights').click(lightsUpSwitchAnims);
}

$(document).ready(buildLights);