@@ -1511,7 +1715,9 @@ smStripSelect.innerHTML = `
customElements.define('sm-strip-select', class extends HTMLElement {
constructor() {
super()
- this.attachShadow({ mode: 'open' }).append(smStripSelect.content.cloneNode(true))
+ this.attachShadow({
+ mode: 'open'
+ }).append(smStripSelect.content.cloneNode(true))
}
static get observedAttributes() {
return ['value']
@@ -1552,8 +1758,7 @@ customElements.define('sm-strip-select', class extends HTMLElement {
if (entries[0].isIntersecting) {
this.previousArrow.classList.add('hide')
this.previousGradient.classList.add('hide')
- }
- else {
+ } else {
this.previousArrow.classList.remove('hide')
this.previousGradient.classList.remove('hide')
}
@@ -1565,8 +1770,7 @@ customElements.define('sm-strip-select', class extends HTMLElement {
if (entries[0].isIntersecting) {
this.nextArrow.classList.add('hide')
this.nextGradient.classList.add('hide')
- }
- else {
+ } else {
this.nextArrow.classList.remove('hide')
this.nextGradient.classList.remove('hide')
}
@@ -1587,7 +1791,11 @@ customElements.define('sm-strip-select', class extends HTMLElement {
if (previousOption)
previousOption.classList.remove('active')
e.target.classList.add('active')
- e.target.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' })
+ e.target.scrollIntoView({
+ behavior: 'smooth',
+ inline: 'center',
+ block: 'nearest'
+ })
this.setAttribute('value', e.detail.value)
this.dispatchEvent(new CustomEvent('change', {
bubbles: true,
@@ -1620,36 +1828,42 @@ customElements.define('sm-strip-select', class extends HTMLElement {
const smStripOption = document.createElement('template')
smStripOption.innerHTML = `
@@ -1657,7 +1871,9 @@ smStripOption.innerHTML = `
customElements.define('sm-strip-option', class extends HTMLElement {
constructor() {
super()
- this.attachShadow({ mode: 'open' }).append(smStripOption.content.cloneNode(true))
+ this.attachShadow({
+ mode: 'open'
+ }).append(smStripOption.content.cloneNode(true))
}
sendDetails() {
let optionSelected = new CustomEvent('optionSelected', {
@@ -1696,13 +1912,32 @@ smPopup.innerHTML = `
*{
padding: 0;
margin: 0;
- box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
}
:host{
position: fixed;
+ display: -ms-grid;
display: grid;
+ z-index: 10;
+ --width: 100%;
+ --min-width: auto;
+ --body-padding: 1.5rem;
+ --border-radius: 0.8rem 0.8rem 0 0;
+}
+::-webkit-scrollbar{
+ width: 0.5rem;
+}
+
+::-webkit-scrollbar-thumb{
+ background: rgba(var(--text-color), 0.3);
+ border-radius: 1rem;
+ &:hover{
+ background: rgba(var(--text-color), 0.5);
+ }
}
.popup-container{
+ display: -ms-grid;
display: grid;
position: fixed;
top: 0;
@@ -1711,102 +1946,129 @@ smPopup.innerHTML = `
right: 0;
place-items: center;
background: rgba(0, 0, 0, 0.6);
- transition: opacity 0.3s ease;
+ -webkit-transition: opacity 0.3s;
+ -o-transition: opacity 0.3s;
+ transition: opacity 0.3s;
z-index: 10;
+ touch-action: none;
}
:host(.stacked) .popup{
- transform: scale(0.9) translateY(-2rem) !important;
+ -webkit-transform: scale(0.9) translateY(-2rem) !important;
+ transform: scale(0.9) translateY(-2rem) !important;
}
.popup{
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
- flex-direction: column;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ flex-direction: column;
position: relative;
- align-self: flex-end;
- align-items: flex-start;
- width: 100%;
- border-radius: 0.8rem 0.8rem 0 0;
- transform: translateY(100%);
+ -ms-flex-item-align: end;
+ align-self: flex-end;
+ -webkit-box-align: start;
+ -ms-flex-align: start;
+ align-items: flex-start;
+ width: var(--width);
+ min-width: var(--min-width);
+ border-radius: var(--border-radius);
+ -webkit-transform: scale(1) translateY(100%);
+ transform: scale(1) translateY(100%);
+ -webkit-transition: -webkit-transform 0.3s;
+ transition: -webkit-transform 0.3s;
+ -o-transition: transform 0.3s;
+ transition: transform 0.3s, -webkit-transform 0.3s;
transition: transform 0.3s;
background: rgba(var(--foreground-color), 1);
- box-shadow: 0 -1rem 2rem #00000020;
- max-height: 100vh;
+ -webkit-box-shadow: 0 -1rem 2rem #00000020;
+ box-shadow: 0 -1rem 2rem #00000020;
+ max-height: 90vh;
+ content-visibility: auto;
}
.container-header{
+ display: -webkit-box;
display: flex;
width: 100%;
- align-items: center;
+ touch-action: none;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
}
.popup-top{
+ display: -webkit-box;
display: flex;
width: 100%;
}
.popup-body{
+ display: -webkit-box;
display: flex;
- flex-direction: column;
- flex: 1;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
width: 100%;
- padding: 1.5rem;
+ padding: var(--body-padding);
overflow-y: auto;
}
-.heading{
- font-weight: 400;
-}
-.heading:first-letter{
- text-transform: uppercase;
-}
.hide{
opacity: 0;
pointer-events: none;
+ visiblity: none;
}
@media screen and (min-width: 640px){
+ :host{
+ --border-radius: 0.4rem;
+ }
.popup{
- width: max-content;
- align-self: center;
- border-radius: 0.4rem;
+ -ms-flex-item-align: center;
+ -ms-grid-row-align: center;
+ align-self: center;
+ border-radius: var(--border-radius);
height: auto;
- transform: translateY(1rem);
- box-shadow: 0 3rem 2rem -0.5rem #00000040;
+ -webkit-transform: scale(1) translateY(3rem);
+ transform: scale(1) translateY(3rem);
+ -webkit-box-shadow: 0 3rem 2rem -0.5rem #00000040;
+ box-shadow: 0 3rem 2rem -0.5rem #00000040;
}
}
@media screen and (max-width: 640px){
-.popup-top{
- flex-direction: column;
- align-items: center;
-}
-.handle{
- height: 0.3rem;
- width: 2rem;
- background: rgba(var(--text-color), .2);
- border-radius: 1rem;
- margin: 0.5rem 0;
-}
-.heading{
- padding: 1rem 1.5rem
-}
-.close{
- height: 2rem;
- width: 2rem;
- padding: 0.55rem;
- margin-right: 1rem;
-}
+ .popup-top{
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ flex-direction: column;
+ -webkit-box-align: center;
+ align-items: center;
+ }
+ .handle{
+ height: 0.3rem;
+ width: 2rem;
+ background: rgba(var(--text-color), .4);
+ border-radius: 1rem;
+ margin: 0.5rem 0;
+ }
}
`;
customElements.define('sm-popup', class extends HTMLElement {
constructor() {
super()
- this.attachShadow({ mode: 'open' }).append(smPopup.content.cloneNode(true))
+ this.attachShadow({
+ mode: 'open'
+ }).append(smPopup.content.cloneNode(true))
this.allowClosing = false
}
@@ -1815,55 +2077,55 @@ customElements.define('sm-popup', class extends HTMLElement {
const scrollY = document.body.style.top;
window.scrollTo(0, parseInt(scrollY || '0') * -1);
setTimeout(() => {
- document.body.setAttribute('style', `overflow: auto; top: initial`)
+ document.body.style.overflow = 'auto';
+ document.body.style.top= 'initial'
}, 300);
}
show = (pinned, popupStack) => {
- if(popupStack)
+ if (popupStack)
this.popupStack = popupStack
if (this.popupStack && !this.hasAttribute('open')) {
this.popupStack.push({
popup: this,
permission: pinned
})
- if (this.popupStack.items.length > 1){
+ if (this.popupStack.items.length > 1) {
this.popupStack.items[this.popupStack.items.length - 2].popup.classList.add('stacked')
}
+ this.dispatchEvent(
+ new CustomEvent("popupopened", {
+ bubbles: true,
+ detail: {
+ popup: this,
+ popupStack: this.popupStack
+ }
+ })
+ )
+ this.setAttribute('open', '')
+ this.pinned = pinned
}
- this.setAttribute('open', '')
- this.pinned = pinned
this.popupContainer.classList.remove('hide')
- this.popup.style.transform = 'translateY(0)';
- document.body.setAttribute('style', `overflow: hidden; top: -${window.scrollY}px`)
- this.dispatchEvent(
- new CustomEvent("popupopened", {
- bubbles: true,
- detail: {
- popup: this,
- popupStack: this.popupStack
- }
- })
- )
+ this.popup.style.transform = 'none';
+ document.body.style.overflow = 'hidden';
+ document.body.style.top= `-${window.scrollY}px`
return this.popupStack
}
hide = () => {
- this.removeAttribute('open')
- if(window.innerWidth < 640)
+ if (window.innerWidth < 640)
this.popup.style.transform = 'translateY(100%)';
else
- this.popup.style.transform = 'translateY(1rem)';
+ this.popup.style.transform = 'translateY(3rem)';
this.popupContainer.classList.add('hide')
+ this.removeAttribute('open')
if (typeof this.popupStack !== 'undefined') {
this.popupStack.pop()
- if (this.popupStack.items.length){
+ if (this.popupStack.items.length) {
this.popupStack.items[this.popupStack.items.length - 1].popup.classList.remove('stacked')
- }
- else {
+ } else {
this.resumeScrolling()
}
- }
- else {
+ } else {
this.resumeScrolling()
}
@@ -1872,30 +2134,31 @@ customElements.define('sm-popup', class extends HTMLElement {
this.inputFields.forEach(field => {
if (field.type === 'radio' || field.tagName === 'SM-CHECKBOX')
field.checked = false
- if (field.tagName === 'SM-INPUT' || field.tagName === 'TEXTAREA')
+ if (field.tagName === 'SM-INPUT' || field.tagName === 'TEXTAREA'|| field.tagName === 'SM-TEXTAREA')
field.value = ''
})
}, 300);
}
- this.dispatchEvent(
- new CustomEvent("popupclosed", {
- bubbles: true,
- detail: {
- popup: this,
- popupStack: this.popupStack
- }
- })
- )
+ setTimeout(() => {
+ this.dispatchEvent(
+ new CustomEvent("popupclosed", {
+ bubbles: true,
+ detail: {
+ popup: this,
+ popupStack: this.popupStack
+ }
+ })
+ )
+ }, 300);
}
handleTouchStart = (e) => {
this.touchStartY = e.changedTouches[0].clientY
- this.popup.style.transition = 'initial'
+ this.popup.style.transition = 'transform 0.1s'
this.touchStartTime = e.timeStamp
}
handleTouchMove = (e) => {
- e.preventDefault()
if (this.touchStartY < e.changedTouches[0].clientY) {
this.offset = e.changedTouches[0].clientY - this.touchStartY;
this.touchEndAnimataion = window.requestAnimationFrame(() => this.movePopup())
@@ -1905,22 +2168,30 @@ customElements.define('sm-popup', class extends HTMLElement {
this.popup.style.transform = `translateY(-${this.offset}px)`
}*/
}
-
+
handleTouchEnd = (e) => {
this.touchEndTime = e.timeStamp
cancelAnimationFrame(this.touchEndAnimataion)
this.touchEndY = e.changedTouches[0].clientY
this.popup.style.transition = 'transform 0.3s'
+ this.threshold = this.popup.getBoundingClientRect().height * 0.3
if (this.touchEndTime - this.touchStartTime > 200) {
if (this.touchEndY - this.touchStartY > this.threshold) {
- this.hide()
- }
- else {
+ if (this.pinned) {
+ this.show()
+ return
+ } else
+ this.hide()
+ } else {
this.show()
}
- }
- else {
+ } else {
if (this.touchEndY > this.touchStartY)
+ if (this.pinned) {
+ this.show()
+ return
+ }
+ else
this.hide()
}
}
@@ -1941,35 +2212,36 @@ customElements.define('sm-popup', class extends HTMLElement {
this.touchEndY = 0
this.touchStartTime = 0
this.touchEndTime = 0
- this.threshold = this.popup.getBoundingClientRect().height * 0.3
this.touchEndAnimataion;
+ this.threshold = this.popup.getBoundingClientRect().height * 0.3
if (this.hasAttribute('open'))
this.show()
this.popupContainer.addEventListener('mousedown', e => {
if (e.target === this.popupContainer && !this.pinned) {
- this.hide()
+ if (this.pinned) {
+ this.show()
+ return
+ } else
+ this.hide()
}
})
this.popupBodySlot.addEventListener('slotchange', () => {
- this.inputFields = this.querySelectorAll('sm-input', 'sm-checkbox', 'textarea', 'radio')
+ setTimeout(() => {
+ this.threshold = this.popup.getBoundingClientRect().height * 0.3
+ }, 200);
+ this.inputFields = this.querySelectorAll('sm-input', 'sm-checkbox', 'textarea', 'sm-textarea', 'radio')
})
- this.popupHeader.addEventListener('touchstart', (e) => {
- this.handleTouchStart(e)
- })
- this.popupHeader.addEventListener('touchmove', (e) => {
- this.handleTouchMove(e)
- })
- this.popupHeader.addEventListener('touchend', (e) => {
- this.handleTouchEnd(e)
- })
+ this.popupHeader.addEventListener('touchstart', (e) => { this.handleTouchStart(e) }, {passive: true})
+ this.popupHeader.addEventListener('touchmove', (e) => {this.handleTouchMove(e)}, {passive: true})
+ this.popupHeader.addEventListener('touchend', (e) => {this.handleTouchEnd(e)}, {passive: true})
}
disconnectedCallback() {
- this.popupHeader.removeEventListener('touchstart', this.handleTouchStart)
- this.popupHeader.removeEventListener('touchmove', this.handleTouchMove)
- this.popupHeader.removeEventListener('touchend', this.handleTouchEnd)
+ this.popupHeader.removeEventListener('touchstart', this.handleTouchStart, {passive: true})
+ this.popupHeader.removeEventListener('touchmove', this.handleTouchMove, {passive: true})
+ this.popupHeader.removeEventListener('touchend', this.handleTouchEnd, {passive: true})
}
})
@@ -1981,13 +2253,18 @@ smCarousel.innerHTML = `
*{
padding: 0;
margin: 0;
- box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
}
:host{
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
}
.icon {
position: absolute;
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
fill: none;
height: 2.6rem;
@@ -2002,10 +2279,14 @@ smCarousel.innerHTML = `
cursor: pointer;
min-width: 0;
background: rgba(var(--text-color), 1);
- box-shadow: 0 0.2rem 0.2rem #00000020,
+ -webkit-box-shadow: 0 0.2rem 0.2rem #00000020,
+ 0 0.5rem 1rem #00000040;
+ box-shadow: 0 0.2rem 0.2rem #00000020,
0 0.5rem 1rem #00000040;
-webkit-tap-highlight-color: transparent;
- transform: scale(0);
+ -webkit-transform: scale(0);
+ -ms-transform: scale(0);
+ transform: scale(0);
z-index: 1;
}
.hide{
@@ -2013,7 +2294,9 @@ smCarousel.innerHTML = `
opacity: 0;
}
.expand{
- transform: scale(1)
+ -webkit-transform: scale(1);
+ -ms-transform: scale(1);
+ transform: scale(1)
}
.previous-item{
left: 1rem;
@@ -2023,21 +2306,31 @@ smCarousel.innerHTML = `
}
.carousel-container{
position: relative;
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
width: 100%;
- align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
}
.carousel{
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
max-width: 100%;
width: 100%;
overflow: auto hidden;
- scroll-snap-type: x mandatory;
+ -ms-scroll-snap-type: x mandatory;
+ scroll-snap-type: x mandatory;
}
.indicators{
+ display: -ms-grid;
display: grid;
grid-auto-flow: column;
- justify-content: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
position: absolute;
bottom: -1rem;
gap: 0.5rem;
@@ -2048,10 +2341,14 @@ smCarousel.innerHTML = `
padding: 0.2rem;
background: rgba(var(--text-color), 0.3);
border-radius: 1rem;
+ -webkit-transition: 0.2s;
+ -o-transition: 0.2s;
transition: 0.2s;
}
.dot.active{
- transform: scale(1.5);
+ -webkit-transform: scale(1.5);
+ -ms-transform: scale(1.5);
+ transform: scale(1.5);
background: var(--accent-color);
}
slot::slotted(*){
@@ -2096,15 +2393,15 @@ scroll-snap-align: end;
-
+
@@ -2113,7 +2410,9 @@ scroll-snap-align: end;
customElements.define('sm-carousel', class extends HTMLElement {
constructor() {
super()
- this.attachShadow({ mode: 'open' }).append(smCarousel.content.cloneNode(true))
+ this.attachShadow({
+ mode: 'open'
+ }).append(smCarousel.content.cloneNode(true))
}
static get observedAttributes() {
@@ -2150,37 +2449,37 @@ customElements.define('sm-carousel', class extends HTMLElement {
let frag = document.createDocumentFragment();
if (this.hasAttribute('indicator'))
this.showIndicator = true
-
-
+
+
let firstVisible = false,
lastVisible = false
const allElementsObserver = new IntersectionObserver(entries => {
entries.forEach(entry => {
- if(this.showIndicator)
+ if (this.showIndicator)
if (entry.isIntersecting) {
this.indicators[parseInt(entry.target.attributes.rank.textContent)].classList.add('active')
}
- else
- this.indicators[parseInt(entry.target.attributes.rank.textContent)].classList.remove('active')
+ else
+ this.indicators[parseInt(entry.target.attributes.rank.textContent)].classList.remove('active')
if (!entry.target.previousElementSibling)
- if(entry.isIntersecting) {
+ if (entry.isIntersecting) {
this.previousArrow.classList.remove('expand')
firstVisible = true
}
- else {
- this.previousArrow.classList.add('expand')
- firstVisible = false
- }
+ else {
+ this.previousArrow.classList.add('expand')
+ firstVisible = false
+ }
if (!entry.target.nextElementSibling)
- if(entry.isIntersecting) {
+ if (entry.isIntersecting) {
this.nextArrow.classList.remove('expand')
lastVisible = true
}
- else {
- this.nextArrow.classList.add('expand')
+ else {
+ this.nextArrow.classList.add('expand')
- lastVisible = false
- }
+ lastVisible = false
+ }
if (firstVisible && lastVisible)
this.indicatorsContainer.classList.add('hide')
else
@@ -2202,7 +2501,7 @@ customElements.define('sm-carousel', class extends HTMLElement {
this.carouselSlot.addEventListener('slotchange', e => {
this.carouselItems = this.carouselSlot.assignedElements()
this.carouselItems.forEach(item => allElementsObserver.observe(item))
- if(this.showIndicator){
+ if (this.showIndicator) {
this.indicatorsContainer.innerHTML = ``
this.carouselItems.forEach((item, index) => {
let dot = document.createElement('div')
@@ -2246,143 +2545,171 @@ customElements.define('sm-carousel', class extends HTMLElement {
const smNotifications = document.createElement('template')
smNotifications.innerHTML = `
-
-
+
`
customElements.define('sm-notifications', class extends HTMLElement {
constructor() {
super()
- this.shadow = this.attachShadow({ mode: 'open' }).append(smNotifications.content.cloneNode(true))
+ this.shadow = this.attachShadow({
+ mode: 'open'
+ }).append(smNotifications.content.cloneNode(true))
}
- handleTouchStart =(e) => {
+ handleTouchStart = (e) => {
this.notification = e.target.closest('.notification')
this.touchStartX = e.changedTouches[0].clientX
this.notification.style.transition = 'initial'
@@ -2394,8 +2721,7 @@ customElements.define('sm-notifications', class extends HTMLElement {
if (this.touchStartX < e.changedTouches[0].clientX) {
this.offset = e.changedTouches[0].clientX - this.touchStartX;
this.touchEndAnimataion = requestAnimationFrame(this.movePopup)
- }
- else {
+ } else {
this.offset = -(this.touchStartX - e.changedTouches[0].clientX);
this.touchEndAnimataion = requestAnimationFrame(this.movePopup)
}
@@ -2409,19 +2735,15 @@ customElements.define('sm-notifications', class extends HTMLElement {
if (this.touchEndTime - this.touchStartTime > 200) {
if (this.touchEndX - this.touchStartX > this.threshold) {
this.removeNotification(this.notification)
- }
- else if (this.touchStartX - this.touchEndX > this.threshold) {
+ } else if (this.touchStartX - this.touchEndX > this.threshold) {
this.removeNotification(this.notification, true)
- }
- else {
+ } else {
this.resetPosition()
}
- }
- else {
+ } else {
if (this.touchEndX > this.touchStartX) {
this.removeNotification(this.notification)
- }
- else {
+ } else {
this.removeNotification(this.notification, true)
}
}
@@ -2448,8 +2770,7 @@ customElements.define('sm-notifications', class extends HTMLElement {
`
- }
- else if (type === 'success') {
+ } else if (type === 'success') {
composition += `