From 8df848271d56bf11961a43c81eeccab1eff25dc8 Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Wed, 27 Sep 2023 15:51:27 +0530 Subject: [PATCH] bug fixes --- components/dist/notifications.js | 4 +++- components/dist/notifications.min.js | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/components/dist/notifications.js b/components/dist/notifications.js index 1f71100..fbc9c4e 100644 --- a/components/dist/notifications.js +++ b/components/dist/notifications.js @@ -46,7 +46,6 @@ smNotifications.innerHTML = ` word-break: break-all; word-break: break-word; hyphens: auto; - max-width: 100%; padding: max(1rem,1.5vw); align-items: center; box-shadow: 0 0.5rem 1rem 0 rgba(0,0,0,0.14); @@ -134,9 +133,11 @@ smNotifications.innerHTML = ` .notification-panel{ top: auto; bottom: 0; + max-width: max-content; } .notification{ width: auto; + max-width: max-content; border: solid 1px rgba(var(--text-color, (17,17,17)), 0.2); } } @@ -244,6 +245,7 @@ customElements.define('sm-notifications', class extends HTMLElement { this.notificationPanel.append(notification); else this.notificationPanel.prepend(notification); + notification.scrollIntoView({ behavior: 'smooth' }); this.notificationPanel.animate( [ { diff --git a/components/dist/notifications.min.js b/components/dist/notifications.min.js index c478141..ddf1dbe 100644 --- a/components/dist/notifications.min.js +++ b/components/dist/notifications.min.js @@ -1 +1 @@ -const smNotifications=document.createElement("template");smNotifications.innerHTML="\n \n
\n ",customElements.define("sm-notifications",class extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"open"}).append(smNotifications.content.cloneNode(!0)),this.notificationPanel=this.shadowRoot.querySelector(".notification-panel"),this.animationOptions={duration:300,fill:"forwards",easing:"cubic-bezier(0.175, 0.885, 0.32, 1.275)"},this.push=this.push.bind(this),this.createNotification=this.createNotification.bind(this),this.removeNotification=this.removeNotification.bind(this),this.clearAll=this.clearAll.bind(this),this.remove=this.remove.bind(this),this.handleTouchMove=this.handleTouchMove.bind(this),this.startX=0,this.currentX=0,this.endX=0,this.swipeDistance=0,this.swipeDirection="",this.swipeThreshold=0,this.startTime=0,this.swipeTime=0,this.swipeTimeThreshold=200,this.currentTarget=null,this.notificationTimeout=5e3,this.mediaQuery=window.matchMedia("(min-width: 640px)"),this.handleOrientationChange=this.handleOrientationChange.bind(this),this.isBigViewport=!1}set timeout(t){isNaN(t)||(this.notificationTimeout=t)}randString(t){let n="";const i="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";for(let e=0;e${e}`:""}\n ${t}\n ${o?``:""}\n ${i?'':""}\n `,o&&r.querySelector(".action").addEventListener("click",o.callback),i?r.querySelector(".close").addEventListener("click",()=>{this.removeNotification(r)}):setTimeout(()=>{this.removeNotification(r,this.isBigViewport?"left":"top")},a),r}push(t,n={}){const i=this.createNotification(t,n);return this.isBigViewport?this.notificationPanel.append(i):this.notificationPanel.prepend(i),this.notificationPanel.animate([{transform:`translateY(${this.isBigViewport?"":"-"}${i.clientHeight}px)`},{transform:"none"}],this.animationOptions),i.animate([{transform:"translateY(-1rem)",opacity:"0"},{transform:"none",opacity:"1"}],this.animationOptions).onfinish=(t=>{t.target.commitStyles(),t.target.cancel()}),i.id}removeNotification(t,n="left"){if(!t)return;const i="left"===n||"top"===n?"-":"+";this.isBigViewport||"top"!==n?t.animate([{transform:this.currentX?`translateX(${this.currentX}px)`:"none",opacity:"1"},{transform:`translateX(calc(${i}${Math.abs(this.currentX)}px ${i} 1rem))`,opacity:"0"}],this.animationOptions).onfinish=(()=>{t.remove()}):t.animate([{transform:this.currentX?`translateY(${this.currentX}px)`:"none",opacity:"1"},{transform:`translateY(calc(${i}${Math.abs(this.currentX)}px ${i} 1rem))`,opacity:"0"}],this.animationOptions).onfinish=(()=>{t.remove()})}remove(t){const n=this.notificationPanel.querySelector(`#${t}`);n&&this.removeNotification(n)}clearAll(){Array.from(this.notificationPanel.children).forEach(t=>{this.removeNotification(t)})}handleTouchMove(t){this.currentX=t.touches[0].clientX-this.startX,this.currentTarget.style.transform=`translateX(${this.currentX}px)`}handleOrientationChange(t){this.isBigViewport=t.matches,t.matches}connectedCallback(){this.handleOrientationChange(this.mediaQuery),this.mediaQuery.addEventListener("change",this.handleOrientationChange),this.notificationPanel.addEventListener("touchstart",t=>{t.target.closest(".close")?this.removeNotification(t.target.closest(".notification")):t.target.closest(".notification")&&(this.swipeThreshold=t.target.closest(".notification").getBoundingClientRect().width/2,this.currentTarget=t.target.closest(".notification"),this.startTime=Date.now(),this.startX=t.touches[0].clientX,this.startY=t.touches[0].clientY,this.notificationPanel.addEventListener("touchmove",this.handleTouchMove,{passive:!0}))},{passive:!0}),this.notificationPanel.addEventListener("touchend",t=>{this.endX=t.changedTouches[0].clientX,this.endY=t.changedTouches[0].clientY,this.swipeDistance=Math.abs(this.endX-this.startX),this.swipeTime=Date.now()-this.startTime,this.endX>this.startX?this.swipeDirection="right":this.swipeDirection="left",this.swipeTime50&&this.removeNotification(this.currentTarget,this.swipeDirection):this.swipeDistance>this.swipeThreshold?this.removeNotification(this.currentTarget,this.swipeDirection):this.currentTarget.animate([{transform:`translateX(${this.currentX}px)`},{transform:"none"}],this.animationOptions).onfinish=(t=>{t.target.commitStyles(),t.target.cancel()}),this.notificationPanel.removeEventListener("touchmove",this.handleTouchMove),this.currentX=0})}disconnectedCallback(){mediaQueryList.removeEventListener("change",handleOrientationChange)}}); \ No newline at end of file +const smNotifications=document.createElement("template");smNotifications.innerHTML="\n \n
\n ",customElements.define("sm-notifications",class extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"open"}).append(smNotifications.content.cloneNode(!0)),this.notificationPanel=this.shadowRoot.querySelector(".notification-panel"),this.animationOptions={duration:300,fill:"forwards",easing:"cubic-bezier(0.175, 0.885, 0.32, 1.275)"},this.push=this.push.bind(this),this.createNotification=this.createNotification.bind(this),this.removeNotification=this.removeNotification.bind(this),this.clearAll=this.clearAll.bind(this),this.remove=this.remove.bind(this),this.handleTouchMove=this.handleTouchMove.bind(this),this.startX=0,this.currentX=0,this.endX=0,this.swipeDistance=0,this.swipeDirection="",this.swipeThreshold=0,this.startTime=0,this.swipeTime=0,this.swipeTimeThreshold=200,this.currentTarget=null,this.notificationTimeout=5e3,this.mediaQuery=window.matchMedia("(min-width: 640px)"),this.handleOrientationChange=this.handleOrientationChange.bind(this),this.isBigViewport=!1}set timeout(t){isNaN(t)||(this.notificationTimeout=t)}randString(t){let n="";const i="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";for(let e=0;e${e}`:""}\n ${t}\n ${o?``:""}\n ${i?'':""}\n `,o&&r.querySelector(".action").addEventListener("click",o.callback),i?r.querySelector(".close").addEventListener("click",()=>{this.removeNotification(r)}):setTimeout(()=>{this.removeNotification(r,this.isBigViewport?"left":"top")},a),r}push(t,n={}){const i=this.createNotification(t,n);return this.isBigViewport?this.notificationPanel.append(i):this.notificationPanel.prepend(i),i.scrollIntoView({behavior:"smooth"}),this.notificationPanel.animate([{transform:`translateY(${this.isBigViewport?"":"-"}${i.clientHeight}px)`},{transform:"none"}],this.animationOptions),i.animate([{transform:"translateY(-1rem)",opacity:"0"},{transform:"none",opacity:"1"}],this.animationOptions).onfinish=(t=>{t.target.commitStyles(),t.target.cancel()}),i.id}removeNotification(t,n="left"){if(!t)return;const i="left"===n||"top"===n?"-":"+";this.isBigViewport||"top"!==n?t.animate([{transform:this.currentX?`translateX(${this.currentX}px)`:"none",opacity:"1"},{transform:`translateX(calc(${i}${Math.abs(this.currentX)}px ${i} 1rem))`,opacity:"0"}],this.animationOptions).onfinish=(()=>{t.remove()}):t.animate([{transform:this.currentX?`translateY(${this.currentX}px)`:"none",opacity:"1"},{transform:`translateY(calc(${i}${Math.abs(this.currentX)}px ${i} 1rem))`,opacity:"0"}],this.animationOptions).onfinish=(()=>{t.remove()})}remove(t){const n=this.notificationPanel.querySelector(`#${t}`);n&&this.removeNotification(n)}clearAll(){Array.from(this.notificationPanel.children).forEach(t=>{this.removeNotification(t)})}handleTouchMove(t){this.currentX=t.touches[0].clientX-this.startX,this.currentTarget.style.transform=`translateX(${this.currentX}px)`}handleOrientationChange(t){this.isBigViewport=t.matches,t.matches}connectedCallback(){this.handleOrientationChange(this.mediaQuery),this.mediaQuery.addEventListener("change",this.handleOrientationChange),this.notificationPanel.addEventListener("touchstart",t=>{t.target.closest(".close")?this.removeNotification(t.target.closest(".notification")):t.target.closest(".notification")&&(this.swipeThreshold=t.target.closest(".notification").getBoundingClientRect().width/2,this.currentTarget=t.target.closest(".notification"),this.startTime=Date.now(),this.startX=t.touches[0].clientX,this.startY=t.touches[0].clientY,this.notificationPanel.addEventListener("touchmove",this.handleTouchMove,{passive:!0}))},{passive:!0}),this.notificationPanel.addEventListener("touchend",t=>{this.endX=t.changedTouches[0].clientX,this.endY=t.changedTouches[0].clientY,this.swipeDistance=Math.abs(this.endX-this.startX),this.swipeTime=Date.now()-this.startTime,this.endX>this.startX?this.swipeDirection="right":this.swipeDirection="left",this.swipeTime50&&this.removeNotification(this.currentTarget,this.swipeDirection):this.swipeDistance>this.swipeThreshold?this.removeNotification(this.currentTarget,this.swipeDirection):this.currentTarget.animate([{transform:`translateX(${this.currentX}px)`},{transform:"none"}],this.animationOptions).onfinish=(t=>{t.target.commitStyles(),t.target.cancel()}),this.notificationPanel.removeEventListener("touchmove",this.handleTouchMove),this.currentX=0})}disconnectedCallback(){mediaQueryList.removeEventListener("change",handleOrientationChange)}}); \ No newline at end of file