How to Add JavaScript to a Page When Using the Form Pages Addon

/**

 * Add confetti to the convas element on the confirmation message for Form Pages

 *

 * @link  https://wpforms.com/developers/how-to-add-javascript-to-a-page-when-using-the-form-pages-addon/

 */

function wpf_confetti_animation() {

    ?>

    <script type="text/javascript">

//If the canvas ID does not exist on the page, this script will not run

if (document.querySelector( '#canvas' ) !== null) {   

class Progress {

  constructor(param = {}) {

    this.timestamp        = null;

    this.duration         = param.duration || Progress.CONST.DURATION;

    this.progress         = 0;

    this.delta            = 0;

    this.progress         = 0;

    this.isLoop           = !!param.isLoop;

    this.reset();

  }

  static get CONST() {

    return {

      DURATION : 1000

    };

  }

  reset() {

    this.timestamp = null;

  }

  start(now) {

    this.timestamp = now;

  }

  tick(now) {

    if (this.timestamp) {

      this.delta    = now - this.timestamp;

      this.progress = Math.min(this.delta / this.duration, 1);

      if (this.progress >= 1 && this.isLoop) {

        this.start(now);

      }

      return this.progress;

    } else {

      return 0;

    }

  }

}

class Confetti {

  constructor(param) {

    this.parent         = param.elm || document.body;

    this.canvas         = document.createElement("canvas");

    this.ctx            = this.canvas.getContext("2d");

    this.width          = param.width  || this.parent.offsetWidth;

    this.height         = param.height || this.parent.offsetHeight;

    this.length         = param.length || Confetti.CONST.PAPER_LENGTH;

    this.yRange         = param.yRange || this.height * 2;

    this.progress       = new Progress({

      duration : param.duration,

      isLoop   : true

    });

    this.rotationRange  = typeof param.rotationLength === "number" ? param.rotationRange

                                                                   : 10;

    this.speedRange     = typeof param.speedRange     === "number" ? param.speedRange

                                                                   : 10;

    this.sprites        = [];

    this.canvas.style.cssText = [

      "display: block",

      "position: absolute",

      "top: 0",

      "left: 0",

      "pointer-events: none"

    ].join(";");

    this.render = this.render.bind(this);

    this.build();

    this.parent.appendChild(this.canvas);

    this.progress.start(performance.now());

    requestAnimationFrame(this.render);

  }

  static get CONST() {

    return {

        //CUSTOMIZE: This will adjust how wide the paper is 

        SPRITE_WIDTH  : 9,

        //CUSTOMIZE: This will adjust how tall the paper is

        SPRITE_HEIGHT : 16,

        //CUSTOMIZE: This will adjust how much confetti appears, raise the number for less confetti

        PAPER_LENGTH  : 100,

        //CUSTOMIZE: This will control the rotation rate of each piece of confetti

        ROTATION_RATE : 50,

        //CUSTOMIZE: These are the default colors used for the confetti. You can change these numbers or add to them. 

        //CUSTOMIZE: Separate adding new colors by a comma after each new color added.

        COLORS        : [

          "#EF5350",

          "#EC407A",

          "#AB47BC",

          "#7E57C2",

          "#5C6BC0",

          "#42A5F5",

          "#29B6F6",

          "#26C6DA",

          "#26A69A",

          "#66BB6A",

          "#9CCC65",

          "#D4E157",

          "#FFEE58",

          "#FFCA28",

          "#FFA726",

          "#FF7043",

          "#8D6E63",

          "#BDBDBD",

          "#78909C"        ]

    };

  }

  build() {

    for (let i = 0; i < this.length; ++i) {

      let canvas = document.createElement("canvas"),

          ctx    = canvas.getContext("2d");

      canvas.width  = Confetti.CONST.SPRITE_WIDTH;

      canvas.height = Confetti.CONST.SPRITE_HEIGHT;

      canvas.position = {

        initX : Math.random() * this.width,

        initY : -canvas.height - Math.random() * this.yRange

      };

      canvas.rotation = (this.rotationRange / 2) - Math.random() * this.rotationRange;

      canvas.speed    = (this.speedRange / 2) + Math.random() * (this.speedRange / 2);

      ctx.save();

        ctx.fillStyle = Confetti.CONST.COLORS[(Math.random() * Confetti.CONST.COLORS.length) | 0];

        ctx.fillRect(0, 0, canvas.width, canvas.height);

      ctx.restore();

      this.sprites.push(canvas);

    }

  }

  render(now) {

    let progress = this.progress.tick(now);

    this.canvas.width  = this.width;

    this.canvas.height = this.height;

    for (let i = 0; i < this.length; ++i) {

      this.ctx.save();

        this.ctx.translate(

          this.sprites[i].position.initX + this.sprites[i].rotation * Confetti.CONST.ROTATION_RATE * progress,

          this.sprites[i].position.initY + progress * (this.height + this.yRange)

        );

        this.ctx.rotate(this.sprites[i].rotation);

        this.ctx.drawImage(

          this.sprites[i],

          -Confetti.CONST.SPRITE_WIDTH * Math.abs(Math.sin(progress * Math.PI * 2 * this.sprites[i].speed)) / 2,

          -Confetti.CONST.SPRITE_HEIGHT / 2,

          Confetti.CONST.SPRITE_WIDTH * Math.abs(Math.sin(progress * Math.PI * 2 * this.sprites[i].speed)),

          Confetti.CONST.SPRITE_HEIGHT

        );

      this.ctx.restore();

    }

    requestAnimationFrame(this.render);

  }

}

(() => {

        //CUSTOMIZE: This will control the speed of how fast the confetti falls, raise the number for a slower fall.

  const DURATION = 8000,

        //CUSTOMIZE: This number controls how much confetti will appear on the screen. For more confetti, raise the number.

        LENGTH   = 120;

  new Confetti({

    width    : window.innerWidth,

    height   : window.innerHeight,

    length   : LENGTH,

    duration : DURATION

  });

  setTimeout(() => {

    new Confetti({

      width    : window.innerWidth,

      height   : window.innerHeight,

      length   : LENGTH,

      duration : DURATION

    });

  }, DURATION / 2);

})();

}

    </script>

    <?php

}

add_action( 'wpforms_form_pages_footer', 'wpf_confetti_animation', 1);