${messageBody}
- ` - notification.innerHTML = composition - this.notificationPanel.prepend(notification) - if (window.innerWidth > 640) { - notification.animate([{ - transform: `translateX(1rem)`, - opacity: '0' - }, - { - transform: 'translateX(0)', - opacity: '1' - } - ], this.animationOptions).onfinish = () => { - notification.setAttribute('style', `transform: none;`); - } - } else { - notification.setAttribute('style', `transform: translateY(0); opacity: 1`) - } - notification.addEventListener('touchstart', this.handleTouchStart) - notification.addEventListener('touchmove', this.handleTouchMove) - notification.addEventListener('touchend', this.handleTouchEnd) - } - - removeNotification = (notification, toLeft) => { - if (!this.offset) - this.offset = 0; - - if (toLeft) - notification.animate([{ - transform: `translateX(${this.offset}px)`, - opacity: '1' - }, - { - transform: `translateX(-100%)`, - opacity: '0' - } - ], this.animationOptions).onfinish = () => { - notification.remove() - } - else { - notification.animate([{ - transform: `translateX(${this.offset}px)`, - opacity: '1' - }, - { - transform: `translateX(100%)`, - opacity: '0' - } - ], this.animationOptions).onfinish = () => { - notification.remove() - } - } - } - - clearAll = () => { - Array.from(this.notificationPanel.children).forEach(child => { - this.removeNotification(child) - }) - } - - connectedCallback() { - this.notificationPanel = this.shadowRoot.querySelector('.notification-panel') - this.animationOptions = { - duration: 300, - fill: "forwards", - easing: "ease" - } - this.fontSize = Number(window.getComputedStyle(document.body).getPropertyValue('font-size').match(/\d+/)[0]) - this.notification - this.offset - this.touchStartX = 0 - this.touchEndX = 0 - this.touchStartTime = 0 - this.touchEndTime = 0 - this.threshold = this.notificationPanel.getBoundingClientRect().width * 0.3 - this.touchEndAnimataion; - - this.notificationPanel.addEventListener('click', e => { - if (e.target.closest('.close'))( - this.removeNotification(e.target.closest('.notification')) - ) - }) - - const observer = new MutationObserver(mutationList => { - mutationList.forEach(mutation => { - if (mutation.type === 'childList') { - if (mutation.addedNodes.length) { - if (!mutation.addedNodes[0].classList.contains('pinned')) - setTimeout(() => { - this.removeNotification(mutation.addedNodes[0]) - }, 5000); - if (window.innerWidth > 640) - this.notificationPanel.style.padding = '1.5rem 0 3rem 1.5rem'; - else - this.notificationPanel.style.padding = '1rem 1rem 2rem 1rem'; - } else if (mutation.removedNodes.length && !this.notificationPanel.children.length) { - this.notificationPanel.style.padding = 0; - } - } - }) - }) - observer.observe(this.notificationPanel, { - attributes: true, - childList: true, - subtree: true - }) - } -}) - - -// sm-menu -const smMenu = document.createElement('template') -smMenu.innerHTML = ` - -${messageBody}
+ ` + notification.innerHTML = composition + this.notificationPanel.prepend(notification) + if (window.innerWidth > 640) { + notification.animate([{ + transform: `translateX(1rem)`, + opacity: '0' + }, + { + transform: 'translateX(0)', + opacity: '1' + } + ], this.animationOptions).onfinish = () => { + notification.setAttribute('style', `transform: none;`); + } + } else { + notification.setAttribute('style', `transform: translateY(0); opacity: 1`) + } + notification.addEventListener('touchstart', this.handleTouchStart) + notification.addEventListener('touchmove', this.handleTouchMove) + notification.addEventListener('touchend', this.handleTouchEnd) + } + + removeNotification = (notification, toLeft) => { + if (!this.offset) + this.offset = 0; + + if (toLeft) + notification.animate([{ + transform: `translateX(${this.offset}px)`, + opacity: '1' + }, + { + transform: `translateX(-100%)`, + opacity: '0' + } + ], this.animationOptions).onfinish = () => { + notification.remove() + } + else { + notification.animate([{ + transform: `translateX(${this.offset}px)`, + opacity: '1' + }, + { + transform: `translateX(100%)`, + opacity: '0' + } + ], this.animationOptions).onfinish = () => { + notification.remove() + } + } + } + + clearAll = () => { + Array.from(this.notificationPanel.children).forEach(child => { + this.removeNotification(child) + }) + } + + connectedCallback() { + this.notificationPanel = this.shadowRoot.querySelector('.notification-panel') + this.animationOptions = { + duration: 300, + fill: "forwards", + easing: "ease" + } + this.fontSize = Number(window.getComputedStyle(document.body).getPropertyValue('font-size').match(/\d+/)[0]) + this.notification + this.offset + this.touchStartX = 0 + this.touchEndX = 0 + this.touchStartTime = 0 + this.touchEndTime = 0 + this.threshold = this.notificationPanel.getBoundingClientRect().width * 0.3 + this.touchEndAnimataion; + + this.notificationPanel.addEventListener('click', e => { + if (e.target.closest('.close'))( + this.removeNotification(e.target.closest('.notification')) + ) + }) + + const observer = new MutationObserver(mutationList => { + mutationList.forEach(mutation => { + if (mutation.type === 'childList') { + if (mutation.addedNodes.length) { + if (!mutation.addedNodes[0].classList.contains('pinned')) + setTimeout(() => { + this.removeNotification(mutation.addedNodes[0]) + }, 5000); + if (window.innerWidth > 640) + this.notificationPanel.style.padding = '1.5rem 0 3rem 1.5rem'; + else + this.notificationPanel.style.padding = '1rem 1rem 2rem 1rem'; + } else if (mutation.removedNodes.length && !this.notificationPanel.children.length) { + this.notificationPanel.style.padding = 0; + } + } + }) + }) + observer.observe(this.notificationPanel, { + attributes: true, + childList: true, + subtree: true + }) + } +}) + + +// sm-menu +const smMenu = document.createElement('template') +smMenu.innerHTML = ` + +Point your camera towards QR Code.
- *Only works with RanchiMall Pay.
-
Show this QR Code to receive money using RanchiMall Pay
-- Send rupee to any FLO address. -
-Enter receiver's FLO address.
-Enter the amount you want to send.
-Press Send button.
-- Deposit money through UPI. -
-Copy UPI address shown below.
-Open any UPI app of your preference and send money to copied UPI address. (Do not close this - browser)
-Copy the UPI transaction ID shown after transaction was successful.
-Enter the amount you sent to copied address
-Then enter the UPI transaction ID you copied when was transaction completed.
-Press Deposit button
-- Withdraw or redeem your rupee to your specified UPI address. -
-Enter amount you want to withdraw
-Select UPI address you want to withdraw rupee to. If you haven't added UPI address, add one using - 'Add UPI address' button.
-Press Withdraw button
-- Request rupee from other's using FLO address. -
-Enter amount you want to request
-Enter the FLO address of person you want to request rupee from.
-Press Request button
-- Don't have enough Rupee balance? Pay to our cashier through UPI and your cash will be - sent as Rupee. -
-Copy UPI address shown below.
-Open any UPI app of your preference and send money to copied UPI address. (Do not close this - browser)
-Enter the amount you sent to copied address
-Then enter the FLO address of person you want send rupee to.
-Select UPI address that you used when sending money copied UPI address. If you haven't added UPI - address, add one using 'Add UPI address' button.
-Press Pay button
-Point your camera towards QR Code.
+ *Only works with RanchiMall Pay.
+
Show this QR Code to receive money using RanchiMall Pay
++ Send rupee to any FLO address. +
+Enter receiver's FLO address.
+Enter the amount you want to send.
+Press Send button.
++ Deposit money through UPI. +
+Copy UPI address shown below.
+Open any UPI app of your preference and send money to copied UPI address. (Do not close this + browser)
+Copy the UPI transaction ID shown after transaction was successful.
+Enter the amount you sent to copied address
+Then enter the UPI transaction ID you copied when was transaction completed.
+Press Deposit button
++ Withdraw or redeem your rupee to your specified UPI address. +
+Enter amount you want to withdraw
+Select UPI address you want to withdraw rupee to. If you haven't added UPI address, add one using + 'Add UPI address' button.
+Press Withdraw button
++ Request rupee from other's using FLO address. +
+Enter amount you want to request
+Enter the FLO address of person you want to request rupee from.
+Press Request button
++ Don't have enough Rupee balance? Pay to our cashier through UPI and your cash will be + sent as Rupee. +
+Copy UPI address shown below.
+Open any UPI app of your preference and send money to copied UPI address. (Do not close this + browser)
+Enter the amount you sent to copied address
+Then enter the FLO address of person you want send rupee to.
+Select UPI address that you used when sending money copied UPI address. If you haven't added UPI + address, add one using 'Add UPI address' button.
+Press Pay button
+