CODEWITHSUNDEEP
polymer
showp1984
showp1984

Reputation: 378

How to hide header elements if core-scroll-header-panel is condensed?

My page is looking very similar to: https://www.polymer-project.org/components/core-scroll-header-panel/demo.html. The only difference is that my page has the keepCondensedHeader flag set.

What I want to do now (if at all possible): Hide the title (or any one of the elements shown in the condensed header) if the header is condensed.

Any pointers would be greatly appreciated.

Upvotes: 4

Views: 1133

Answers (1)

Justin XL
Justin XL

Reputation: 39006

Actually the javascript inside the demo file gives a very good hint of how something like this can be done easily.

I copied the whole html and js here with two more lines that hide the title when the header is condensed.

The reason that why I put 128 m as the translate Y is because the max header height is 192 d.height and the condensed height is 64 d.condensedHeight. When the header is condensed, it travels in y axis for a distance of 128 m (192 - 64 d.height - d.condensedHeight).

<body unresolved>
    <core-scroll-header-panel condenses keepcondensedheader>
        <core-toolbar class="tall">
            <core-icon-button icon="arrow-back"></core-icon-button>
            <div flex></div>
            <core-icon-button icon="search"></core-icon-button>
            <core-icon-button icon="more-vert"></core-icon-button>
            <div class="bottom indent title">Title</div>
        </core-toolbar>
        <div class="content">
            <sample-content size="100"></sample-content>
        </div>
    </core-scroll-header-panel>
    <script>
        // custom transformation: scale header's title
        var titleStyle = document.querySelector('.title').style;
        // added code - here we need to obtain the title div as well
        var title = document.querySelector('.title');

        addEventListener('core-header-transform', function (e) {
            var d = e.detail;
            var m = d.height - d.condensedHeight;
            var scale = Math.max(0.75, (m - d.y) / (m / 0.25) + 0.75);
            titleStyle.transform = titleStyle.webkitTransform =
                'scale(' + scale + ') translateZ(0)';

            // added code - here we hide the title when the header is condensed
            title.hidden = d.y == m;
        });

    </script>
</body>

Hope this helps!

Update

Actually now that I think about, it's probably a better idea to animate the opacity of the title rather than show/hide it. It would give much better user experience along with core-scroll-header-panel's smooth scrolling and fading background!

Thanks to core-animation it's quite straight forward.

First we need to include this reference.

<link rel="import" href="../core-animation/core-animation.html">

Then the definition of the fade in & out animations.

<body unresolved>
    <!--define the opacity animations-->
    <core-animation id="out" fill="forwards" duration="400">
        <core-animation-keyframe>
            <core-animation-prop name="opacity" value="1"></core-animation-prop>
        </core-animation-keyframe>
        <core-animation-keyframe>
            <core-animation-prop name="opacity" value="0"></core-animation-prop>
        </core-animation-keyframe>
    </core-animation>
    <core-animation id="in" fill="forwards" duration="400">
        <core-animation-keyframe>
            <core-animation-prop name="opacity" value="0"></core-animation-prop>
        </core-animation-keyframe>
        <core-animation-keyframe>
            <core-animation-prop name="opacity" value="1"></core-animation-prop>
        </core-animation-keyframe>
    </core-animation>

Lastly, we call them inside the core-header-transform handler.

// animation variables
var fadeIn, fadeOut;
// create a local bool to ensure the 'fade in' animation is only called once
var condensed = false;

// retrieve the animations and set their targets
addEventListener('polymer-ready', function (e) {
    fadeOut = document.getElementById('out');
    fadeOut.target = title;

    fadeIn = document.getElementById('in');
    fadeIn.target = title;
});

addEventListener('core-header-transform', function (e) {
    var d = e.detail;
    var m = d.height - d.condensedHeight;
    var scale = Math.max(0.75, (m - d.y) / (m / 0.25) + 0.75);
    titleStyle.transform = titleStyle.webkitTransform =
        'scale(' + scale + ') translateZ(0)';

    // when the header is condensed, we fade it out
    if (d.y == m) {
        condensed = true;
        fadeOut.play();
    }
    // otherwise, we fade it back in
    else {
        if (condensed) {
            condensed = false;
            fadeIn.play();
        }
    }
});

Upvotes: 3

Related Questions