MediaWiki:Common.js

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

const animdelay=200;
const animdelta=10;

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';
    }
}

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';
    uartanim();
    }
}

function initanim(val){
  var http = document.getElementById('demoHTTP');
  var uart = document.getElementById('demoUART');
  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;
  setTimeout(httpanim,animdelay);
  }

function launchanim(){
  var cursor = document.getElementById('democursor');
  var x = parseInt(cursor.style.left,10);
console.log(x);
  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;
    slider.onmouseup = launchanim;
    }
  }

demoslider();