Skip to content

Instantly share code, notes, and snippets.

@motsu0
Last active March 9, 2023 01:44
Show Gist options
  • Save motsu0/d1ba6d3075807be9581afd66b546a69d to your computer and use it in GitHub Desktop.
Save motsu0/d1ba6d3075807be9581afd66b546a69d to your computer and use it in GitHub Desktop.
simple-dialog.js (JavaScript Library)
@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 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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment