Material Design Lite - Toast programmatisch öffnen und schließen

Question

Ich möchte MDL Toast öffnen und schließen, anstatt die Timeout-Eigenschaft zu verwenden, wie in der MDL usage guide angegeben. Der Grund ist, dass ich möchte, dass der Toast bleibt, während Geolocation stattfindet, was manchmal mehr als 10 Sekunden dauert und andere Male in 1 Sekunde passiert.

Irgendeine Idee, wie dies getan werden könnte?

Answer 1

Hat es funktioniert so: Ich habe im Grunde eine 30-Sekunden-Timeout auf dem Toast unter der Annahme, dass meine Geolocation und Georesult (GeoFire) dauert nicht länger als 30 Sekunden.

Ich bekomme die Länge der zurückgegebenen Array von Map-Markierungen und multiplizieren Sie diese durch die Javascript-Timeout-Ereignisse. Ich entferne schließlich mdl-snackbar - aktiv, die den Toast versteckt. Also, im Grunde - es funktioniert.

AKTUALISIERT

Die oben hatte tatsächlich ein großes Problem, dass zusätzliche Toast, bis das abgeschlossen lange Timeout nicht angezeigt werden soll. Ich konnte nicht herausfinden, wie man das clearTimeout() method anwendet, um es zu reparieren, also fand ich eine Lösung, die funktioniert - den Toast nach oben und unten durch einfaches Umschalten der mdl-Snackbar - aktive Klasse - keine Timer-Einstellung notwendig.

So Toast als normal mit diesem Code aufrufen, einfach tools.toast ('Hallo Welt', Fehler, 3000). So öffnen und schließen Sie Toast-Aufrufe tools.toastUp ('hey') bzw. tools.toastDown() programmatisch. So könnten Sie tools.toastDown rufen nach ein Versprechen löst oder etwas ...

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

Falls Sie after a timeout loop tools.toastDown schießen möchten, können Sie tun:

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

A q & d Lösung, die ich gefunden habe, rufen Sie die Methode cleanup_ für das Objekt sb auf.

Mit dieser Lösung kann ich den jdb zeigen, klicken Sie auf Action-Handler, um es auszublenden, und dann die Aktion auslösen, um es ohne Probleme anzuzeigen.

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

Als cleanup_ ist nicht Teil des öffentlichen api, ich denke, es lohnt sich dies mit einigen kleinen Kontrollen zu umschließen eine Katastrophe zu vermeiden.

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