simple-dialog.js (JavaScript Library)

simple-dialog.css

@charset "utf-8";
.simpleDialog_s-fix{
  overflow: hidden;
}
.simpleDialog_bg{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 900;
  background-color: rgba(0,0,0,.6);
}
.simpleDialog_bg.simpleDialog_s-hide{
  display: none;
}
.simpleDialog{
  display: flex;
  flex-direction: column;
  row-gap: 12px;
  width: 80%;
  max-width: 800px;
  max-height: 80%;
  padding: 20px;
  position: relative;
  background-color: #fff;
  border-radius: 8px;
  word-break: break-all;
}
.simpleDialog__bt-delete{
  position: absolute;
  top: -4px;
  right: -4px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background-color: #E74C3C;
  cursor: pointer;
}
.simpleDialog__bt-delete:hover{
  background-color: #C0392B;
}
.simpleDialog__bt-delete::before,.simpleDialog__bt-delete::after{
  content: "";
  width: 60%;
  height: 2px;
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #fff;
}
.simpleDialog__bt-delete::before{
  transform: translate(-50%,-50%) rotate(45deg);
}
.simpleDialog__bt-delete::after{
  transform: translate(-50%,-50%) rotate(-45deg);
}
.simpleDialog__head{
  font-size: 1.1rem;
  font-weight: bold;
}
.simpleDialog__body{
  overflow-y: auto;
}
.simpleDialog__footer{
  display: flex;
  gap: 12px;
}
.simpleDialog__footer--column{
  flex-direction: column;
}
.simpleDialog__footer--row{
  flex-direction: row;
}
.simpleDialog__bt-select{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 2.5em;
  padding: 8px;
  border: none;
  cursor: pointer;
}
.simpleDialog__bt-select--ok{
  background-color: #3498DB;
  color: #fff;
}
.simpleDialog__bt-select--ok:hover{
  background-color: #2980B9;
}
.simpleDialog__bt-select--cancel{
  background-color: #ddd;
}
.simpleDialog__bt-select--cancel:hover{
  background-color: #ccc;
}

simple-dialog.js

/*!
 * simple-dialog.js v1.0
 *
 * Copyright (c) 2023 motsu
 *
 * Released under the MIT license.
 * see https://opensource.org/licenses/MIT
 */
