//Button
const smButton = document.createElement('template')
smButton.innerHTML = `
`;
customElements.define('sm-button',
class extends HTMLElement {
constructor() {
super()
this.attachShadow({ mode: 'open' }).append(smButton.content.cloneNode(true))
}
get disabled() {
return this.isDisabled
}
set disabled(value) {
if (value && !this.isDisabled) {
this.isDisabled = true
this.setAttribute('disabled', '')
this.button.removeAttribute('tabindex')
}
else if (this.isDisabled) {
this.isDisabled = false
this.removeAttribute('disabled')
}
}
dispatch() {
if (this.isDisabled) {
this.dispatchEvent(new CustomEvent('disabled', {
bubbles: true,
composed: true
}))
}
else {
this.dispatchEvent(new CustomEvent('clicked', {
bubbles: true,
composed: true
}))
}
}
connectedCallback() {
this.isDisabled = false
this.button = this.shadowRoot.querySelector('.button')
if (this.hasAttribute('disabled') && !this.isDisabled)
this.isDisabled = true
this.addEventListener('click', (e) => {
this.dispatch()
})
this.addEventListener('keyup', (e) => {
if (e.code === "Enter" || e.code === "Space")
this.dispatch()
})
}
})
//carousel
const smCarousel = document.createElement('template')
smCarousel.innerHTML = `
`;
customElements.define('sm-carousel', class extends HTMLElement {
constructor() {
super()
this.attachShadow({ mode: 'open' }).append(smCarousel.content.cloneNode(true))
}
scrollLeft() {
this.carousel.scrollBy({
top: 0,
left: -this.scrollDistance,
behavior: 'smooth'
})
}
scrollRight() {
this.carousel.scrollBy({
top: 0,
left: this.scrollDistance,
behavior: 'smooth'
})
}
connectedCallback() {
this.carousel = this.shadowRoot.querySelector('.carousel')
this.carouselContainer = this.shadowRoot.querySelector('.carousel-container')
this.carouselSlot = this.shadowRoot.querySelector('slot')
this.nextArrow = this.shadowRoot.querySelector('.next-item')
this.previousArrow = this.shadowRoot.querySelector('.previous-item')
this.nextGradient = this.shadowRoot.querySelector('.right')
this.previousGradient = this.shadowRoot.querySelector('.left')
this.carouselItems
this.scrollDistance = this.carouselContainer.getBoundingClientRect().width / 3
const firstElementObserver = new IntersectionObserver(entries => {
if (entries[0].isIntersecting) {
this.previousArrow.classList.remove('expand')
this.previousGradient.classList.add('hide')
}
else {
this.previousArrow.classList.add('expand')
this.previousGradient.classList.remove('hide')
}
}, {
root: this.carouselContainer,
threshold: 0.9
})
const lastElementObserver = new IntersectionObserver(entries => {
if (entries[0].isIntersecting) {
this.nextArrow.classList.remove('expand')
this.nextGradient.classList.add('hide')
}
else {
this.nextArrow.classList.add('expand')
this.nextGradient.classList.remove('hide')
}
}, {
root: this.carouselContainer,
threshold: 0.9
})
const carouselObserver = new IntersectionObserver(entries => {
if (entries[0].isIntersecting) {
this.scrollDistance = this.carouselContainer.getBoundingClientRect().width / 3
}
})
carouselObserver.observe(this.carouselContainer)
this.carouselSlot.addEventListener('slotchange', e => {
this.carouselItems = this.carouselSlot.assignedElements()
firstElementObserver.observe(this.carouselItems[0])
lastElementObserver.observe(this.carouselItems[this.carouselItems.length - 1])
})
this.addEventListener('keyup', e => {
if (e.code === 'ArrowLeft')
this.scrollRight()
else
this.scrollRight()
})
this.nextArrow.addEventListener('click', this.scrollRight.bind(this))
this.previousArrow.addEventListener('click', this.scrollLeft.bind(this))
}
disconnectedCallback() {
this.nextArrow.removeEventListener('click', this.scrollRight.bind(this))
this.previousArrow.removeEventListener('click', this.scrollLeft.bind(this))
}
})