web-push-notifications
Version:
Pushwoosh web push notifications
2 lines • 17.8 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 o=e();for(var i in o)("object"==typeof exports?exports:t)[i]=o[i]}}(this,()=>(()=>{"use strict";var t={d:(e,o)=>{for(var i in o)t.o(o,i)&&!t.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:o[i]})},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,{PWSubscriptionButtonWidget:()=>b});const o="denied",i="granted",s="default",n="bottomRight",r="bottomLeft",a="topRight",p="topLeft",c={position:r,bgColor:"#12AE7E",bellColor:"white",bellStrokeColor:"#08754f",bellButtonBorder:"1px solid #379676",shadow:"0px 0px 6px rgba(0, 0, 0, 0.75)",size:"48px",indent:"20px",zIndex:"999999",tooltipText:{successSubscribe:"You are successfully subscribed!",needSubscribe:"Get notifications about important news!",blockSubscribe:"Click to see how to get notifications",alreadySubscribed:"You are already subscribed"}};class d{static getBellPosition(t,e){let o;switch(t){case n:o={top:"auto",left:"auto",bottom:e,right:e};break;case r:o={top:"auto",left:e,bottom:e,right:"auto"};break;case p:o={top:e,left:e,bottom:"auto",right:"auto"};break;case a:o={top:e,left:"auto",bottom:"auto",right:e};break;default:o={top:"auto",left:"auto",bottom:e,right:e}}return o}static getTooltipPosition(t,e){let o,i;const s=parseInt(e)+12+"px";switch(t){case n:o={right:s},i="right";break;case r:case p:o={left:s},i="left";break;default:o={right:s},i="right"}return[o,i]}static getPopoverPosition(t,e){let o,i;const s=parseInt(e)+15+"px";switch(t){case n:o={bottom:s,right:"0",left:"auto",top:"auto"},i="bottom";break;case r:o={bottom:s,left:"0",right:"auto",top:"auto"},i="bottom";break;case p:o={top:s,left:"0",right:"auto",bottom:"auto"},i="top";break;case a:o={top:s,right:"0",left:"auto",bottom:"auto"},i="top";break;default:o={bottom:s,right:"0",left:"auto",top:"auto"},i="bottom"}return[o,i]}static getPopoverArrowPosition(t,e){let o;switch(t){case n:o="\n.pushwoosh-subscribe-widget__popover__bottom:after {left: auto; right: "+(parseInt(e)/2-4+"px");break;case r:o="\n.pushwoosh-subscribe-widget__popover__bottom:after {right: auto; left: "+(parseInt(e)/2-12+"px");break;case p:o="\n.pushwoosh-subscribe-widget__popover__top:after {right: auto; left: "+(parseInt(e)/2-12+"px");break;case a:o="\n.pushwoosh-subscribe-widget__popover__top:after {left: auto; right: "+(parseInt(e)/2-4+"px");break;default:o="\n.pushwoosh-subscribe-widget__popover__bottom:after {left: auto; right: "+(parseInt(e)/2-4+"px")}return o}}class b{constructor(t){if(this.pw=t,!t.platformChecker.isAvailableNotifications)return void console.warn("Browser does not support push notifications");this.clickBell=this.clickBell.bind(this),this.onSubscribeEvent=this.onSubscribeEvent.bind(this),this.onUnsubscribeEvent=this.onUnsubscribeEvent.bind(this),this.onPermissionDeniedEvent=this.onPermissionDeniedEvent.bind(this),this.clickOutOfPopover=this.clickOutOfPopover.bind(this);const e=Object.assign(c.tooltipText,t.initParams.subscribeWidget.tooltipText);this.config=Object.assign({},c,t.initParams.subscribeWidget),this.config.tooltipText=e}async run(){await this.pw.isSubscribed()||await this.render()}addStylesToElement(t,e){Object.keys(t).forEach(o=>{e.style[o]=t[o]})}createContainer(){const t=document.createElement("div");t.id="pushwooshBellWidget",t.className="pushwoosh-subscribe-widget";const e=d.getBellPosition(this.config.position,this.config.indent),o=Object.assign({zIndex:this.config.zIndex},e);return this.addStylesToElement(o,t),t}createStyle(){const t=document.createElement("style");return t.innerHTML='/* Widget */\n.pushwoosh-subscribe-widget {\n position: fixed;\n display: block;\n transform: translate3d(0, 0, 0);\n}\n\n.pushwoosh-subscribe-widget__subscribed {\n display: none;\n}\n\n.pushwoosh-subscribe-widget .pushwoosh-subscribe-widget__bell-button {\n border-radius: 50%;\n cursor: pointer;\n font-size: 0;\n text-align: center;\n transform: scale(0.9) translate3d(0, 0, 0);\n transition: transform .3s ease-in-out;\n position: relative;\n}\n\n.pushwoosh-subscribe-widget .pushwoosh-subscribe-widget__bell-button:hover {\n transform: scale(1);\n}\n\n/* Tooltip */\n.pushwoosh-subscribe-widget__tooltip {\n position: absolute;\n height: 48px;\n max-width: 300px;\n min-width: 200px;\n padding: 5px 7px;\n background-color: #3b444b;\n color: #ffffff;\n text-align: center;\n vertical-align: middle;\n box-sizing: border-box;\n line-height: 38px;\n font-size: 0;\n font-weight: normal;\n visibility: hidden;\n opacity: 0;\n transition: visibility 0s ease-in .3s,\n opacity .3s ease-in;\n top: 50%;\n transform: translate(0, -50%);\n box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.5);\n}\n\n.pushwoosh-subscribe-widget__tooltip__right:after,\n.pushwoosh-subscribe-widget__tooltip__left:after {\n content: "";\n top: 50%;\n height: 0;\n width: 0;\n position: absolute;\n pointer-events: none;\n border-top: 5px solid transparent;\n border-bottom: 5px solid transparent;\n background: #3b444b;\n}\n\n.pushwoosh-subscribe-widget__tooltip__right:after {\n left: calc(100% - 7px);\n border-top: 5px solid #3b444b;\n border-left: 5px solid #3b444b;\n border-right: 5px solid transparent;\n box-sizing: border-box;\n transform-origin: 0 0;\n transform: rotate(-45deg);\n box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.25);\n}\n\n.pushwoosh-subscribe-widget__tooltip__left:after {\n left: -7px;\n border-top: 5px solid #3b444b;\n border-right: 5px solid #3b444b;\n border-left: 5px solid transparent;\n box-sizing: border-box;\n transform-origin: 0 0;\n transform: rotate(-45deg);\n box-shadow: -2px -2px 2px 0 rgba(0, 0, 0, 0.25);\n}\n\n.pushwoosh-subscribe-widget__bell-button:hover + .pushwoosh-subscribe-widget__tooltip,\n.pushwoosh-subscribe-widget__tooltip.pushwoosh-subscribe-widget__tooltip__visible {\n display: block;\n visibility: visible;\n opacity: 1;\n transition-delay: 0s;\n}\n\n.pushwoosh-subscribe-widget .pushwoosh-subscribe-widget__tooltip-content {\n display: inline-block;\n vertical-align: middle;\n font-size: 14px;\n line-height: 1.4;\n white-space: nowrap;\n overflow: hidden;\n padding-right: 5px;\n text-overflow: ellipsis;\n max-width: 100%;\n}\n\n/* Popover */\n\n.pushwoosh-subscribe-widget .pushwoosh-subscribe-widget__popover {\n position: absolute;\n right: auto;\n box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.5);\n box-sizing: border-box;\n background: #9ca8b1;\n visibility: hidden;\n opacity: 0;\n transition: visibility 0s ease-in .5s,\n opacity .5s ease-in;\n}\n\n.pushwoosh-subscribe-widget .pushwoosh-subscribe-widget__popover__visible {\n display: block;\n visibility: visible;\n opacity: 1;\n transition-delay: 0s;\n}\n\n.pushwoosh-subscribe-widget__popover__bottom:after,\n.pushwoosh-subscribe-widget__popover__top:after {\n content: "";\n height: 0;\n width: 0;\n position: absolute;\n pointer-events: none;\n border-right: 8px solid transparent;\n border-left: 8px solid #9ca8b1;\n background: #9ca8b1;\n transform-origin: 0 0;\n transform: rotate(-45deg);\n}\n\n.pushwoosh-subscribe-widget__popover__bottom:after {\n border-bottom: 8px solid #9ca8b1;\n border-top: 8px solid transparent;\n box-sizing: border-box;\n box-shadow: -2px 2px 1px 0 rgba(0, 0, 0, 0.25);\n bottom: -16px;\n}\n\n.pushwoosh-subscribe-widget__popover__top:after {\n top: 0;\n border-top: 8px solid #9ca8b1;\n border-bottom: 8px solid transparent;\n box-sizing: border-box;\n box-shadow: 1px -1px 1px 0 rgba(0, 0, 0, 0.25);\n}\n\n.pushwoosh-subscribe-widget__popover-content-wrapper {\n overflow: auto;\n max-width: 100%;\n}\n\n\n.pushwoosh-subscribe-widget .pushwoosh-subscribe-widget__popover-content {\n display: flex;\n flex-direction: column;\n padding: 14px;\n box-sizing: border-box;\n float: left;\n min-width: 100%;\n align-items: center;\n}\n\n.pushwoosh-subscribe-widget .pushwoosh-subscribe-widget__popover img {\n display: block;\n}\n\n.pushwoosh-subscribe-widget .pushwoosh-subscribe-widget__popover img:first-child {\n margin-bottom: 14px;\n}\n\n@media (max-width: 767px) and (orientation: portrait) {\n .pushwoosh-subscribe-widget .pushwoosh-subscribe-widget__popover-content {\n flex-direction: column;\n }\n .pushwoosh-subscribe-widget .pushwoosh-subscribe-widget__popover img {\n max-width: 280px;\n height: auto;\n }\n .pushwoosh-subscribe-widget .pushwoosh-subscribe-widget__popover img:first-child {\n margin-right: 0;\n margin-bottom: 14px;\n }\n}\n@media (max-width: 767px) and (orientation: landscape) {\n .pushwoosh-subscribe-widget .pushwoosh-subscribe-widget__popover-content {\n flex-direction: row;\n }\n .pushwoosh-subscribe-widget .pushwoosh-subscribe-widget__popover img {\n max-width: 280px;\n height: auto;\n }\n .pushwoosh-subscribe-widget .pushwoosh-subscribe-widget__popover img:first-child {\n margin-right: 14px;\n margin-bottom: 0;\n }\n}\n',t}createBell(){const{config:t}=this;let e;var o,i;return t.buttonImage?(e=document.createElement("img"),e.src=t.buttonImage):(e=document.createElement("div"),this.addStylesToElement({backgroundColor:t.bgColor,boxShadow:t.shadow,lineHeight:t.size,border:t.bellButtonBorder},e),e.innerHTML=(o=t.bellColor,i=t.bellStrokeColor,`<?xml version="1.0" encoding="UTF-8" standalone="no"?>\n<svg\n xmlns:dc="http://purl.org/dc/elements/1.1/"\n xmlns:cc="http://creativecommons.org/ns#"\n xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"\n xmlns:svg="http://www.w3.org/2000/svg"\n xmlns="http://www.w3.org/2000/svg"\n xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"\n xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"\n version="1.1"\n id="Capa_1"\n x="0px"\n y="0px"\n viewBox="0 0 346.013 346.013"\n style="enable-background:new 0 0 346.013 346.013;width: 80%; height: auto; vertical-align: middle;"\n xml:space="preserve"\n inkscape:version="0.91 r13725"\n sodipodi:docname="alarm_white.svg"><metadata\n id="metadata51"><rdf:RDF><cc:Work\n rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type\n rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs\n id="defs49" /><sodipodi:namedview\n borderopacity="1"\n objecttolerance="10"\n gridtolerance="10"\n guidetolerance="10"\n inkscape:pageopacity="0"\n inkscape:pageshadow="2"\n inkscape:window-width="1618"\n inkscape:window-height="828"\n id="namedview47"\n showgrid="false"\n inkscape:zoom="0.6820553"\n inkscape:cx="173.0065"\n inkscape:cy="173.0065"\n inkscape:window-x="0"\n inkscape:window-y="0"\n inkscape:window-maximized="0"\n inkscape:current-layer="g3" /><g\n id="g3"><path\n d="m 256.76227,220.19006 c -1.77513,-2.69766 -3.45154,-5.24564 -3.98966,-7.46382 -0.042,-0.17861 -0.0911,-0.36128 -0.16237,-0.61436 -2.28354,-7.67647 0.69147,-24.43921 2.46886,-34.45124 0.26788,-1.50394 0.52274,-2.94197 0.75286,-4.29035 0.0232,-0.13675 0.044,-0.27211 0.0724,-0.48006 1.95582,-15.28051 2.58811,-37.91956 -5.51044,-58.99147 -5.6032,-14.57978 -14.45978,-25.82612 -26.3559,-33.48393 1.26598,-9.812938 -4.85967,-19.343691 -14.66682,-22.0511 -9.80715,-2.70741 -19.95724,2.33226 -23.90298,11.405413 -14.1382,0.467533 -27.51111,5.577097 -39.80114,15.219267 -17.76129,13.9298 -28.83431,33.68757 -34.99389,47.80757 l -0.0479,0.11335 c -0.0512,0.12175 -0.0998,0.24114 -0.13249,0.32962 -0.49733,1.28292 -1.01552,2.64514 -1.55689,4.07255 -3.61311,9.51043 -9.66004,25.42824 -15.611995,30.89342 -0.106524,0.10027 -0.208228,0.20187 -0.362362,0.35435 -1.636243,1.66563 -4.382941,2.99463 -7.288979,4.40101 -7.145531,3.45301 -22.013613,10.64166 -17.206389,31.67844 0.929154,4.07105 4.008437,7.29057 8.033861,8.40185 l 167.570804,46.2604 c 4.02253,1.11048 8.31521,-0.0729 11.2052,-3.08958 14.91617,-15.58874 5.84693,-29.38668 1.48625,-36.02133 z"\n id="path5"\n inkscape:connector-curvature="0"\n vector-effect="non-scaling-stroke"\n style="fill:${o}; stroke: ${i}; stroke-width: 1; " /><path\n vector-effect="non-scaling-stroke"\n d="m 174.26737,259.72378 -38.76399,-10.70137 c -1.59243,-0.43962 -3.28183,-0.15596 -4.63548,0.7754 -2.53909,1.7494 -2.84182,4.93159 -3.02304,6.83188 l -0.0151,0.15247 c -1.22819,12.67106 6.79854,24.33046 19.08688,27.72284 12.51583,3.45518 25.8324,-2.91586 30.9681,-14.80385 l 0.0935,-0.19205 c 0.52305,-1.06418 1.74613,-3.55554 0.50882,-6.31116 -0.44302,-0.98439 -1.5794,-2.74529 -4.21964,-3.47416 z"\n id="path7"\n inkscape:connector-curvature="0"\n style="fill:${o}; stroke: ${i}; stroke-width: 1;" /></g><g\n id="g17" /><g\n id="g19" /><g\n id="g21" /><g\n id="g23" /><g\n id="g25" /><g\n id="g27" /><g\n id="g29" /><g\n id="g31" /><g\n id="g33" /><g\n id="g35" /><g\n id="g37" /><g\n id="g39" /><g\n id="g41" /><g\n id="g43" /><g\n id="g45" /></svg>`)),this.addStylesToElement({width:t.size,height:t.size},e),e.className="pushwoosh-subscribe-widget__bell-button",e}async createTooltip(){const t=document.createElement("div"),[e,o]=d.getTooltipPosition(this.config.position,this.config.size);return t.className=`pushwoosh-subscribe-widget__tooltip pushwoosh-subscribe-widget__tooltip__${o}`,this.addStylesToElement(e,t),t.appendChild(await this.createTooltipContent()),t}async createTooltipContent(){const t=document.createElement("div");return t.innerText=await this.tooltipTextFactory(),t.className="pushwoosh-subscribe-widget__tooltip-content",t}async tooltipTextFactory(){const t=this.pw.driver.getPermission(),{tooltipText:e}=this.config,n=await this.pw.data.getStatusManualUnsubscribed();switch(t){case i:return n?e.needSubscribe:e.alreadySubscribed;case s:return e.needSubscribe;case o:return e.blockSubscribe;default:return e.needSubscribe}}createPopover(){const t=document.createElement("div"),e=document.createElement("div"),[o,i]=d.getPopoverPosition(this.config.position,this.config.size);e.className=`pushwoosh-subscribe-widget__popover pushwoosh-subscribe-widget__popover__${i}`,t.className="pushwoosh-subscribe-widget__popover-content-wrapper",this.style.innerHTML+=d.getPopoverArrowPosition(this.config.position,this.config.size);const s=Object.assign({maxWidth:`calc(100vw - ${this.config.indent} - ${this.config.indent})`},o);return this.addStylesToElement(s,e),t.appendChild(this.createPopoverContent()),e.appendChild(t),e}getBrowserName(){const t=this.pw.platformChecker;let e;return e=t.isOpera?"opera":11===t.platform&&navigator.userAgent.match(/Android/i)?"mobileChrome":12===t.platform?"firefox":10===t.platform?"safari":150===t.platform?"edge":"chrome",e}createPopoverContent(){const{config:t}=this,e=document.createElement("div");e.className="pushwoosh-subscribe-widget__popover-content";const o=this.getBrowserName(),i=t.contentImages&&t.contentImages[o];if(i){const t=document.createElement("img");t.src=i,e.appendChild(t)}else{const t={opera:"opera",mobileChrome:"mobile_chrome",firefox:"FF",safari:"safari"}[o]||"chrome";[{src:this.getImageSrc(t),width:500,height:130},{src:this.getImageSrc(`${t}_unlock`),width:500,height:230}].forEach(t=>{const o=document.createElement("img");Object.assign(o,t),e.appendChild(o)})}return e}getImageSrc(t){return`https://cdn.pushwoosh.com/webpush/img/${t}.jpg`}async render(){this.widget=this.createContainer(),this.style=this.createStyle();const t=this.createBell();this.tooltip=await this.createTooltip(),this.popover=await this.createPopover(),this.widget.appendChild(this.style),this.widget.appendChild(t),this.widget.appendChild(this.tooltip),this.widget.appendChild(this.popover),document.body.appendChild(this.widget),this.pw.push(["onSubscribe",this.onSubscribeEvent]),this.pw.push(["onUnsubscribe",this.onUnsubscribeEvent]),this.pw.push(["onPermissionDenied",this.onPermissionDeniedEvent]),this.addEventListeners()}addEventListeners(){this.widget.addEventListener("click",this.clickBell),window.addEventListener("click",this.clickOutOfPopover)}toggleHelpPopover(){this.popover.classList.toggle("pushwoosh-subscribe-widget__popover__visible")}async clickBell(){switch(this.pw.driver.getPermission()){case i:case s:await this.pw.subscribe();break;case o:this.toggleHelpPopover();break;default:console.warn("Unknown browser notification permission")}}async onSubscribeEvent(){const t=this.tooltip.querySelector("div");null!==t&&(t.innerText=this.config.tooltipText.successSubscribe,this.tooltip.classList.add("pushwoosh-subscribe-widget__tooltip__visible"),setTimeout(async()=>{this.tooltip.classList.remove("pushwoosh-subscribe-widget__tooltip__visible"),t.innerText=await this.tooltipTextFactory(),this.widget.classList.add("pushwoosh-subscribe-widget__subscribed")},2e3))}async onPermissionDeniedEvent(){this.addEventListeners();const t=this.tooltip.querySelector("div");null!==t&&(t.innerText=await this.tooltipTextFactory())}clickOutOfPopover(t){this.popover.classList.contains("pushwoosh-subscribe-widget__popover__visible")&&!t.target.classList.contains("pushwoosh-subscribe-widget__popover")&&null===t.target.closest(".pushwoosh-subscribe-widget__popover")&&!t.target.classList.contains("pushwoosh-subscribe-widget__bell-button")&&null===t.target.closest(".pushwoosh-subscribe-widget__bell-button")&&this.popover.classList.remove("pushwoosh-subscribe-widget__popover__visible")}async onUnsubscribeEvent(){const t=this.tooltip.querySelector("div");null!==t&&(t.innerText=await this.tooltipTextFactory())}}return e})());
//# sourceMappingURL=widget-subscription-button.js.map