Bug in vertical align action

I found a bug in the vertical align action, when used together with horizontal page centering:

It tries to remove the “height” parameter from the pageDiv tag to work with Safari. But the pageDiv tag in my FW 5 output has only a “min-height” parameter. That leaves to an invalid “min-” parameter.

I simply commented out the following line in the action:

// pageDiv.style = RemoveStyleParameter(pageDiv.style,”height”); // Height stuffs up Safari (applied if page horizontally aligned as well)…

Now it works together with center page aligning. The min-height parameter doesn’t seem to stuff up Safari.

There is still an issue with layered item. To do proper vertical aligning it needs at least one non layered item at the bottom of the layout. What it does is to place a table within the PageDiv tag thus preventing the height of the PageDiv to collapse.

To work on layered items without the help of this non-layered item, the min-height parameter of the PageDiv tag has to be replaced with the height parameter set to the absolute height of the PageDiv.

To calculate the height of the PageDiv currently I only can iterate through all div tags enclosed by the PageDiv to look for the top and height parameters. If anyone knows an easier way to calculate the height, please drop a line.

Peter

quote

Thanks Peter, I’ll get that logged.

Joe

On 9 Sep 2008, at 12:08, Peter Gutbrod wrote:

I found a bug in the vertical align action, when used together with horizontal page centering:

It tries to remove the “height” parameter from the pageDiv tag to work with Safari. But the pageDiv tag in my FW 5 output has only a “min-height” parameter. That leaves to an invalid “min-” parameter.

I simply commented out the following line in the action:

// pageDiv.style = RemoveStyleParameter(pageDiv.style,”height”); // Height stuffs up Safari (applied if page horizontally aligned as well)…

Now it works together with center page aligning. The min-height parameter doesn’t seem to stuff up Safari.

There is still an issue with layered item. To do proper vertical aligning it needs at least one non layered item at the bottom of the layout. What it does is to place a table within the PageDiv tag thus preventing the height of the PageDiv to collapse.

To work on layered items without the help of this non-layered item, the min-height parameter of the PageDiv tag has to be replaced with the height parameter set to the absolute height of the PageDiv.

To calculate the height of the PageDiv currently I only can iterate through all div tags enclosed by the PageDiv to look for the top and height parameters. If anyone knows an easier way to calculate the height, please drop a line.

Peter

quote

Hi Joe,

I fixed the issue with the layered items as well.

Shall I post the source-code, so others can give it try?

Peter

quote

Sure, thanks.

Joe

On 9 Sep 2008, at 13:25, Peter Gutbrod wrote:

Hi Joe,

I fixed the issue with the layered items as well.

Shall I post the source-code, so others can give it try?

Peter

quote

Joe,

what is the tag to mark code when posting to this board?

Or probably more convenient for other’s to try: Is there a repository to upload the patched action and just post a link?

Peter

quote

You need to use 4 spaces before each line.

Joe

On 11 Sep 2008, at 08:03, Peter Gutbrod wrote:

Joe,

what is the tag to mark code when posting to this board?

Or probably more convenient for other’s to try: Is there a repository to upload the patched action and just post a link?

Peter

quote

On 11 Sep 2008, 8:27 am, Joe Billings wrote:

You need to use 4 spaces before each line.

Joe

OK so here comes the source:

 <page-action name="Vertical Alignment" title="Vertical Alignment">
<action-version version="2.2 beta">
'Vertical Align' Action
Softpress Systems Limited 1999-2006
Patched by Peter Gutbrod 09.09.08
</action-version>
<action-popup name="Vertical Align">
<value name="Top" value="top" default/>
<value name="Centre" value="center"/>
<value name="Bottom" value="bottom"/>
</action-popup>
<action-javascript>

var gPageHasLayers = pageHasLayers();


// Gets a "CSS" attribute such as "position:absolute" from a tag value
// returns NULL if the attribute can not be found
function GetCSSAttribute(tag, fieldName, attributeName)
{
    if (tag==null)
        return null;
    var tagField = tag[fieldName];
    if (tagField == null)
        return null;
    else
    {
        var tagField = tagField.toString();
        var leftPos = tagField.indexOf(attributeName+":");
        if (leftPos > 1)
            leftPos = tagField.indexOf(" "+attributeName+":") + 1;
        if (leftPos > 0)
        {
            leftPos += attributeName.length+1;
            var rightPos = tagField.indexOf(";", leftPos);
            if (rightPos == -1)
                rightPos = tagField.length-1;
            return tagField.slice(leftPos, rightPos);
        }
        return null;
    }
}


function pageHasLayers()
{
    var bLayers = false;
    var item;
    for(var i in fwPage.fwItems){
        item = fwPage.fwItems[i];
        if(item.fwIsPublished && item.fwIsLayer && item.fwTitle != "PageDiv"){
            bLayers = true;
            break;
        }
    }

    return bLayers;
}

function getActualPageHeight()
{
    var height=0;
    if(fwPage.fwItems.fwLength > 0){
        var bottom = fwPage.fwItems[0].fwBottom;

        var item;
        for(var i in fwPage.fwItems){
            item = fwPage.fwItems[i];
            if(item.fwIsPublished)
                bottom = item.fwBottom > bottom ? item.fwBottom : bottom;
        }

        height = bottom;
    }

    return height;
}

function findPageDiv()
{
    var divTags = fwDocument.fwTags.fwFindAll("div");
    var divId;
    for(var i in divTags){
        if(divTags[i].id == '"PageDiv"')
            return divTags[i];
    }

    return null;
}

