Skip to content

Commit

Permalink
Merge branch 'release-0.14' into release-0.15
Browse files Browse the repository at this point in the history
  • Loading branch information
@minimit
minimit committed Jun 19, 2020
2 parents 7cca064 + 5ea95f5 commit 57ed274
Show file tree
Hide file tree
Showing 2 changed files with 49 additions and 37 deletions.
85 changes: 48 additions & 37 deletions src/extensions/slider/slider.js
View file
Expand Up @@ -31,11 +31,6 @@ class Slider extends Xt.Toggle {
self.dragger = self.object.querySelector(options.drag.dragger)
self.destroyElements.push(self.dragger)
}
// @FIX performances
self.detail.objectWidth = self.object.offsetWidth
if (self.dragger) {
self.detail.draggerWidth = self.dragger.offsetWidth
}
// targets
self.initScopeTargets()
// autoHeight and keepHeight
Expand Down Expand Up @@ -81,6 +76,17 @@ class Slider extends Xt.Toggle {
self.object.classList.remove('slider-nooverflow')
// drag wrap
self.destroyWraps()
// @FIX performances
self.detail.objectWidth = self.object.offsetWidth
if (self.dragger) {
self.detail.draggerWidth = self.dragger.offsetWidth
self.detail.draggerLeft = self.dragger.offsetLeft
}
for (const slide of self.targets) {
Xt.dataStorage.set(slide, self.componentNamespace + 'SlideLeft', slide.offsetLeft)
Xt.dataStorage.set(slide, self.componentNamespace + 'SlideWidth', slide.offsetWidth)
Xt.dataStorage.set(slide, self.componentNamespace + 'SlideHeight', slide.children[0].offsetHeight)
}
// width
const draggerWidth = self.dragger ? self.detail.draggerWidth : self.detail.objectWidth
let draggerWidthAvailable = 0
Expand All @@ -102,7 +108,7 @@ class Slider extends Xt.Toggle {
let totalCount = draggerWidth
let doneFirst = false
for (const target of self.targets) {
let targetWidth = target.offsetWidth
let targetWidth = Xt.dataStorage.get(target, self.componentNamespace + 'SlideWidth')
if (targetWidth === 0) {
// when display none
const container = target.parentNode
Expand Down Expand Up @@ -134,7 +140,7 @@ class Slider extends Xt.Toggle {
}
self.groupMqInitial = self.groupMq
// @FIX position values negative margins
self.detail.fixNegativeMargin = self.groupMq[0][0].offsetLeft
self.detail.fixNegativeMargin = Xt.dataStorage.get(self.groupMq[0][0], self.componentNamespace + 'SlideLeft')
// @FIX disable slider if not overflowing
if (options.nooverflow && totalCount >= 0) {
const afterInitDisable = () => {
Expand Down Expand Up @@ -181,7 +187,7 @@ class Slider extends Xt.Toggle {
wrapLast[i].push(cloned)
cloned.setAttribute('data-xt-group', self.namespace + '-' + 'wrapLast' + i)
self.targets.push(cloned)
wrapLastCount -= slide.offsetWidth
wrapLastCount -= Xt.dataStorage.get(slide, self.componentNamespace + 'SlideWidth')
if (wrapLastCount <= -draggerWidth * (options.drag.wrap - 1)) {
return
}
Expand All @@ -200,7 +206,7 @@ class Slider extends Xt.Toggle {
wrapFirst[0].unshift(cloned)
cloned.setAttribute('data-xt-group', self.namespace + '-' + 'wrapFirst' + i)
self.targets.unshift(cloned)
wrapFirstCount -= slide.offsetWidth
wrapFirstCount -= Xt.dataStorage.get(slide, self.componentNamespace + 'SlideWidth')
if (wrapFirstCount <= -draggerWidth * (options.drag.wrap - 1)) {
return
}
Expand Down Expand Up @@ -298,11 +304,12 @@ class Slider extends Xt.Toggle {
for (const slide of self.targets) {
Xt.dataStorage.remove(slide, self.componentNamespace + 'GroupPosDone')
}
// set pos
// save
const draggerWidth = self.detail.draggerWidth
// slides pos
let slidesWidth = 0
for (const slide of self.targets) {
// once per group
if (!Xt.dataStorage.get(slide, self.componentNamespace + 'GroupPosDone')) {
// vars
const targets = self.getTargets(slide)
Expand All @@ -312,9 +319,12 @@ class Slider extends Xt.Toggle {
let slideHeightTemp = 0
// vars
for (const target of targets) {
slideLeft = target.offsetLeft < slideLeft ? slide.offsetLeft : slideLeft
slideWidth += target.offsetWidth
slideHeightTemp = target.children[0].offsetHeight
slideLeft =
Xt.dataStorage.get(target, self.componentNamespace + 'SlideLeft') < slideLeft
? Xt.dataStorage.get(slide, self.componentNamespace + 'SlideLeft')
: slideLeft
slideWidth += Xt.dataStorage.get(target, self.componentNamespace + 'SlideWidth')
slideHeightTemp = Xt.dataStorage.get(target, self.componentNamespace + 'SlideHeight')
slidesWidth += slideWidth
slideHeight = slideHeightTemp > slideHeight ? slideHeightTemp : slideHeight
}
Expand Down Expand Up @@ -348,10 +358,10 @@ class Slider extends Xt.Toggle {
if (options.contain && slidesWidth > draggerWidth) {
// only if slides overflow dragger
const slideFirst = self.targets[0]
const slideFirstLeft = slideFirst.offsetLeft
const slideFirstLeft = Xt.dataStorage.get(slideFirst, self.componentNamespace + 'SlideLeft')
const slideLast = self.targets[self.targets.length - 1]
const slideLastLeft = slideLast.offsetLeft
const slideLastWidth = slideLast.offsetWidth
const slideLastLeft = Xt.dataStorage.get(slideLast, self.componentNamespace + 'SlideLeft')
const slideLastWidth = Xt.dataStorage.get(slideLast, self.componentNamespace + 'SlideWidth')
const min = -slideFirstLeft
const max = -slideLastLeft + draggerWidth - slideLastWidth
for (const group of self.groupMq) {
Expand Down Expand Up @@ -396,14 +406,6 @@ class Slider extends Xt.Toggle {
const slideoffHandler = Xt.dataStorage.put(el, 'off/slider' + '/' + self.namespace, self.eventSlideoffHandler.bind(self).bind(self, dragger, el))
el.addEventListener('off.xt', slideoffHandler, true)
}
// targets
// not event on and event off for targets because not needed and bugs pagination inside targets
// disable links not active slide
if (options.jump) {
for (const tr of self.targets) {
tr.classList.add('xt-links-none')
}
}
// dragger
if (options.drag) {
// @FIX prevent dragging links and images
Expand Down Expand Up @@ -616,17 +618,11 @@ class Slider extends Xt.Toggle {
requestAnimationFrame(() => {
Xt.dataStorage.remove(slide, self.componentNamespace + 'SlideonDone')
})
// disable links not active slide
if (options.jump) {
for (const target of slides) {
target.classList.remove('xt-links-none')
}
}
// val
self.detail.dragPos = self.detail.dragPosCurrent = self.detail.dragPosReal = Xt.dataStorage.get(slide, self.componentNamespace + 'GroupPos')
// autoHeight and keepHeight
if (self.autoHeight || (self.keepHeight && self.initial)) {
let slideHeight = slide.children[0].offsetHeight
let slideHeight = Xt.dataStorage.get(slide, self.componentNamespace + 'SlideHeight')
const groupHeight = Xt.dataStorage.get(slide, self.componentNamespace + 'GroupHeight')
slideHeight = groupHeight > slideHeight ? groupHeight : slideHeight
if (slideHeight > 0) {
Expand Down Expand Up @@ -664,6 +660,27 @@ class Slider extends Xt.Toggle {
if (!options.drag.manual) {
dragger.style.transform = 'translateX(' + self.detail.dragPos + 'px)'
}
// disable links not active slide
Xt.animTimeout(
dragger,
() => {
if (options.jump) {
const draggerTranslate = Xt.getTranslate(self.dragger)[0]
for (const target of self.targets) {
const slideLeft = Xt.dataStorage.get(target, self.componentNamespace + 'SlideLeft')
const slideWidth = Xt.dataStorage.get(target, self.componentNamespace + 'SlideWidth')
const slideBound = slideLeft + slideWidth
if (slideLeft < -draggerTranslate || slideBound > Xt.windowWidth - draggerTranslate) {
target.classList.add('xt-links-none')
} else {
target.classList.remove('xt-links-none')
}
}
}
},
'draggerDisableLinks',
self.initial ? 0 : self.options.durationOn
)
// disable dragger
dragger.classList.add('xt-pointer-events-none')
for (const nav of self.navs) {
Expand Down Expand Up @@ -740,12 +757,6 @@ class Slider extends Xt.Toggle {
requestAnimationFrame(() => {
Xt.dataStorage.remove(slide, self.componentNamespace + 'SlideoffDone')
})
// disable links not active slide
if (options.jump) {
for (const target of slides) {
target.classList.add('xt-links-none')
}
}
}

//
Expand Down
1 change: 1 addition & 0 deletions src/xt.js
View file
Expand Up @@ -1129,6 +1129,7 @@ if (typeof window !== 'undefined') {
})

Xt.windowHeightSet = () => {
Xt.windowWidth = window.innerWidth
Xt.windowHeight = window.innerHeight
/* https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
* height: 100vh;
Expand Down

0 comments on commit 57ed274

Please sign in to comment.