jb-modal 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 javad
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,2 @@
+# jb-modal
+modal web compoent

package/dist/JBModal.js

@@ -0,0 +1,160 @@
+var HTML = "<div class=\"jb-modal-web-component --closed\">\r\n    <div class=\"modal-background\"></div>\r\n    <div class=\"modal-content-wrapper\">\r\n        <div class=\"modal-content\">\r\n            <slot name=\"content\"></slot>\r\n        </div>\r\n    </div>\r\n</div>";
+
+var css_248z = ".jb-modal-web-component {\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: 1;\n  width: 100%;\n  height: 100%; }\n  .jb-modal-web-component.--closed {\n    display: none; }\n  .jb-modal-web-component.--opened {\n    display: block; }\n  .jb-modal-web-component .modal-background {\n    position: absolute;\n    top: 0;\n    left: 0;\n    background-color: rgba(255, 255, 255, 0.1);\n    backdrop-filter: blur(10px);\n    z-index: 2;\n    width: 100%;\n    height: 100%; }\n  .jb-modal-web-component .modal-content-wrapper {\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 2;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    pointer-events: none; }\n    .jb-modal-web-component .modal-content-wrapper .modal-content {\n      pointer-events: all;\n      width: auto;\n      height: auto;\n      background-color: #fff;\n      border-radius: 24px; }\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkpCTW9kYWwuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFLGVBQWU7RUFDZixNQUFNO0VBQ04sT0FBTztFQUNQLFVBQVU7RUFDVixXQUFXO0VBQ1gsWUFBWSxFQUFFO0VBQ2Q7SUFDRSxhQUFhLEVBQUU7RUFDakI7SUFDRSxjQUFjLEVBQUU7RUFDbEI7SUFDRSxrQkFBa0I7SUFDbEIsTUFBTTtJQUNOLE9BQU87SUFDUCwwQ0FBMEM7SUFDMUMsMkJBQTJCO0lBQzNCLFVBQVU7SUFDVixXQUFXO0lBQ1gsWUFBWSxFQUFFO0VBQ2hCO0lBQ0Usa0JBQWtCO0lBQ2xCLE1BQU07SUFDTixPQUFPO0lBQ1AsVUFBVTtJQUNWLFdBQVc7SUFDWCxZQUFZO0lBQ1osYUFBYTtJQUNiLG1CQUFtQjtJQUNuQix1QkFBdUI7SUFDdkIsb0JBQW9CLEVBQUU7SUFDdEI7TUFDRSxtQkFBbUI7TUFDbkIsV0FBVztNQUNYLFlBQVk7TUFDWixzQkFBc0I7TUFDdEIsbUJBQW1CLEVBQUUiLCJmaWxlIjoiSkJNb2RhbC5zY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLmpiLW1vZGFsLXdlYi1jb21wb25lbnQge1xuICBwb3NpdGlvbjogZml4ZWQ7XG4gIHRvcDogMDtcbiAgbGVmdDogMDtcbiAgei1pbmRleDogMTtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogMTAwJTsgfVxuICAuamItbW9kYWwtd2ViLWNvbXBvbmVudC4tLWNsb3NlZCB7XG4gICAgZGlzcGxheTogbm9uZTsgfVxuICAuamItbW9kYWwtd2ViLWNvbXBvbmVudC4tLW9wZW5lZCB7XG4gICAgZGlzcGxheTogYmxvY2s7IH1cbiAgLmpiLW1vZGFsLXdlYi1jb21wb25lbnQgLm1vZGFsLWJhY2tncm91bmQge1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICB0b3A6IDA7XG4gICAgbGVmdDogMDtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiByZ2JhKDI1NSwgMjU1LCAyNTUsIDAuMSk7XG4gICAgYmFja2Ryb3AtZmlsdGVyOiBibHVyKDEwcHgpO1xuICAgIHotaW5kZXg6IDI7XG4gICAgd2lkdGg6IDEwMCU7XG4gICAgaGVpZ2h0OiAxMDAlOyB9XG4gIC5qYi1tb2RhbC13ZWItY29tcG9uZW50IC5tb2RhbC1jb250ZW50LXdyYXBwZXIge1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICB0b3A6IDA7XG4gICAgbGVmdDogMDtcbiAgICB6LWluZGV4OiAyO1xuICAgIHdpZHRoOiAxMDAlO1xuICAgIGhlaWdodDogMTAwJTtcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gICAgcG9pbnRlci1ldmVudHM6IG5vbmU7IH1cbiAgICAuamItbW9kYWwtd2ViLWNvbXBvbmVudCAubW9kYWwtY29udGVudC13cmFwcGVyIC5tb2RhbC1jb250ZW50IHtcbiAgICAgIHBvaW50ZXItZXZlbnRzOiBhbGw7XG4gICAgICB3aWR0aDogYXV0bztcbiAgICAgIGhlaWdodDogYXV0bztcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICNmZmY7XG4gICAgICBib3JkZXItcmFkaXVzOiAyNHB4OyB9XG4iXX0= */";
+
+class JBModalWebComponent extends HTMLElement {
+    #isOpen = false;
+    #id = null;
+    get id() {
+        return this.#id || this.getAttribute('id');
+    }
+    set id(value) {
+        this.#id = value;
+        this.checkInitialOpenness();
+    }
+    get isOpen() {
+        return this.#isOpen;
+    }
+    constructor() {
+        super();
+        this.initWebComponent();
+    }
+    connectedCallback() {
+        // standard web component event that called when all of dom is binded
+        this.callOnLoadEvent();
+        this.initProp();
+        this.callOnInitEvent();
+
+    }
+    callOnLoadEvent() {
+        var event = new CustomEvent('load', { bubbles: true, composed: true });
+        this.dispatchEvent(event);
+    }
+    callOnInitEvent() {
+        var event = new CustomEvent('init', { bubbles: true, composed: true });
+        this.dispatchEvent(event);
+    }
+    initWebComponent() {
+        const shadowRoot = this.attachShadow({
+            mode: 'open'
+        });
+        const html = `<style>${css_248z}</style>` + '\n' + HTML;
+        const element = document.createElement('template');
+        element.innerHTML = html;
+        shadowRoot.appendChild(element.content.cloneNode(true));
+        this.elements = {
+            componentWrapper: shadowRoot.querySelector('.jb-modal-web-component'),
+            background: shadowRoot.querySelector('.modal-background')
+        };
+
+    }
+    registerEventListener() {
+        this.elements.background.addEventListener('click', this.onBackgroundClick.bind(this));
+        //TODO: remove listener on component unmount
+        window.addEventListener('popstate', this.onBrowserBack.bind(this));
+    }
+    initProp() {
+        this.config = {
+            autoCloseOnBackgroundClick: false
+        };
+        this.registerEventListener();
+    }
+    checkInitialOpenness() {
+        //if page has modal url we open it automatically
+        const location = window.location;
+        if (location.hash == `#${this.id}`) {
+            this.triggerUrlOpenEvent();
+            this.open();
+        }
+    }
+    triggerUrlOpenEvent() {
+        //when modal open itself becuase url contain modal id
+        const event = new CustomEvent('urlOpen', { bubbles: true, composed: true });
+        this.dispatchEvent(event);
+    }
+    static get observedAttributes() {
+        return ['isOpen', 'id'];
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        // do something when an attribute has changed
+        this.onAttributeChange(name, newValue);
+    }
+    onAttributeChange(name, value) {
+        switch (name) {
+            case 'isOpen':
+                if (value == 'true') {
+                    if (!this.#isOpen) {
+                        this.open();
+                    }
+                } else {
+                    if (this.#isOpen) {
+                        this.close();
+                    }
+                }
+                break;
+            case 'id':
+                this.id = value;
+                break;
+        }
+
+    }
+    onBackgroundClick() {
+        this.dispatchCloseEvent('BACKGROUND_CLICK');
+        if (this.config.autoCloseOnBackgroundClick) {
+            this.close();
+        }
+
+    }
+    dispatchCloseEvent(type) {
+        //we have many ways to dispatch close event like back button on close clicked
+        const event = new CustomEvent("close", { detail: { eventType: type } });
+        this.dispatchEvent(event);
+    }
+    /**
+ * @public
+ * will close modal
+ */
+    close() {
+        this.#isOpen = false;
+        this.elements.componentWrapper.classList.remove('--opened');
+        this.elements.componentWrapper.classList.add('--closed');
+        const history = window.history;
+        const location = window.location;
+        if (location.hash == `#${this.id}`) {
+            history.go(-1);
+        }
+    }
+    /**
+     * @public
+     * will open modal
+     */
+    open() {
+        this.#isOpen = true;
+        this.elements.componentWrapper.classList.remove('--closed');
+        this.elements.componentWrapper.classList.add('--opened');
+        if (this.id) {
+            const history = window.history;
+            const location = window.location;
+            if (!(location.hash == `#${this.id}`)) {
+                history.pushState({ JBModal: {} }, "", `#${this.id}`);
+            }
+        }
+    }
+    /**
+     * @private
+     * when brower back button clicked physically or byy code
+     */
+    onBrowserBack(e) {
+        if (this.isOpen) {
+            this.dispatchCloseEvent('HISTORY_BACK_EVENT');
+            if (this.config.autoCloseOnBackgroundClick) {
+                this.close();
+            }
+        }
+    }
+}
+const myElementNotExists = !customElements.get('jb-modal');
+if (myElementNotExists) {
+    window.customElements.define('jb-modal', JBModalWebComponent);
+}
+//# sourceMappingURL=JBModal.js.map

