CODEWITHSUNDEEP
jqueryattributesgsap
user5991491
user5991491

Reputation:

How to play greensock timeline max based on a data attribute

Currently I am not getting an answer at the greensock forum. I have a searchbar, which should expand by clicking on an icon and close again, when clicking anywhere at the body, but only, when the searchbar is expanded.

When I open the searchbar I am facing two problems for the closing animation:

(1) The closing animation is being resetted when I click on the body element while the closing animation is running.

(2) The closing animation runs, even if the searchbar is not expanded.

I tried to solve this issues by adding a data attribute to the container for the different states (open, true/false) but somehow it does not work as intended. Is there any logic error in my code?

(function($) {

var $irpsearch = $('#irp-newssearch-container'),
    $irpsearchinput = $('#irp-searchform-input'),
    $search_icon = $('.irp-news-search-icon'),
    $btn_container = $('.irp-filter-buttons'),
    $filter_btn = $('.filter-btn'),
    $search_seperator = $('.irp-search-seperator')
    $body = $('body');

    var openSearchAnimation = new TimelineMax({
            paused: true
        })
        openSearchAnimation
            .staggerTo($filter_btn, .5, {scale: 0.7 ,opacity: 0,ease: Back.easeInOut},-0.1)
            .set($btn_container,{'display': 'none'})
            .to($search_seperator, .3, {opacity: 0, ease: Expo.easeOut}, '-=0.6')
            .to($search_icon, .5, {backgroundColor:"#ffffff", ease: Power0.easeNone}, '-=1.0')
            .to($irpsearch, 1.0, {width: '100%', ease: Power3.easeOut}, '-=0.1');

    openSearch = function () {
        $irpsearch.data('open', true);
        openSearchAnimation.play();
        $irpsearchinput.focus();
        return false;
    },
    closeSearch = function() {
        $irpsearch.data('open', false);
        openSearchAnimation.reverse(0);
    }

/*$irpsearchinput.on('click', function(e) {
    e.stopPropagation();
    });*/

$irpsearch.on('click', function(e) {
    e.stopPropagation();
    if (!$irpsearch.data('open')) {

        openSearch();

        /* HTML Click */
        $body.off('click').on('click', function(e) {
            closeSearch();
        });

        /* Escape Hide */
        $( document ).on( 'keydown', function ( e ) {
            if ( e.keyCode === 27 ) { // ESC
                closeSearch();
            }
        });


    } else {
        if ($irpsearchinput.val() === '') {
            closeSearch();
            return false;
        }
    }
});

})(jQuery)

Codepen to illustrate the issues: https://codepen.io/anon/pen/YQqQWm

Upvotes: 0

Views: 219

Answers (1)

Ivan Modric
Ivan Modric

Reputation: 619

I've changed a few things and hope this is what you're looking for.

The main difference is that we now bind our events with .one(...) instead of .on(...). This means that the event will only get executed once and then destroyed and we don't have to keep track of the state.

When the site loads we bind $irpsearchinput.one('focus', ...). The event will be executed when the input gets focus.

Within the function openSearch we bind $ripsearchinput.one('blur', ...) (executed when the input loses focus) and inside the function closeSearch we again bind $irpsearchinput.one('focus', ...).

Lastly we make sure that when you press ESC the input loses focus (and thereby triggers the blur-binding.

Here's a fork of your pen.

Upvotes: 1

Related Questions