dwoo template variables inside JavaScript?

Question

Hi everyone!

i have this code.

{if $loginUrl}
{literal}
<script type="text/javascript">
    var newwindow;
    var intId;
    function login() {
        var  screenX    = typeof window.screenX != 'undefined' ? window.screenX : window.screenLeft,
             screenY    = typeof window.screenY != 'undefined' ? window.screenY : window.screenTop,
             outerWidth = typeof window.outerWidth != 'undefined' ? window.outerWidth : document.body.clientWidth,
             outerHeight = typeof window.outerHeight != 'undefined' ? window.outerHeight : (document.body.clientHeight - 22),
             width    = 500,
             height   = 270,
             left     = parseInt(screenX + ((outerWidth - width) / 2), 10),
             top      = parseInt(screenY + ((outerHeight - height) / 2.5), 10),
             features = (
                'width=' + width +
                ',height=' + height +
                ',left=' + left +
                ',top=' + top
              );

        newwindow=window.open('{$loginUrl}','Login by facebook',features);

        if (window.focus) {newwindow.focus()}
        return false;
    }
</script>
{/literal}
{/if}

It is dwoo templates, i wonder how can i use my dwoo variables inside javascript? im trying to do it just at you can see at the code, but it doesnt work. I need to warp my code between {literal} so it can work.

Answer 1

You can just do {/literal}{$the_varible}{literal} to insert variables inside the literal tags.

Answer 2

Hm.. found a "fix" but it is hardcoded and there should be something better:

    {if $loginUrl}
{literal}
<script type="text/javascript">
    var newwindow;
    var intId;
    function login() {
        var  screenX    = typeof window.screenX != 'undefined' ? window.screenX : window.screenLeft,
             screenY    = typeof window.screenY != 'undefined' ? window.screenY : window.screenTop,
             outerWidth = typeof window.outerWidth != 'undefined' ? window.outerWidth : document.body.clientWidth,
             outerHeight = typeof window.outerHeight != 'undefined' ? window.outerHeight : (document.body.clientHeight - 22),
             width    = 500,
             height   = 270,
             left     = parseInt(screenX + ((outerWidth - width) / 2), 10),
             top      = parseInt(screenY + ((outerHeight - height) / 2.5), 10),
             features = (
                'width=' + width +
                ',height=' + height +
                ',left=' + left +
                ',top=' + top
              );

        newwindow=window.open({/literal}'{$loginUrl}'{literal},'Login by facebook',features);

        if (window.focus) {newwindow.focus()}
        return false;
    }
</script>
{/literal}
{/if}

Just.. ugly.

Answer 3

Remove the {literal} tags. Dwoo is smart enough about that to avoid messing up your javascript unless you use object literals in one line.

To be exact, { followed by any space, tab or line break will not be parsed by Dwoo. The only problem is if you do something like :

{foo: "bar"}

In which case you have a few options to prevent Dwoo parsing:

\{foo: "bar"} // escape the {
{ foo: "bar"} // add a space so it doesn't match it
{literal}{foo: "bar"}{/literal} // wrap with literal, but then you can't use vars inside again

// or expand it to use multiple lines, which is usually more readable anyway
{
    foo: "bar"
}