package/dist/JBModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"JBModal.js","sources":["../lib/JBModal.js"],"sourcesContent":["import HTML from './JBModal.html';\r\nimport CSS from './JBModal.scss';\r\nclass JBModalWebComponent extends HTMLElement {\r\n    #isOpen = false;\r\n    #id = null;\r\n    get id() {\r\n        return this.#id || this.getAttribute('id');\r\n    }\r\n    set id(value) {\r\n        this.#id = value;\r\n        this.checkInitialOpenness();\r\n    }\r\n    get isOpen() {\r\n        return this.#isOpen;\r\n    }\r\n    constructor() {\r\n        super();\r\n        this.initWebComponent();\r\n    }\r\n    connectedCallback() {\r\n        // standard web component event that called when all of dom is binded\r\n        this.callOnLoadEvent();\r\n        this.initProp();\r\n        this.callOnInitEvent();\r\n\r\n    }\r\n    callOnLoadEvent() {\r\n        var event = new CustomEvent('load', { bubbles: true, composed: true });\r\n        this.dispatchEvent(event);\r\n    }\r\n    callOnInitEvent() {\r\n        var event = new CustomEvent('init', { bubbles: true, composed: true });\r\n        this.dispatchEvent(event);\r\n    }\r\n    initWebComponent() {\r\n        const shadowRoot = this.attachShadow({\r\n            mode: 'open'\r\n        });\r\n        const html = `<style>${CSS}</style>` + '\\n' + HTML;\r\n        const element = document.createElement('template');\r\n        element.innerHTML = html;\r\n        shadowRoot.appendChild(element.content.cloneNode(true));\r\n        this.elements = {\r\n            componentWrapper: shadowRoot.querySelector('.jb-modal-web-component'),\r\n            background: shadowRoot.querySelector('.modal-background')\r\n        }\r\n\r\n    }\r\n    registerEventListener() {\r\n        this.elements.background.addEventListener('click', this.onBackgroundClick.bind(this));\r\n        //TODO: remove listener on component unmount\r\n        window.addEventListener('popstate', this.onBrowserBack.bind(this))\r\n    }\r\n    initProp() {\r\n        this.config = {\r\n            autoCloseOnBackgroundClick: false\r\n        }\r\n        this.registerEventListener();\r\n    }\r\n    checkInitialOpenness() {\r\n        //if page has modal url we open it automatically\r\n        const location = window.location;\r\n        if (location.hash == `#${this.id}`) {\r\n            this.triggerUrlOpenEvent();\r\n            this.open();\r\n        }\r\n    }\r\n    triggerUrlOpenEvent() {\r\n        //when modal open itself becuase url contain modal id\r\n        const event = new CustomEvent('urlOpen', { bubbles: true, composed: true });\r\n        this.dispatchEvent(event);\r\n    }\r\n    static get observedAttributes() {\r\n        return ['isOpen', 'id'];\r\n    }\r\n    attributeChangedCallback(name, oldValue, newValue) {\r\n        // do something when an attribute has changed\r\n        this.onAttributeChange(name, newValue);\r\n    }\r\n    onAttributeChange(name, value) {\r\n        switch (name) {\r\n            case 'isOpen':\r\n                if (value == 'true') {\r\n                    if (!this.#isOpen) {\r\n                        this.open()\r\n                    }\r\n                } else {\r\n                    if (this.#isOpen) {\r\n                        this.close()\r\n                    }\r\n                }\r\n                break;\r\n            case 'id':\r\n                this.id = value;\r\n                break;\r\n        }\r\n\r\n    }\r\n    onBackgroundClick() {\r\n        this.dispatchCloseEvent('BACKGROUND_CLICK');\r\n        if (this.config.autoCloseOnBackgroundClick) {\r\n            this.close();\r\n        }\r\n\r\n    }\r\n    dispatchCloseEvent(type) {\r\n        //we have many ways to dispatch close event like back button on close clicked\r\n        const event = new CustomEvent(\"close\", { detail: { eventType: type } });\r\n        this.dispatchEvent(event);\r\n    }\r\n    /**\r\n * @public\r\n * will close modal\r\n */\r\n    close() {\r\n        this.#isOpen = false;\r\n        this.elements.componentWrapper.classList.remove('--opened')\r\n        this.elements.componentWrapper.classList.add('--closed');\r\n        const history = window.history;\r\n        const location = window.location;\r\n        if (location.hash == `#${this.id}`) {\r\n            history.go(-1)\r\n        }\r\n    }\r\n    /**\r\n     * @public\r\n     * will open modal\r\n     */\r\n    open() {\r\n        this.#isOpen = true;\r\n        this.elements.componentWrapper.classList.remove('--closed');\r\n        this.elements.componentWrapper.classList.add('--opened');\r\n        if (this.id) {\r\n            const history = window.history;\r\n            const location = window.location;\r\n            if (!(location.hash == `#${this.id}`)) {\r\n                history.pushState({ JBModal: {} }, \"\", `#${this.id}`)\r\n            }\r\n        }\r\n    }\r\n    /**\r\n     * @private\r\n     * when brower back button clicked physically or byy code\r\n     */\r\n    onBrowserBack(e) {\r\n        if (this.isOpen) {\r\n            this.dispatchCloseEvent('HISTORY_BACK_EVENT');\r\n            if (this.config.autoCloseOnBackgroundClick) {\r\n                this.close();\r\n            }\r\n        }\r\n    }\r\n}\r\nconst myElementNotExists = !customElements.get('jb-modal');\r\nif (myElementNotExists) {\r\n    window.customElements.define('jb-modal', JBModalWebComponent);\r\n}\r\n"],"names":["CSS"],"mappings":"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"}

