${n}
\n `,i&&(e.classList.add("pinned"),a+='\n \n '),e.innerHTML=a,e}push(n,t={}){const i=this.createNotification(n,t);this.notificationPanel.append(i),i.animate([{transform:"translateY(1rem)",opacity:"0"},{transform:"none",opacity:"1"}],this.animationOptions)}removeNotification(n){n.animate([{transform:"none",opacity:"1"},{transform:"translateY(0.5rem)",opacity:"0"}],this.animationOptions).onfinish=(()=>{n.remove()})}clearAll(){Array.from(this.notificationPanel.children).forEach(n=>{this.removeNotification(n)})}connectedCallback(){this.notificationPanel.addEventListener("click",n=>{n.target.closest(".close")&&this.removeNotification(n.target.closest(".notification"))});const n=new MutationObserver(n=>{n.forEach(n=>{"childList"===n.type&&n.addedNodes.length&&!n.addedNodes[0].classList.contains("pinned")&&setTimeout(()=>{this.removeNotification(n.addedNodes[0])},5e3)})});n.observe(this.notificationPanel,{childList:!0})}}); \ 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)}createNotification(n,o){const{pinned:t=!1,icon:i=""}=o,e=document.createElement("div");e.classList.add("notification");let a="";return a+=`\n${n}
\n `,t&&(e.classList.add("pinned"),a+='\n \n '),e.innerHTML=a,e}push(n,o={}){const t=this.createNotification(n,o);this.notificationPanel.append(t),t.animate([{transform:"translateY(1rem)",opacity:"0"},{transform:"none",opacity:"1"}],this.animationOptions)}removeNotification(n){n.animate([{transform:"none",opacity:"1"},{transform:"translateY(0.5rem)",opacity:"0"}],this.animationOptions).onfinish=(()=>{n.remove()})}clearAll(){Array.from(this.notificationPanel.children).forEach(n=>{this.removeNotification(n)})}connectedCallback(){this.notificationPanel.addEventListener("click",n=>{n.target.closest(".close")&&this.removeNotification(n.target.closest(".notification"))});const n=new MutationObserver(n=>{n.forEach(n=>{"childList"===n.type&&n.addedNodes.length&&!n.addedNodes[0].classList.contains("pinned")&&setTimeout(()=>{this.removeNotification(n.addedNodes[0])},5e3)})});n.observe(this.notificationPanel,{childList:!0})}}); \ No newline at end of file diff --git a/components/dist/popup.js b/components/dist/popup.js index bf61994..6cbe3d3 100644 --- a/components/dist/popup.js +++ b/components/dist/popup.js @@ -12,6 +12,11 @@ smPopup.innerHTML = ` display: -ms-grid; display: grid; z-index: 10; + --accent-color: #4d2588; + --text-color: 17, 17, 17; + --foreground-color: 255, 255, 255; + --background-color: #F6f6f6; + --danger-color: red; --width: 100%; --height: auto; --min-width: auto; diff --git a/components/dist/popup.min.js b/components/dist/popup.min.js index b87e394..66b746b 100644 --- a/components/dist/popup.min.js +++ b/components/dist/popup.min.js @@ -1 +1 @@ -const smPopup=document.createElement("template");smPopup.innerHTML='\n\n\n',customElements.define("sm-popup",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smPopup.content.cloneNode(!0)),this.allowClosing=!1,this.isOpen=!1,this.resumeScrolling=this.resumeScrolling.bind(this),this.show=this.show.bind(this),this.hide=this.hide.bind(this),this.handleTouchStart=this.handleTouchStart.bind(this),this.handleTouchMove=this.handleTouchMove.bind(this),this.handleTouchEnd=this.handleTouchEnd.bind(this),this.movePopup=this.movePopup.bind(this)}get open(){return this.isOpen}resumeScrolling(){const t=document.body.style.top;window.scrollTo(0,-1*parseInt(t||"0")),setTimeout(()=>{document.body.style.overflow="auto",document.body.style.top="initial"},300)}show(t,e){return e&&(this.popupStack=e),this.popupStack&&!this.hasAttribute("open")&&(this.popupStack.push({popup:this,permission:t}),this.popupStack.items.length>1&&this.popupStack.items[this.popupStack.items.length-2].popup.classList.add("stacked"),this.dispatchEvent(new CustomEvent("popupopened",{bubbles:!0,detail:{popup:this,popupStack:this.popupStack}})),this.setAttribute("open",""),this.pinned=t,this.isOpen=!0),this.popupContainer.classList.remove("hide"),this.popup.style.transform="none",document.body.style.overflow="hidden",document.body.style.top=`-${window.scrollY}px`,this.popupStack}hide(){window.innerWidth<640?this.popup.style.transform="translateY(100%)":this.popup.style.transform="translateY(3rem)",this.popupContainer.classList.add("hide"),this.removeAttribute("open"),void 0!==this.popupStack?(this.popupStack.pop(),this.popupStack.items.length?this.popupStack.items[this.popupStack.items.length-1].popup.classList.remove("stacked"):this.resumeScrolling()):this.resumeScrolling(),this.inputFields.length&&setTimeout(()=>{this.inputFields.forEach(t=>{"radio"!==t.type&&"SM-CHECKBOX"!==t.tagName||(t.checked=!1),"SM-INPUT"!==t.tagName&&"TEXTAREA"!==t.tagName&&"SM-TEXTAREA"!==t.tagName||(t.value="")})},300),setTimeout(()=>{this.dispatchEvent(new CustomEvent("popupclosed",{bubbles:!0,detail:{popup:this,popupStack:this.popupStack}})),this.isOpen=!1},300)}handleTouchStart(t){this.touchStartY=t.changedTouches[0].clientY,this.popup.style.transition="transform 0.1s",this.touchStartTime=t.timeStamp}handleTouchMove(t){this.touchStartY- These components are based on HTML5 custom elements API. This is an attempt to unify UI - development - patterns and - elements that are used multiple times throughout any general web app.It uses 'sm' namespace for - all - components. So every - component tag starts with 'sm-' +
+ Component-based design is the cornerstone of the modern UI development process. With rise of more UI frameworks every day, the web platform has a serious issue of fragmentation and portability.
- They can replace some older UI elements like <select>
- <input>
- <checkbox> <button>
- But also more modern additions like popups(modals), tabs and many more.
+ Web components to the rescue! This is the collection of web components (WC here forward) that we use at RanchiMall.especially since we are a framework-less development environment so this was a logical choice.
- Some of the components have some cool tricks under their sleeves like custom events and - variantions. - They allow developers to access more information about component or simply react to whatever - state - change happen to them. - We will go more in-depth about all the variantions and customs events related to each event as - we go - further. + Just download the components you like, link them with a script tag and drop it in HTML done!.
+