Nothing to see here.
@@ -307,109 +328,56 @@ customElements.define('sm-tab-panels', class extends HTMLElement {
this.attachShadow({
mode: 'open'
}).append(smTabPanels.content.cloneNode(true))
+
+ this.isTransitioning = false
+
+ this.panelContainer = this.shadowRoot.querySelector('.panel-container');
this.panelSlot = this.shadowRoot.querySelector('slot');
+ this.handleTabChange = this.handleTabChange.bind(this)
+ }
+ handleTabChange(e) {
+ this.isTransitioning = true
+ this.panelContainer.scrollTo({
+ left: this.allPanels[e.detail.index].getBoundingClientRect().left - this.panelContainer.getBoundingClientRect().left + this.panelContainer.scrollLeft,
+ behavior: 'smooth'
+ })
+ setTimeout(() => {
+ this.isTransitioning = false
+ }, 300);
+ }
+ fireEvent(index) {
+ this.dispatchEvent(
+ new CustomEvent(`switchedpanel${this.id}`, {
+ bubbles: true,
+ detail: {
+ index: parseInt(index)
+ }
+ })
+ )
}
connectedCallback() {
-
- //animations
- let flyInLeft = [{
- opacity: 0,
- transform: 'translateX(-1rem)'
- },
- {
- opacity: 1,
- transform: 'none'
- }
- ],
- flyInRight = [{
- opacity: 0,
- transform: 'translateX(1rem)'
- },
- {
- opacity: 1,
- transform: 'none'
- }
- ],
- flyOutLeft = [{
- opacity: 1,
- transform: 'none'
- },
- {
- opacity: 0,
- transform: 'translateX(-1rem)'
- }
- ],
- flyOutRight = [{
- opacity: 1,
- transform: 'none'
- },
- {
- opacity: 0,
- transform: 'translateX(1rem)'
- }
- ],
- animationOptions = {
- duration: 300,
- fill: 'forwards',
- easing: 'ease'
- }
- this.prevPanel
- this.allPanels
- this.previousRank
-
this.panelSlot.addEventListener('slotchange', () => {
- this.panelSlot.assignedElements().forEach((panel) => {
- panel.classList.add('hide-completely')
+ this.allPanels = this.panelSlot.assignedElements()
+ this.allPanels.forEach((panel, index) => {
+ panel.dataset.index = index
+ intersectionObserver.observe(panel)
})
})
- this.allPanels = this.panelSlot.assignedElements()
- this._targetBodyFlyRight = (targetBody) => {
- targetBody.classList.remove('hide-completely')
- targetBody.animate(flyInRight, animationOptions)
- }
- this._targetBodyFlyLeft = (targetBody) => {
- targetBody.classList.remove('hide-completely')
- targetBody.animate(flyInLeft, animationOptions)
- }
- document.addEventListener('switchtab', e => {
- if (e.detail.target !== this.id)
- return
+ document.addEventListener(`switchedtab${this.id}`, this.handleTabChange)
- if (this.prevPanel) {
- let targetBody = this.allPanels[e.detail.rank],
- currentBody = this.prevPanel;
- if (this.previousRank < e.detail.rank) {
- if (currentBody && !targetBody)
- currentBody.animate(flyOutLeft, animationOptions).onfinish = () => {
- currentBody.classList.add('hide-completely')
- }
- else if (targetBody && !currentBody) {
- this._targetBodyFlyRight(targetBody)
- } else if (currentBody && targetBody) {
- currentBody.animate(flyOutLeft, animationOptions).onfinish = () => {
- currentBody.classList.add('hide-completely')
- this._targetBodyFlyRight(targetBody)
- }
- }
- } else {
- if (currentBody && !targetBody)
- currentBody.animate(flyOutRight, animationOptions).onfinish = () => {
- currentBody.classList.add('hide-completely')
- }
- else if (targetBody && !currentBody) {
- this._targetBodyFlyLeft(targetBody)
- } else if (currentBody && targetBody) {
- currentBody.animate(flyOutRight, animationOptions).onfinish = () => {
- currentBody.classList.add('hide-completely')
- this._targetBodyFlyLeft(targetBody)
- }
- }
+ const intersectionObserver = new IntersectionObserver(entries => {
+
+ entries.forEach(entry => {
+ if (!this.isTransitioning && entry.isIntersecting) {
+ this.fireEvent(entry.target.dataset.index), 3000
}
- } else {
- this.allPanels[e.detail.rank].classList.remove('hide-completely')
- }
- this.previousRank = e.detail.rank
- this.prevPanel = this.allPanels[e.detail.rank];
+ })
+ }, {
+ threshold: 0.9
})
}
+ disconnectedCallback() {
+ intersectionObserver.disconnect()
+ document.removeEventListener(`switchedtab${this.id}`, this.handleTabChange)
+ }
})
diff --git a/components/dist/tabs.min.js b/components/dist/tabs.min.js
index b3d32ec..41bff48 100644
--- a/components/dist/tabs.min.js
+++ b/components/dist/tabs.min.js
@@ -1 +1 @@
-const smTabHeader=document.createElement("template");smTabHeader.innerHTML='\n\n
\n \n
\n',customElements.define("sm-tab-header",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smTabHeader.content.cloneNode(!0)),this.indicator=this.shadowRoot.querySelector(".indicator"),this.tabSlot=this.shadowRoot.querySelector("slot"),this.tabHeader=this.shadowRoot.querySelector(".tab-header")}sendDetails(t){this.dispatchEvent(new CustomEvent("switchtab",{bubbles:!0,detail:{target:this.target,rank:parseInt(t.getAttribute("rank"))}}))}moveIndiactor(t){this.indicator.setAttribute("style",`width: ${t.width}px; transform: translateX(${t.left-this.tabHeader.getBoundingClientRect().left+this.tabHeader.scrollLeft}px)`)}connectedCallback(){if(!this.hasAttribute("target")||""===this.getAttribute("target").value)return;this.prevTab,this.allTabs,this.activeTab,this.isTab=!1,this.target=this.getAttribute("target"),this.hasAttribute("variant")&&"tab"===this.getAttribute("variant")&&(this.isTab=!0),this.tabSlot.addEventListener("slotchange",()=>{this.tabSlot.assignedElements().forEach((t,e)=>{t.setAttribute("rank",e)})}),this.allTabs=this.tabSlot.assignedElements(),this.tabSlot.addEventListener("click",t=>{t.target!==this.prevTab&&t.target.closest("sm-tab")&&(this.prevTab&&this.prevTab.classList.remove("active"),t.target.classList.add("active"),t.target.scrollIntoView({behavior:"smooth",block:"nearest",inline:"center"}),this.moveIndiactor(t.target.getBoundingClientRect()),this.sendDetails(t.target),this.prevTab=t.target,this.activeTab=t.target)});let t=new ResizeObserver(t=>{t.forEach(t=>{if(this.prevTab){let t=this.activeTab.getBoundingClientRect();this.moveIndiactor(t)}})});t.observe(this);let e=new IntersectionObserver(t=>{t.forEach(t=>{if(t.isIntersecting)if(this.indicator.style.transition="none",this.activeTab){let t=this.activeTab.getBoundingClientRect();this.moveIndiactor(t)}else{this.allTabs[0].classList.add("active");let t=this.allTabs[0].getBoundingClientRect();this.moveIndiactor(t),this.sendDetails(this.allTabs[0]),this.prevTab=this.tabSlot.assignedElements()[0],this.activeTab=this.prevTab}})},{threshold:1});e.observe(this)}});const smTab=document.createElement("template");smTab.innerHTML='\n\n
\n\n
\n',customElements.define("sm-tab",class extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"open"}).append(smTab.content.cloneNode(!0))}});const smTabPanels=document.createElement("template");smTabPanels.innerHTML='\n\n
\n Nothing to see here.\n
\n',customElements.define("sm-tab-panels",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smTabPanels.content.cloneNode(!0)),this.panelSlot=this.shadowRoot.querySelector("slot")}connectedCallback(){let t=[{opacity:0,transform:"translateX(-1rem)"},{opacity:1,transform:"none"}],e=[{opacity:0,transform:"translateX(1rem)"},{opacity:1,transform:"none"}],n=[{opacity:1,transform:"none"},{opacity:0,transform:"translateX(-1rem)"}],a=[{opacity:1,transform:"none"},{opacity:0,transform:"translateX(1rem)"}],i={duration:300,fill:"forwards",easing:"ease"};this.prevPanel,this.allPanels,this.previousRank,this.panelSlot.addEventListener("slotchange",()=>{this.panelSlot.assignedElements().forEach(t=>{t.classList.add("hide-completely")})}),this.allPanels=this.panelSlot.assignedElements(),this._targetBodyFlyRight=(t=>{t.classList.remove("hide-completely"),t.animate(e,i)}),this._targetBodyFlyLeft=(e=>{e.classList.remove("hide-completely"),e.animate(t,i)}),document.addEventListener("switchtab",t=>{if(t.detail.target===this.id){if(this.prevPanel){let e=this.allPanels[t.detail.rank],s=this.prevPanel;this.previousRank
{s.classList.add("hide-completely")}):e&&!s?this._targetBodyFlyRight(e):s&&e&&(s.animate(n,i).onfinish=(()=>{s.classList.add("hide-completely"),this._targetBodyFlyRight(e)})):s&&!e?s.animate(a,i).onfinish=(()=>{s.classList.add("hide-completely")}):e&&!s?this._targetBodyFlyLeft(e):s&&e&&(s.animate(a,i).onfinish=(()=>{s.classList.add("hide-completely"),this._targetBodyFlyLeft(e)}))}else this.allPanels[t.detail.rank].classList.remove("hide-completely");this.previousRank=t.detail.rank,this.prevPanel=this.allPanels[t.detail.rank]}})}});
\ No newline at end of file
+const smTabHeader=document.createElement("template");smTabHeader.innerHTML='\n\n\n \n
\n',customElements.define("sm-tab-header",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smTabHeader.content.cloneNode(!0)),this.prevTab,this.allTabs,this.activeTab,this.indicator=this.shadowRoot.querySelector(".indicator"),this.tabSlot=this.shadowRoot.querySelector("slot"),this.tabHeader=this.shadowRoot.querySelector(".tab-header"),this.changeTab=this.changeTab.bind(this),this.handleClick=this.handleClick.bind(this),this.handlePanelChange=this.handlePanelChange.bind(this)}fireEvent(t){this.dispatchEvent(new CustomEvent(`switchedtab${this.target}`,{bubbles:!0,detail:{index:parseInt(t)}}))}moveIndiactor(t){this.indicator.setAttribute("style",`width: ${t.width}px; transform: translateX(${t.left-this.tabHeader.getBoundingClientRect().left+this.tabHeader.scrollLeft}px)`)}changeTab(t){t!==this.prevTab&&t.closest("sm-tab")&&(this.prevTab&&this.prevTab.classList.remove("active"),t.classList.add("active"),t.scrollIntoView({behavior:"smooth",block:"nearest",inline:"center"}),this.moveIndiactor(t.getBoundingClientRect()),this.prevTab=t,this.activeTab=t)}handleClick(t){t.target.closest("sm-tab")&&(this.changeTab(t.target),this.fireEvent(t.target.dataset.index))}handlePanelChange(t){console.log(this.allTabs),this.changeTab(this.allTabs[t.detail.index])}connectedCallback(){if(!this.hasAttribute("target")||""===this.getAttribute("target").value)return;this.target=this.getAttribute("target"),this.tabSlot.addEventListener("slotchange",()=>{this.allTabs=this.tabSlot.assignedElements(),this.allTabs.forEach((t,n)=>{t.dataset.index=n})}),this.addEventListener("click",this.handleClick),document.addEventListener(`switchedpanel${this.target}`,this.handlePanelChange);let t=new ResizeObserver(t=>{t.forEach(t=>{if(this.prevTab){let t=this.activeTab.getBoundingClientRect();this.moveIndiactor(t)}})});t.observe(this);let n=new IntersectionObserver(t=>{t.forEach(t=>{if(t.isIntersecting)if(this.indicator.style.transition="none",this.activeTab){let t=this.activeTab.getBoundingClientRect();this.moveIndiactor(t)}else{this.allTabs[0].classList.add("active");let t=this.allTabs[0].getBoundingClientRect();this.moveIndiactor(t),this.fireEvent(0),this.prevTab=this.tabSlot.assignedElements()[0],this.activeTab=this.prevTab}})},{threshold:1});n.observe(this)}disconnectedCallback(){this.removeEventListener("click",this.handleClick),document.removeEventListener(`switchedpanel${this.target}`,this.handlePanelChange)}});const smTab=document.createElement("template");smTab.innerHTML='\n\n\n\n
\n',customElements.define("sm-tab",class extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"open"}).append(smTab.content.cloneNode(!0))}});const smTabPanels=document.createElement("template");smTabPanels.innerHTML='\n\n\n Nothing to see here.\n
\n',customElements.define("sm-tab-panels",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smTabPanels.content.cloneNode(!0)),this.isTransitioning=!1,this.panelContainer=this.shadowRoot.querySelector(".panel-container"),this.panelSlot=this.shadowRoot.querySelector("slot"),this.handleTabChange=this.handleTabChange.bind(this)}handleTabChange(t){this.isTransitioning=!0,this.panelContainer.scrollTo({left:this.allPanels[t.detail.index].getBoundingClientRect().left-this.panelContainer.getBoundingClientRect().left+this.panelContainer.scrollLeft,behavior:"smooth"}),setTimeout(()=>{this.isTransitioning=!1},300)}fireEvent(t){this.dispatchEvent(new CustomEvent(`switchedpanel${this.id}`,{bubbles:!0,detail:{index:parseInt(t)}}))}connectedCallback(){this.panelSlot.addEventListener("slotchange",()=>{this.allPanels=this.panelSlot.assignedElements(),this.allPanels.forEach((n,e)=>{n.dataset.index=e,t.observe(n)})}),document.addEventListener(`switchedtab${this.id}`,this.handleTabChange);const t=new IntersectionObserver(t=>{t.forEach(t=>{!this.isTransitioning&&t.isIntersecting&&this.fireEvent(t.target.dataset.index)})},{threshold:.9})}disconnectedCallback(){intersectionObserver.disconnect(),document.removeEventListener(`switchedtab${this.id}`,this.handleTabChange)}});
\ No newline at end of file
diff --git a/components/index.html b/components/index.html
index 9c5afb9..fd04657 100644
--- a/components/index.html
+++ b/components/index.html
@@ -871,7 +871,7 @@
also identical.
Interactive demo
-
+
option1
option2
option3
@@ -1055,10 +1055,8 @@
To start using SM Components
- inbox
- sent
- draft
- spam
+ Audio
+ Video
@@ -1070,21 +1068,6 @@
flkmgklfmzkl
hbdsfhb
-
- Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facere neque incidunt aut laudantium,
- quam
- id,
- molestiae vero blanditiis nisi alias in magnam autem quasi cumque eveniet qui cupiditate nam
- corrupti?
-
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis fuga ipsam, explicabo, eius
- accusamus
- consectetur ex sunt soluta voluptatem iure totam nulla expedita suscipit minus molestiae
- similique
- odio optio
- quibusdam.
-
diff --git a/components/index.min.html b/components/index.min.html
index 20db38c..2149684 100644
--- a/components/index.min.html
+++ b/components/index.min.html
@@ -92,7 +92,7 @@
<div>Disabled switch</div>
</sm-radio>
-Attributes
All the native HTML radio attributes are valid
Attribute
Description
checked (boolean)
If present, radio button is set to checked state as default.
disabled (boolean)
If present radio button is set to disabled state. all the interactions are disabled
name (string)
Can be used to group radio buttons with same name. only one radio button will be active in a group.
value (string)
Sets value of radio button which can be accessed by value property with JS
Select
<sm-select> is very similar to starndatd HTML5 select and it's markup stucture is also identical.
Interactive demo
option1option2option3
+
Attributes
All the native HTML radio attributes are valid
Attribute
Description
checked (boolean)
If present, radio button is set to checked state as default.
disabled (boolean)
If present radio button is set to disabled state. all the interactions are disabled
name (string)
Can be used to group radio buttons with same name. only one radio button will be active in a group.
value (string)
Sets value of radio button which can be accessed by value property with JS
Select
<sm-select> is very similar to starndatd HTML5 select and it's markup stucture is also identical.
Interactive demo
option1option2option3
<sm-select>
<sm-option value="1">option1</sm-option>
@@ -146,7 +146,7 @@
<sm-spinner></sm-spinner>
-
Strip select
To start using SM Components
MovieTV seriesVideoMusicTabs
To start using SM Components
inboxsentdraftspamgjdhnsrfijbgn
bdfjnbjjadifjoaijdiajdo dosfighjoi
flkmgklfmzkl
hbdsfhbLorem ipsum dolor, sit amet consectetur adipisicing elit. Facere neque incidunt aut laudantium, quam id, molestiae vero blanditiis nisi alias in magnam autem quasi cumque eveniet qui cupiditate nam corrupti?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis fuga ipsam, explicabo, eius accusamus consectetur ex sunt soluta voluptatem iure totam nulla expedita suscipit minus molestiae similique odio optio quibusdam.Tags input
To start using SM Components
Textarea
To start using SM Components
Text field
To start using SM Components
Theme toggle
Use theme-toggle to create light/dark theme easily with CSS variables.
When this is toggled by user the component changes the custom data attribute data-theme="" on HTML body tag to either light or dark
By default theme is set to OS level preferred-color-scheme ( supported by Android, iOS, Windows and MacOS ).
Interactive demo
HTML
+
Strip select
To start using SM Components
MovieTV seriesVideoMusicTabs
To start using SM Components
AudioVideogjdhnsrfijbgn
bdfjnbjjadifjoaijdiajdo dosfighjoi
flkmgklfmzkl
hbdsfhbTags input
To start using SM Components
Textarea
To start using SM Components
Text field
To start using SM Components
Theme toggle
Use theme-toggle to create light/dark theme easily with CSS variables.
When this is toggled by user the component changes the custom data attribute data-theme="" on HTML body tag to either light or dark
By default theme is set to OS level preferred-color-scheme ( supported by Android, iOS, Windows and MacOS ).
Interactive demo
HTML
<theme-toggle></theme-toggle>