package/dist/JBModal.umd.js

@@ -0,0 +1,167 @@
+(function (factory) {
+    typeof define === 'function' && define.amd ? define(factory) :
+    factory();
+})((function () { 'use strict';
+
+    var HTML = "<div class=\"jb-modal-web-component --closed\">\r\n    <div class=\"modal-background\"></div>\r\n    <div class=\"modal-content-wrapper\">\r\n        <div class=\"modal-content\">\r\n            <slot name=\"content\"></slot>\r\n        </div>\r\n    </div>\r\n</div>";
+
+    var css_248z = ".jb-modal-web-component {\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: 1;\n  width: 100%;\n  height: 100%; }\n  .jb-modal-web-component.--closed {\n    display: none; }\n  .jb-modal-web-component.--opened {\n    display: block; }\n  .jb-modal-web-component .modal-background {\n    position: absolute;\n    top: 0;\n    left: 0;\n    background-color: rgba(255, 255, 255, 0.1);\n    backdrop-filter: blur(10px);\n    z-index: 2;\n    width: 100%;\n    height: 100%; }\n  .jb-modal-web-component .modal-content-wrapper {\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 2;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    pointer-events: none; }\n    .jb-modal-web-component .modal-content-wrapper .modal-content {\n      pointer-events: all;\n      width: auto;\n      height: auto;\n      background-color: #fff;\n      border-radius: 24px; }\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkpCTW9kYWwuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFLGVBQWU7RUFDZixNQUFNO0VBQ04sT0FBTztFQUNQLFVBQVU7RUFDVixXQUFXO0VBQ1gsWUFBWSxFQUFFO0VBQ2Q7SUFDRSxhQUFhLEVBQUU7RUFDakI7SUFDRSxjQUFjLEVBQUU7RUFDbEI7SUFDRSxrQkFBa0I7SUFDbEIsTUFBTTtJQUNOLE9BQU87SUFDUCwwQ0FBMEM7SUFDMUMsMkJBQTJCO0lBQzNCLFVBQVU7SUFDVixXQUFXO0lBQ1gsWUFBWSxFQUFFO0VBQ2hCO0lBQ0Usa0JBQWtCO0lBQ2xCLE1BQU07SUFDTixPQUFPO0lBQ1AsVUFBVTtJQUNWLFdBQVc7SUFDWCxZQUFZO0lBQ1osYUFBYTtJQUNiLG1CQUFtQjtJQUNuQix1QkFBdUI7SUFDdkIsb0JBQW9CLEVBQUU7SUFDdEI7TUFDRSxtQkFBbUI7TUFDbkIsV0FBVztNQUNYLFlBQVk7TUFDWixzQkFBc0I7TUFDdEIsbUJBQW1CLEVBQUUiLCJmaWxlIjoiSkJNb2RhbC5zY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLmpiLW1vZGFsLXdlYi1jb21wb25lbnQge1xuICBwb3NpdGlvbjogZml4ZWQ7XG4gIHRvcDogMDtcbiAgbGVmdDogMDtcbiAgei1pbmRleDogMTtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogMTAwJTsgfVxuICAuamItbW9kYWwtd2ViLWNvbXBvbmVudC4tLWNsb3NlZCB7XG4gICAgZGlzcGxheTogbm9uZTsgfVxuICAuamItbW9kYWwtd2ViLWNvbXBvbmVudC4tLW9wZW5lZCB7XG4gICAgZGlzcGxheTogYmxvY2s7IH1cbiAgLmpiLW1vZGFsLXdlYi1jb21wb25lbnQgLm1vZGFsLWJhY2tncm91bmQge1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICB0b3A6IDA7XG4gICAgbGVmdDogMDtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiByZ2JhKDI1NSwgMjU1LCAyNTUsIDAuMSk7XG4gICAgYmFja2Ryb3AtZmlsdGVyOiBibHVyKDEwcHgpO1xuICAgIHotaW5kZXg6IDI7XG4gICAgd2lkdGg6IDEwMCU7XG4gICAgaGVpZ2h0OiAxMDAlOyB9XG4gIC5qYi1tb2RhbC13ZWItY29tcG9uZW50IC5tb2RhbC1jb250ZW50LXdyYXBwZXIge1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICB0b3A6IDA7XG4gICAgbGVmdDogMDtcbiAgICB6LWluZGV4OiAyO1xuICAgIHdpZHRoOiAxMDAlO1xuICAgIGhlaWdodDogMTAwJTtcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gICAgcG9pbnRlci1ldmVudHM6IG5vbmU7IH1cbiAgICAuamItbW9kYWwtd2ViLWNvbXBvbmVudCAubW9kYWwtY29udGVudC13cmFwcGVyIC5tb2RhbC1jb250ZW50IHtcbiAgICAgIHBvaW50ZXItZXZlbnRzOiBhbGw7XG4gICAgICB3aWR0aDogYXV0bztcbiAgICAgIGhlaWdodDogYXV0bztcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICNmZmY7XG4gICAgICBib3JkZXItcmFkaXVzOiAyNHB4OyB9XG4iXX0= */";
+
+    class JBModalWebComponent extends HTMLElement {
+        #isOpen = false;
+        #id = null;
+        get id() {
+            return this.#id || this.getAttribute('id');
+        }
+        set id(value) {
+            this.#id = value;
+            this.checkInitialOpenness();
+        }
+        get isOpen() {
+            return this.#isOpen;
+        }
+        constructor() {
+            super();
+            this.initWebComponent();
+        }
+        connectedCallback() {
+            // standard web component event that called when all of dom is binded
+            this.callOnLoadEvent();
+            this.initProp();
+            this.callOnInitEvent();
+
+        }
+        callOnLoadEvent() {
+            var event = new CustomEvent('load', { bubbles: true, composed: true });
+            this.dispatchEvent(event);
+        }
+        callOnInitEvent() {
+            var event = new CustomEvent('init', { bubbles: true, composed: true });
+            this.dispatchEvent(event);
+        }
+        initWebComponent() {
+            const shadowRoot = this.attachShadow({
+                mode: 'open'
+            });
+            const html = `<style>${css_248z}</style>` + '\n' + HTML;
+            const element = document.createElement('template');
+            element.innerHTML = html;
+            shadowRoot.appendChild(element.content.cloneNode(true));
+            this.elements = {
+                componentWrapper: shadowRoot.querySelector('.jb-modal-web-component'),
+                background: shadowRoot.querySelector('.modal-background')
+            };
+
+        }
+        registerEventListener() {
+            this.elements.background.addEventListener('click', this.onBackgroundClick.bind(this));
+            //TODO: remove listener on component unmount
+            window.addEventListener('popstate', this.onBrowserBack.bind(this));
+        }
+        initProp() {
+            this.config = {
+                autoCloseOnBackgroundClick: false
+            };
+            this.registerEventListener();
+        }
+        checkInitialOpenness() {
+            //if page has modal url we open it automatically
+            const location = window.location;
+            if (location.hash == `#${this.id}`) {
+                this.triggerUrlOpenEvent();
+                this.open();
+            }
+        }
+        triggerUrlOpenEvent() {
+            //when modal open itself becuase url contain modal id
+            const event = new CustomEvent('urlOpen', { bubbles: true, composed: true });
+            this.dispatchEvent(event);
+        }
+        static get observedAttributes() {
+            return ['isOpen', 'id'];
+        }
+        attributeChangedCallback(name, oldValue, newValue) {
+            // do something when an attribute has changed
+            this.onAttributeChange(name, newValue);
+        }
+        onAttributeChange(name, value) {
+            switch (name) {
+                case 'isOpen':
+                    if (value == 'true') {
+                        if (!this.#isOpen) {
+                            this.open();
+                        }
+                    } else {
+                        if (this.#isOpen) {
+                            this.close();
+                        }
+                    }
+                    break;
+                case 'id':
+                    this.id = value;
+                    break;
+            }
+
+        }
+        onBackgroundClick() {
+            this.dispatchCloseEvent('BACKGROUND_CLICK');
+            if (this.config.autoCloseOnBackgroundClick) {
+                this.close();
+            }
+
+        }
+        dispatchCloseEvent(type) {
+            //we have many ways to dispatch close event like back button on close clicked
+            const event = new CustomEvent("close", { detail: { eventType: type } });
+            this.dispatchEvent(event);
+        }
+        /**
+     * @public
+     * will close modal
+     */
+        close() {
+            this.#isOpen = false;
+            this.elements.componentWrapper.classList.remove('--opened');
+            this.elements.componentWrapper.classList.add('--closed');
+            const history = window.history;
+            const location = window.location;
+            if (location.hash == `#${this.id}`) {
+                history.go(-1);
+            }
+        }
+        /**
+         * @public
+         * will open modal
+         */
+        open() {
+            this.#isOpen = true;
+            this.elements.componentWrapper.classList.remove('--closed');
+            this.elements.componentWrapper.classList.add('--opened');
+            if (this.id) {
+                const history = window.history;
+                const location = window.location;
+                if (!(location.hash == `#${this.id}`)) {
+                    history.pushState({ JBModal: {} }, "", `#${this.id}`);
+                }
+            }
+        }
+        /**
+         * @private
+         * when brower back button clicked physically or byy code
+         */
+        onBrowserBack(e) {
+            if (this.isOpen) {
+                this.dispatchCloseEvent('HISTORY_BACK_EVENT');
+                if (this.config.autoCloseOnBackgroundClick) {
+                    this.close();
+                }
+            }
+        }
+    }
+    const myElementNotExists = !customElements.get('jb-modal');
+    if (myElementNotExists) {
+        window.customElements.define('jb-modal', JBModalWebComponent);
+    }
+
+}));
+//# sourceMappingURL=JBModal.umd.js.map

