我正在处理通知,例如当Symfony实体成功更新时出现的通知。
目前我所做的在这里(+ 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>
mdl-color--{color}-*
类,并根据正确的类型应用新的mdl-color
类。
messageTypes
是诸如Symfony返回的消息(在FlashBag系统中)。
colorType
是匹配的类。对于这些消息中的每一个,我都会使用类和消息更新现有的snack bar。
接下来,我按照此处的文档调用snackbar:https://getmdl.io/components/#snackbar-section 目前,我遇到了时间问题。它首先对所有类进行了更改,然后以随机消息和最后一个颜色类的奇怪方式显示snack bar。
removeClass
addClass
removeClass
addClass
removeClass
addClass
removeClass
addClass
然后
显示带有消息1的snackbar
显示带有消息2的snackbar
显示带有消息3的snackbar
显示带有消息4的snackbar 如何按照以下顺序设置:
removeClass
addClass
显示带有消息1的snackbar
removeClass
addClass
显示带有消息2的snackbar
removeClass
addClass
显示带有消息3的snackbar
removeClass
addClass
显示带有消息4的snackbar