inline script problems

[cliffstudio]

I'm having a few problems at the moment trying to get some inline scripts to work, see below some code and I'll explain the problem I'm having:

<section class="capital-panel-wrap fullscreen">
    <div class="image-fallback lazy" style="background-image:url('/wp-content/themes/ideaiseverything/assets/images/placeholder.png');" data-original="//images.ctfassets.net/s4tfh42p5tji/476TiFLdksWay26WCqWMiM/f74bcf01e0b31195c2e58df4ab0f5c89/web-gl-fallback.png"></div>
    <canvas id="webglBackground"></canvas>

    <script type="x-shader/x-vertex" id="wrapVertexShader">
        attribute float size;
        attribute vec3 color;
        varying vec3 vColor;
        void main() {
            vColor = color;
            vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
            gl_PointSize = size * ( 350.0 / - mvPosition.z );
            gl_Position = projectionMatrix * mvPosition;
        }
    </script>
    <script type="x-shader/x-fragment" id="wrapFragmentShader">
        varying vec3 vColor;
        uniform sampler2D texture;
        void main(){
            vec4 textureColor = texture2D( texture, gl_PointCoord );
            if ( textureColor.a < 0.3 ) discard;
            vec4 color = vec4(vColor.xyz, 1.0) * textureColor;
            gl_FragColor = color;
        }
    </script>

    <script type="text/javascript" src="/wp-content/themes/ideaiseverything/assets/interactive/three.min.js"></script>
    <script type="text/javascript" src="/wp-content/themes/ideaiseverything/assets/interactive/detector.js"></script>
    <script type="text/javascript" src="/wp-content/themes/ideaiseverything/assets/interactive/tweenmax.min.js"></script>
    <script type="text/javascript" src="/wp-content/themes/ideaiseverything/assets/interactive/webgl-background.js"></script>

</section>

This isn't my code by the way, it's from a clients site and they want the above canvas to show on their portfolio site so I've been given the code to work with. Problem is though it's now firing on ajax, I've even tried the 'inline: true' but this strips the ID attribute from the script tag which is integral.

You can see the test page here: http://ideais.nealfletcher.co.uk/test/ Which works on page load but not after ajax call, it's a bit of a head scratcher as to the best possible method to get this working with ajaxify...

[arvgta]

Just some quick feedback - I'll get into this in-depth asap:

Pertaining to inline scripts:

• setting inline: true should not make a difference at all, because it is the default
• while handling the type attribute is supported, the id is not yet

Would it help you to support the id attribute in a new version? While we're at it, do you think supporting the class attribute would make sense, too?

[cliffstudio]

OK great!

Hmm I suppose both class and ID would be handy, they are needed in this instance though as there's this line of code in one of the files:

vertexShader: document.getElementById('wrapVertexShader').textContent,
fragmentShader: document.getElementById('wrapFragmentShader').textContent,

which calls for those two inline scripts.

[arvgta]

Alright, great stuff! I'll make the change the day after tomorrow, including the class attribute. Is that alright?

[cliffstudio]

Yep that's perfect :) Do you think that'll solve the problems I'm having on the given link though?

[arvgta]

It's worth a try and sounds like a necessary enhancement to Ajaxify either way...

[arvgta]

@nealfletcher:

The good news is, that I might be able to create a new draft today already. But I would like to make one more handshake before starting:

I researched the web thoroughly for the differences between the jQuery methods attr() and prop() and am just simply more confused than before...

You seem to know your HTML / jQuery. Maybe you can shed some light into the following questions:

• I am currently using prop() to retrieve the type attribute of inline scripts. Is that alright?

When regarding the following attributes of an inline script:

• id and
• class

...should I use attr() or prop() in order to retrieve them?

Thanks in advance!

[cliffstudio]

Ah amazing news! Well personally I always use attr for this purpose and have never had any issues. So id recommend attr over prop but that’s only from experience :)

[arvgta]

Done -> you can view the changes in the pull request.

Thanks for your guidance - I have used attr() for the new attributes (id and class) However, I have left the prop() method active for the type attribute. (Because nobody has complained so far)

I have also done a brief test against 4nf.org - seems to work (4nf.org does not address the new logic though)

If it doesn't work immediately, please feel free to fiddle around a bit with the new logic...

Thanks once more for raising this issue, which I need to address anyway...

In the event of success, I'll create a new corresponding minified file and probably a new version...

[arvgta]

@nealfletcher

I presume, that this issue may have been solved in course of the newest release (7.2.5) Feel free to test!