class simpleDialog{
  #el_dialog;
  #el_dialog__head;
  #el_dialog__body;
  #el_bt_ok;
  #el_bt_cancel;
  #fn_onDisplay;
  #fn_onClose;
  #fn_onOk;
  #fn_onCancel;
  constructor(args){
    const option = (()=>{
      if(args===undefined) return {};
      if(args===null) return {};
      if(Array.isArray(args)) return {};
      if(typeof args !== 'object') return {};
      return args;
    })();
    const str_head = option.str_head || '';
    const element_head = option.element_head;
    const str_body = option.str_body || '';
    const element_body = option.element_body;
    const direction_footer = option.direction_footer || 'column';
    const str_bt_ok = option.str_ok || 'OK';
    const str_bt_cancel = option.str_cancel || 'CANCEL';
    const num_bt = option.num_bt || 1;
    this.#fn_onDisplay = option.onDisplay;
    this.#fn_onClose = option.onClose;
    this.#fn_onOk = option.onOk;
    this.#fn_onCancel = option.onCancel;
    //
    const el_dialog_bg = document.createElement('div');
    el_dialog_bg.classList.add('simpleDialog_bg');
    el_dialog_bg.classList.add('simpleDialog_s-hide');
    const el_dialog = document.createElement('div');
    el_dialog.classList.add('simpleDialog');
    el_dialog_bg.appendChild(el_dialog);
    const el_bt_delete = document.createElement('button');
    el_bt_delete.classList.add('simpleDialog__bt-delete');
    el_bt_delete.addEventListener('click',()=>{
      this.close();
    });
    el_dialog.appendChild(el_bt_delete);
    const el_dialog__head = document.createElement('div');
    el_dialog__head.classList.add('simpleDialog__head');
    el_dialog__head.innerHTML = this.#nToBr(str_head);
    if(element_head!==undefined) el_dialog__head.appendChild(element_head);
    el_dialog.appendChild(el_dialog__head);
    const el_dialog__body = document.createElement('div');
    el_dialog__body.classList.add('simpleDialog__body');
    el_dialog__body.innerHTML = this.#nToBr(str_body);
    if(element_body!==undefined) el_dialog__body.appendChild(element_body);
    el_dialog.appendChild(el_dialog__body);
    const el_dialog__footer = document.createElement('div');
    el_dialog__footer.classList.add('simpleDialog__footer');
    el_dialog__footer.classList.add('simpleDialog__footer--'+String(direction_footer));
    el_dialog.appendChild(el_dialog__footer);
    const el_bt_ok = document.createElement('button');
    el_bt_ok.classList.add('simpleDialog__bt-select');
    el_bt_ok.classList.add('simpleDialog__bt-select--ok');
    el_bt_ok.innerHTML = this.#nToBr(str_bt_ok);
    el_bt_ok.addEventListener('click',()=>{
      this.ok();
    });
    el_dialog__footer.appendChild(el_bt_ok);
    if(num_bt>1){
      const el_bt_cancel = document.createElement('button');
      el_bt_cancel.classList.add('simpleDialog__bt-select');
      el_bt_cancel.classList.add('simpleDialog__bt-select--cancel');
      el_bt_cancel.innerHTML = this.#nToBr(str_bt_cancel);
      el_bt_cancel.addEventListener('click',()=>{
        this.cancel();
      });
      el_dialog__footer.appendChild(el_bt_cancel);
      this.#el_bt_cancel = el_bt_cancel;
    }
    this.#el_dialog = el_dialog_bg;
    this.#el_dialog__head = el_dialog__head;
    this.#el_dialog__body = el_dialog__body;
    this.#el_bt_ok = el_bt_ok;
    document.body.appendChild(this.#el_dialog);
  }
  
  setStrHead(str){
    this.#el_dialog__head.innerHTML = this.#nToBr(String(str));
  }
  setElementHead(element){
    if(element instanceof HTMLElement){
      this.#el_dialog__head.textContent = '';
      this.#el_dialog__head.appendChild(element);
    }
  }
  setStrBody(str){
    this.#el_dialog__body.innerHTML = this.#nToBr(String(str));
  }
  setElementBody(element){
    if(element instanceof HTMLElement){
      this.#el_dialog__body.textContent = '';
      this.#el_dialog__body.appendChild(element);
    }
  }

  setStrOk(str){
    this.#el_bt_ok.innerHTML = this.#nToBr(String(str));
  }
  setStrCancel(str){
    if(this.#el_bt_cancel!==undefined) this.#el_bt_cancel.innerHTML = this.#nToBr(String(str));
  }

  setOnDisplay(func){
    if(typeof func==='function') this.#fn_onDisplay = func;
  }
  display(){
    document.body.classList.add('simpleDialog_s-fix');
    this.#el_dialog.classList.remove('simpleDialog_s-hide');
    if(typeof this.#fn_onDisplay==='function') this.#fn_onDisplay();
  }

  setOnClose(func){
    if(typeof func==='function') this.#fn_onClose = func;
  }
  close(){
    this.#el_dialog.classList.add('simpleDialog_s-hide');
    document.body.classList.remove('simpleDialog_s-fix');
    if(typeof this.#fn_onClose==='function') this.#fn_onClose();
  }

  setOnOk(func){
    if(typeof func==='function') this.#fn_onOk = func;
  }
  ok(){
    this.#el_dialog.classList.add('simpleDialog_s-hide');
    document.body.classList.remove('simpleDialog_s-fix');
    if(typeof this.#fn_onOk==='function') this.#fn_onOk();
  }

  setOnCancel(func){
    if(typeof func==='function') this.#fn_onCancel = func;
  }
  cancel(){
    this.#el_dialog.classList.add('simpleDialog_s-hide');
    document.body.classList.remove('simpleDialog_s-fix');
    if(typeof this.#fn_onCancel==='function') this.#fn_onCancel();
  }
  #nToBr(str){
    str = this.#escHTML(str);
    str = str.replace(/\n/g,'<br>');
    return str;
  }
  #escHTML(str){
    str = str.replace(/&/g, '&amp;')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;')
      .replace(/'/g, '&#39;');
    return str;
  }
}