多材料设计轻量级Snackbar的时间不正确

Question

多材料设计轻量级Snackbar的时间不正确

javascriptjquerymaterial-designmaterial-design-lite

3

我正在处理通知，例如当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>

根据服务器发送的警告类型（错误、警告、通知、信息），我尝试更改 Material Design Lite snackbar 的类，以改变其颜色。如果存在，则删除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

- Arnaud Tiérant

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Garbee · Accepted Answer

snackbar组件内部使用一个队列系统来处理连续显示多条消息的情况。你的代码逻辑上反映了你所看到的时间结果。你的代码会移除/添加类，然后将消息推送到队列中。但是，在这些消息完成显示之前，它将进入下一条消息。消息被抛入内部队列，然后在你的代码中处理下一条消息。这会再次修改类等操作。

最好的做法是编写自己的对象来处理队列，并抽象出这个上色逻辑。这样你可以像这样调用 NotifierObj.show（'message'，'error'），它将执行自己的队列系统，并在消息之间为给定消息指示器级别应用正确的类到snackbar中。