web-push-notifications
Version:
Pushwoosh web push notifications
2 lines • 5.92 kB
JavaScript
!function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var n=e();for(var o in n)("object"==typeof exports?exports:t)[o]=n[o]}}(this,()=>(()=>{"use strict";var t={d:(e,n)=>{for(var o in n)t.o(n,o)&&!t.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:n[o]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};t.r(e),t.d(e,{PWSubscriptionPromptWidget:()=>i});const n={headerText:"Subscribe to our news",headerTextColor:"#000000",subheaderText:"Don't miss out on the latest news and updates!",subheaderTextColor:"#000000",buttonAcceptText:"Agree",buttonAcceptTextColor:"#1A72E8",buttonAcceptRound:"4px",buttonAcceptBackgroundColor:"#FFFFFF",buttonAcceptBorderColor:"#E3E4E8",buttonCancelText:"Deny",buttonCancelTextColor:"#1A72E8",buttonCancelRound:"4px",buttonCancelBackgroundColor:"#FFFFFF",buttonCancelBorderColor:"#E3E4E8",cappingCount:3,cappingDelay:144e5,backgroundColor:"#FFFFFF"},o="pushwoosh-subscription-widget";class i{constructor(t){this.pw=t}async run(){const{pw:t}=this,e=await t.data.getFeatures(),o=(t=>{const e=t.subscription_prompt_widget&&t.subscription_prompt_widget.params,o={cappingCount:n.cappingCount,cappingDelay:n.cappingDelay,...e};return e?o:n})(e),i=await(async(t,e)=>{const n=(new Date).getTime(),o=await e.data.getPromptDisplayCount(),i=await e.data.getPromptLastSeenTime(),r=t.cappingCount>o,s=n-i>t.cappingDelay;return r&&s})(o,t);if(!i)return;const r=e.subscription_prompt?.use_case,s="default"===r,c="not-set"===r&&t.initParams.autoSubscribe;(s||c)&&(this.init(o),this.show(),t.moduleRegistry.subscriptionPrompt=this),await(async t=>{const e=await t.data.getPromptDisplayCount(),n=(new Date).getTime();await t.data.setPromptDisplayCount(e+1),await t.data.setPromptLastSeenTime(n)})(t)}init(t){if(!this.getRootElement()){const e=(t=>`\n <div id="${o}-root" class="${o}">\n <div class="${o}__body">\n <div class="${o}__header">\n ${t.headerText}\n </div>\n <div class="${o}__description">\n ${t.subheaderText}\n </div>\n <div class="${o}__controls">\n <button type="button" id="${o}-decline" class="${o}__control ${o}__control_decline">\n ${t.buttonCancelText}\n </button>\n <button type="button" id="${o}-accept" class="${o}__control ${o}__control_accept">\n ${t.buttonAcceptText}\n </button>\n </div>\n </div>\n </div>\n `)(t),n=(t=>{const e=document.createElement("style");return e.innerHTML=`\n .${o} * {\n box-sizing: border-box!important;\n }\n \n .${o} {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n margin: 0 auto;\n width: 320px;\n display: none;\n z-index: 2147483648;\n opacity: 0.99;\n }\n \n .${o}_show {\n display: block;\n }\n \n .${o}__body {\n width: 320px;\n background-color: ${t.backgroundColor?t.backgroundColor:"#FFFFFF"};\n box-shadow: 0 9px 15px rgba(0, 0, 0, 0.1), 0 0 6px rgba(0, 0, 0, 0.06);\n border-radius: 4px;\n padding: 20px 20px 12px;\n }\n \n .${o}__header {\n color: ${t.headerTextColor};\n font-size: 18px;\n font-weight: bold; \n }\n \n .${o}__description {\n color: ${t.subheaderTextColor};\n font-size: 14px;\n line-height: 1.5;\n margin-top: 14px;\n }\n \n .${o}__description:empty {\n display: none;\n }\n \n .${o}__controls {\n display: flex;\n flex-wrap: nowrap;\n justify-content: flex-end;\n margin: 20px 0 0;\n }\n \n .${o}__control {\n -webkit-appearance: none;\n border: 1px solid transparent;\n font-size: 12px;\n font-weight: bold;\n padding: 0 20px;\n height: 32px;\n cursor: pointer;\n }\n \n .${o}__control_decline {\n color: ${t.buttonCancelTextColor};\n background-color: ${t.buttonCancelBackgroundColor};\n border-radius: ${t.buttonCancelRound};\n border-color: ${t.buttonCancelBorderColor};\n }\n \n .${o}__control_accept {\n color: ${t.buttonAcceptTextColor};\n background-color: ${t.buttonAcceptBackgroundColor};\n border-radius: ${t.buttonAcceptRound};\n border-color: ${t.buttonAcceptBorderColor};\n margin: 0 0 0 12px;\n }\n `,e})(t);document.body.insertAdjacentHTML("beforeend",e),document.head.appendChild(n)}this.addEventListeners()}show(){const t=this.getRootElementWithCheckExist();this.pw.dispatchEvent("show-subscription-widget",{}),t.classList.add(`${o}_show`)}hide(){const t=this.getRootElementWithCheckExist();t.classList.contains(`${o}_show`)&&(this.pw.dispatchEvent("hide-subscription-widget",{}),t.classList.remove(`${o}_show`))}getRootElement(){return document.getElementById(`${o}-root`)}getRootElementWithCheckExist(){const t=this.getRootElement();if(!t)throw new Error(`Can't find element by id "${o}-root", please use method init first.`);return t}getDeclineButtonWithCheckExist(){const t=document.getElementById(`${o}-decline`);if(!t)throw new Error(`Can't find element by id "${o}-decline", please use method init first.`);return t}getAcceptButtonWithCheckExist(){const t=document.getElementById(`${o}-accept`);if(!t)throw new Error(`Can't find element by id "${o}-accept", please use method init first.`);return t}addEventListeners(){const t=this.getRootElementWithCheckExist(),e=this.getDeclineButtonWithCheckExist(),n=this.getAcceptButtonWithCheckExist();document.addEventListener("click",e=>{t.contains(e.target)||this.hide()}),e.addEventListener("click",()=>{this.hide()}),n.addEventListener("click",()=>{this.hide(),this.pw.subscribe()})}}return e})());
//# sourceMappingURL=widget-subscription-prompt.js.map