Need some javascript wizardry

[Jon]

I think it's possible from doing a bit of research but I've not found anything that fits the bill exactly.

Forum code is output like this:

<pre class="prettyprint lang-autoit ipsCode">
    stuff
</pre>

The two constant classes are prettyprint and ipsCode. After prettify has run the 'prettyprinted' class is also added.

I need a javascript that can cycle though the <pre> tags on a page and if they contain more than 50 lines then wrap them with some additional html something like this (the old geshi code is used as an example)

<div class='geshitop'>
    <button onclick='geshiExpand(this);'>expand</button>
    <button onclick='geshiCollapse(this)' style='display: none'>collapse</button>
    <button onclick='geshiPopup(this)'>popup</button>
</div>
<div class='autoit-code-container'>
<pre class="......">
</pre>          
</div>

Prettify runs after page load so anything this code does needs to cope with that. I'm not sure if that's possible - maybe I could modify the prettify source to call a function at the end. Also the pre tag and content will be being rewritten so we need make sure we go last. I can't control when prettify runs - it's buried in the forum.

Edited April 28, 2015 by Jon

[James]

Well...

1. When the document has loaded fine all pre tags and get the innerText content.
2. Count the amount of new lines.
3. If the lines >= 50 add the CSS.

That way even if the code is already ran through Prettify, it shouldn't matter because you're getting the "raw" source.

[MikahS]

easy way of getting line count:

var lines = $("pre").val().split("\n");

if you're working with pure js use a function like this to replicate jquery like syntax:

Function $(x) {
    var element = document.getElementsByTagName(x);
    return element;
}

example:

window.onload = function() {

    function $(x) {
        var element = document.getElementsByTagName(x);
        return element;
    }

    function ctLines(elems) {
        var lines;
        for (var i = 0; i <= elems.length; i++) {
            lines = elems[i].val().split("\n");
            if (lines >= 50) {
                // add the CSS as James has described
            }
        }
    }

        var Elmt = $('pre');
    ctLines(Elmt);
}

Disclaimer: Just started learning JS a month or so ago.

Edited April 28, 2015 by MikahS

[guinness]

That jQuery-like wrapper doesn't work, as there is no val() method in the element object. To create a native counterpart, well look at the jQuery implementation >> https://raw.githubusercontent.com/jquery/jquery/53aa87f3bf4284763405f3eb8affff296e55ba4f/src/attributes/val.js Yeah quite impressive!

[MikahS]

I see, thank you for noticing that @guinness.

Edited April 28, 2015 by MikahS

[guinness]

That's fine @MikahS. That notification system of @username is pretty awesome.

[Jon]

I've starting using the "Automatically follow content I reply to" option as well. That make's it so much easier to keep track.

[MikahS]

@guinness instead of val() would it be innerHTML? 

That notification system of @username is pretty awesome.

​Agreed, makes notifying others much easier.

[James]

Rather than val() shouldn't it be value()?

[guinness]

@guinness instead of val() would it be innerHTML? 

​Agreed, makes notifying others much easier.

​Look at the code I linked. val() has so many workarounds, but generally speaking it would be .value >> http://jsfiddle.net/gb8muehx/

[MikahS]

@James good point. .val() is jquery. .value is JS and does not use ().

@guinness Thanks for the example code. 

Edited April 28, 2015 by MikahS

[guinness]

Rather than val() shouldn't it be value()?

​Minus the brackets, yeah. You're the web guy not me

[James]

Meh, I'd be writing PHP all day

[Jon]

I've got half of this done, but am currently failing at the very easiest bit. Running a javascript function on click.

This is the code from the old forum that calls my custom function:

<button onclick="codePopup(this);">popup</button>

But that didn't work - it actually seemed to call some random function on the forum.

So I tried something simpler:

<button onclick="alert('Hello');">popup</button>

This prints the alert and then proceeds to call the same random function on the forum.

Eh?

[James]

There is most likely a button event already. You need to stop propagation after the click.

[Jon]

Adding type="button" to it seems to fix it. I think the default type is submit and that had events attached to it.

[James]

Adding type="button" to it seems to fix it. I think the default type is submit and that had events attached to it.

That's an easier way, but surprising they do it that way.

[James]

Actually... Thinking about it, button isn't a submit by default.

[Jon]

Boom

expandcollapse popup

(function() 
{
    preTags = document.querySelectorAll('pre.ipsCode');

    for(var i=0;i<preTags.length;i++) 
    {
        oldPre = preTags[i].outerHTML;

        autoitCodeTop = '<button type="button" onclick="autoitExpand(this);">expand</button>';
        autoitCodeTop += '<button type="button" onclick="autoitCollapse(this)" style="display: none">collapse</button>';
        autoitCodeTop += ' <button type="button" onclick="autoitPopup(this)">popup</button>';
        output = '<div class="autoitCodeTop">' + autoitCodeTop + '</div>' + oldPre;      

        preTags[i].outerHTML = output; 
    }

})();

    function autoitExpand(node) 
    {
        div_autoitCodeTop = node.parentNode;
        pre_ipscode = div_autoitCodeTop.nextSibling;
        
        // First sibling will should be the pre tag
        if (pre_ipscode.nodeName === 'PRE' && pre_ipscode.className.indexOf("ipsCode") > -1)
        {
            pre_ipscode.style.maxHeight = 'none';

            // Hide this node and display nextSibling (Collapse)
            node.style.display = "none";
            node.nextSibling.style.display = "";
        }
    }

    function autoitCollapse(node) 
    {
        div_autoitCodeTop = node.parentNode;
        pre_ipscode = div_autoitCodeTop.nextSibling;

        // First sibling will should be the pre tag
        if (pre_ipscode.nodeName === 'PRE' && pre_ipscode.className.indexOf("ipsCode") > -1)
        {
            pre_ipscode.style.maxHeight = '500px';

            // Hide this node and display nextSibling (Collapse)
            node.style.display = "none";
            node.previousSibling.style.display = "";
        }
    }

    function autoitPopup(node) 
    { 
        div_autoitCodeTop = node.parentNode;
        pre_ipscode = div_autoitCodeTop.nextSibling;

        // First sibling will should be the pre tag
        if (pre_ipscode.nodeName === 'PRE' && pre_ipscode.className.indexOf("ipsCode") > -1)
        {
            // Remove html formatting and change <br /> into \r\n
            text = pre_ipscode.innerHTML;
            text = text.replace(/<br.?\/?>/g, "\r\n");
            text = text.replace(/<\/?[^>]+(>|$)/g, "");

            node = '<pre>' + text + "</pre>";
            popup = window.open("", "Code", "width=800,height=600,scrollbars=yes,resizable=yes");
            popup.document.write(node);
            popup.document.close();
        }
    }

 

[Jon]

Oh, I forgot the line count bit. Doh.