Improving Header-Footer-Layout

[pasine]

I am facing a couple of problems with Header-Footer-Layout (HFL).

1. I am using a scrollview as content view, but it overlaps the header on scrolling. I tried to change the behavior using a translate=[0, 0, 1], but without luck. Using the same layout with pure Famo.us, I can do it successfully.
2. Going through the Timbre example in the Famo.us University, it shows how to add children surfaces. It does it by adding each surface to header and footer with

header.content.add(childSurface).

This is not currently possible with the HFL, since the directive just allows to add three surfaces.

function(data) {
    _numberOfChildren++;
     if (_numberOfChildren === 1) {
         isolate.renderNode.header.add(data.renderGate);
     } else if (_numberOfChildren === 2){
          isolate.renderNode.content.add(data.renderGate);
     } else if (_numberOfChildren === 3){
          isolate.renderNode.footer.add(data.renderGate);
     } else {
          throw new Error('fa-header-footer-layout can accept no more than 3 children');
     }
}

Wouldn't be possible to add a parameter to the directive to allow user to define in which element the view should be added to? Something like:

  <fa-header-footer-layout fa-options="{headerSize: 75, footerSize: 75}">

    <!-- header -->
    <fa-surface fa-background-color="'red'" fa-header>Header</fa-surface>
    <fa-surface fa-background-color="'red'" fa-header>Left Button</fa-surface>
    <fa-surface fa-background-color="'red'" fa-header>Right Button</fa-surface>

    <!-- content -->
    <fa-surface fa-background-color="'blue'" fa-content>Content</fa-surface>

    <!-- footer -->
    <fa-surface fa-background-color="'green'" fa-footer>Footer</fa-surface>

  </fa-header-footer-layout>

or perhaps

    <fa-surface-header fa-background-color="'red'">Header</fa-surface-header>

or

    <fa-surface fa-background-color="'red'" fa-target="header">Header</fa-surface>

Then the loop could check and add the view to the right element.

[steveblue]

@pasine fa-header-footer-layout looks for three views or modifiers, or surfaces in sequence. You can use fa-view to group components. You will need fa-container-surface to clip the contents of a view.

<fa-app>
    <fa-header-footer-layout>

        <fa-modifier fa-size="[undefined, 50]">
        <fa-view>
          <fa-surface fa-background-color="'#dc322f'">
              Header
            </fa-surface>
            <fa-modifier fa-size="[50,50]">
            <fa-surface fa-background-color="'#dcdcdc'">
              Back
            </fa-surface>
            </fa-modifier>
            <fa-modifier fa-size="[50,50]" fa-origin="[1.0,0.0]" fa-align="[1.0,0.0]">
            <fa-surface fa-background-color="'#dcdcdc'">
              forward
            </fa-surface>
            </fa-modifier>
        </fa-view>
        </fa-modifier>

        <fa-grid-layout fa-options="myGridLayoutOptions">
            <fa-modifier ng-repeat="item in list">
                <fa-surface fa-background-color="item.bgColor">
                    {{item.content}}
                </fa-surface>
            </fa-modifier>
        </fa-grid-layout>

        <fa-modifier fa-size="[undefined, 75]">
            <fa-surface fa-background-color="'#859900'">
              Footer
            </fa-surface>
        </fa-modifier>

    </fa-header-footer-layout>
</fa-app>