Dialog ... with Promises 2

Dialog ... with Promises 2.markdown

Dialog ... with Promises 2

The issue of Dialogs chinining

A Pen by TOBY on CodePen.

License.

index.html

// ref. http://getbootstrap.com/javascript/#modals-examples

button#startDialogs.btn.btn-primary.btn-lg.center-block Start Dialogs

button#fade-toggle.btn.btn-default.center-block.active Fade ON

// Dialog
#dialog.modal.fade
  .modal-dialog
    .modal-content
      .modal-header
        h4.dialog-title Title
      .modal-body
        p.dialog-message
      .modal-footer
        button.close-button.btn.btn-default(type="button",data-dismiss="modal") Close
        button.next-button.btn.btn-primary(type="button") Next
        

script.js

// 流れを書く
function startDialogs(){
  // ダイアログ表示の流れ
  Promise.resolve(1)
    .then(dialog("ノーベルお仕事頂戴賞を受賞。「Next」で次へ"))
    .then(dialog("「アナゴデラックス」の芸名で活動を停止。" + 
                 "「Close」でエラー。「Next」で2秒停止後、次へ", 
                 {errorOnClose: true}))
    
    .then(wait(2000))   // 非同期処理とかの待ちのつもり
  
    .then(dialog("左から読んでもアナグラム、右から読んでもアナグラム。" +
                 "「Close」で終了です", 
                 {hasNext: false}))
  
    .catch(dialog("エラーなどが出ました！", {hasNext: false}))
}


// 
function showDialog(num, message, flags){
  const defaultFlags = { hasNext: true, errorOnClose: false };

  console.log("showDialog: " + num + ", "+ message);
  
  // デフォルトのオプションを設定
  flags = Object.assign(defaultFlags, flags);
  
  return new Promise((resolve, reject) => {
    let $dialog = $("#dialog"),
        $closeButton = $dialog.find(".close-button"),
        $nextButton = $dialog.find(".next-button");

    // ダイアログに必要なデータをセットする
    $dialog.find(".dialog-title").text(num);
    $dialog.find(".dialog-message").text(message);

    // ダイアログを表示する
    $dialog.modal("show");

    $nextButton.off("click");
    $dialog.off("hidden.bs.modal");

    // 閉じるときにエラーを吐く場合はそうする
    if (flags.errorOnClose) { 
      // Next ボタンを押し、今のダイアログが消えた後に行う処理
      $closeButton.on("click", () => {    
        console.log("click #close-button");

        $dialog.on("hidden.bs.modal", () => reject());      
        $dialog.modal("hide");      
      });
    }
    
    // Next ボタン用の処理が引数に指定されているなら、いろいろ用意する
    if (flags.hasNext) { 
      console.log("show nextButtton");

      $nextButton.show();

      // Next ボタンを押し、今のダイアログが消えた後に行う処理
      $nextButton.on("click", () => {    
        console.log("click #next-button");

        // 次の then へ
        $dialog.on("hidden.bs.modal", () => resolve(num + 1) );      
        $dialog.modal("hide");      
      });
    } else {
      // 次の処理が指定されていないなら、Next ボタンを隠しておく
      console.log("hide nextButtton");
      $nextButton.hide();
    }
  });
}

// ダイアログ表示(Promise版)
function dialog(message, flags) {
  return (i) => showDialog(i, message, flags);
}

// msec 待つ(Promise版)
function wait(msec) {
  return () => new Promise((resolve, reject) => {
    $("body").css("cursor", "wait");
    
    setTimeout(() => {
        console.log("wait a minute");
      
        $("body").css("cursor", "auto");
        resolve();
    }, msec);
  })
}

function toggleFadeStatus(){
  $(this).button('toggle');
  $("#dialog").toggleClass("fade")
}



$(document).ready(() => {
  
  $("#startDialogs").click(startDialogs);
  $("#fade-toggle").click(toggleFadeStatus);
  
  startDialogs();
})  

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

style.css

#startDialogs, #fade-toggle
  margin-top: 4em

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />