How to change javascript event listener (Streamline theme)?

Blaine
Excursionist
59 0 7

Hello,

I just started using the Streamline theme. I've run into some issues with code that works fine on my other themes, but not Streamline, 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');
});

 

How would I implement that with the following two scripts?

<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>

 I apologize if this is super simple, I don't know javascript too well.

0 Likes
juansmartdev
Explorer
46 11 14

Hi, @Blaine 

 

Hope you are doing fine!

 

For this you can wrap all your code in a function and them call them inside their event listener it would look something like this: 

// First function
function curtains(){
  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);
    }
  }
}

//Second Function
function lightcase() {
  $('a[data-rel^=lightcase]').lightcase();
}

document.addEventListener('page:loaded', function() {
//Calling them in their custom event listener
  lightcase();
  curtains()
});

 

It should work now ;). This code is not tested so used at your own risk.

 

Thanks!

 

Kindly Regards, 

Juan

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Worked for 2 years as Shopify Developer.
◦ Contact me at: juansmartdev@beeethereal.com
0 Likes