Wicket で、 Confirm の ModalWindow - Oboe吹きプログラマの黙示録

前の投稿、Wicket メッセージ表示するだけのModalWindow - Oboe吹きプログラマの黙示録　に続いて、
Confirm を表示するもの。
Yes-No 、 OK-cancel これらどちらを左ー右にするか、Apple と Microsoft . Android 　逆であるので
導入するシステムの納品先しだいになるので、left - right として指定するコードにしてある。

import java.util.Optional;
import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.ajax.markup.html.form.AjaxButton;
import org.apache.wicket.core.util.string.JavaScriptUtils;
import org.apache.wicket.extensions.ajax.markup.html.modal.ModalWindow;
import org.apache.wicket.markup.ComponentTag;
import org.apache.wicket.markup.MarkupStream;
import org.apache.wicket.markup.head.CssHeaderItem;
import org.apache.wicket.markup.head.IHeaderResponse;
import org.apache.wicket.markup.head.JavaScriptHeaderItem;
import org.apache.wicket.markup.html.basic.Label;
import org.apache.wicket.markup.html.form.Form;
import org.apache.wicket.markup.html.panel.Panel;
import org.apache.wicket.model.IModel;
import org.apache.wicket.request.resource.CssResourceReference;
import org.apache.wicket.request.resource.JavaScriptResourceReference;
import org.yipuran.wicketcustom.function.SerialThrowableConsumer;
/**
 * 確認メッセージモーダルウィンドウ.
 */
public class ConfirmModalPanel extends Panel{
   /**
    * コンストラクタ.
    * @param id Wicket-ID
    * @param model 確認メッセージを格納したModel
    * @param left 左側ボタンラベル
    * @param right 右側ボタンラベル
    * @param leftConsumer 左側ボタンクリックで実行する処理 AjaxRequestTarget のシリアライズ化した Throwable な Consumer
    * @param rightConsumer  右側ボタンクリックで実行する処理 AjaxRequestTarget のシリアライズ化した Throwable な Consumer
    */
   public ConfirmModalPanel(String id, IModel<String> model, final String left, final String right
   , final SerialThrowableConsumer<AjaxRequestTarget> leftConsumer
   , final SerialThrowableConsumer<AjaxRequestTarget> rightConsumer){
      super(id, model);
      queue(new Label("message", Optional.ofNullable(model.getObject()).orElse("")));
      queue(new Form<Void>("form"));

      queue(new AjaxButton("left"){
         @Override
         public void onComponentTagBody(MarkupStream markupStream, ComponentTag openTag){
            replaceComponentTagBody(markupStream, openTag, left);
         }
         @Override
         protected void onSubmit(AjaxRequestTarget target){
            leftConsumer.accept(target);
            ModalWindow.closeCurrent(target);
         }
      });
      queue(new AjaxButton("right"){
         @Override
         public void onComponentTagBody(MarkupStream markupStream, ComponentTag openTag){
            replaceComponentTagBody(markupStream, openTag, right);
         }
         @Override
         protected void onSubmit(AjaxRequestTarget target){
            rightConsumer.accept(target);
            ModalWindow.closeCurrent(target);
         }
      });
   }
   @Override
   protected void onAfterRender(){
      super.onAfterRender();
      JavaScriptUtils.writeJavaScript(getResponse(), "setTimeout('sizefitConfirmModal();', 100);" );
   }
   @Override
   public void renderHead(IHeaderResponse response){
      super.renderHead(response);
      response.render(CssHeaderItem.forReference(
         new CssResourceReference(ConfirmModalPanel.class, "confirm-modal.css")));
      response.render(JavaScriptHeaderItem.forReference(
         new JavaScriptResourceReference(ConfirmModalPanel.class, "confirm-modal.js")));
   }
}

ＨＴＭＬ　ConfirmModalPanel.html

<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<body>
   <wicket:panel>
      <form wicket:id="form">
         <section class="comfirm-panel">
            <div class="comfirm-content">
               <ul>
                  <li><span wicket:id="message">メッセージ</span></li>
                  <li>
                     <table>
                        <tbody>
                           <tr>
                              <td>
                                 <button wicket:id="left" type="button">Left</button>
                              </td>
                              <td>
                                 <button wicket:id="right" type="button">Right</button>
                              </td>
                           </tr>
                        </tbody>
                     </table>
                  </li>
               </ul>
            </div>
         </section>
      </form>
   </wicket:panel>
</body>
</html>

confirm-modal.css

@charset "UTF-8";
/**
 * confirm-modal.css
 */
.comfirm-panel{
   display: flex;
   align-items: center;
   justify-content: center;
}
.comfirm-content{
   width: auto;
   display: flex;
   align-items: center;
   justify-content: space-around;
}
.comfirm-content ul{
   margin: 0;
   padding: 0;
}
.comfirm-content li{
   list-style-type: none;
   white-space: nowrap;
   margin: 1rem;
   display: flex;
   align-items: center;
   justify-content: space-around;
}
.comfirm-content table{
   border-collapse: separate;
   border-spacing: 0.4rem;
}
.comfirm-content td{
   padding: 0 2rem;
}
.comfirm-content button{
   min-width: 3rem;
   white-space: nowrap;
}

confirm-modal.js

var sizefitConfirmModal = function(){
   $('.w_content_container').css("height", $('.comfirm-content ul').outerHeight(true) + "px" );
   $('.wicket-modal').css("width", $('.comfirm-content ul').outerWidth(true) + 22 + "px" );
};

使用する Java コード

ModalWindow confirmWindow = new ModalWindow("confirmWindow").setResizable(false).setAutoSize(true);
confirmWindow.setWindowClosedCallback(new WindowClosedCallback(){
   @Override
   public void onClose(AjaxRequestTarget target){
      // CLOSE された場合に必ず実行される。場合によってここで処理を書く
   }
});
queue(confirmWindow);

queue(new Button("_send").add(AjaxFormSubmitBehavior.onSubmit("click", target->{
   Optional.ofNullable(item_Field.getModelObject()).ifPresent(e->{
      String msg = e + " を削除してよろしいですか？";
      confirmWindow.setContent(new ConfirmModalPanel(confirmWindow.getContentId()
      , Model.of(msg), "Yes", "No",
         t->{
            // 左（Yes）をクリックした時の処理
         },
         t->{
            // 右（No）をクリックした時の処理
         }
      ));
      confirmWindow.show(target);
   });
})));