Rough Draft 1 of Toggle-Switch Custom Element

gistfile1.txt

customElements.define('toggle-switch', class extends HTMLElement {

  lerp (start, end, amt){
    return (1-amt)*start+amt*end;
  }

  currentX = 0;


  value = true;
  // labelText = "Label";

  constructor() {
    super();

    this.attachShadow({mode: 'open'});

    const wrapper = document.createElement('div');
    wrapper.setAttribute('class','wrapper');
    // const icon = wrapper.appendChild(document.createElement('span'));
    // icon.innerText = "";
    // icon.setAttribute('class','icon');
    // icon.setAttribute('tabindex', 0);

    const canvas = document.createElement("canvas");
    canvas.width = 100;
    canvas.height = 50;
    wrapper.appendChild(canvas);

    const ctx = canvas.getContext('2d');
    // ctx.fillStyle = 'rgb(200, 0, 0)';
    // ctx.fillRect(0, 0, 50, 50);

    const draw = () => {
      ctx.clearRect(0,0, canvas.width, canvas.height);
      ctx.beginPath()
      ctx.ellipse(canvas.width / 2, canvas.height / 2, (canvas.width-1) /2 , (canvas.height-1) / 2, 0, 0, 2 * Math.PI);
      ctx.stroke()

      ctx.beginPath();
      // ctx.moveTo(canvas.width/2, canvas.height/2);
      if (this.value){
        ctx.fillStyle = 'rgb(000, 200, 0)';
        // ctx.ellipse((canvas.width-10) / 2, (canvas.height-10) / 2, (canvas.width-21) /2 , (canvas.height-21) / 2, 0, 0, 2 * Math.PI);
        // ctx.fillRect(0, 0, canvas.width, canvas.height);
        // ctx.fill()
      } else {
        ctx.fillStyle = 'rgb(200, 200, 200)';
        // ctx.fillRect(0, 0, canvas.width, canvas.height);
      }
      // ctx.moveTo(0,0);
      ctx.ellipse((canvas.width) / 2, (canvas.height) / 2, (canvas.width-5) /2 , (canvas.height-5) / 2, 0, 0, 2 * Math.PI);
      ctx.fill()
      // ctx.fillStyle = 'rgb(200, 0, 0)';
      // ctx.fillRect(0, 0, 50, 50);

      // TODO: draw circle
      ctx.beginPath();

      const onPos = (canvas.width / 3) * 2;
      const offPost = canvas.width / 3;
      const currentTime = Date.now()/1000;
      this.currentX = this.lerp(this.currentX, ((this.value) ? onPos : offPost), 0.2);

      console.log(this.currentX)

      // TODO: calculate the x value
      // const X = ((this.value) ? 2 : 1) * canvas.width / 3;
      // this is the one position value I wanna lerp with animation to make it be a smooth change
      // should also make the fill color also change for the elipse around it.

      ctx.arc(this.currentX, canvas.height / 2, (canvas.height - 15)/2, 0, 2 * Math.PI, false);
      ctx.stroke();
      ctx.fillStyle = "rgb(255, 255, 255)"
      ctx.fill();


      requestAnimationFrame(draw);
    }

    // could also impliment the dragging when in the canvas to move the handle.


    const info = wrapper.appendChild(document.createElement('span'));
    info.setAttribute('class','info');
// Take attribute content and put it inside the info span
    info.textContent = this.getAttribute('data-text');

    const style = document.createElement('style');
    style.textContent = '.wrapper { cursor: pointer;  ' +
      '-webkit-touch-callout: none; /* iOS Safari */\n' +
      '    -webkit-user-select: none; /* Safari */\n' +
      '     -khtml-user-select: none; /* Konqueror HTML */\n' +
      '       -moz-user-select: none; /* Old versions of Firefox */\n' +
      '        -ms-user-select: none; /* Internet Explorer/Edge */\n' +
      '            user-select: none; /* Non-prefixed version, currently\n' +
      '                                  supported by Chrome, Edge, Opera and Firefox */' +
      '}' +
      'canvas { height: 1em; vertical-align: middle;  }' +
      'span {vertical-align: baseline;}' +
      '' +
      '' +
      '';
      // CSS truncated for brevity
    // add no select

      // attach the created elements to the shadow DOM
    this.shadowRoot.append(style,wrapper);


    this.addEventListener('click', () => {
      this.value = !this.value;
      // this.innerText = ((this.value) ? "(Y)" : "(N)") + this.labelText;
      // icon.innerText = (this.value) ? "(Y)" : "(N)";
      // draw();
    });
    // this.innerText = ((this.value) ? "(Y)" : "(N)") + this.labelText;/**/
    // icon.innerText = (this.value) ? "(Y)" : "(N)";
    draw();
  }

});