Question

我想打开和关闭MDL toast，而不是使用MDL usage guide中指示的超时属性。原因是我希望在地理定位发生时保留吐司，有时需要10秒以上，其他时间则在1秒内发生。

知道如何做到这一点？

Answer 1

我找到的q＆amp; d解决方案，在sb对象上调用cleanup_方法。

使用此解决方案，我可以显示sb，单击动作处理程序以隐藏它，然后重新触发动作以显示它没有任何问题。

var snackbar = form.querySelector("[class*='snackbar']");
if (snackbar) {
  var data = {
    message: 'Wrong username or password',
    timeout: 20000,
    actionHandler: function(ev){
      // snackbar.classList.remove("mdl-snackbar--active")
      snackbar.MaterialSnackbar.cleanup_()
    },
    actionText: 'Ok'
  };
  snackbar.MaterialSnackbar.showSnackbar(data);
}

由于cleanup_不是公共API的一部分，我认为值得用一些小支票将其括起来以避免灾难。

snackbar.MaterialSnackbar.cleanup_ 
&& snackbar.MaterialSnackbar.cleanup_()
!snackbar.MaterialSnackbar.cleanup_ 
&& snackbar.classList.remove("mdl-snackbar--active")

Answer 2

让它如此工作：我基本上在吐司上设置30秒超时，假设我的地理定位和georesults（GeoFire）将花费不超过30秒。

我获取返回的地图标记数组的长度，并将其乘以javascript超时事件。我终于删除了mdl-snackbar - active来隐藏吐司。 ~~所以，基本上 - 它可以工作。~~

已更新

以上实际上存在一个主要问题，即在长时间超时完成之前不会显示额外的吐司。我无法弄清楚如何应用clearTimeout() method来修复它，所以我找到了一个有效的解决方案 - 通过切换mdl-snackbar - 活动类来触发吐司上下 - 不需要定时器设置。

因此，使用此代码正常调用toast，只需使用tools.toast（'hello world'，error，3000）。以编程方式分别打开和关闭toast调用tools.toastUp（'hey'）和tools.toastDown（）。因此，您可以在承诺解决之后调用tools.toastDown ......

var config = (function() {
    return {
        timeout: 50, //in milliseconds
        radius: 96, //in kilometers
    };
})(); 
var tools = (function() {
    return {
        toast: function(msg,obj,timeout){
            var snackbarContainer = document.querySelector('#toast'); //toast div
            if(!obj){obj = ''}
            if(!timeout){timeout = 2750}
            data = {
                message: msg + obj,
                timeout: timeout
            };
            snackbarContainer.MaterialSnackbar.showSnackbar(data);
        },
        toastUp: function(msg){
            var toast = document.querySelector('#toast');
            var snackbarText = document.querySelector('.mdl-snackbar__text');
            snackbarText.innerHTML = msg;
            toast.classList.add("mdl-snackbar--active");

        },
        toastDown: function(count) {
            setTimeout(function () {
                var toast = document.getElementById("toast");
                toast.classList.remove("mdl-snackbar--active");
            }, config.timeout * count);
        },
    };
})();

如果你想激活tools.toastDown after a timeout loop，你可以这样做：

function drop(filteredMeetings) {
    tools.clearMarkers(true);
    for (var i = 0; i < filteredMeetings.length; i++) {
        //drop toast once markers all dropped
        if(i === filteredMeetings.length - 1) {
            tools.toastDown(i);
        } 
        tools.addMarkerWithTimeout(filteredMeetings[i], i * config.timeout);
    }
}

Material Design Lite - 以编程方式打开和关闭Toast

2 个答案: