web-push-notifications/widget-subscribe-popup.js

Pushwoosh web push notifications

!function(t,n){if("object"==typeof exports&&"object"==typeof module)module.exports=n();else if("function"==typeof define&&define.amd)define([],n);else{var e=n();for(var o in e)("object"==typeof exports?exports:t)[o]=e[o]}}(this,()=>(()=>{"use strict";var t={d:(n,e)=>{for(var o in e)t.o(e,o)&&!t.o(n,o)&&Object.defineProperty(n,o,{enumerable:!0,get:e[o]})},o:(t,n)=>Object.prototype.hasOwnProperty.call(t,n),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},n={};t.r(n),t.d(n,{PWSubscribePopupWidget:()=>i});const e={enable:!0,text:"Don’t miss out on our news and updates! Enable push notifications",askLaterButtonText:"Not now",confirmSubscriptionButtonText:"Subscribe",delay:5,retryOffset:604800,overlay:!1,position:"top",mobileViewMargin:"0",bgColor:"#fff",borderColor:"transparent",boxShadow:"0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)",textColor:"#000",textSize:"inherit",textWeight:"normal",fontFamily:"inherit",subscribeBtnBgColor:"#4285f4",subscribeBtnTextColor:"#fff",subscribeBtnTextWeight:"normal",subscribeBtnBorderColor:"transparent",subscribeBtnBorderRadius:"2px",askLaterBtnBgColor:"transparent",askLaterBtnTextColor:"#000",askLaterBtnTextWeight:"normal",askLaterBtnBorderColor:"transparent",askLaterBtnBorderRadius:"2px",theme:"material",viewport:"html"},o=/^(#([\da-f]{3}){1,2}$|(rgb|hsl)a\((\d{1,3}%?,\s?){3}(1|0?\.\d+)\)$|(rgb|hsl)\(\d{1,3}%?(,\s?\d{1,3}%?){2}\)$)/i,p=[{name:"mobileViewMargin",type:"string"},{name:"mobileViewPosition",type:"string"},{name:"mobileViewTransition",type:"string"},{name:"bgColor",type:"color"},{name:"borderColor",type:"color"},{name:"boxShadow",type:"string"},{name:"textColor",type:"color"},{name:"textSize",type:"string"},{name:"textWeight",type:"string"},{name:"fontFamily",type:"string"},{name:"subscribeBtnBgColor",type:"color"},{name:"subscribeBtnTextColor",type:"color"},{name:"subscribeBtnTextWeight",type:"string"},{name:"subscribeBtnBorderColor",type:"color"},{name:"subscribeBtnBorderRadius",type:"string"},{name:"askLaterBtnBgColor",type:"color"},{name:"askLaterBtnTextColor",type:"color"},{name:"askLaterBtnTextWeight",type:"string"},{name:"askLaterBtnBorderColor",type:"color"},{name:"askLaterBtnBorderRadius",type:"string"}];class i{constructor(t){this.pw=t;const{mobileViewMargin:n=""}=t.initParams.subscribePopup||{};this.config={...e,...t.initParams.subscribePopup,mobileViewTransition:n?"none":"bottom .4s ease-out",mobileViewPosition:n?"auto!important":"auto"},this.onAskLaterClick=this.onAskLaterClick.bind(this),this.onSubscribeClick=this.onSubscribeClick.bind(this)}async run(){const{manualToggle:t}=this.config,[n,e]=await Promise.all([this.pw.isSubscribed(),this.pw.data.getStatusManualUnsubscribed()]);if(n||!t&&e)return;const o=this.pw.driver.getPermission();if("granted"===o||"denied"===o)return;if(this.renderPopup(),this.appendStyles(),this.pw.moduleRegistry.subscribePopup=this,this.pw.dispatchEvent("subscribe-popup-ready",{}),t)return;const p=localStorage.getItem("LAST_OPEN_SUBSCRIPTION_POPUP"),i=p?parseInt(p):0,s=(new Date).getTime();i+1e3*this.config.retryOffset<s&&setTimeout(()=>{this.toggle(!0)},1e3*this.config.delay)}toggle(t){const n=void 0===t?!this.isShown:!!t;n!==this.isShown&&(n?this.show():this.hide())}async show(){if(await this.pw.isSubscribed())return;this.isShown=!0,this.popup.classList.add("pw-show"),document.body.classList.add("pw-popup-opened");const t=new CustomEvent("showPopup",{bubbles:!1,cancelable:!1,detail:{popup:this.popup}});this.popup.dispatchEvent(t);if(Math.max(document.documentElement.clientWidth,window.innerWidth||0)<541)return;const{theme:n,viewport:e,position:o}=this.config;if("topbar"===n&&"top"===o){const t=document.querySelector(e)||document.createElement("div"),n=window.getComputedStyle(t).marginTop||"0";t.style.transition="margin-top .3s ease-out",t.style.marginTop=`${parseInt(n)+this.popup.getBoundingClientRect().height}px`}this.pw.dispatchEvent("subscribe-popup-show",{})}hide(){this.isShown=!1,this.popup.classList.remove("pw-show"),document.body.classList.remove("pw-popup-opened");const t=new CustomEvent("hidePopup",{bubbles:!1,cancelable:!1,detail:{popup:this.popup}});this.popup.dispatchEvent(t);const n=(new Date).getTime().toString();localStorage.setItem("LAST_OPEN_SUBSCRIPTION_POPUP",n);if(Math.max(document.documentElement.clientWidth,window.innerWidth||0)<541)return;const{theme:e,viewport:o,position:p}=this.config;if("topbar"===e&&"top"===p){const t=document.querySelector(o)||document.createElement("div"),n=window.getComputedStyle(t).marginTop||"0";t.style.marginTop=parseInt(n)-this.popup.getBoundingClientRect().height+"px"}this.pw.dispatchEvent("subscribe-popup-hide",{})}renderPopup(){this.popup=document.createElement("div"),this.popup.id="pwSubscribePopup";const{text:t,askLaterButtonText:n,confirmSubscriptionButtonText:e,iconUrl:o,iconAlt:p,position:i,overlay:s,theme:r}=this.config;this.popup.className=`pw-subscribe-popup pw-position-${i} pw-subscribe-popup-${r}`,this.popup.classList.toggle("pw-subscribe-popup__overlay",s),this.popup.innerHTML=(({iconUrl:t,iconAlt:n,text:e,askLaterButtonText:o,confirmSubscriptionButtonText:p})=>`<div class="pw-subscription-popup-inner">\n    <div class="pw-subscription-popup-content">\n      ${t?`<div class="pw-subscription-popup-icon"><img src="${t}" alt="${n||"Subscribe"}"></div>`:""}\n      <div class="pw-subscription-popup-text">\n        ${e}\n      </div>\n    </div>\n    <div class="pw-subscription-popup-controls">\n      <button name="pwAskLater" class="pw-subscribe-popup-button">${o}</button>\n      <button name="pwSubscribe" class="pw-subscribe-popup-button pw-subscribe-popup-button-active">${p}</button>\n    </div>\n  </div>`)({text:t,askLaterButtonText:n,confirmSubscriptionButtonText:e,iconUrl:o,iconAlt:p}),document.body.appendChild(this.popup),this.addListeners()}appendStyles(){const t=document.createElement("style");t.innerHTML=this.configureStyle(".pw-subscribe-popup {\n  position: fixed;\n  left: 50%;\n  transform: translateX(-50%);\n  justify-content: center;\n  z-index: 1000000;\n  display: flex;\n  transition: all .4s ease-out;\n}\n\n.pw-subscribe-popup.pw-position-top {\n  top: calc(-100% - 24px);\n}\n.pw-subscribe-popup.pw-position-top.pw-show {\n  top: 0;\n}\n\n.pw-subscribe-popup.pw-position-bottom {\n  bottom: calc(-100% - 24px);\n}\n.pw-subscribe-popup.pw-position-bottom.pw-show {\n  bottom: 0;\n}\n\n.pw-subscribe-popup.pw-position-center {\n  display: flex;\n\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  justify-content: center;\n  align-items: center;\n\n  transform: none;\n}\n\n.pw-subscribe-popup__overlay {\n  background: rgba(0,0,0,.4);\n  z-index: 1000000;\n}\n\n.pw-subscribe-popup.pw-position-center:not(.pw-subscribe-popup__overlay) {\n  pointer-events: none;\n}\n\n.pw-subscribe-popup.pw-position-center:not(.pw-show) {\n  display: none;\n}\n\n\n.pw-subscribe-popup__overlay.pw-position-top {\n  align-items: flex-start;\n}\n\n.pw-subscribe-popup__overlay.pw-position-bottom {\n  align-items: flex-end;\n}\n\n.pw-subscribe-popup__overlay.pw-position-center {\n  align-items: center;\n}\n\n.pw-subscription-popup-inner {\n  max-width: 400px;\n  font-size: var(--textSize);\n  color: var(--textColor);\n  font-weight: var(--textWeight);\n  font-family: var(--fontFamily);\n  border-style: solid;\n  border-width: 1px;\n  border-color: var(--borderColor);\n  background: var(--bgColor);\n  box-shadow: var(--boxShadow);\n  pointer-events: auto;\n}\n\n.pw-subscription-popup-content {\n  padding: 16px 16px 4px;\n  display: flex;\n  justify-content: stretch;\n}\n\n.pw-subscription-popup-icon {\n  flex: 0 0 50px;\n  margin-right: 12px;\n  padding-top: 4px;\n}\n\n.pw-subscription-popup-icon img {\n  max-width: 60px;\n  max-height: 60px;\n}\n\n.pw-subscription-popup-text {\n  flex: 1 1 300px;\n}\n\n.pw-subscription-popup-controls {\n  display: flex;\n  flex-wrap: nowrap;\n  justify-content: center;\n  padding: 8px 16px 16px;\n}\n\nbutton.pw-subscribe-popup-button {\n  border: solid 1px var(--askLaterBtnBorderColor);\n  border-radius: var(--askLaterBtnBorderRadius);\n  display: inline-block;\n  height: 36px;\n  line-height: 36px;\n  padding: 0 16px;\n  text-transform: uppercase;\n  font-weight: var(--askLaterBtnTextWeight);\n  vertical-align: middle;\n  -webkit-tap-highlight-color: transparent;\n  font-size: 14px;\n  outline: 0;\n  text-decoration: none;\n  color: var(--askLaterBtnTextColor);\n  text-align: center;\n  letter-spacing: .5px;\n  cursor: pointer;\n  background: var(--askLaterBtnBgColor);\n  margin: 4px 8px;\n}\nbutton.pw-subscribe-popup-button:hover {\n  background: rgba(0,0,0,.04);\n}\nbutton.pw-subscribe-popup-button:active {\n  background: rgba(0,0,0,.12);\n}\n\nbutton.pw-subscribe-popup-button.pw-subscribe-popup-button-active {\n  color: var(--subscribeBtnTextColor);\n  background: var(--subscribeBtnBgColor);\n  border-radius: var(--subscribeBtnBorderRadius);\n  border: solid 1px var(--subscribeBtnBorderColor);\n  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),\n  0 3px 1px -2px rgba(0,0,0,0.12),\n  0 1px 5px 0 rgba(0,0,0,0.2);\n  font-weight: var(--subscribeBtnTextWeight);\n}\nbutton.pw-subscribe-popup-button.pw-subscribe-popup-button-active:hover {\n  box-shadow: 0 3px 3px 0 rgba(0,0,0,0.14),\n  0 1px 7px 0 rgba(0,0,0,0.12),\n  0 3px 1px -1px rgba(0,0,0,0.2);\n}\nbutton.pw-subscribe-popup-button.pw-subscribe-popup-button-active:active {\n  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),\n  0 3px 1px -2px rgba(0,0,0,0.12),\n  0 1px 5px 0 rgba(0,0,0,0.2);\n}\n\n@media screen and (min-width: 541px) {\n\n  .pw-subscribe-popup-topbar {\n    width: 100%;\n  }\n\n  .pw-subscribe-popup-topbar .pw-subscription-popup-inner {\n    max-width: 100%;\n    width: 100%;\n    display: flex;\n    flex-direction: row;\n    padding: 2px 40px;\n    justify-content: center;\n    align-items: center;\n    flex-wrap: nowrap;\n  }\n\n  .pw-subscribe-popup-topbar .pw-subscription-popup-content {\n    padding: 0;\n    justify-content: flex-start;\n    align-items: center;\n  }\n\n  .pw-subscribe-popup-topbar .pw-subscription-popup-icon img {\n    max-width: 28px;\n    max-height: 28px;\n  }\n\n  .pw-subscribe-popup-topbar button.pw-subscribe-popup-button {\n    height: 32px;\n    line-height: 32px;\n  }\n\n  .pw-subscribe-popup-topbar .pw-subscription-popup-controls {\n    padding: 0 0 0 16px;\n    align-items: center;\n  }\n}\n@media screen and (max-width: 540px) {\n  .pw-subscribe-popup,\n  .pw-subscribe-popup.pw-position-top,\n  .pw-subscribe-popup.pw-position-center,\n  .pw-subscribe-popup.pw-position-bottom {\n    top: var(--mobileViewPosition);\n    bottom: -110%;\n    left: 0;\n    right: 0;\n    transform: none;\n    display: flex;\n    transition: var(--mobileViewTransition);\n    align-items: flex-end;\n  }\n\n  .pw-subscribe-popup.pw-subscribe-popup__overlay {\n    align-items: flex-end;\n  }\n\n  .pw-subscribe-popup.pw-show {\n    bottom: var(--mobileViewMargin);\n  }\n\n  .pw-subscribe-popup__overlay .pw-subscription-popup-inner {\n    align-items: flex-end;\n    justify-content: stretch;\n  }\n\n  .pw-subscription-popup-inner {\n    max-width: 100%;\n    width: 100%;\n  }\n}\n"),document.body.appendChild(t)}getStyleFormatter(t){switch(t.type){case"size":return`${this.config[t.name]||0}px`;case"number":return parseFloat(this.config[t.name].toString()).toString();case"string":return this.config[t.name].toString();case"color":return"transparent"===(n=this.config[t.name].toString())||o.test(n)?n:"#333";default:return"none"}var n}configureStyle(t){let n=t.toString();return p.forEach(t=>{const e=new RegExp(`var\\(--${t.name}\\)`,"ig"),o=this.getStyleFormatter(t);n=n.replace(e,o)}),n}addListeners(){const t=this.popup.querySelector('button[name="pwAskLater"]')||document.createElement("button"),n=this.popup.querySelector('button[name="pwSubscribe"]')||document.createElement("button");t.addEventListener("click",this.onAskLaterClick),n.addEventListener("click",this.onSubscribeClick)}onAskLaterClick(){this.toggle(!1),this.pw.dispatchEvent("subscribe-popup-decline",{})}onSubscribeClick(){this.toggle(!1),this.pw.dispatchEvent("subscribe-popup-accept",{}),this.pw.subscribe()}}return n})());
//# sourceMappingURL=widget-subscribe-popup.js.map