Falsches Timing auf Multimaterial Design Lite Snackbar

Question

Ich arbeite an Benachrichtigungen, die zum Beispiel angezeigt wird, wenn eine Aktualisierung einer Symfony-Entität erfolgreich durchgeführt wurde.

Was ich jetzt getan ist hier (+ jsFiddle: https://jsfiddle.net/atierant/6e0s4rk1/15/):

var messagesTypes = { 
 
    "notice": ["This is a green NOTICE"], 
 
    "error": ["This is a red ERROR"], 
 
    "warning": ["This is a yellow WARNING"], 
 
    "info": ["This is a blue INFO"] 
 
}; 
 

 
var colorType = { 
 
    "info": { 
 
    "class": "mdl-color--blue-400", 
 
    "icon": "done" 
 
    }, 
 
    "error": { 
 
    "class": "mdl-color--red-400", 
 
    "icon": "error" 
 
    }, 
 
    "warning": { 
 
    "class": "mdl-color--amber-400", 
 
    "icon": "warning" 
 
    }, 
 
    "notice": { 
 
    "class": "mdl-color--green-400", 
 
    "icon": "done" 
 
    } 
 
}; 
 

 
(function() { 
 
    'use strict'; 
 
    var snackbarContainer = document.querySelector('#snackbar'); 
 
    var timeout = 2000; 
 
    var actionText = 'Ok'; 
 
    var handler = function(event) {}; 
 

 
    // elements.forEach(element => { }) correcpond à for(var element in elements) 
 
    // infoType est un objet qui correspond à un parcours de boucle 
 
    Object.keys(messagesTypes).forEach(infoType => { 
 

 
    // Définition de l'objet à donner à manger à la SnackBar 
 
    var objTest = {}; 
 
    objTest = { 
 
     class: colorType[infoType].class, 
 
     icon: colorType[infoType].icon, 
 
     message: messagesTypes[infoType].toString(), 
 
     type: infoType, 
 
     timeout: timeout, 
 
     actionHandler: function(event) {}, 
 
     actionText: actionText 
 
    }; 
 

 
    // Retrait d'une éventuelle classe existante dans la liste 
 
    // Pour chacune des classList, si elle matche le pattern je la vire 
 
    var re = new RegExp(/(^|\s)mdl-color--\S+/, "gi"); 
 
    for (var i = 0, len = snackbarContainer.classList.length; i < len; i++) { 
 
     // ma classe en cours 
 
     var currentClass = snackbarContainer.classList[i]; 
 
     // Je réalise mon test 
 
     var result = re.test(currentClass); 
 
     // Trace pour voir si je matche ma regex 
 
     console.log('Je traite : ', currentClass, ' resultat ', result); 
 
     if (result === true) { 
 
     snackbarContainer.classList.remove(currentClass); 
 
     } 
 
    }; 
 

 
    snackbarContainer.classList.add(objTest.class); 
 
    snackbarContainer.MaterialSnackbar.showSnackbar(objTest); 
 
    /*setTimeout(function() { 
 
     snackbarContainer.MaterialSnackbar.showSnackbar(objTest); 
 
    }, 5000);*/ 
 
    }); 
 
})(); 
 

 

 
function r(f) { 
 
    /in/.test(document.readyState) ? setTimeout('r(' + f + ')', 9) : f(); 
 
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.1.1/material.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.1.1/material.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="snackbar" class="mdl-js-snackbar mdl-snackbar"> 
 
    <div class="mdl-snackbar__text"></div> 
 
    <button class="mdl-snackbar__action" type="button"></button> 
 
</div>

auf dem Alarmtyp vom Server gesendet Je (Fehler, Warnung, Hinweis, Info), Versuche ich die Klasse einer Material Design Lite Snackbar zu ändern, die erscheint, um ihre Farbe zu ändern.

Ich entferne die mdl-color--{color}-* Klasse, wenn es existiert, und ich trage eine neue mdl-color Klasse nach dem richtigen Typ.

messageTypes sind Nachrichten wie Symfony returns (im FlashBag-System).

colorType sind übereinstimmende Klassen.

Für jede dieser Nachrichten aktualisiere ich die vorhandene Snackbar mit Klasse und Nachricht.

Dann rufe ich die Snackbar, wie hier dokumentiert: https://getmdl.io/components/#snackbar-section

Vorerst habe ich Timings Probleme. Es machte zuerst alle Änderungen an den Klassen und zeigt dann komischerweise die Snackbar mit einer zufälligen Nachricht und die letzte der Farbklassen an.

removeClass
addClass
removeClass
addClass
removeClass
addClass
removeClass
addClass
dann
Anzeige snackbar mit Nachricht 1
Anzeige snackbar mit Meldung 2
Anzeige snackbar mit Meldung 3
Anzeige snackbar mit Meldung 4

Wie kann ich in dieser Reihenfolge gesetzt:

removeClass
addClass
Anzeige snackbar mit Meldung 1
removeClass
addClass
Anzeige snackbar mit Meldung 2
removeClass
addClass
Anzeige Snackbar mit Nachricht 3
removeClass
addClass
Anzeige snackbar mit Nachricht 4

Answer 1

Die snackbar Komponente eine interne Warteschlange System hat mehrere Nachrichten in einer Reihe zu hand zeigt. Der Code, den Sie gerade ausführen, spiegelt die Timing-Ergebnisse wider, die Sie sehen. Dein Code entfernt/fügt Klassen hinzu und verschiebt Nachrichten in die Warteschlange.Aber bevor diese Nachrichten fertig sind, geht es zur nächsten Nachricht. Welche Nachricht wird in die interne Warteschlange geworfen und dann wird die nächste in Ihrem Code behandelt. Was ändert die Klassen wieder und so weiter.

Das Beste, was Sie hier tun können, ist Ihr eigenes Objekt zu schreiben, um die Warteschlange zu behandeln und diese Farblogik zu abstrahieren. Auf diese Weise rufen Sie zum Beispiel NotifierObj.show('message', 'error') und es wird sein eigenes Warteschlangensystem und zwischen Nachrichten wenden Sie die richtige Klasse auf die Snackbar für die angegebene Nachrichten Indikatorstufe.