package/dist/JBModal.umd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"JBModal.umd.js","sources":["../lib/JBModal.js"],"sourcesContent":["import HTML from './JBModal.html';\r\nimport CSS from './JBModal.scss';\r\nclass JBModalWebComponent extends HTMLElement {\r\n    #isOpen = false;\r\n    #id = null;\r\n    get id() {\r\n        return this.#id || this.getAttribute('id');\r\n    }\r\n    set id(value) {\r\n        this.#id = value;\r\n        this.checkInitialOpenness();\r\n    }\r\n    get isOpen() {\r\n        return this.#isOpen;\r\n    }\r\n    constructor() {\r\n        super();\r\n        this.initWebComponent();\r\n    }\r\n    connectedCallback() {\r\n        // standard web component event that called when all of dom is binded\r\n        this.callOnLoadEvent();\r\n        this.initProp();\r\n        this.callOnInitEvent();\r\n\r\n    }\r\n    callOnLoadEvent() {\r\n        var event = new CustomEvent('load', { bubbles: true, composed: true });\r\n        this.dispatchEvent(event);\r\n    }\r\n    callOnInitEvent() {\r\n        var event = new CustomEvent('init', { bubbles: true, composed: true });\r\n        this.dispatchEvent(event);\r\n    }\r\n    initWebComponent() {\r\n        const shadowRoot = this.attachShadow({\r\n            mode: 'open'\r\n        });\r\n        const html = `<style>${CSS}</style>` + '\\n' + HTML;\r\n        const element = document.createElement('template');\r\n        element.innerHTML = html;\r\n        shadowRoot.appendChild(element.content.cloneNode(true));\r\n        this.elements = {\r\n            componentWrapper: shadowRoot.querySelector('.jb-modal-web-component'),\r\n            background: shadowRoot.querySelector('.modal-background')\r\n        }\r\n\r\n    }\r\n    registerEventListener() {\r\n        this.elements.background.addEventListener('click', this.onBackgroundClick.bind(this));\r\n        //TODO: remove listener on component unmount\r\n        window.addEventListener('popstate', this.onBrowserBack.bind(this))\r\n    }\r\n    initProp() {\r\n        this.config = {\r\n            autoCloseOnBackgroundClick: false\r\n        }\r\n        this.registerEventListener();\r\n    }\r\n    checkInitialOpenness() {\r\n        //if page has modal url we open it automatically\r\n        const location = window.location;\r\n        if (location.hash == `#${this.id}`) {\r\n            this.triggerUrlOpenEvent();\r\n            this.open();\r\n        }\r\n    }\r\n    triggerUrlOpenEvent() {\r\n        //when modal open itself becuase url contain modal id\r\n        const event = new CustomEvent('urlOpen', { bubbles: true, composed: true });\r\n        this.dispatchEvent(event);\r\n    }\r\n    static get observedAttributes() {\r\n        return ['isOpen', 'id'];\r\n    }\r\n    attributeChangedCallback(name, oldValue, newValue) {\r\n        // do something when an attribute has changed\r\n        this.onAttributeChange(name, newValue);\r\n    }\r\n    onAttributeChange(name, value) {\r\n        switch (name) {\r\n            case 'isOpen':\r\n                if (value == 'true') {\r\n                    if (!this.#isOpen) {\r\n                        this.open()\r\n                    }\r\n                } else {\r\n                    if (this.#isOpen) {\r\n                        this.close()\r\n                    }\r\n                }\r\n                break;\r\n            case 'id':\r\n                this.id = value;\r\n                break;\r\n        }\r\n\r\n    }\r\n    onBackgroundClick() {\r\n        this.dispatchCloseEvent('BACKGROUND_CLICK');\r\n        if (this.config.autoCloseOnBackgroundClick) {\r\n            this.close();\r\n        }\r\n\r\n    }\r\n    dispatchCloseEvent(type) {\r\n        //we have many ways to dispatch close event like back button on close clicked\r\n        const event = new CustomEvent(\"close\", { detail: { eventType: type } });\r\n        this.dispatchEvent(event);\r\n    }\r\n    /**\r\n * @public\r\n * will close modal\r\n */\r\n    close() {\r\n        this.#isOpen = false;\r\n        this.elements.componentWrapper.classList.remove('--opened')\r\n        this.elements.componentWrapper.classList.add('--closed');\r\n        const history = window.history;\r\n        const location = window.location;\r\n        if (location.hash == `#${this.id}`) {\r\n            history.go(-1)\r\n        }\r\n    }\r\n    /**\r\n     * @public\r\n     * will open modal\r\n     */\r\n    open() {\r\n        this.#isOpen = true;\r\n        this.elements.componentWrapper.classList.remove('--closed');\r\n        this.elements.componentWrapper.classList.add('--opened');\r\n        if (this.id) {\r\n            const history = window.history;\r\n            const location = window.location;\r\n            if (!(location.hash == `#${this.id}`)) {\r\n                history.pushState({ JBModal: {} }, \"\", `#${this.id}`)\r\n            }\r\n        }\r\n    }\r\n    /**\r\n     * @private\r\n     * when brower back button clicked physically or byy code\r\n     */\r\n    onBrowserBack(e) {\r\n        if (this.isOpen) {\r\n            this.dispatchCloseEvent('HISTORY_BACK_EVENT');\r\n            if (this.config.autoCloseOnBackgroundClick) {\r\n                this.close();\r\n            }\r\n        }\r\n    }\r\n}\r\nconst myElementNotExists = !customElements.get('jb-modal');\r\nif (myElementNotExists) {\r\n    window.customElements.define('jb-modal', JBModalWebComponent);\r\n}\r\n"],"names":["CSS"],"mappings":"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"}

