@mobiloud/ml-qr-widget
Version:
Mobiloud QR widget
136 lines (120 loc) • 7.36 kB
JavaScript
(function(n,o){typeof exports=="object"&&typeof module<"u"?o(exports):typeof define=="function"&&define.amd?define(["exports"],o):(n=typeof globalThis<"u"?globalThis:n||self,o(n["ml-qr-widget"]={}))})(this,function(n){"use strict";var D=Object.defineProperty;var L=(n,o,a)=>o in n?D(n,o,{enumerable:!0,configurable:!0,writable:!0,value:a}):n[o]=a;var m=(n,o,a)=>(L(n,typeof o!="symbol"?o+"":o,a),a);const o=typeof window<"u";function a(){var s=navigator.userAgent.toLowerCase()||navigator.vendor.toLowerCase()||window.opera;return/windows phone/i.test(s)?"windows":/android/i.test(s)?"android":/ipad|iphone|ipod/.test(s)&&!window.MSStream?"ios":"desktop"}const v=a(),_=!!navigator.userAgent.toLowerCase().match(/(ipad)|(iphone)|(ipod)|(android)|(webos)/i),C=navigator.userAgent.toLowerCase().includes("canvas");class k{constructor(t){m(this,"display");m(this,"delay");m(this,"widget");m(this,"backDrop");if(!o)return;t=Object.assign({},{fontFamily:'"Source Sans Pro", "Arial", sans-serif',textColor:"#222",textHeading:"Get 10% OFF",textDescription:"Scan our QR to download the app on your device and unlock the discount",widgetColor:"#fff",backDrop:!0,backDropZIndex:888888,qrOptions:{text:"https://redirect.mobiloud.com/?ios=https://itunes.apple.com/&android=https://play.google.com",size:150,margin:0},qrAlt:"QR code to download our mobile app",position:"bottom-left",animation:"fadeIn",display:"onLoad",radius:"10px",delay:0,shadow:!0,useSession:!0,zindex:999999,maxWidth:"400px",sessionExpire:1440},t);let e={right:"unset",left:"unset",bottom:"unset",top:"unset"};switch(t.position){case"bottom-right":e.right="32px",e.bottom="32px";break;case"bottom-left":e.left="32px",e.bottom="32px";break;case"top-right":e.top="32px",e.right="32px";break;case"top-left":e.top="32px",e.left="32px";break;case"center":e.right="50%",e.bottom="50%";break;default:e.right="50%",e.bottom="50%"}const h=`
.ml-qrWidget {
display:none;
position: fixed;
z-index: ${t.zindex};
background-color: ${t.widgetColor};
box-shadow: ${t.shadow?"0 0 4px 1px #00000014":"none"} ;
transition: all 0.3ms ease-in-out;
font-family: ${t.fontFamily};
animation: ${t.animation+" 0.5s both"};
font-size: 1rem;
border-radius: ${t.radius};
right: ${e.right};
bottom: ${e.bottom};
left: ${e.left};
top: ${e.top};
color: ${t.textColor};
max-width: ${t.maxWidth};
transform: ${t.position==="center"||!t.position?"translate(50%, 50%) !important":"unset"}
}
.ml-qrWidget__backDrop{
display: none;
position: fixed;
width: 100%;
height: 100%;
background-color: #00000073;
top: 0;
z-index: ${t.backDropZIndex}
}
.ml-qrWidget__qrWrapper {
min-width: ${t.qrOptions.size}px;
min-height: ${t.qrOptions.size}px;
}
.ml-qrWidget__image {
border-radius: ${t.radius}
}
.ml-qrWidget__wrapper {
display: flex;
align-items: center;
padding: 1.8em 1.5em;
gap: 15px
}
.ml-qrWidget__description {
margin: 0
}
.ml-qrWidget__title {
font-weight: bold;
font-size: 1.3rem;
margin: 0 0 5px 0
}
.ml-qrWidget__closebutton {
position: absolute;
top: 5px;
height: unset;
right: 10px;
font-size: 30px;
font-weight: revert;
cursor: pointer;
line-height: 30px;
color: #333;
}
.toggle--visible{
display: block;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes scaleUp {
0% {
transform: scale(0.5);
}
100% {
transform: scale(1);
}
}
@keyframes slideBottom {
0% {
transform: translateY(1000px);
}
100% {
transform: translateY(0);
}
}
@keyframes slideTop {
0% {
transform: translateY(-1000px);
}
100% {
transform: translateY(0);
}
}
@keyframes slideLeft {
0% {
transform: translateX(-1000px);
}
100% {
transform: translateX(0);
}
}
@keyframes slideRight {
0% {
transform: translateX(1000px);
}
100% {
transform: translateX(0);
}
}
/* CHECK MEDIA CLASSES */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.qrWidget-toggle {display: none !important}
}
@supports (-ms-ime-align:auto), (-ms-accelerator:true) {
.qrWidget-toggle {display: none !important}
}
`,b=i=>Object.entries(i).map(d=>d.map(encodeURIComponent).join("=")).join("&");function x(i){const d=document.createElement("div");d.className="ml-qrWidget";const g=document.createElement("div");g.className="ml-qrWidget__backDrop";const c=document.createElement("div");c.className="ml-qrWidget__wrapper";const w=document.createElement("div");w.className="ml-qrWidget__qrWrapper";const u=document.createElement("img");u.className="ml-qrWidget__image",u.alt=i.qrAlt,u.src="https://quickchart.io/qr?"+b(i.qrOptions);const f=document.createElement("div");f.className="ml-qrWidget__content";const y=document.createElement("h4");y.className="ml-qrWidget__title",y.innerHTML=i.textHeading,f.appendChild(y);const W=document.createElement("p");W.className="ml-qrWidget__description",W.innerHTML=i.textDescription,f.appendChild(W);const p=document.createElement("span");return p.id="ml-qrWidget__closebutton",p.className="ml-qrWidget__closebutton",p.textContent="×",p.addEventListener("click",()=>{if(d.style.display="none",g.style.display="none",i.useSession){const E=new Date().getTime(),S=new Date(E+i.sessionExpire*60*1e3);window.localStorage.setItem("widgetClosed",S.toString())}}),w.appendChild(u),c.appendChild(w),c.appendChild(f),c.appendChild(p),d.appendChild(c),document.body.appendChild(g),document.body.appendChild(d),{appWidget:d,backDrop:g}}let l=x(t);this.addStyle(h),this.display=t.display,this.delay=t.delay,this.widget=l,this.backDrop=t.backDrop}addStyle(t){const r=document.createElement("link");r.setAttribute("rel","stylesheet"),r.setAttribute("type","text/css"),r.setAttribute("href","data:text/css;charset=UTF-8,"+encodeURIComponent(t)),document.head.appendChild(r)}init(){const t=window.localStorage.getItem("widgetClosed"),r=this.display,e=this.widget,h=this.delay,b=this.backDrop;if(t)if(console.log("exists"),console.log(t),new Date>new Date(t))localStorage.removeItem("widgetClosed");else return;if(!o)return;b&&(e==null||e.backDrop.classList.add("toggle--visible"));const x=()=>{let l=0;switch(r){case"onLoad":e==null||e.appWidget.classList.add("toggle--visible");break;case"onScrollDown":window.addEventListener("scroll",function(){let i=window.scrollY||document.documentElement.scrollTop;i<l?e==null||e.appWidget.classList.remove("toggle--visible"):e==null||e.appWidget.classList.add("toggle--visible"),l=i});break;case"onScrollUp":window.addEventListener("scroll",function(){let i=window.scrollY||document.documentElement.scrollTop;i>l?e==null||e.appWidget.classList.remove("toggle--visible"):e==null||e.appWidget.classList.add("toggle--visible"),l=i});break}};setTimeout(()=>{x()},h)}}const q={os:v,isMobile:_,isCanvas:C};o&&function(s){s.QrWidget=k,s.deviceData=q}(window),n.QrWidget=k,n.deviceData=q,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})});