☰

Vanilla JS Dialog

A general purpose JavaScript class for Dialog Creation in Vanilla JS.

目前为 2023-05-03 提交的版本。查看 最新版本。

此脚本不应直接安装，它是一个供其他脚本使用的外部库。如果您需要使用该库，请在脚本元属性加入：// @require https://update.cn-greasyfork.org/scripts/465421/1184885/Vanilla%20JS%20Dialog.js 

  1. // ==UserScript==
  2. // @name         Vanilla JS Dialog
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1.1
  5. // @description  A general purpose JavaScript class for Dialog Creation in Vanilla JS.
  6. // @author       CY Fung
  7. // @grant        none
  8. // @license      MIT
  9. // ==/UserScript==
  10.  
  11. /*
  12.  
  13. MIT License
  14.  
  15. Copyright (c) 2023 cyfung1031
  16.  
  17. Permission is hereby granted, free of charge, to any person obtaining a copy
  18. of this software and associated documentation files (the "Software"), to deal
  19. in the Software without restriction, including without limitation the rights
  20. to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  21. copies of the Software, and to permit persons to whom the Software is
  22. furnished to do so, subject to the following conditions:
  23.  
  24. The above copyright notice and this permission notice shall be included in all
  25. copies or substantial portions of the Software.
  26.  
  27. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  28. IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  29. FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  30. AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  31. LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  32. OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  33. SOFTWARE.
  34.  
  35. */
  36. /* version: 0.1.1 */
  37. const VanillaJSDialog = (function pluginVanillaJSDialog() {
  38.   'strict';
  39.  
  40.   const _themeProps_ = {
  41.     dialogBackgroundColor: '#f6f6f6',
  42.     dialogBackgroundColorDark: '#23252a',
  43.     backdropColor: '#b5b5b568',
  44.     textColor: '#343434',
  45.     textColorDark: '#f0f3f4',
  46.     zIndex: 60000,
  47.     fontSize: '10pt',
  48.     dialogMinWidth: '320px',
  49.     dialogMinHeight: '240px',
  50.  
  51.   };
  52.  
  53.  
  54.   /* https://www.freeformatter.com/css-beautifier.html */
  55.   const _cssForThemeProps_ = ($) =>
  56.     `
  57.     .vjsd-dialog {
  58.       --vjsd-font-family: "Inter var", ui-sans-serif, system-ui, -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  59.       --vjsd-dialog-background-color: ${$.dialogBackgroundColor};
  60.       --vjsd-dialog-text-color: ${$.textColor};
  61.       --vjsd-dialog-border-color: #747474;
  62.       --vjsd-inputable-background-color: #fcfcfc;
  63.       --vjsd-inputable-text-color: ${$.textColor};
  64.       --vjsd-inputable-outline-color: #959494;
  65.       --vjsd-inputable-focus-outline-color: #212121;
  66.       --vjsd-button-background-color: #FFFFFF;
  67.       --vjsd-button-border-color: #959494;
  68.       --vjsd-button-text-color: #111827;
  69.       --vjsd-button-hover-background-color: rgb(249, 250, 251);
  70.       --vjsd-button-hover-border-color: #212121;
  71.     }
  72.     
  73.     .vjsd-dialog.vjsd-dark {
  74.       --vjsd-dialog-background-color: ${$.dialogBackgroundColorDark};
  75.       --vjsd-dialog-text-color: ${$.textColorDark};
  76.       --vjsd-dialog-border-color: #878787;
  77.       --vjsd-inputable-background-color: #181a1e;
  78.       --vjsd-inputable-text-color: ${$.textColorDark};
  79.       --vjsd-inputable-outline-color: #757576;
  80.       --vjsd-inputable-focus-outline-color: #a7a5a5;
  81.       --vjsd-button-background-color: #21262d;
  82.       --vjsd-button-border-color: #6a6a6a;
  83.       --vjsd-button-text-color: #c9d1d9;
  84.       --vjsd-button-hover-background-color: #30363d;
  85.       --vjsd-button-hover-border-color: #8b949e;
  86.     }
  87.     
  88.     .vjsd-dialog * {
  89.       overscroll-behavior: inherit;
  90.     }
  91.     
  92.     .vjsd-overscroll-none {
  93.       overscroll-behavior: none;
  94.     }
  95.     
  96.     .vjsd-overscroll-contain {
  97.       overscroll-behavior: contain;
  98.     }
  99.     
  100.     .vjsd-overscroll-auto {
  101.       overscroll-behavior: auto;
  102.     }
  103.     
  104.     .vjsd-dialog {
  105.       font-family: var(--vjsd-font-family);
  106.       font-size: ${$.fontSize};
  107.       display: none;
  108.       flex-direction: column;
  109.       position: fixed;
  110.       pointer-events: all;
  111.       top: 50%;
  112.       left: 50%;
  113.       transform: translate(-50%, -50%);
  114.       z-index: ${$.zIndex};
  115.       user-select: none;
  116.       touch-action: none;
  117.       border-radius: 12px;
  118.       border: 1px solid var(--vjsd-dialog-border-color);
  119.       box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  120.       background-color: var(--vjsd-dialog-background-color);
  121.       color: var(--vjsd-dialog-text-color);
  122.       contain: content;
  123.     }
  124.     
  125.     .vjsd-dialog textarea,
  126.     .vjsd-dialog input {
  127.       font-family: var(--vjsd-font-family);
  128.       border: 0;
  129.       outline: 1px solid var(--vjsd-inputable-outline-color);
  130.       border-radius: 3px;
  131.       -webkit-tap-highlight-color: rgba(0, 0, 0, 0.18) !important;
  132.       overflow: auto;
  133.       -webkit-box-shadow: none;
  134.       -moz-box-shadow: none;
  135.       box-shadow: none;
  136.       resize: none;
  137.       /* remove the resize handle on the bottom right */
  138.       background-color: var(--vjsd-inputable-background-color);
  139.       color: var(--vjsd-inputable-text-color);
  140.       outline-color: var(--vjsd-inputable-outline-color);
  141.     }
  142.     
  143.     .vjsd-dialog textarea:focus,
  144.     .vjsd-dialog input:focus {
  145.       outline-color: var(--vjsd-inputable-focus-outline-color);
  146.       transition-duration: .1s;
  147.     }
  148.     
  149.     .vjsd-title {
  150.       padding: 4px 16px;
  151.       text-decoration: none #D1D5DB solid;
  152.       text-decoration-thickness: auto;
  153.       font-weight: 700;
  154.       letter-spacing: .6px;
  155.     }
  156.     
  157.     .vjsd-dialog-visible {
  158.       display: flex;
  159.     }
  160.     
  161.     .vjsd-dialog-header {
  162.       padding: 7px 12px;
  163.     }
  164.     
  165.     .vjsd-dialog-body {
  166.       padding: 7px 12px;
  167.     }
  168.     
  169.     .vjsd-dialog-footer {
  170.       padding: 7px 12px;
  171.     }
  172.     
  173.     .vjsd-flex-fill {
  174.       flex-grow: 1;
  175.     }
  176.     
  177.     .vjsd-space {
  178.       flex-grow: 1;
  179.     }
  180.     
  181.     .vjsd-buttonicon {
  182.       cursor: pointer;
  183.       opacity: 0.85;
  184.     }
  185.     
  186.     .vjsd-dialog-backdrop {
  187.       background-color: ${$.backdropColor};
  188.       contain: strict;
  189.     }
  190.     
  191.     .vjsd-buttonicon:hover {
  192.       opacity: 1.0;
  193.     }
  194.     
  195.     .vjsd-icon {
  196.       font-size: 180%;
  197.       display: inline-flex;
  198.     }
  199.     
  200.     .vjsd-button {
  201.       display: inline-flex;
  202.       background-color: var(--vjsd-button-background-color);
  203.       border: 1px solid var(--vjsd-button-border-color);
  204.       color: var(--vjsd-button-text-color);
  205.       border-radius: .5em;
  206.       box-sizing: border-box;
  207.       font-family: var(--vjsd-font-family);
  208.       font-size: 85%;
  209.       font-weight: 600;
  210.       padding: .66em .86em;
  211.       text-align: center;
  212.       text-decoration: none #D1D5DB solid;
  213.       text-decoration-thickness: auto;
  214.       box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  215.       cursor: pointer;
  216.       user-select: none;
  217.       -webkit-user-select: none;
  218.       touch-action: manipulation;
  219.     }
  220.     
  221.     .vjsd-button:hover {
  222.       background-color: var(--vjsd-button-hover-background-color);
  223.       border-color: var(--vjsd-button-hover-border-color);
  224.       transition-duration: .1s;
  225.     }
  226.     
  227.     .vjsd-button:focus {
  228.       outline: 2px solid transparent;
  229.       outline-offset: 2px;
  230.     }
  231.     
  232.     .vjsd-button:focus-visible {
  233.       box-shadow: none;
  234.     }
  235.     
  236.     .vjsd-vflex {
  237.       display: flex;
  238.       flex-direction: column;
  239.       align-items: center;
  240.     }
  241.     
  242.     .vjsd-dialog-footer.vjsd-hflex {
  243.       column-gap: 8px;
  244.     }
  245.     
  246.     .vjsd-hflex {
  247.       display: flex;
  248.       flex-direction: row;
  249.       align-items: center;
  250.     }
  251.     
  252.     .vjsd-dialog-backdrop {
  253.       display: none;
  254.       position: fixed;
  255.       pointer-events: all;
  256.       top: 0;
  257.       bottom: 0;
  258.       left: 0;
  259.       right: 0;
  260.       pointer-events: all;
  261.       z-index: ${$.zIndex - 1};
  262.       /* when modal active */
  263.       touch-action: none;
  264.       -webkit-overflow-scrolling: none;
  265.       overflow: hidden;
  266.       /* Other browsers */
  267.       overscroll-behavior: none;
  268.     }
  269.     
  270.     .vjsd-dialog-body {
  271.       min-width: ${$.dialogMinWidth};
  272.       min-height: ${$.dialogMinHeight};
  273.     }
  274.     
  275.     .vjsd-dialog-body.vjsd-vflex {
  276.       align-items: stretch;
  277.     }
  278.     
  279.     .vjsd-dialog-backdrop.vjsd-backdrop-visible {
  280.       display: flex;
  281.     }
  282.     
  283.     label.vjsd-checkbox-label {
  284.       font-weight: bold;
  285.       line-height: 1.1;
  286.       display: flex;
  287.       flex-direction: row;
  288.       gap: 0.5em;
  289.       position: relative;
  290.       z-index: 0;
  291.     }
  292.     
  293.     label.vjsd-checkbox-label::after {
  294.       /* avoid text seleciton */
  295.       position: absolute;
  296.       content: '';
  297.       left: 0;
  298.       top: 0;
  299.       right: 0;
  300.       bottom: 0;
  301.       z-index: 1;
  302.     }
  303.     
  304.     input.vjsd-checkbox1 {
  305.       -webkit-appearance: none;
  306.       appearance: none;
  307.       /*background-color: var(--vjsd-dialog-background-color);*/
  308.       margin: 0;
  309.       font: inherit;
  310.       color: currentColor;
  311.       width: 1.15em;
  312.       height: 1.15em;
  313.       border: 0.15em solid currentColor;
  314.       border-radius: 0.15em;
  315.       transform: translateY(-0.075em);
  316.       display: grid;
  317.       place-content: center;
  318.       outline: none;
  319.     }
  320.     
  321.     input.vjsd-checkbox1::before {
  322.       content: "";
  323.       width: 0.65em;
  324.       height: 0.65em;
  325.       transform: scale(0);
  326.     }
  327.     
  328.     input.vjsd-checkbox1:checked::before {
  329.       transform: scale(1);
  330.     }
  331.     
  332.     
  333.     input.vjsd-checkbox-tick::before {
  334.       transform-origin: bottom left;
  335.       transition: 80ms transform ease-in-out;
  336.       box-shadow: inset 1em 1em currentColor;
  337.       background-color: CanvasText;
  338.       clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  339.     }
  340.     
  341.     input.vjsd-checkbox-square::before {
  342.       transition: 80ms transform ease-in-out;
  343.       box-shadow: inset 1em 1em currentColor;
  344.       border-radius: 4px;
  345.     }
  346.     
  347.     input.vjsd-checkbox1.vjsd-checkbox-square:checked::before {
  348.       transform: scale(0.9);
  349.     }
  350.     
  351.     .vjsd-gap-1 {
  352.       gap: 3px;
  353.     }
  354.     
  355.     .vjsd-gap-2 {
  356.       gap: 6px;
  357.     }
  358.     
  359.     .vjsd-gap-3 {
  360.       gap: 9px;
  361.     }
  362.     
  363.     .vjsd-gap-4 {
  364.       gap: 12px;
  365.     }
  366.     
  367.     .vjsd-gap-5 {
  368.       gap: 15px;
  369.     }
  370.     
  371.     .sample-textbox {
  372.       height: 300px;
  373.     }
  374.     
  375.     html.vjsd-dialog-shown {
  376.       --vjsd-prevent-scroll-pointer-events: none;
  377.       --vjsd-prevent-scroll-overflow: hidden;
  378.     }
  379.     
  380.     html,
  381.     body {
  382.       pointer-events: var(--vjsd-prevent-scroll-pointer-events) !important;
  383.       overflow: var(--vjsd-prevent-scroll-overflow) !important;
  384.     }
  385.     
  386.     html.vjsd-dialog-shown {
  387.       --vjsd-page-background-filter: blur(4px);
  388.       --vjsd-page-background-opacity: 0.4;
  389.     }
  390.     
  391.     .vjsd-dialog-backdrop,
  392.     .vjsd-dialog {
  393.       --vjsd-page-background-filter: void;
  394.       --vjsd-page-background-opacity: void;
  395.     }
  396.     
  397.     body > * {
  398.       filter: var(--vjsd-page-background-filter);
  399.       opacity: calc(var(--vjsd-page-background-opacity) * 1.0);
  400.     }
  401.       `;
  402.  
  403.  
  404.  
  405.   /**
  406.    * 
  407.    * @typedef { (...args: HTMLElement[]) => void } onElementGenerated
  408.    * 
  409.    * */
  410.  
  411.  
  412.  
  413.   // let __ceId__ =0;
  414.   // const  __ceIdStore__ = new WeakMap();
  415.  
  416.   // This is just for common utils.
  417.   class VanillaJSDialogMethods {
  418.     __widgets__ = {};
  419.     /**
  420.      * @returns { Object.<string, (...args?: ( onElementGenerated|string|number)[])=>HTMLElement > }
  421.      */
  422.     get widgets() {
  423.       return this.__widgets__
  424.     };
  425.  
  426.     set widgets(newWidgets) {
  427.  
  428.       if ('prototype' in newWidgets) {
  429.         // class
  430.         newWidgets = new newWidgets;
  431.       }
  432.  
  433.       // object
  434.       Object.assign(this.__widgets__, newWidgets);
  435.  
  436.       return true;
  437.     }
  438.  
  439.     /**
  440.      * 
  441.      * @param {HTMLElement} elm 
  442.      * @param {string} parentSelector 
  443.      * @param {string} childSelector 
  444.      * @returns 
  445.      */
  446.     query(elm, parentSelector, childSelector) {
  447.       return elm.closest(parentSelector).querySelector(childSelector)
  448.     }
  449.  
  450.     /**
  451.      * 
  452.      * @param {HTMLElement} elm 
  453.      * @param {string} parentSelector 
  454.      * @param {string} childSelector 
  455.      * @returns 
  456.      */
  457.     querys(elm, parentSelector, childSelector) {
  458.       return elm.closest(parentSelector).querySelectorAll(childSelector)
  459.     }
  460.  
  461.     /**
  462.      * You might override it using userscript manager's css loader.
  463.      * @param {...string} urls external url of the css file
  464.      */
  465.     importCSS(...urls) {
  466.       /*
  467.  
  468. // @require      https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js#sha512=qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==
  469.  
  470. <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  471.  
  472.       */
  473.      const elements = urls.map(url => {
  474.       let elm = document.createElement('link');
  475.       elm.setAttribute('rel', 'stylesheet');
  476.       elm.setAttribute('href', url);
  477.       if(url.includes('#')){
  478.         let idx1 = url.indexOf('#');
  479.         let idx2 = url.indexOf('=',idx1);
  480.         if(idx1 > 1 && idx2 === idx1+7){
  481.           let s = url.substring(idx1+1, idx2);
  482.           switch(s){
  483.             case 'sha256':
  484.             case 'sha384':
  485.             case 'sha512':
  486.               elm.setAttribute('integrity', `${s}-${url.substring(idx2+1)}`);
  487.           }
  488.         }
  489.       }
  490.       elm.setAttribute('crossorigin', 'anonymous');
  491.       elm.setAttribute('referrerpolicy', 'no-referrer');
  492.       // document.head.appendChild(elm);
  493.       return elm;
  494.     })
  495.       document.head.append(...elements);
  496.       return urls.length === 1 ? elements[0] : elements;
  497.  
  498.     }
  499.  
  500.     //  ceToString(){
  501.     //   return `${__ceIdStore__.toString.call(this)} #${__ceIdStore__.get(this)}`;
  502.     //  }
  503.     /**
  504.      * 
  505.      * @param {string} tag 
  506.      * @param {Object.<string, any?>} props 
  507.      * @param {Object.<string, string?>} attrs 
  508.      * @returns {HTMLElement}
  509.      */
  510.     ce(tag, props, attrs) {
  511.  
  512.       /** @type {HTMLElement} */
  513.       const elm = (tag instanceof HTMLElement) ? elm :
  514.         (typeof tag == 'string') ? document.createElement(tag) :
  515.           console.assert(false, "argument invalid");
  516.  
  517.       if (props) Object.assign(elm, props);
  518.       if (attrs) {
  519.         for (const k of Object.keys(attrs)) {
  520.           elm.setAttribute(k, attrs[k]);
  521.         }
  522.       }
  523.       // __ceIdStore__.set(elm, ++__ceId__);
  524.       // elm.toString = this.ceToString;
  525.       return elm;
  526.     }
  527.  
  528.     /**
  529.      * 
  530.      * @param {string} t 
  531.      * @param {string} [id] 
  532.      * @returns 
  533.      */
  534.     addCSS(t, id) {
  535.       let styleElm = document.createElement('style');
  536.       styleElm.textContent = t;
  537.       if (id) styleElm.id = id;
  538.       document.head.appendChild(styleElm);
  539.       return styleElm;
  540.     }
  541.  
  542.     randomInputId() {
  543.       const chars = "abcdefghijklmnopqrstuvwxyz0123456789";
  544.       const resultArr = new Array(8);
  545.       for (let i = 0; i < 8; i++) {
  546.         resultArr[i] = chars.charAt(Math.floor(Math.random() * (i ? 36 : 26)));
  547.       }
  548.       return resultArr.join('');
  549.     }
  550.  
  551.     /**
  552.      *
  553.      * @param {HTMLElement} elm
  554.      * @param {Object.<string, string|number> | Function | any[]} args
  555.      * @returns
  556.      * */
  557.     st(elm, ...args) {
  558.       console.assert(elm instanceof HTMLElement, 'HTMLElement shall be required.');
  559.       if (args.length === 0) return;
  560.       if ('length' in args[0]) args = args[0];
  561.  
  562.       let f = null;
  563.       for (const arg of args) {
  564.         if (typeof arg == 'function') {
  565.           f = arg;
  566.         } else if (typeof arg == 'object') {
  567.           const obj = arg;
  568.           for (const k of Object.keys(obj)) {
  569.             if (k in elm) {
  570.               if (k === 'className' && elm[k].length > 0) obj[k] = `${elm[k]} ${obj[k]}`;
  571.               elm[k] = obj[k];
  572.             } else elm.setAttribute(k, obj[k]);
  573.           }
  574.         }
  575.       }
  576.       if (f instanceof Function) f(elm);
  577.  
  578.     }
  579.  
  580.  
  581.     esProxyHandler = {
  582.       get(obj, prop) {
  583.         const elm = obj[prop];
  584.         if (elm instanceof HTMLElement) {
  585.           return elm;
  586.         }
  587.         console.warn(`Element '${prop}' is not yet assigned.`);
  588.         return null;
  589.       }
  590.     }
  591.   }
  592.  
  593.   const S = new VanillaJSDialogMethods();
  594.  
  595.   class VanillaJSDialog {
  596.     // CAUTION: DO NOT CACHE ELEMENTS IN THE NESTED FUNCTIONS.
  597.     S = S;
  598.     shown = false;
  599.  
  600.     /** @type {Function | null} */
  601.     backdropClickHandler = null;
  602.     backdrop = '';
  603.  
  604.     /** @type {Map<string, Function>} */
  605.     clicks2 = new Map(); /* the string key is just an arbitrary id for the click handler */
  606.  
  607.  
  608.     _es_proxy_ = null;
  609.  
  610.     /** @returns {Object.<string, HTMLElement?>} */
  611.     get es() {
  612.       return this._es_proxy_;
  613.     }
  614.  
  615.     constructor() {
  616.       /** @type {VanillaJSDialog} */
  617.       this._es_proxy_ = new Proxy({}, S.esProxyHandler);
  618.       if (!S.firstDialogCreated) this.onFirstCreation();
  619.       this.init();
  620.       console.assert(this.es.dialog instanceof HTMLElement, 'es.dialog must be set.');
  621.  
  622.       if (this.clickHandler !== null) {
  623.         this.es.dialog.addEventListener('click', this.clickHandler, true);
  624.       }
  625.       S.firstDialogCreated = true;
  626.     }
  627.  
  628.     onFirstCreation() {
  629.       // TODO
  630.     }
  631.  
  632.     init() {
  633.       // TODO
  634.     }
  635.  
  636.     get themeProps() {
  637.       return _themeProps_;
  638.     }
  639.  
  640.     get cssForThemeProps() {
  641.       return _cssForThemeProps_;
  642.     }
  643.     themeSetup() {
  644.       S.addCSS(this.cssForThemeProps(this.themeProps), 'vjsd-style');
  645.     }
  646.  
  647.     onBeforeShow() {
  648.       // TODO
  649.     }
  650.     onShow() {
  651.       // TODO
  652.     }
  653.  
  654.     show() {
  655.  
  656.       if (this.shown === true) return;
  657.       if (this.onBeforeShow() === false) return;
  658.  
  659.  
  660.       let { dialog } = this.es;
  661.       dialog.classList.add('vjsd-dialog-visible');
  662.       this.shown = true;
  663.  
  664.  
  665.       if (this.backdrop === 'dismiss' || this.backdrop === 'block') {
  666.  
  667.         if (this.backdropClickHandler === null) {
  668.           this.backdropClickHandler = () => {
  669.             const shown = this.shown;
  670.             if (shown && this.backdrop === 'dismiss') {
  671.               this.dismiss();
  672.             }
  673.           };
  674.         }
  675.  
  676.         if (!('backdrop' in this.es)) {
  677.           const backdrop = S.ce('div', {
  678.             className: 'vjsd-dialog-backdrop'
  679.           });
  680.  
  681.           backdrop.setAttribute('__vjsd__', '');
  682.  
  683.           backdrop.addEventListener('click', this.backdropClickHandler, true);
  684.  
  685.  
  686.  
  687.           document.body.appendChild(backdrop);
  688.  
  689.           this.es.backdrop = backdrop;
  690.         }
  691.  
  692.         document.documentElement.classList.add('vjsd-dialog-shown');
  693.         this.es.backdrop.classList.add('vjsd-backdrop-visible');
  694.  
  695.       }
  696.  
  697.       dialog.classList.toggle('vjsd-dark', this.isDarkTheme());
  698.  
  699.       this.onShow();
  700.  
  701.     }
  702.  
  703.     onBeforeDismiss() {
  704.       // TODO
  705.  
  706.     }
  707.     onDismiss() {
  708.       // TODO
  709.  
  710.     }
  711.  
  712.     dismiss() {
  713.  
  714.       if (this.shown) {
  715.  
  716.         if (this.onBeforeDismiss() === false) return;
  717.  
  718.         document.documentElement.classList.remove('vjsd-dialog-shown');
  719.         const es = this.es;
  720.  
  721.         es.dialog.classList.remove('vjsd-dialog-visible');
  722.         if ('backdrop' in es) {
  723.           let backdrop = es.backdrop;
  724.           if (backdrop instanceof HTMLElement && backdrop.classList.contains('vjsd-backdrop-visible')) {
  725.             backdrop.classList.remove('vjsd-backdrop-visible');
  726.           }
  727.         }
  728.         this.shown = false;
  729.         this.onDismiss();
  730.       }
  731.  
  732.  
  733.     }
  734.  
  735.     isDarkTheme() {
  736.       // TODO - shall be overrided
  737.       return false;
  738.     }
  739.  
  740.     /** @type {Function?} */
  741.     clickHandler = null;
  742.  
  743.     createClickHandler() {
  744.       const clicks2 = this.clicks2;
  745.       return (evt) => {
  746.         let evtTarget = ((evt || 0).target || 0);
  747.         if (!(evtTarget instanceof HTMLElement)) return;
  748.         let vjsdElement = evtTarget.closest('[vjsd-clickable]');
  749.         if (vjsdElement instanceof HTMLElement) {
  750.           let p = vjsdElement.getAttribute('vjsd-clickable');
  751.           let f = clicks2.get(p);
  752.           if (f instanceof Function) f(evt);
  753.         }
  754.       };
  755.     }
  756.  
  757.  
  758.     /**
  759.      * 
  760.      * @param {HTMLElement | string} elm
  761.      * @param {Function} func
  762.      * 
  763.      * */
  764.     clickable(elm, func) {
  765.       if (typeof elm == 'string') {
  766.         this.clicks2.set(elm, func);
  767.       }
  768.       if (this.clickHandler === null) this.clickHandler = this.createClickHandler();
  769.  
  770.     }
  771.  
  772.  
  773.  
  774.   };
  775.   VanillaJSDialog.S = S;
  776.  
  777.   VanillaJSDialog.setup1 = function () {
  778.     const S = this.S;
  779.  
  780.     S.widgets = {
  781.  
  782.  
  783.       /**
  784.        * [@Override] The user shall set a customized method to replace VJSD.icon for customization
  785.        * @param {string} iconTag Icon Tag
  786.        * @returns {VE} generated VE
  787.        */
  788.       icon(iconTag) {
  789.         return S.ce('i', { className: 'vjsd-icon vjsd-icon-' + iconTag });
  790.         // return  VJSD.iconBuilder(VJSD.ce('span', {className:'vjsd-icon'}), iconTag);
  791.       },
  792.  
  793.       title(text, ...args) {
  794.         const elm = S.ce('span', { className: 'vjsd-title', textContent: text });
  795.         S.st(elm, args);
  796.         return elm;
  797.       },
  798.  
  799.       buttonIcon(iconTag, ...args) {
  800.         const icon = S.widgets.icon(iconTag);
  801.         icon.classList.add('vjsd-buttonicon');
  802.         S.st(icon, args)
  803.         return icon;
  804.       },
  805.  
  806.  
  807.       labeledCheckbox(className, text, f) {
  808.  
  809.         let elmLabel = S.ce('label', {
  810.           className: 'vjsd-checkbox-label'
  811.         });
  812.  
  813.         let elmInput = S.ce('input', {
  814.           className
  815.         }, {
  816.           'type': 'checkbox'
  817.         })
  818.  
  819.         elmLabel.append(elmInput,text + "")
  820.  
  821.         if (f instanceof Function) f(elmLabel, elmInput);
  822.  
  823.         return elmLabel;
  824.  
  825.       },
  826.  
  827.       labeledRadio(className, text, f) {
  828.  
  829.         let elmLabel = S.ce('label', {
  830.           className: 'vjsd-checkbox-label'
  831.         });
  832.  
  833.         let elmInput = S.ce('input', {
  834.           className
  835.         }, {
  836.           'type': 'radio'
  837.         });
  838.  
  839.         elmLabel.append(elmInput, text + "");
  840.  
  841.         if (f instanceof Function) f(elmLabel, elmInput);
  842.  
  843.         return elmLabel;
  844.       },
  845.  
  846.       button(text, ...args) {
  847.         let elm = S.ce('div', { className: 'vjsd-button', textContent: text });
  848.         S.st(elm, args)
  849.         return elm;
  850.       },
  851.  
  852.       space() {
  853.         return S.ce('div', { className: 'vjsd-space' });
  854.       },
  855.  
  856.       span(text) {
  857.         return S.ce('span', { className: 'vjsd-span', textContent: text });
  858.       },
  859.  
  860.       inputText(f) {
  861.         let elm = S.ce('input', { className: 'vjsd-input' }, {
  862.           'type': 'text',
  863.           id: S.randomInputId(),
  864.           autocomplete: "off"
  865.         });
  866.         if (f instanceof Function) f(elm);
  867.         return elm
  868.       }
  869.  
  870.     };
  871.  
  872.   }
  873.  
  874.   VanillaJSDialog.VanillaJSDialogMethods = VanillaJSDialogMethods;
  875.  
  876.   // Export to external environment
  877.   try { window.VanillaJSDialog = VanillaJSDialog; } catch (error) { /* for Greasemonkey */ }
  878.   try { module.VanillaJSDialog = VanillaJSDialog; } catch (error) { /* for CommonJS */ }
  879.  
  880.   // module.exports = VanillaJSDialog
  881.   return VanillaJSDialog;
  882. })();
  883.  
  884.