package/index.js

@@ -0,0 +1 @@
+import './dist/JBModal.js';

package/lib/JBModal.html

@@ -0,0 +1,8 @@
+<div class="jb-modal-web-component --closed">
+    <div class="modal-background"></div>
+    <div class="modal-content-wrapper">
+        <div class="modal-content">
+            <slot name="content"></slot>
+        </div>
+    </div>
+</div>

package/lib/JBModal.js

@@ -0,0 +1,157 @@
+import HTML from './JBModal.html';
+import CSS from './JBModal.scss';
+class JBModalWebComponent extends HTMLElement {
+    #isOpen = false;
+    #id = null;
+    get id() {
+        return this.#id || this.getAttribute('id');
+    }
+    set id(value) {
+        this.#id = value;
+        this.checkInitialOpenness();
+    }
+    get isOpen() {
+        return this.#isOpen;
+    }
+    constructor() {
+        super();
+        this.initWebComponent();
+    }
+    connectedCallback() {
+        // standard web component event that called when all of dom is binded
+        this.callOnLoadEvent();
+        this.initProp();
+        this.callOnInitEvent();
+
+    }
+    callOnLoadEvent() {
+        var event = new CustomEvent('load', { bubbles: true, composed: true });
+        this.dispatchEvent(event);
+    }
+    callOnInitEvent() {
+        var event = new CustomEvent('init', { bubbles: true, composed: true });
+        this.dispatchEvent(event);
+    }
+    initWebComponent() {
+        const shadowRoot = this.attachShadow({
+            mode: 'open'
+        });
+        const html = `<style>${CSS}</style>` + '\n' + HTML;
+        const element = document.createElement('template');
+        element.innerHTML = html;
+        shadowRoot.appendChild(element.content.cloneNode(true));
+        this.elements = {
+            componentWrapper: shadowRoot.querySelector('.jb-modal-web-component'),
+            background: shadowRoot.querySelector('.modal-background')
+        }
+
+    }
+    registerEventListener() {
+        this.elements.background.addEventListener('click', this.onBackgroundClick.bind(this));
+        //TODO: remove listener on component unmount
+        window.addEventListener('popstate', this.onBrowserBack.bind(this))
+    }
+    initProp() {
+        this.config = {
+            autoCloseOnBackgroundClick: false
+        }
+        this.registerEventListener();
+    }
+    checkInitialOpenness() {
+        //if page has modal url we open it automatically
+        const location = window.location;
+        if (location.hash == `#${this.id}`) {
+            this.triggerUrlOpenEvent();
+            this.open();
+        }
+    }
+    triggerUrlOpenEvent() {
+        //when modal open itself becuase url contain modal id
+        const event = new CustomEvent('urlOpen', { bubbles: true, composed: true });
+        this.dispatchEvent(event);
+    }
+    static get observedAttributes() {
+        return ['isOpen', 'id'];
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        // do something when an attribute has changed
+        this.onAttributeChange(name, newValue);
+    }
+    onAttributeChange(name, value) {
+        switch (name) {
+            case 'isOpen':
+                if (value == 'true') {
+                    if (!this.#isOpen) {
+                        this.open()
+                    }
+                } else {
+                    if (this.#isOpen) {
+                        this.close()
+                    }
+                }
+                break;
+            case 'id':
+                this.id = value;
+                break;
+        }
+
+    }
+    onBackgroundClick() {
+        this.dispatchCloseEvent('BACKGROUND_CLICK');
+        if (this.config.autoCloseOnBackgroundClick) {
+            this.close();
+        }
+
+    }
+    dispatchCloseEvent(type) {
+        //we have many ways to dispatch close event like back button on close clicked
+        const event = new CustomEvent("close", { detail: { eventType: type } });
+        this.dispatchEvent(event);
+    }
+    /**
+ * @public
+ * will close modal
+ */
+    close() {
+        this.#isOpen = false;
+        this.elements.componentWrapper.classList.remove('--opened')
+        this.elements.componentWrapper.classList.add('--closed');
+        const history = window.history;
+        const location = window.location;
+        if (location.hash == `#${this.id}`) {
+            history.go(-1)
+        }
+    }
+    /**
+     * @public
+     * will open modal
+     */
+    open() {
+        this.#isOpen = true;
+        this.elements.componentWrapper.classList.remove('--closed');
+        this.elements.componentWrapper.classList.add('--opened');
+        if (this.id) {
+            const history = window.history;
+            const location = window.location;
+            if (!(location.hash == `#${this.id}`)) {
+                history.pushState({ JBModal: {} }, "", `#${this.id}`)
+            }
+        }
+    }
+    /**
+     * @private
+     * when brower back button clicked physically or byy code
+     */
+    onBrowserBack(e) {
+        if (this.isOpen) {
+            this.dispatchCloseEvent('HISTORY_BACK_EVENT');
+            if (this.config.autoCloseOnBackgroundClick) {
+                this.close();
+            }
+        }
+    }
+}
+const myElementNotExists = !customElements.get('jb-modal');
+if (myElementNotExists) {
+    window.customElements.define('jb-modal', JBModalWebComponent);
+}