function SetStyleParameter(style, para, value)
{
    var styleStr = style ? style.toString() : "";
    styleStr = styleStr ? styleStr.substring(styleStr.indexOf('"') + 1, styleStr.lastIndexOf('"')) : "";

    var startIndex = styleStr.indexOf(para);

    if (startIndex == -1)
    {
        var index = styleStr.lastIndexOf(";");

        if (index == -1)
            return '"' + para + ":" + value + ";" + styleStr + '"';

        var newStyle = styleStr.substring(0, index + 1);
        newStyle += para + ":" + value + ";";
        newStyle += styleStr.substring(index + 1, styleStr.length);

        return '"' + newStyle + '"';
    }

    startIndex += para.length;

    var newStyle = styleStr.substring(0, startIndex);
    newStyle += ":" + value + ";";

    var endIndex = styleStr.indexOf(";", startIndex);

    if (endIndex != -1)
        newStyle += styleStr.substring(endIndex + 1, styleStr.length);

    return '"' + newStyle + '"';
}

function RemoveStyleParameter(style, para)
{
    var styleStr = style ? style.toString() : "";
    styleStr = styleStr ? styleStr.substring(styleStr.indexOf('"') + 1, styleStr.lastIndexOf('"')) : "";

    var startIndex = styleStr.indexOf(para);

    if (startIndex == -1)
        return style;

    var newStyle = styleStr.substring(0, startIndex);
    var endIndex = styleStr.indexOf(";", startIndex);

    if (endIndex != -1)
        newStyle += styleStr.substring(endIndex + 1, styleStr.length);

    return '"' + newStyle + '"';
}

function fwAfterStartBody()
{
    if(!gPageHasLayers){
        var bodyTag = fwDocument.fwTags.fwFind("body");
        if(bodyTag){
            var align = fwParameters["Vertical Align"];
            if(fwPage.fwHTMLLevel > 1){
                if(align == "center")
                    align = "middle";

                // Need to make the body 100% height for IE's benefit...
                bodyTag.style = SetStyleParameter(bodyTag.style,"height","100%");
                bodyTag.style = SetStyleParameter(bodyTag.style,"margin","0px");

                bodyTag.fwAddRawOpt('<div style="position:absolute;height:100%;width:100%;"><table style="position:absolute;height:100%;width:100%;border:0px;"><tr><td valign="' + align + '">');
            }
            else{
                bodyTag.fwAddRawOpt('<table width="99%" height="100%"><tr><td valign=' + align + '>');
            }
        }
    }
}

function fwBeforeEndBody()
{
    if(!gPageHasLayers){
        var bodyTag = fwDocument.fwTags.fwFind("body");
        if(bodyTag){
            bodyTag.fwAddRawOpt('</td></tr></table>');
            if(fwPage.fwHTMLLevel > 1){
                bodyTag.fwAddRawOpt('<div>');

                 var pageDiv = findPageDiv();
                 if(pageDiv){
                    var divTags = pageDiv.fwFindAll("div");

                    var pageTop = 100000;
                    var pageBottom = 0;
                    for(var i in divTags){
                        var divTop = parseInt (GetCSSAttribute(divTags[i], "style" , "top"));
                        var divHeight = parseInt (GetCSSAttribute(divTags[i], "style" , "height"));

                        pageTop = divTop < pageTop ? divTop : pageTop;
                        pageBottom = (divTop + divHeight) > pageBottom ? (divTop + divHeight) : pageBottom;

                    }
                    var pageHeight = (pageBottom - pageTop)+'px';

                    pageDiv.style = RemoveStyleParameter(pageDiv.style,"min-height");
                    pageDiv.style = SetStyleParameter(pageDiv.style,"height",pageHeight);
                }
            }
        }
    }
}

function fwBeforeEndHTML()
{
    if(gPageHasLayers)
    {
        var align = fwParameters["Vertical Align"];

        if(fwPage.fwHTMLLevel > 1){ // 4.01 and XHTML
            if(align == "center" || align == "bottom"){
                var body = fwDocument.fwTags.fwFind("body");
                if(body){
                    var pageDiv = fwDocument.fwTags.fwFind("div");

                    if(pageDiv){
                        var divContent = pageDiv.fwAddEnclosing("div",true);
                        var divOuter = divContent.fwAddEnclosing("div",true);

                        var height = getActualPageHeight() + 1;

                        if(align == "center"){
                            divOuter.style = '"background-color:transparent;position:absolute;top:50%;left:0px;width:100%;height:1px;display:block;"';
                            divContent.style = '"position:absolute;visibility:visible;height:' + height + 'px;top:' + (-height/2) + 'px;width:100%;"';
                        }
                        else{   // bottom
                            divOuter.style = '"background-color:transparent;position:absolute;bottom:0px;left:0px;width:100%;height:1px;display:block;"';
                            divContent.style = '"position:absolute;visibility:visible;height:' + height + 'px;top:' + (-height) + 'px;width:100%;"';
                            divContent.style = '"position:absolute;visibility:visible;height:' + height + 'px;bottom:0px;width:100%;"';
                        }
                    }
                }
            }
        }
    }
}
</action-javascript>
<page-action>

quote

Hmm, the parser seems to have its problems, even with the 4 spaces thing.

Peter

quote

The formatter does its best, but for something this long and involved, you might want to use Pastie: http://pastie.org

Walter

On Sep 11, 2008, at 8:30 AM, Peter Gutbrod wrote:

Hmm, the parser seems to have its problems, even with the 4 spaces thing.

Peter

quote