How can I use a Muse param to do a boolean comparison in order to run a JS function?

Question

I need Adobe Muse widget that will run a function based on true or false.
Maybe this could help http://adobe-muse.github.io/MuCowDocs/#id-bool-

<parameters>
    <bool name="rwindow" label="Resize Window" defaultValue="true">
        <trueVal value="true"/>
        <falseVal value="false"/>
    </bool>
</parameters>

I need something like this:

if(true) {
    alert('function on');
    } else if(false) {
    alert('function off');
}

Thank you very much for you time and patience.

Answer 1

Some general observations.. You have some syntax errors and you don't need the if(false). That will never be evaluated and at that point there is no function to return from. And your script tag is missing a closing >.

As of jQuery 1.7, .on is preferred to .bind.

To reload from the server, not cache, you need reload(true)

Your timeout code looks OK.

I'm not a Muse expert, but you need to use {param} notation to get the params into your code.

And as discovered by working through a simpler example (attached below), to use a Muse param in a string comparison, you need to wrap it in quotes: if ("{param_wresize}" == "true") This presumably generates the JS,

if ("true" == "true") // Evaluates to true 

or in the case of the other param setting,

if ("false" == "true") // Evaluates to false

So we get something like:

<?xml version="1.0" encoding="UTF-8"?>
<HTMLWidget name="Resize Window" formatNumber="2" localization="none"
    creator="Mukos" defaultWidth="30" defaultHeight="30"
    isResizable="false">

    <parameters>
        <separator/>
        <bool name="wresize" label="Resize Window" defaultValue="true">
            <trueVal value="true"/>
            <falseVal value="false"/>
        </bool>
    </parameters>

    <bodyEndHTML>
        <![CDATA[
            <script type="text/javascript">
                if ("{param_wresize}" == "true" ) {
                    $(window).on('resize', function(e) {
                        if (window.RT) clearTimeout(window.RT);
                        window.RT = setTimeout(function() {
                            this.location.reload(true);
                        }, 200);
                    });
                }
            </script>
        ]]>
    </bodyEndHTML>
</HTMLWidget>

You can try that and see if it works, but I can't say it will or not. This is what made me suggest the XY problem in the comments above. You have asked quite specifically about how to run a function based on a parameter value. But what's the actual problem you're trying to solve? You might be going about it the wrong way. Any info you have about your intentions would be useful.

For example, the pattern of reloading on a resize might be to fix some kind of layout issue, maybe to do with a responsive design. Muse isn't great at building responsive websites. There might be some other way of tackling this problem.

---

Simpler version proposed by Mukos. Try it like this:

<?xml version="1.0" encoding="UTF-8"?>
<HTMLWidget name="Resize Window" formatNumber="2" localization="none"
    creator="Mukos" defaultWidth="30" defaultHeight="30"
    isResizable="false">

    <parameters>
        <separator/>
        <bool name="wresize" label="Resize Window" defaultValue="true">
            <trueVal value="true"/>
            <falseVal value="false"/>
        </bool>
    </parameters>

    <bodyEndHTML>
        <![CDATA[
            <script type="text/javascript">
                if ("{param_wresize}" == "true" ) {
                    alert("true");
                }
                else {
                    alert("false");
                }
            </script>
        ]]>
    </bodyEndHTML>
</HTMLWidget>