☰

Vanilla JS Dialog

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

Detta skript bör inte installeras direkt. Det är ett bibliotek för andra skript att inkludera med meta-direktivet // @require https://update.greasyfork.org/scripts/465421/1471180/Vanilla%20JS%20Dialog.js 

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