diff --git a/README.md b/README.md index 936510c..d806fd9 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# Easy Popup v0.0.4 +# Easy Popup v0.0.5 Super light-weight JavaScript library to create a simple popup with mobile layout. @@ -35,7 +35,8 @@ Init with HTML attributes
+ data-easy-popup-theme="my-style" + data-easy-popup-click-outside-to-close="false">

Your content.

``` @@ -51,6 +52,8 @@ EasyPopup.init('.popup', { closeButtonHTML: 'Click to close', // set custom HTML for close button outerClass: 'my-popup', // custom class for popup theme: 'default', // to create multiple themes + clickOutsideToClose: true, // true by default + keyboard: true, // to close the popup by keyboard (ESC) onOpen: data => { }, onClose: data => { diff --git a/dist/easy-popup.min.css b/dist/easy-popup.min.css index 8d8905b..e544c9a 100644 --- a/dist/easy-popup.min.css +++ b/dist/easy-popup.min.css @@ -1,4 +1,4 @@ /*! - * Easy Popup v0.0.4 + * Easy Popup v0.0.5 * https://github.com/viivue/easy-popup */html.easy-popup-open{overflow:hidden}html:not(.easy-popup-open) .easy-popup-master{opacity:0;visibility:hidden}.easy-popup-master{--easy-popup-mobile-breakpoint:1023px;--easy-popup-heading-height:45px;--easy-popup-top-empty-space:100px;position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;background:rgba(0,0,0,.3);backdrop-filter:blur(2px);transition:opacity .4s ease,visibility .4s ease}.easy-popup:not(.open){opacity:0;visibility:hidden;transform:scale(1.05);pointer-events:none}.easy-popup{position:absolute;top:0;left:0;height:100%;width:100%;transition:opacity .4s ease,visibility .4s ease,transform .4s ease;display:flex;align-items:center;justify-content:center}.easy-popup-overflow{position:relative;z-index:2;width:100%;max-height:100%;overflow-y:auto;overflow-x:hidden}.easy-popup-overflow ::-webkit-scrollbar{width:7px}.easy-popup-overflow ::-webkit-scrollbar-track{background:#eee}.easy-popup-overflow ::-webkit-scrollbar-thumb{background-color:#000}.easy-popup-mobile-heading{display:none;position:absolute;top:0;left:0;width:100%;background:#eee;border-radius:10px 10px 0 0}.easy-popup-heading-inner{display:flex;align-items:center;justify-content:space-between;min-height:var(--easy-popup-heading-height);padding:5px 20px}.easy-popup-container{position:relative;padding:40px 20px;box-sizing:border-box;width:100%;max-width:915px;margin:0 auto}.easy-popup-inner{position:relative}[data-easy-popup]:not(.easy-popup-enabled){display:none}.easy-popup-content{background:#fff;padding:40px;position:relative;border-radius:10px;overflow:hidden}.easy-popup-close-button{position:absolute;top:0;right:0;z-index:2;padding:10px;background:0 0;border:none}.easy-popup-close-button svg{transition:all .3s ease}.easy-popup-close-button:hover svg{fill:#ef1616}@media only screen and (max-width:1023px){.easy-popup-content{padding:25px 20px}.easy-popup.easy-popup-has-mobile-layout{align-items:flex-end}.easy-popup.easy-popup-has-mobile-layout .easy-popup-overflow{padding-top:var(--easy-popup-heading-height);overflow:hidden;display:flex}.easy-popup.easy-popup-has-mobile-layout .easy-popup-container{padding:0;overflow:auto;max-width:100%;min-height:calc(80vh - var(--easy-popup-top-empty-space));background:#fff}.easy-popup.easy-popup-has-mobile-layout .easy-popup-close-button:not(.mobile){display:none}.easy-popup.easy-popup-has-mobile-layout:not(.open) .easy-popup-overflow{transform:translateY(20%)}.easy-popup.easy-popup-has-mobile-layout .easy-popup-overflow{transition:transform .3s ease}.easy-popup.easy-popup-has-mobile-layout .easy-popup-mobile-heading{display:block}}[data-easy-popup-theme=right-side].easy-popup:not(.open){opacity:1;transform:translateX(100%)}[data-easy-popup-theme=right-side] .easy-popup-container{margin:0 0 0 auto;padding:0}[data-easy-popup-theme=right-side] .easy-popup-content{border-radius:0;height:100vh;overflow:auto} \ No newline at end of file diff --git a/dist/easy-popup.min.js b/dist/easy-popup.min.js index 898f84e..867b709 100644 --- a/dist/easy-popup.min.js +++ b/dist/easy-popup.min.js @@ -1,5 +1,5 @@ /*! - * Easy Popup v0.0.4 + * Easy Popup v0.0.5 * https://github.com/viivue/easy-popup */ -!function(t){class e{constructor(t,e){if(!t)return void console.warn("Init popup fail due to empty input!");this.root=document.querySelector(":root"),this.el=t,this.selector="data-easy-popup",this.attributes={id:`${this.selector}-id`,title:`${this.selector}-title`,toggle:`${this.selector}-toggle`,mobileLayout:`${this.selector}-mobile`,theme:`${this.selector}-theme`},this.classes={master:"easy-popup-master",processed:"easy-popup-enabled",triggerEnabled:"easy-popup-trigger-enabled",content:"easy-popup-content",outer:"easy-popup",inner:"easy-popup-inner",center:"easy-popup-center",overflow:"easy-popup-overflow",container:"easy-popup-container",open:"open",closeButton:"easy-popup-close-button",mobileHeading:"easy-popup-mobile-heading",hasMobileLayout:"easy-popup-has-mobile-layout",ignoreClick:"easy-popup-ignore-click"},this.innerHTML=this.el.innerHTML,this.isOpen=!1,this.options={id:this.uniqueId("easy-popup-"),outerClass:"",title:"",closeButtonHTML:'',triggerSelector:"",hasMobileLayout:!1,theme:"default",onClose:()=>{},onOpen:()=>{},...e},this.id=this.el.getAttribute(this.selector)||this.options.id,this.title=this.el.getAttribute(this.attributes.title)||this.options.title,this.theme=this.el.getAttribute(this.attributes.theme)||this.options.theme;const s=this.el.getAttribute(this.attributes.mobileLayout);this.hasMobileLayout=s?"false"!==s:this.options.hasMobileLayout,this.closeButtonHTML=this.options.closeButtonHTML,this.masterContainer=document.querySelector(`.${this.classes.master}`),this.generateHTML();let i=`a[href="#${this.id}"], [${this.attributes.toggle}="${this.id}"]`;i=this.options.triggerSelector?`${this.options.triggerSelector}, ${i}`:i,document.querySelectorAll(i).forEach((t=>{t.classList.add(this.classes.triggerEnabled),t.addEventListener("click",(t=>{t.preventDefault(),this.toggle()}))}))}generateHTML(){this.el.classList.contains(this.classes.processed)||(this.masterContainer||(this.masterContainer=document.createElement("div"),this.masterContainer.classList.add(this.classes.master)),document.querySelector("body").appendChild(this.masterContainer),this.masterContainer.appendChild(this.el),this.inner=this.wrap(this.el),this.inner.classList.add(this.classes.inner),this.closeButton=document.createElement("button"),this.closeButton.classList.add(this.classes.closeButton),this.closeButton.innerHTML=this.closeButtonHTML,this.closeButton.setAttribute(this.attributes.toggle,""),this.closeButton.addEventListener("click",(()=>this.close())),this.inner.appendChild(this.closeButton),this.container=this.wrap(this.inner),this.container.classList.add(this.classes.container),this.overflow=this.wrap(this.container),this.overflow.classList.add(this.classes.overflow),this.mobileHeading=document.createElement("div"),this.mobileHeading.classList.add(this.classes.mobileHeading),this.mobileHeading.innerHTML=`
\n
${this.title}
\n \n
`,this.overflow.appendChild(this.mobileHeading),this.outer=this.wrap(this.overflow),this.outer.classList.add(this.classes.outer),this.options.outerClass&&this.outer.classList.add(this.options.outerClass),this.hasMobileLayout&&this.outer.classList.add(this.classes.hasMobileLayout),this.outer.setAttribute(this.attributes.id,this.id),this.outer.setAttribute(this.attributes.theme,this.theme),this.outer.addEventListener("click",(t=>{t.target.classList.contains(this.classes.ignoreClick)||this.isClickOutsideContent(t)&&this.close()})),this.outer.querySelectorAll("[data-easy-popup-toggle]").forEach((t=>{t.addEventListener("click",(()=>this.close()))})),this.el.classList.add(this.classes.processed,this.classes.content))}isClickOutsideContent(t){return!this.inner.contains(t.target)&&!this.mobileHeading.contains(t.target)}open(){window.EasyPopupData.active&&t.get(window.EasyPopupData.active).close(),window.EasyPopupData.active=this.id,this.outer.classList.add(this.classes.open),this.isOpen=!0,this.root.classList.add("easy-popup-open"),this.root.style.paddingRight=`${this.getScrollbarWidth()}px`,this.root.style.overflow="hidden","function"==typeof this.options.onOpen&&this.options.onOpen(this)}close(){window.EasyPopupData.active="",this.outer.classList.remove(this.classes.open),this.isOpen=!1,this.root.classList.remove("easy-popup-open"),setTimeout((()=>{window.EasyPopupData.active||(this.root.style.paddingRight="",this.root.style.overflow=""),"function"==typeof this.options.onClose&&this.options.onClose(this)}),300)}toggle(){this.isOpen?this.close():this.open()}wrap(t,e=document.createElement("div")){return t.parentNode.insertBefore(e,t),e.appendChild(t),e}getScrollbarWidth(){const t=document.createElement("div");t.style.visibility="hidden",t.style.overflow="scroll",t.style.msOverflowStyle="scrollbar",document.body.appendChild(t);const e=document.createElement("div");t.appendChild(e);const s=t.offsetWidth-e.offsetWidth;return t.parentNode.removeChild(t),s}uniqueId(t=""){return t+(+new Date).toString(16)+(1e8*Math.random()|0).toString(16)}}window.EasyPopupData=new class{constructor(){this.active="",this.popups=[]}add(t){this.popups.push(t)}get(t){return this.popups.filter((e=>e.id===t))[0]}},t.init=(t="[data-easy-popup]",s={})=>{document.querySelectorAll(t).forEach((t=>window.EasyPopupData.add(new e(t,s))))},t.init(),t.get=t=>window.EasyPopupData.get(t)}(window.EasyPopup=window.EasyPopup||{}); \ No newline at end of file +!function(t){class e{constructor(t,e){if(!t)return void console.warn("Init popup fail due to empty input!");this.root=document.querySelector(":root"),this.el=t,this.selector="data-easy-popup",this.attributes={id:`${this.selector}-id`,title:`${this.selector}-title`,toggle:`${this.selector}-toggle`,mobileLayout:`${this.selector}-mobile`,theme:`${this.selector}-theme`,clickOutsideToClose:`${this.selector}-click-outside-to-close`},this.classes={master:"easy-popup-master",processed:"easy-popup-enabled",triggerEnabled:"easy-popup-trigger-enabled",content:"easy-popup-content",outer:"easy-popup",inner:"easy-popup-inner",center:"easy-popup-center",overflow:"easy-popup-overflow",container:"easy-popup-container",open:"open",closeButton:"easy-popup-close-button",mobileHeading:"easy-popup-mobile-heading",hasMobileLayout:"easy-popup-has-mobile-layout",ignoreClick:"easy-popup-ignore-click"},this.innerHTML=this.el.innerHTML,this.isOpen=!1,this.options={id:this.uniqueId("easy-popup-"),outerClass:"",title:"",closeButtonHTML:'',triggerSelector:"",hasMobileLayout:!1,theme:"default",keyboard:!0,clickOutsideToClose:!0,onClose:()=>{},onOpen:()=>{},...e},this.id=this.el.getAttribute(this.selector)||this.options.id,this.title=this.el.getAttribute(this.attributes.title)||this.options.title,this.theme=this.el.getAttribute(this.attributes.theme)||this.options.theme,this.isClickOutsideToClose=this.isBooleanOptionTrue(this.attributes.clickOutsideToClose,this.options.clickOutsideToClose),this.hasMobileLayout=this.isBooleanOptionTrue(this.attributes.mobileLayout,this.options.hasMobileLayout),this.closeButtonHTML=this.options.closeButtonHTML,this.masterContainer=document.querySelector(`.${this.classes.master}`),this.generateHTML();let s=`a[href="#${this.id}"], [${this.attributes.toggle}="${this.id}"]`;s=this.options.triggerSelector?`${this.options.triggerSelector}, ${s}`:s,document.querySelectorAll(s).forEach((t=>{t.classList.add(this.classes.triggerEnabled),t.addEventListener("click",(t=>{t.preventDefault(),this.toggle()}))}))}isBooleanOptionTrue(t,e){const s=this.el.getAttribute(t);return s?"false"!==s:e}generateHTML(){this.el.classList.contains(this.classes.processed)||(this.masterContainer||(this.masterContainer=document.createElement("div"),this.masterContainer.classList.add(this.classes.master)),document.querySelector("body").appendChild(this.masterContainer),this.masterContainer.appendChild(this.el),this.inner=this.wrap(this.el),this.inner.classList.add(this.classes.inner),this.closeButton=document.createElement("button"),this.closeButton.classList.add(this.classes.closeButton),this.closeButton.innerHTML=this.closeButtonHTML,this.closeButton.setAttribute(this.attributes.toggle,""),this.closeButton.addEventListener("click",(()=>this.close())),this.inner.appendChild(this.closeButton),this.container=this.wrap(this.inner),this.container.classList.add(this.classes.container),this.overflow=this.wrap(this.container),this.overflow.classList.add(this.classes.overflow),this.mobileHeading=document.createElement("div"),this.mobileHeading.classList.add(this.classes.mobileHeading),this.mobileHeading.innerHTML=`
\n
${this.title}
\n \n
`,this.overflow.appendChild(this.mobileHeading),this.outer=this.wrap(this.overflow),this.outer.classList.add(this.classes.outer),this.options.outerClass&&this.outer.classList.add(this.options.outerClass),this.hasMobileLayout&&this.outer.classList.add(this.classes.hasMobileLayout),this.outer.setAttribute(this.attributes.id,this.id),this.outer.setAttribute(this.attributes.theme,this.theme),this.outer.addEventListener("click",(t=>{t.target.classList.contains(this.classes.ignoreClick)||this.isClickOutsideContent(t)&&this.isClickOutsideToClose&&this.close()})),this.outer.querySelectorAll("[data-easy-popup-toggle]").forEach((t=>{t.addEventListener("click",(()=>this.close()))})),this.options.keyboard&&document.addEventListener("keyup",(t=>{this.isOpen&&"Escape"===t.key&&this.close()})),this.el.classList.add(this.classes.processed,this.classes.content))}isClickOutsideContent(t){return!this.inner.contains(t.target)&&!this.mobileHeading.contains(t.target)}open(){window.EasyPopupData.active&&t.get(window.EasyPopupData.active).close(),window.EasyPopupData.active=this.id,this.outer.classList.add(this.classes.open),this.isOpen=!0,this.root.classList.add("easy-popup-open"),this.root.style.paddingRight=`${this.getScrollbarWidth()}px`,this.root.style.overflow="hidden","function"==typeof this.options.onOpen&&this.options.onOpen(this)}close(){window.EasyPopupData.active="",this.outer.classList.remove(this.classes.open),this.isOpen=!1,this.root.classList.remove("easy-popup-open"),setTimeout((()=>{window.EasyPopupData.active||(this.root.style.paddingRight="",this.root.style.overflow=""),"function"==typeof this.options.onClose&&this.options.onClose(this)}),300)}toggle(){this.isOpen?this.close():this.open()}wrap(t,e=document.createElement("div")){return t.parentNode.insertBefore(e,t),e.appendChild(t),e}getScrollbarWidth(){const t=document.createElement("div");t.style.visibility="hidden",t.style.overflow="scroll",t.style.msOverflowStyle="scrollbar",document.body.appendChild(t);const e=document.createElement("div");t.appendChild(e);const s=t.offsetWidth-e.offsetWidth;return t.parentNode.removeChild(t),s}uniqueId(t=""){return t+(+new Date).toString(16)+(1e8*Math.random()|0).toString(16)}}window.EasyPopupData=new class{constructor(){this.active="",this.popups=[]}add(t){this.popups.push(t)}get(t){return this.popups.filter((e=>e.id===t))[0]}},t.init=(t="[data-easy-popup]",s={})=>{document.querySelectorAll(t).forEach((t=>window.EasyPopupData.add(new e(t,s))))},t.init(),t.get=t=>window.EasyPopupData.get(t)}(window.EasyPopup=window.EasyPopup||{}); \ No newline at end of file diff --git a/index.html b/index.html index 27454ad..e97c661 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ - Easy Popup v0.0.4 + Easy Popup v0.0.5 @@ -39,7 +39,7 @@
-

Easy Popup v0.0.4

+

Easy Popup v0.0.5

Click here to open popup 1.

Or here @@ -93,7 +93,8 @@

Easy Popup v0.0.4

iaculis. Inceptos pulvinar scelerisque duis facilisi elementum suscipit viverra ante velit litora. Viverra ornare urna mi fames bibendum enim nunc neque et nostra placerat.

-
+

Demo 1

Click here to open popup 2.

diff --git a/src/easy-popup.css b/src/easy-popup.css index 4a9188a..e3c952a 100644 --- a/src/easy-popup.css +++ b/src/easy-popup.css @@ -1,5 +1,5 @@ /*! - * Easy Popup v0.0.4 + * Easy Popup v0.0.5 * https://github.com/viivue/easy-popup */ /* master */ diff --git a/src/easy-popup.js b/src/easy-popup.js index fb58adb..8692ca2 100644 --- a/src/easy-popup.js +++ b/src/easy-popup.js @@ -1,5 +1,5 @@ /*! - * Easy Popup v0.0.4 + * Easy Popup v0.0.5 * https://github.com/viivue/easy-popup */ ;(function(EasyPopup){ @@ -22,6 +22,7 @@ toggle: `${this.selector}-toggle`, mobileLayout: `${this.selector}-mobile`, theme: `${this.selector}-theme`, + clickOutsideToClose: `${this.selector}-click-outside-to-close` }; this.classes = { master: 'easy-popup-master', @@ -52,18 +53,26 @@ triggerSelector: '', hasMobileLayout: false, // has mobile layout, false by default theme: 'default', + + keyboard: true, // option for closing the popup by keyboard (ESC) + + clickOutsideToClose: true, + onClose: () => { }, onOpen: () => { } }, ...options }; + + // get string options from attribute and js init this.id = this.el.getAttribute(this.selector) || this.options.id; this.title = this.el.getAttribute(this.attributes.title) || this.options.title; this.theme = this.el.getAttribute(this.attributes.theme) || this.options.theme; - const attrHasMobileLayout = this.el.getAttribute(this.attributes.mobileLayout); - this.hasMobileLayout = attrHasMobileLayout ? attrHasMobileLayout !== 'false' : this.options.hasMobileLayout; + // get boolean options from attribute and js init + this.isClickOutsideToClose = this.isBooleanOptionTrue(this.attributes.clickOutsideToClose, this.options.clickOutsideToClose); + this.hasMobileLayout = this.isBooleanOptionTrue(this.attributes.mobileLayout, this.options.hasMobileLayout); this.closeButtonHTML = this.options.closeButtonHTML; this.masterContainer = document.querySelector(`.${this.classes.master}`); @@ -82,6 +91,11 @@ }); } + isBooleanOptionTrue(attr, option){ + const attrValue = this.el.getAttribute(attr); + return attrValue ? attrValue !== 'false' : option; + } + generateHTML(){ // check flag if(this.el.classList.contains(this.classes.processed)) return; @@ -136,7 +150,7 @@ // close when click outside of content this.outer.addEventListener('click', e => { if(e.target.classList.contains(this.classes.ignoreClick)) return; - if(this.isClickOutsideContent(e)) this.close(); + if(this.isClickOutsideContent(e) && this.isClickOutsideToClose) this.close(); }); // close buttons on click @@ -144,6 +158,15 @@ btn.addEventListener('click', () => this.close()); }); + // add event listener when press ESC + if(this.options.keyboard){ + document.addEventListener('keyup', (e) => { + if(this.isOpen && e.key === 'Escape'){ + this.close(); + } + }); + } + // done init this.el.classList.add(this.classes.processed, this.classes.content); }