MediaWiki:Common.js

/* Any JavaScript here will be loaded for all users on every page load. */

const animdelay = 20;
const animdelta = 1;
const LEDx = 52;
const LEDy = 200;
const LEDs = 15;

var ledtimer = null;

function flashtimer(){
  var led = document.getElementById('demoLED');
  if ( led.style.opacity == 1 ) led.style.opacity = 0;
  else led.style.opacity = 1;
  }

function launchflash(){
  var uart = document.getElementById('demoUART');
  var val = parseInt(uart.innerHTML);
  if ( ledtimer != null ){
    clearInterval(ledtimer);
    var led = document.getElementById('demoLED');
    led.style.opacity = 0;
    }
  if ( val > 0 ) ledtimer = setInterval(flashtimer,4*val);
  }

function uartanim(){
  var uart = document.getElementById('demoUART');
  var arrow = document.getElementById('arrowUART');
  var max =	arrow.offsetWidth - uart.offsetWidth;
  var cur =	parseInt(uart.style.left,10);
  if ( cur < max ) {
    cur += animdelta;
    uart.style.left = cur + 'px';
    setTimeout(uartanim,animdelay);
    }
  else {
    uart.style.left = '0px';
    uart.style.display = 'none';
    launchflash();
    }
  }

function httpanim(){
  var http = document.getElementById('demoHTTP');
  var arrow = document.getElementById('arrowHTTP');
  var max =	arrow.offsetWidth - http.offsetWidth;
  var cur =	parseInt(http.style.left,10);
  if ( cur < max ) {
    cur += animdelta;
    http.style.left = cur + 'px';
    setTimeout(httpanim,animdelay);
    }
  else {
    http.style.left = '0px';
    http.style.display = 'none';
    var uart = document.getElementById('demoUART');
    uart.style.display = 'flex';
    uartanim();
    }
  }

function initanim(val){
  var http = document.getElementById('demoHTTP');
  var uart = document.getElementById('demoUART');
  var led = document.getElementById('demoLED');
  http.style.top = '0px';
  http.style.left = '0px';
  http.innerHTML = 'POST';
  http.style.display = 'flex';
  uart.style.top = '0px';
  uart.style.left = '0px';
  uart.innerHTML = val;
  led.style.top = LEDy + 'px';
  led.style.left = LEDx + 'px';
  led.style.width = LEDs + 'px';
  led.style.height = LEDs + 'px';
  led.style.backgroundColor = 'red';
  led.style.opacity = 0;
  led.style.display = 'flex';
  setTimeout(httpanim,animdelay);
  }

function launchanim(){
  var cursor = document.getElementById('democursor');
  var x = parseInt(cursor.style.left,10);
  if ( isNaN(x) ) x = 0;
  initanim(2*x);
  }

function cursormove(e){
  var slider = document.getElementById('demoslider');
  var cursor = document.getElementById('democursor');
  var bounds = slider.getBoundingClientRect();
  var x = e.pageX - bounds.left;
  var max = bounds.width - cursor.offsetWidth;
  if ( x > max ) x = max;
  if ( x < 0 ) x = 0;
  if (e.buttons != 0) {
    cursor.style.left = Math.floor(x)+'px';
    }
  }

function demoslider(){
  var slider = document.getElementById('demoslider');
  if(slider != null){
    slider.onmousemove = cursormove;
    document.body.onmouseup = launchanim;
    }
  }

demoslider();