Material Design Lite - プログラムで開いて閉じるToast

Question

MDL usage guideに示されているようにtimeoutプロパティを使用するのではなく、MDLトーストを開いて閉じたいと思います。理由は、ジオロケーションが発生している間にトーストを残しておきたい場合があります。時には10秒以上かかる場合もあります。

どのようにこれを行うことができますか？

Answer 1

私は基本的に、私のジオロケーションとgeoresults（GeoFire）が30秒以上かかると仮定してトーストで30秒のタイムアウトを設定しました。

戻ったマップマーカーの配列の長さを取得し、javascriptのタイムアウトイベントでそれを掛けます。私は最終的にトーストを隠すmdl-snackbar - activeを削除します。 だから、基本的には動作します。

以上更新

は実際に長いタイムアウトが完了するまで、その追加の乾杯の主要な問題は表示されませんでした。 clearTimeout() methodを適用して修正する方法を見つけられなかったので、mdl-snackbar-activeクラスをトグルするだけでトーアを起動し、タイマー設定は必要ありません。

このコードを使用して通常通りトーストを呼び出すには、tools.toast（ 'hello world'、error、3000）を使用します。 toastUp（ 'hey'）とtools.toastDown（）をそれぞれ呼び出して、トーストをプログラムで開き、閉じます。約束は解決か何かの後ので、あなたは...あなたはafter a timeout loopを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を呼ぶかもしれない、あなたが行うことができます：

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); 
    } 
} 

Answer 2

Q & D私が見つけた解決策は、sbオブジェクトに対してcleanup_メソッドを呼び出します。

このソリューションでは、私はsbを表示することができます、それを隠すためにアクションハンドラをクリックして、問題を表示するためにアクションをトリガします。 cleanup_として

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); 
} 

パブリックAPIの一部ではない、私はそれが価値が災害を避けるために、いくつかの小さなチェックでこれを包囲するように思います。

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