How to change javascript event listener?

Question

I just switched to a new shopify theme. I've run into some issues with code that works fine on my other themes, but not on this new one, due to how their theme is structured. Their documentation says to use the following event listener instead of document.onload and $(document).ready():

 document.addEventListener('page:loaded', function() { console.log('page:loaded'); });

I'm not skilled in javascript and I'm having trouble getting it to work with the following 2 scripts. Can anyone assist?

 <script type="text/javascript"> jQuery(document).ready(function($) { $('a[data-rel^=lightcase]').lightcase(); }); </script>

 <script> window.addEventListener("load", function () { var curtains = new Curtains({ container: "planes-canvas" }); var planeEls = document.getElementsByClassName("planes"); var vs = `#ifdef GL_ES precision mediump float; #endif // default mandatory attributes attribute vec3 aVertexPosition; attribute vec2 aTextureCoord; // those projection and model view matrices are generated by the library // it will position and size our plane based on its HTML element CSS values uniform mat4 uMVMatrix; uniform mat4 uPMatrix; // texture coord varying that will be passed to our fragment shader varying vec2 vTextureCoord; void main() { // apply our vertex position based on the projection and model view matrices gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0); // varying // use texture matrix and original texture coords to generate accurate texture coords vTextureCoord = aTextureCoord; }`; var fs = ` #ifdef GL_ES precision mediump float; #endif // get our varyings varying vec3 vVertexPosition; varying vec2 vTextureCoord; // the uniform we declared inside our javascript uniform float uTime; // our texture sampler (default name, to use a different name please refer to the documentation) uniform sampler2D planeTexture; vec3 hueRotate(vec3 col, float hue) { vec3 k = vec3(0.57735, 0.57735, 0.57735); float cosAngle = cos(hue); return col * cosAngle + cross(k, col) * sin(hue) + k * dot(k, col) * (1.0 - cosAngle); } vec3 saturate(vec3 rgb, float adjustment) { vec3 W = vec3(0.2125, 0.7154, 0.0721); vec3 intensity = vec3(dot(rgb, W)); return mix(intensity, rgb, adjustment); } void main() { // get our texture coords vec2 textureCoord = vTextureCoord; // displace our pixels along both axis based on our time uniform and texture UVs // this will create a kind of water surface effect // try to comment a line or change the constants to see how it changes the effect // reminder : textures coords are ranging from 0.0 to 1.0 on both axis const float PI = 3.141592; textureCoord.x += ( sin(textureCoord.x * 12.0 + ((uTime * (PI / 15.0)) * 0.031)) + sin(textureCoord.y * 12.0 + ((uTime * (PI / 12.489)) * 0.047)) ) * 0.0050; textureCoord.y += ( sin(textureCoord.y * 8.0 + ((uTime * (PI / 12.023)) * 0.023)) + sin(textureCoord.x * 8.0 + ((uTime * (PI / 15.1254)) * 0.067)) ) * 0.0100; vec4 color = texture2D(planeTexture, textureCoord); // hue rotation from 0 to PI in 10 seconds float hueRotation = cos(uTime / 600.0) * PI; color.rgb = hueRotate(color.rgb, hueRotation); // saturate color.rgb = saturate(color.rgb, 2.0); gl_FragColor = color; } `; var planes = []; function handlePlane(index) { var plane = planes[index]; plane .onReady(function () { // our texture has been loaded, resize our plane! plane.planeResize(); }) .onRender(function () { plane.uniforms.time.value++; }); } for (var i = 0; i < planeEls.length; i++) { var params = { vertexShader: vs, fragmentShader: fs, uniforms: { time: { name: "uTime", type: "1f", value: 0 } } }; var plane = curtains.addPlane(planeEls[i], params); if (plane) { planes.push(plane); handlePlane(i); } } }); </script>

Answer 1

For this code to work with the new theme, you need to listen to the custom event page:loaded specific to this new theme, instead of the standard events window.onload or $(document).ready() .

Below you will find your old code snippets adapted to the new event:

• First script tag :

<script type="text/javascript">
   document.addEventListener('page:loaded', function() {
        $('a[data-rel^=lightcase]').lightcase();
    });
  </script>

• Second one :

<script>
document.addEventListener('page:loaded', function() {
  var curtains = new Curtains({
    container: "planes-canvas"
  });

  var planeEls = document.getElementsByClassName("planes");

  var vs = `#ifdef GL_ES
  precision mediump float;
  #endif

  // default mandatory attributes
  attribute vec3 aVertexPosition;
  attribute vec2 aTextureCoord;

  // those projection and model view matrices are generated by the library
  // it will position and size our plane based on its HTML element CSS values
  uniform mat4 uMVMatrix;
  uniform mat4 uPMatrix;

  // texture coord varying that will be passed to our fragment shader
  varying vec2 vTextureCoord;

  void main() {
    // apply our vertex position based on the projection and model view matrices
    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);

    // varying
    // use texture matrix and original texture coords to generate accurate texture coords
    vTextureCoord = aTextureCoord;
  }`;

  var fs = `
    #ifdef GL_ES
    precision mediump float;
    #endif

    // get our varyings
    varying vec3 vVertexPosition;
    varying vec2 vTextureCoord;

    // the uniform we declared inside our javascript
    uniform float uTime;

    // our texture sampler (default name, to use a different name please refer to the documentation)
    uniform sampler2D planeTexture;


    vec3 hueRotate(vec3 col, float hue) {
        vec3 k = vec3(0.57735, 0.57735, 0.57735);
        float cosAngle = cos(hue);
        return col * cosAngle + cross(k, col) * sin(hue) + k * dot(k, col) * (1.0 - cosAngle);
    }

    vec3 saturate(vec3 rgb, float adjustment) {
        vec3 W = vec3(0.2125, 0.7154, 0.0721);
        vec3 intensity = vec3(dot(rgb, W));
        return mix(intensity, rgb, adjustment);
    }


    void main() {
        // get our texture coords
        vec2 textureCoord = vTextureCoord;

        // displace our pixels along both axis based on our time uniform and texture UVs
        // this will create a kind of water surface effect
        // try to comment a line or change the constants to see how it changes the effect
        // reminder : textures coords are ranging from 0.0 to 1.0 on both axis
        const float PI = 3.141592;

        textureCoord.x += (
                    sin(textureCoord.x * 12.0 + ((uTime * (PI / 15.0)) * 0.031))
                    + sin(textureCoord.y * 12.0 + ((uTime * (PI / 12.489)) * 0.047))
                    ) * 0.0050;

                textureCoord.y += (
                    sin(textureCoord.y * 8.0 + ((uTime * (PI / 12.023)) * 0.023))
                    + sin(textureCoord.x * 8.0 + ((uTime * (PI / 15.1254)) * 0.067))
                    ) * 0.0100;

        vec4 color = texture2D(planeTexture, textureCoord);

        // hue rotation from 0 to PI in 10 seconds
        float hueRotation = cos(uTime / 600.0) * PI;
        color.rgb = hueRotate(color.rgb, hueRotation);

        // saturate
        color.rgb = saturate(color.rgb, 2.0);

        gl_FragColor = color;
    }
`;

  var planes = [];

  function handlePlane(index) {
    var plane = planes[index];

    plane
      .onReady(function () {
        // our texture has been loaded, resize our plane!
        plane.planeResize();
      })
      .onRender(function () {
        plane.uniforms.time.value++;
      });
  }

  for (var i = 0; i < planeEls.length; i++) {
    var params = {
      vertexShader: vs,
      fragmentShader: fs,
      uniforms: {
        time: {
          name: "uTime",
          type: "1f",
          value: 0
        }
      }
    };

    var plane = curtains.addPlane(planeEls[i], params);

    if (plane) {
      planes.push(plane);

      handlePlane(i);
    }
  }
});
</script>