Hide Snackbar when another one is clicked

Question

here is my code for three Snackbars using the Material Design Lite component library :

(function() {
    'use strict';
    window['counter'] = 0;
    var snackbarContainer = document.querySelector('#sb-message-box');
    var showToastButton = document.querySelector('.button1');
    showToastButton.addEventListener('click', function() {
        'use strict';
        var data = {
            message: 'Example Message #1',
            timeout: 6000
        };
        snackbarContainer.MaterialSnackbar.showSnackbar(data);
    });
}());

(function() {
    'use strict';
    window['counter'] = 0;
    var snackbarContainer = document.querySelector('#sb-message-box');
    var showToastButton = document.querySelector('.button2');
    showToastButton.addEventListener('click', function() {
        'use strict';
        var data = {
            message: 'Example Message #2',
            timeout: 6000
        };
        snackbarContainer.MaterialSnackbar.showSnackbar(data);
    });
}());

(function() {
    'use strict';
    window['counter'] = 0;
    var snackbarContainer = document.querySelector('#sb-message-box');
    var showToastButton = document.querySelector('.button3');
    showToastButton.addEventListener('click', function() {
        'use strict';
        var data = {
            message: 'Example Message #3',
            timeout: 6000
        };
        snackbarContainer.MaterialSnackbar.showSnackbar(data);
    });
}());

Now I would like to hide one Snackbar as soon as another one is clicked. Currently, the divs are shown one after the other as soon as the 6000ms are up. Can you please help me on this one? Thanks so much!

Answer 1

I too ran into this issue. After some digging, I came up with a little hack.

Use the following code to update the current notification for a new one.

Replace where you'd normally use snackbarContainer.MaterialSnackbar.showSnackbar(data); with:

snackbarContainer.MaterialSnackbar.cleanup_();
setTimeout(function(){
    snackbarContainer.MaterialSnackbar.showSnackbar(data);
}, snackbarContainer.MaterialSnackbar.Constant_.ANIMATION_LENGTH)

I'm new to javascript, but it seems to work for me.

Edit: It seems like this is not a foolproof method, when the time-out expires on the previous notification, it closes the new one. I don't have an answer for this yet.

Edit 2: Not foolproof, but gets you going, you need to make some changes to material.js for this to work:

Change 1: Somewhere in MaterialSnackbar = function MaterialSnackbar(element)

Change 2: At the start of MaterialSnackbar.prototype.cleanup_

Change 3: Replace your post code with this.

    snackbarContainer.MaterialSnackbar.cleanup_();
    snackbarContainer.MaterialSnackbar.skipClearing++;
    setTimeout(function(){
        snackbarContainer.MaterialSnackbar.showSnackbar(data);
    }, snackbarContainer.MaterialSnackbar.Constant_.ANIMATION_LENGTH)

I hope this helps.

Answer 2

Given the API provided by this SnackBar component, it is only plossible to show the alert and not possible to hide it. I would suggest either switching to a better component (this one is excessively simplistic) or hacking your way around it by creating a function that directly destroys all the existing alerts before displaying the new one.

Answer 3

There is a slightly hacky approach to accomplish this.

var snackbarContainer = document.querySelector('#toast');

Let us define a handler which will handle the callback to hide the snackbar,

var handler = function(event) {
    snackbarContainer.classList.remove('mdl-snackbar--active');
    snackbarContainer.setAttribute("aria-hidden", "true");
};

Now, let's show the snackbar as follows,

var data = {
    message: 'Snack time!',
    timeout: 2000,
    actionHandler: handler,
    actionText: 'Dismiss'
};
snackbarContainer.MaterialSnackbar.showSnackbar(data);

That's all!

Answer 4

In the current version of Material Design lite you can just call

mySnackbar.MaterialSnackbar.cleanup_();

and it will hide smoothly.