web-push-notifications/widget-inbox.js

Pushwoosh web push notifications

!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 i in n)("object"==typeof exports?exports:t)[i]=n[i]}}(this,()=>(()=>{"use strict";var t={d:(e,n)=>{for(var i in n)t.o(n,i)&&!t.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:n[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,{PWInboxWidget:()=>a});const n=["Jan","Feb","Mar","Apr","May","June","July","Aug","Sept","Oct","Nov","Dec"],i=[{name:"widgetWidth",type:"size"},{name:"borderRadius",type:"size"},{name:"zIndex",type:"number"},{name:"fontFamily",type:"string"},{name:"bgColor",type:"color"},{name:"textColor",type:"color"},{name:"arrowBorderColor",type:"color"},{name:"borderColor",type:"color"},{name:"badgeBgColor",type:"color"},{name:"badgeTextColor",type:"color"},{name:"timeTextColor",type:"color"},{name:"messageTitleColor",type:"color"},{name:"emptyInboxTitleColor",type:"color"},{name:"emptyInboxTextColor",type:"color"}],o={enable:!1,triggerId:"pwInbox",position:"bottom",appendTo:"body",title:"Inbox",bgColor:"#ffffff",textColor:"#333333",fontFamily:"inherit",borderRadius:4,borderColor:"transparent",badgeBgColor:"#ff4c00",badgeTextColor:"#ffffff",widgetWidth:350,zIndex:100,messageTitleColor:"#7a7a7a",timeTextColor:"#c4c4c4",emptyInboxTitle:"You're all caught up",emptyInboxTitleColor:"#333333",emptyInboxText:"There are no new messages. Stay tuned!",emptyInboxTextColor:"#7a7a7a",emptyInboxIconUrl:"https://pushon.pushwoosh.com/static/icon-empty-inbox.png",arrowBorderColor:"rgba(0,0,0,.1)"},s=/^(#([\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}\)$)/;function r(t){let e="fixed"===window.getComputedStyle(t).position;return!e&&t.parentElement&&(e=r(t.parentElement)),e}const d=({imageUrl:t,title:e,message:i,sendDate:o})=>`\n<div class="pw-inbox_item-inner">\n  <div class="pw-inbox_icon">\n    <img src="${t}" alt="${e||i}" class="pw-inbox_message-image">\n  </div>\n  <div class="pw-inbox_content">\n    ${e?`<div class="pw-inbox_item-title">\n      ${e}\n    </div>`:null}\n    <div class="pw-inbox_item-body">\n      ${i}\n    </div>\n    <div class="pw-inbox_item-time">\n      ${function(t){const e=new Date(t),i=e.getHours()+e.getTimezoneOffset()/60;e.setHours(i);const o=(new Date).getTime()-e.getTime();if(o<=6e4)return"Just now";if(o<36e5&&o>0)return`${Math.floor(o/6e4)} minutes ago`;if(o<864e5&&o>0)return`${Math.floor(o/36e5)} hours ago`;return`${e.getDate()} ${n[e.getMonth()]} ${e.getFullYear()}, ${e.getHours()}:${`0${e.getMinutes().toString()}`.slice(-2)}`}(o)}\n    </div>\n  </div>\n</div>\n<span class="pw-inbox_item-remove"></span>`;class a{constructor(t){this.pw=t;const e=this.pw.initParams.inboxWidget;this.config={...o,arrowBorderColor:e.borderColor&&"transparent"!==e.borderColor?e.borderColor:"rgba(0,0,0,.1)",...this.pw.initParams.inboxWidget},this.updateInbox=this.updateInbox.bind(this),this.markVisibleItemsAsRead=this.markVisibleItemsAsRead.bind(this),this.onWidgetClickHandler=this.onWidgetClickHandler.bind(this),this.onTriggerClickHandler=this.onTriggerClickHandler.bind(this),this.onWindowScrollHandler=this.onWindowScrollHandler.bind(this),this.toggle=this.toggle.bind(this)}async run(){this.initTrigger(),this.updateInbox(),this.addListeners()}toggle(t){(void 0===t?!this.isOpened:t)?this.openWidget():this.closeWidget()}initTrigger(){if(!this.pw.pwinbox)throw new Error("Web inbox is not allowed.");const t=document.getElementById(this.config.triggerId);if(!t)throw new Error("Inbox trigger element doesn't exist. You must set triggerId in inboxWidget config. See the documentation.");this.trigger=t,this.trigger.classList.add("pw-inbox-trigger"),this.defaultMargin=12,this.messagesElements={},this.messages=[],this.readItems=[],this.updateCounter(0),this.isOpened=!1,this.renderWidget(),this.isFixed=r(this.trigger)}renderWidget(){this.widget=document.createElement("div"),this.widget.id="pwInboxWidget",this.widget.className="pw-inbox-widget",this.widget.classList.toggle("pw-open",this.isOpened),this.widgetParent=document.querySelector(this.config.appendTo)||document.body,this.widgetParent.appendChild(this.widget),this.widgetParent.appendChild(this.getStyle()),this.renderWidgetInner()}getStyle(){const t=document.createElement("style");return t.innerHTML=this.configureStyle(".pw-inbox-trigger {\n  position: relative;\n  cursor: pointer;\n}\n\n.pw-inbox-trigger:after {\n  content: attr(data-pw-count);\n  display: block;\n  position: absolute;\n  right: 0;\n  top: 0;\n  background: var(--badgeBgColor);\n  border-radius: 8px;\n  color: var(--badgeTextColor);\n  font-size: 10px;\n  font-weight: normal;\n  line-height: 16px;\n  width: 16px;\n  padding: 0 2px;\n  box-sizing: border-box;\n  text-align: center;\n}\n\n.pw-inbox-trigger.pw-empty:after {\n  display: none;\n}\n\n.pw-inbox-widget * {\n  position: static;\n  box-sizing: border-box;\n  font-size: 1em;\n  outline: none;\n  font-family: var(--fontFamily);\n}\n.pw-inbox-widget {\n  font-size: 14px;\n  position: absolute;\n  top: 0;\n  left: -1000px;\n  background: var(--bgColor);\n  border: solid 1px var(--borderColor);\n  border-radius: var(--borderRadius);\n  width: var(--widgetWidth);\n  box-shadow: 0 1px 4px 0 rgba(0,0,0,.25);\n  z-index: var(--zIndex);\n  opacity: 0;\n  transition: opacity .6s ease;\n  transition-delay: 100ms;\n}\n.pw-inbox-widget.pw-open {\n  opacity: 1;\n  transition-delay: 0ms;\n}\n.pw-inbox-widget.pw-inbox-widget--inset {\n  top: auto;\n  left: auto;\n  display: none;\n}\n.pw-inbox-widget.pw-inbox-widget--inset.pw-open {\n  display: block;\n}\n.pw-inbox-widget.pw-inbox-widget--inset.pw-bottom {\n  top: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n}\n.pw-inbox-widget.pw-inbox-widget--inset.pw-top {\n  bottom: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n}\n.pw-inbox-widget.pw-inbox-widget--inset.pw-right {\n  left: 100%;\n  top: 50%;\n  transform: translateY(-50%);\n}\n.pw-inbox-widget.pw-inbox-widget--inset.pw-left {\n  right: 100%;\n  top: 50%;\n  transform: translateY(-50%);\n}\n.pw-inbox-widget.pw-inbox-widget--empty {\n  max-height: none;\n}\n.pw-inbox-widget .pw-inbox__arrow {\n  display: block;\n  width: 0;\n  height: 0;\n  border-width: 10px;\n  border-style: solid;\n  border-color: transparent;\n  position: absolute;\n}\n.pw-inbox-widget .pw-inbox__arrow:before {\n  content: \"\";\n  display: block;\n  width: 0;\n  height: 0;\n  border-width: 10px;\n  border-style: solid;\n  border-color: transparent;\n  position: absolute;\n}\n.pw-inbox-widget.pw-top {\n  margin-top: -12px;\n}\n.pw-inbox-widget.pw-top .pw-inbox__arrow {\n  border-top-color: var(--arrowBorderColor);\n  bottom: -21px;\n  left: 50%;\n  transform: translateX(-50%);\n}\n.pw-inbox-widget.pw-top .pw-inbox__arrow:before {\n  border-top-color: var(--bgColor);\n  top: -11px;\n  left: -10px;\n}\n.pw-inbox-widget.pw-bottom {\n  margin-top: 12px;\n}\n.pw-inbox-widget.pw-bottom .pw-inbox__arrow {\n  border-bottom-color: var(--arrowBorderColor);\n  top: -21px;\n  left: 50%;\n  transform: translateX(-50%);\n}\n.pw-inbox-widget.pw-bottom .pw-inbox__arrow:before {\n  border-bottom-color: var(--bgColor);\n  bottom: -11px;\n  left: -10px;\n}\n.pw-inbox-widget.pw-left {\n  margin-left: -12px;\n}\n.pw-inbox-widget.pw-left .pw-inbox__arrow {\n  border-left-color: var(--arrowBorderColor);\n  right: -21px;\n  top: 50%;\n  transform: translateY(-50%);\n}\n.pw-inbox-widget.pw-left .pw-inbox__arrow:before {\n  border-left-color: var(--bgColor);\n  left: -11px;\n  top: -10px;\n}\n.pw-inbox-widget.pw-right {\n  margin-left: 12px;\n}\n.pw-inbox-widget.pw-right .pw-inbox__arrow {\n  border-right-color: var(--arrowBorderColor);\n  left: -21px;\n  top: 50%;\n  transform: translateY(-50%);\n}\n.pw-inbox-widget.pw-right .pw-inbox__arrow:before {\n  border-right-color: var(--bgColor);\n  right: -11px;\n  top: -10px;\n}\n.pw-inbox_inner {\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n.pw-inbox_title {\n  color: var(--textColor);\n  margin: 0;\n  padding: 28px 32px 12px;\n  font-size: 24px;\n  font-weight: 500;\n  line-height: 1.1;\n  text-align: left;\n  flex: 0 0 66px;\n}\n.pw-inbox_list {\n  overflow-x: hidden;\n  overflow-y: auto;\n  min-width: 200px;\n  max-height: 300px;\n  padding: 0;\n  margin: 0;\n  list-style: none;\n  position: relative;\n  flex: 1 1 auto;\n}\n\n.pw-inbox_item {\n  position: relative;\n  padding: 8px 32px;\n  margin: 0;\n  text-align: left;\n}\n.pw-inbox_item-inner {\n  display: flex;\n  cursor: pointer;\n}\n.pw-inbox_icon {\n  flex: 0 0 40px;\n}\n.pw-inbox_message-image {\n  width: 28px;\n}\n.pw-inbox_content {\n  flex: 0 1 100%;\n}\n.pw-inbox_item-title {\n  color: var(--messageTitleColor);\n  font-size: 14px;\n  line-height: 20px;\n  margin-bottom: 4px;\n}\n.pw-inbox_item-body {\n  color: var(--textColor);\n  font-size: 14px;\n  line-height: 20px;\n  margin-bottom: 4px;\n}\n.pw-inbox_item-time {\n  color: var(--timeTextColor);\n  font-size: 12px;\n  line-height: 17px;\n}\n.pw-inbox_item-remove {\n  position: absolute;\n  z-index: 2;\n  top: 8px;\n  right: 8px;\n  display: none;\n  width: 10px;\n  height: 10px;\n  background: transparent url('https://cdn.pushwoosh.com/webpush/img/iconClose.svg') 50% no-repeat;\n  cursor: pointer;\n}\n.pw-inbox_item:hover .pw-inbox_item-remove {\n  display: block;\n}\n\n.pw-inbox_item.pw-new .pw-inbox_item-title {\n  color: var(--textColor);\n  font-weight: 700;\n}\n\n.pw-inbox_item.pw-new .pw-inbox_item-body {\n  font-weight: 700;\n}\n\n.pw-inbox_list--empty {\n  padding: 50px 16px;\n  text-align: center;\n  max-height: 100%;\n  overflow: auto;\n}\n\n.pw-inbox_list--empty .pw-inbox_list-icon {\n  text-align: center;\n  margin-bottom: 30px;\n}\n.pw-inbox_list--empty .pw-inbox_list-icon img {\n  max-width: 100%;\n}\n\n.pw-inbox_list--empty .pw-inbox_list-title {\n  font-size: 28px;\n  line-height: 36px;\n  color: var(--emptyInboxTitleColor);\n  margin-bottom: 20px;\n}\n\n.pw-inbox_list--empty .ipw-inbox_list-body {\n  font-size: 14px;\n  line-height: 18px;\n  color: var(--emptyInboxTextColor);\n}\n"),t}configureStyle(t){let e=t.toString();return i.forEach(t=>{const n=new RegExp(`var\\(--${t.name}\\)`,"ig"),i=this.getStyleFormatter(t);e=e.replace(n,i)}),e}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"===(e=this.config[t.name].toString())||s.test(e)?e:"#333";default:return"none"}var e}renderWidgetInner(){if(this.messages.length>0)this.widget.classList.remove("pw-inbox-widget--empty"),this.widget.innerHTML=`\n<div class="pw-inbox__arrow"></div>\n<div class="pw-inbox_inner">\n    <div class="pw-inbox_title">\n      ${this.config.title}\n    </div>\n    <ul class="pw-inbox_list">\n\n    </ul>\n</div>`,this.renderMessages();else{this.widget.classList.add("pw-inbox-widget--empty");const{emptyInboxTitle:t,emptyInboxText:e,emptyInboxIconUrl:n}=this.config;this.widget.innerHTML=((t,e,n)=>`\n<div class="pw-inbox__arrow"></div>\n<div class="pw-inbox_list--empty">\n    <div class="pw-inbox_list-icon">\n      <img src="${t}" alt="${e}">\n    </div>\n    <div class="pw-inbox_list-title">\n      ${e}\n    </div>\n    <div class="ipw-inbox_list-body">\n      ${n}\n    </div>\n</div>`)(n,t,e)}}renderMessages(){this.list=this.widget.querySelector(".pw-inbox_list")||document.createElement("ul"),this.messages.forEach(t=>{const e=document.createElement("li");e.className="pw-inbox_item",e.classList.toggle("pw-new",!t.isRead),e.classList.toggle("pw-unread",!t.isActionPerformed),e.setAttribute("data-pw-inbox-message-id",t.code),e.innerHTML=d(t),this.list.appendChild(e),this.messagesElements[t.code]=e})}updateCounter(t){this.count=t,this.trigger.setAttribute("data-pw-count",`${this.count}`),this.trigger.classList.toggle("pw-empty",0===this.count)}updateInboxMessages(t){this.messages=t.sort(({sendDate:t},{sendDate:e})=>function(t,e){const n=new Date(t),i=n.getHours()+n.getTimezoneOffset()/60,o=new Date(e),s=o.getHours()+o.getTimezoneOffset()/60;return n.setHours(i),o.setHours(s),o.getTime()-n.getTime()}(t,e)),this.renderWidgetInner()}openWidget(){this.isOpened=!0,this.widget.classList.add("pw-open"),document.addEventListener("click",this.onWidgetClickHandler),window.addEventListener("scroll",this.onWindowScrollHandler),window.addEventListener("resize",this.onWindowScrollHandler),this.markVisibleItemsAsRead(),this.messages.length>0&&this.list.addEventListener("scroll",this.markVisibleItemsAsRead),this.positionWidget()}closeWidget(){this.isOpened=!1,document.removeEventListener("click",this.onWidgetClickHandler),document.removeEventListener("click",this.onWindowScrollHandler),window.removeEventListener("resize",this.onWindowScrollHandler),this.updateReadStatus(),this.messages.length>0&&this.list.removeEventListener("scroll",this.markVisibleItemsAsRead),this.widget.classList.remove("pw-open","pw-top","pw-bottom","pw-right","pw-left"),this.widget.removeAttribute("style")}positionWidget(){this.isOpened&&(this.widgetParent===document.body?this.defaultPlaceWidget():this.customPlaceWidget())}customPlaceWidget(){const{position:t}=this.config;this.widgetParent.style.position="relative",this.widget.classList.add("pw-inbox-widget--inset"),this.widget.classList.add(`pw-${t}`)}defaultPlaceWidget(){const t=this.pw.initParams.inboxWidget.position?this.config.position:this.getDefaultPosition(),e=this.widget.getBoundingClientRect();if(!document.documentElement)return;const n=Math.max(document.documentElement.clientWidth,window.innerWidth||0),i=Math.max(document.documentElement.clientHeight,window.innerHeight||0);switch(e.width+2*this.defaultMargin>n&&(this.widget.style.width=n-2*this.defaultMargin+"px"),e.height+24>i&&(this.widget.style.height=i-2*this.defaultMargin+"px"),t){case"top":this.alignWidgetTop();break;case"right":this.alignWidgetRight();break;case"left":this.alignWidgetLeft();break;case"bottom":this.alignWidgetBottom()}}alignWidgetTop(){const t=this.trigger.getBoundingClientRect(),e=this.widget.getBoundingClientRect();if(!document.documentElement)return;const n=Math.max(document.documentElement.clientWidth,window.innerWidth||0),i=this.widget.querySelector(".pw-inbox__arrow")||document.createElement("div");this.widget.classList.add("pw-top");let o=pageXOffset+t.left+Math.floor(t.width/2)-Math.floor(e.width/2);const s=o<pageXOffset,r=o+e.width>pageXOffset+n;s&&(o=pageXOffset+this.defaultMargin),r&&(o=pageXOffset+n-e.width-this.defaultMargin);const d=pageYOffset+t.top-e.height;this.alignWidgetElement(o,d),i.style.left=t.left+Math.floor(t.width/2)-o+"px";const a=this.widget.getBoundingClientRect().top;if(a<0){const t=this.widget.getBoundingClientRect().height+a-this.defaultMargin,e=this.widget.getBoundingClientRect().top-a+this.defaultMargin;this.widget.style.height=`${t}px`,this.widget.style.top=`${e}px`}}alignWidgetRight(){const t=this.trigger.getBoundingClientRect(),e=this.widget.getBoundingClientRect();if(!document.documentElement)return;const n=Math.max(document.documentElement.clientWidth,window.innerWidth||0),i=Math.max(document.documentElement.clientHeight,window.innerHeight||0),o=this.widget.querySelector(".pw-inbox__arrow")||document.createElement("div");this.widget.classList.add("pw-right");let s=pageYOffset+t.top+Math.floor(t.height/2)-Math.floor(e.height/2);const r=s<pageYOffset,d=pageYOffset+i<s+e.height;r&&(s=pageYOffset+this.defaultMargin),d&&(s=pageYOffset+i-e.height-this.defaultMargin);const a=pageXOffset+t.left+t.width;this.alignWidgetElement(a,s),o.style.top=t.top+Math.floor(t.height/2)-s+"px";const l=n-this.widget.getBoundingClientRect().right;if(l<this.defaultMargin){const t=this.widget.getBoundingClientRect().width+l-this.defaultMargin;this.widget.style.width=`${t}px`}}alignWidgetLeft(){const t=this.trigger.getBoundingClientRect(),e=this.widget.getBoundingClientRect();if(!document.documentElement)return;const n=Math.max(document.documentElement.clientHeight,window.innerHeight||0),i=this.widget.querySelector(".pw-inbox__arrow")||document.createElement("div");this.widget.classList.add("pw-left");let o=pageYOffset+t.top+Math.floor(t.height/2)-Math.floor(e.height/2);const s=o<pageYOffset,r=pageYOffset+n<o+e.height;s&&(o=pageYOffset+this.defaultMargin),r&&(o=pageYOffset+n-e.height-this.defaultMargin);const d=pageXOffset+t.left-e.width;this.alignWidgetElement(d,o),i.style.top=t.top+Math.floor(t.height/2)-o+"px";const a=this.widget.getBoundingClientRect().left;if(a<0){const t=this.widget.getBoundingClientRect().width+a-this.defaultMargin,e=this.widget.getBoundingClientRect().left-a;this.widget.style.width=`${t}px`,this.widget.style.left=`${e}px`}}alignWidgetBottom(){const t=this.trigger.getBoundingClientRect(),e=this.widget.getBoundingClientRect();if(!document.documentElement)return;const n=Math.max(document.documentElement.clientWidth,window.innerWidth||0),i=Math.max(document.documentElement.clientHeight,window.innerHeight||0),o=this.widget.querySelector(".pw-inbox__arrow")||document.createElement("div");this.widget.classList.add("pw-bottom");let s=pageXOffset+t.left+Math.floor(t.width/2)-Math.floor(e.width/2);const r=s<pageXOffset,d=s+e.width>pageXOffset+n;r&&(s=pageXOffset+this.defaultMargin),d&&(s=pageXOffset+n-e.width-12);const a=pageYOffset+t.top+t.height;this.alignWidgetElement(s,a),o.style.left=t.left+Math.floor(t.width/2)-s+"px";const l=i-this.widget.getBoundingClientRect().bottom;if(l<this.defaultMargin){const t=this.widget.getBoundingClientRect().height+l-this.defaultMargin;this.widget.style.height=`${t}px`}}alignWidgetElement(t,e){this.widget.style.left=`${t}px`,this.widget.style.top=`${e}px`}getDefaultPosition(){const{left:t,top:e,width:n,height:i}=this.trigger.getBoundingClientRect();if(!document.documentElement)return"";const o={right:t,bottom:e,left:Math.max(document.documentElement.clientWidth,window.innerWidth||0)-(t+n),top:Math.max(document.documentElement.clientHeight,window.innerHeight||0)-(e+i)},s=Math.min(t,e,o.left,o.top);let r="bottom";return Object.keys(o).forEach(t=>{o[t]===s&&(r=t)}),r}addListeners(){this.trigger.addEventListener("click",this.onTriggerClickHandler),this.pw.push(["onPutNewMessageToInboxStore",()=>{this.updateInbox()}]),this.pw.push(["onUpdateInboxMessages",()=>{this.updateInbox()}])}markVisibleItemsAsRead(){if(0===this.messages.length)return;const t=this.list.clientHeight+this.list.scrollTop-50;Object.keys(this.messagesElements).forEach(e=>{if(!this.messagesElements[e]||this.messagesElements[e].offsetTop>t)return;const n=this.messages.find(t=>t.code===e);!n||n.isRead||this.readItems.indexOf(e)+1||this.readItems.push(e)})}updateReadStatus(){this.pw.pwinbox.readMessagesWithCodes(this.readItems).then(this.updateInbox)}updateInbox(){this.pw.pwinbox.loadMessages().then(t=>{this.updateInboxMessages(t)}),this.pw.pwinbox.unreadMessagesCount().then(t=>{this.updateCounter(t)})}performMessageAction(t){this.pw.pwinbox.performActionForMessageWithCode(t).then(()=>{this.updateInbox()})}removeMessages(t){t.forEach(t=>{this.readItems=this.readItems.slice(this.readItems.indexOf(t),1)}),this.pw.pwinbox.deleteMessagesWithCodes(t).then(()=>{this.updateInbox()})}onTriggerClickHandler(t){t.stopPropagation(),t.target&&this.toggle()}onWidgetClickHandler(t){if(!t.target)return;const e=t.target.closest(".pw-inbox_item");if(!e)return void this.toggle();const n=e.getAttribute("data-pw-inbox-message-id");if(!n)return;t.target.closest(".pw-inbox_item-remove")?this.removeMessages([n]):this.performMessageAction(n)}onWindowScrollHandler(){this.isFixed&&this.isOpened?this.toggle():this.positionWidget()}}return e})());
//# sourceMappingURL=widget-inbox.js.map