package/lib/JBModal.scss

@@ -0,0 +1,44 @@
+.jb-modal-web-component {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    &.--closed{
+        display: none;
+    }
+    &.--opened{
+        display: block;
+    }
+    .modal-background {
+        position: absolute;
+        top: 0;
+        left: 0;
+        background-color: rgba(255, 255, 255, 0.1);
+        backdrop-filter: blur(10px);
+        z-index: 2;
+        width: 100%;
+        height: 100%;
+    }
+    .modal-content-wrapper{
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 2;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        pointer-events: none;
+        .modal-content{
+            pointer-events: all;
+            width: auto;
+            height: auto;
+            background-color: #fff;
+            border-radius: 24px;
+        }
+    }
+    
+}

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "jb-modal",
+  "description": "modal web component",
+  "type": "module",
+  "author": {
+		"name": "mohammad javad bathaei",
+		"email": "javadbat@gmail.com"
+	},
+  "keywords": [
+    "jb",
+    "jb-modal",
+    "dialog",
+    "modal window",
+    "pop up",
+    "web component"
+  ],
+  "version": "1.0.0",
+  "bugs": "https://github.com/javadbat/jb-modal/issues",
+  "license": "MIT",
+  "files": [
+    "LICENSE",
+    "README.md",
+    "lib/",
+    "dist/"
+  ],
+  "main": "index.js",
+  "repository": {
+		"type": "git",
+		"url": "git@github.com:javadbat/jb-modal.git"
+  }
+}