dooo

得意分野よりも、勉強中の内容を書きたい

MDC-WebのSnackbarをメッセージを表示するためだけに使う

Material Components for the web（MDC-Web）のSnackbarを、メッセージを表示するためだけに使う。

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">   
    <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.js"></script>
  </head>

  <body>
    <h1>snackbar-scripting</h1>

    <button type="button" onclick="showMessagebar('メッセージ')">button</button>

    <script>
    
      // showMessagebar関数を定義
      window.showMessagebar = (function (message) {
        
        var element;
        var snackbar;

        var createElement = function () {
          var element = document.createElement('div');
          element.id = 'messagebar';
          element.className = 'mdc-snackbar';
          element.setAttribute('aria-live', 'assertive');
          element.setAttribute('aria-atomic', true)
          element.setAttribute('aria-hidden', true);

          element.innerHTML = [
            '<div class="mdc-snackbar__text"></div>',
            '<div class="mdc-snackbar__action-wrapper">',
            '    <button type="button" class="mdc-button mdc-snackbar__action-button"></button>',
            '</div>'
          ].join('\n');

          return element;  
        };
        
        // showMessagebarの実体
        return function (message) {
          
          if (!element) {
            element = createElement();
            document.body.appendChild(element);
          }
          
          snackbar = snackbar || new mdc.snackbar.MDCSnackbar(element);
          snackbar.show({ message: message });

          // 必ず一定時間後に消去するために、アクションがクリックされたことにする
          snackbar.foundation_.actionWasClicked_ = true;
        };
      })();
      
    </script>
  </body>

</html>