symposion_app/static/src/js/lot_hero.js

function hero() {
  var timeouts = new Array(3);
  let green = "#0F7C11";
  let radius = 7;
  let windowWidth;
  let breakPoint = 768;
  
  var loeWrapper = document.getElementById("loe-wrapper");
  var loeOf = document.getElementById("of");
  var canvas = document.getElementById("hero");
  var bottomWrapper = document.getElementById("bottom-wrapper");
  var registerLink = document.getElementById("register-link");
  var thingsHeading = document.getElementById("things-heading");
  
  var ctx = canvas.getContext("2d");
  var canvasPadding = 10;
  
  function positionRegisterLink() {
    registerLink.style.position = 'static';
    registerLink.style.float = 'none'; 
    var offset = registerLink.offsetTop - loeOf.offsetTop - 0.25 * loeOf.offsetHeight;
    if (window.innerWidth >= breakPoint) {
      registerLink.style.top = -1 * offset + 'px';
      registerLink.style.position = 'relative';
      registerLink.style.float = 'right'; 
    }
  }
  
  function getCanvasPos() {
    var canvasRatio = window.innerWidth < 576 ? 1.1 : 2.5;
    var width = loeWrapper.offsetWidth - loeOf.offsetWidth - (2 * canvasPadding);
    var minHeight = 180;
    if (window.innerWidth >= breakPoint) {
      width -= registerLink.offsetWidth;
      minHeight = 260;
    }
    
    return {
      width: width,
      height: Math.max(width / canvasRatio, minHeight),
      left: loeOf.offsetWidth + canvasPadding,
      top: -1.25 * loeOf.offsetHeight,
    }
  }
  
  function sizeCanvas(pos) {
    var c = canvas;
    c.width = pos.width;
    c.height = pos.height;
    c.style.width = pos.width + 'px';
    c.style.height = pos.height + 'px';
    c.style.position = 'relative';
    c.style.left = pos.left + 'px';
    c.style.top = pos.top + 'px';
    c.style.marginBottom = c.style.top;
  }
  
  function positionThingsHeading() {
    thingsHeading.style.position = 'relative';
    thingsHeading.style.display = 'inline-block';
    var left = canvas.offsetWidth - thingsHeading.offsetWidth
    if(window.innerWidth >= breakPoint) {
      left += registerLink.offsetWidth;
    }
    thingsHeading.style.left = left + 'px';
    thingsHeading.style.top = -0.7 * thingsHeading.offsetHeight + 'px';
    thingsHeading.style.marginBottom = thingsHeading.style.top;
  }
  
  function positionDate() {
    bottomWrapper.style.position = 'static';
    bottomWrapper.style.marginBottom = 0;
    var offs = -0.7 * thingsHeading.offsetHeight;
    offs -= bottomWrapper.offsetHeight * 0.8;
    if (window.innerWidth >= 576) {
      bottomWrapper.style.position = 'relative';
      bottomWrapper.style.top = offs + 'px';
      bottomWrapper.style.marginBottom = offs + 20 + 'px';
    }
  }
  
  let drawLine = (ind, context, startX, startY, endX, endY, color) => {
    let dx = startX - endX;
    let dy = startY - endY;
    
    let theta = Math.atan2(dy, dx);
    var x = startX - 15 * Math.cos(theta);
    var y = startY - 15 * Math.sin(theta);
    
    endX = endX + 30 * Math.cos(theta);
    endY = endY + 30 * Math.sin(theta)
    let delay = 8;
    let increments = 2080 / delay;
    let xAdjust = (endX - startX) / increments;
    let yAdjust = (endY - startY) / increments;
    let counter = 1;
    
    let line = () => {
      context.beginPath();
      context.lineWidth = 1.9;
      context.moveTo(x, y);
      x = x + xAdjust;
      y = y + yAdjust;
      context.lineTo(x, y);
      context.strokeStyle = color;
      context.stroke();
      counter++;
      if (counter <= increments) {
        timeouts[ind] = window.setTimeout(line, delay);
      }
    };
    timeouts[ind] = window.setTimeout(line, delay);
  }
  
  let drawCircle = (context, x, y, radius, color) => {
    context.beginPath();
    context.fillStyle = color;
    context.arc(x, y, radius, 0, 2 * Math.PI);
    context.fill();
  }
  
  function windowResize() {
    if(window.innerWidth === windowWidth) {
      // Catch mobile scroll event, as this can hide/unhide the address
      // bar and fire a resize event.
      return;
    } else {
      windowWidth = window.innerWidth;
    }
    for(var i = 0; i < 3; i++) {
      window.clearTimeout(timeouts[i]);
    }
    var canvasPos = getCanvasPos();
    sizeCanvas(canvasPos)
    positionThingsHeading();
    positionDate();
    
    function getLowestPoint() {
      var pos = thingsHeading.offsetLeft - canvas.offsetLeft - 20;
      if(pos < 10) {
        pos = thingsHeading.offsetLeft + 0.5 * thingsHeading.offsetWidth;
      }
      return pos
    }
    
    let points = [
      [10, 10],
      [canvasPos.width - 10, 10],
      [
        getLowestPoint(),
        canvasPos.height -10
      ]
    ];
    
    positionRegisterLink();
    
    drawCircle(ctx, points[0][0], points[0][1], radius, green);
    drawCircle(ctx, points[1][0], points[1][1], radius, green);
    drawCircle(ctx, points[2][0], points[2][1], radius, green);
    
    drawLine(0, ctx, points[0][0], points[0][1], points[2][0], points[2][1], green);
    drawLine(1, ctx, points[2][0], points[2][1], points[1][0], points[1][1], green);
    drawLine(2, ctx, points[1][0], points[1][1], points[0][0], points[0][1], green);
    
  }
  
  windowResize();
  window.addEventListener('resize', windowResize, false);
}

hero();