Code cleanup
This commit is contained in:
@@ -9,33 +9,18 @@
|
|||||||
import { tappable } from '../../actions/tappable'
|
import { tappable } from '../../actions/tappable'
|
||||||
import {
|
import {
|
||||||
applyParticleSizes,
|
applyParticleSizes,
|
||||||
getCurrentPageIndexByCurrentParticleIndex,
|
|
||||||
getPartialPageSize,
|
|
||||||
getPagesCountByParticlesCount,
|
|
||||||
getParticleIndexByPageIndex,
|
|
||||||
createResizeObserver,
|
createResizeObserver,
|
||||||
} from '../../utils/page'
|
} from '../../utils/page'
|
||||||
import {
|
import {
|
||||||
getClones,
|
getClones,
|
||||||
applyClones,
|
applyClones,
|
||||||
getClonesCount,
|
|
||||||
} from '../../utils/clones'
|
} from '../../utils/clones'
|
||||||
import {
|
|
||||||
getAdjacentIndexes,
|
|
||||||
} from '../../utils/lazy'
|
|
||||||
import {
|
|
||||||
getValueInRange,
|
|
||||||
} from '../../utils/math'
|
|
||||||
import { get, switcher } from '../../utils/object'
|
import { get, switcher } from '../../utils/object'
|
||||||
import { ProgressManager } from '../../utils/ProgressManager'
|
|
||||||
import { wait } from '../../utils/interval'
|
|
||||||
|
|
||||||
import createCarousel from './createCarousel'
|
import createCarousel from './createCarousel'
|
||||||
|
|
||||||
// used for lazy loading images, preloaded only current, adjacent and cloanable images
|
// used for lazy loading images, preloaded only current, adjacent and cloanable images
|
||||||
let loaded = []
|
let loaded = []
|
||||||
let currentPageIndex
|
let currentPageIndex
|
||||||
let focused = false
|
|
||||||
let progressValue
|
let progressValue
|
||||||
let offset = 0
|
let offset = 0
|
||||||
let durationMs = 0
|
let durationMs = 0
|
||||||
@@ -45,7 +30,6 @@
|
|||||||
switcher({
|
switcher({
|
||||||
'currentPageIndex': () => currentPageIndex = value,
|
'currentPageIndex': () => currentPageIndex = value,
|
||||||
'progressValue': () => progressValue = value,
|
'progressValue': () => progressValue = value,
|
||||||
'focused': () => focused = value,
|
|
||||||
'offset': () => offset = value,
|
'offset': () => offset = value,
|
||||||
'durationMs': () => durationMs = value,
|
'durationMs': () => durationMs = value,
|
||||||
'pagesCount': () => pagesCount = value,
|
'pagesCount': () => pagesCount = value,
|
||||||
@@ -169,7 +153,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
let pageWindowWidth = 0
|
let pageWindowWidth = 0
|
||||||
let particleWidth = 0
|
|
||||||
let pageWindowElement
|
let pageWindowElement
|
||||||
let particlesContainer
|
let particlesContainer
|
||||||
|
|
||||||
@@ -177,7 +160,6 @@
|
|||||||
width,
|
width,
|
||||||
}) => {
|
}) => {
|
||||||
pageWindowWidth = width
|
pageWindowWidth = width
|
||||||
particleWidth = pageWindowWidth / data.particlesToShow
|
|
||||||
data.particleWidth = pageWindowWidth / data.particlesToShow
|
data.particleWidth = pageWindowWidth / data.particlesToShow
|
||||||
|
|
||||||
applyParticleSizes({
|
applyParticleSizes({
|
||||||
@@ -259,7 +241,7 @@
|
|||||||
function handleHovered(event) {
|
function handleHovered(event) {
|
||||||
data.focused = event.detail.value
|
data.focused = event.detail.value
|
||||||
}
|
}
|
||||||
function handleTapped(event) {
|
function handleTapped() {
|
||||||
methods.toggleFocused()
|
methods.toggleFocused()
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -388,6 +370,3 @@
|
|||||||
bottom: 0;
|
bottom: 0;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -20,7 +20,7 @@ function createCarousel(onChange) {
|
|||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
const [data, methods, service] = simplyReactive(
|
const reactive = simplyReactive(
|
||||||
{
|
{
|
||||||
data: {
|
data: {
|
||||||
particlesCountWithoutClones: 0,
|
particlesCountWithoutClones: 0,
|
||||||
@@ -42,7 +42,7 @@ function createCarousel(onChange) {
|
|||||||
focused: false,
|
focused: false,
|
||||||
autoplay: false,
|
autoplay: false,
|
||||||
autoplayDirection: 'next',
|
autoplayDirection: 'next',
|
||||||
disabled: false, // Disable page change while animation is in progress
|
disabled: false, // disable page change while animation is in progress
|
||||||
durationMsInit: 1000,
|
durationMsInit: 1000,
|
||||||
durationMs: 1000,
|
durationMs: 1000,
|
||||||
offset: 0,
|
offset: 0,
|
||||||
@@ -268,8 +268,9 @@ function createCarousel(onChange) {
|
|||||||
onChange,
|
onChange,
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
const [data, methods] = reactive
|
||||||
|
|
||||||
return [{ data, progressManager }, methods, service]
|
return [{ data, progressManager }, methods, reactive._internal]
|
||||||
}
|
}
|
||||||
|
|
||||||
export default createCarousel
|
export default createCarousel
|
||||||
|
|||||||
@@ -121,7 +121,7 @@
|
|||||||
{/each}
|
{/each}
|
||||||
</Carousel>
|
</Carousel>
|
||||||
|
|
||||||
<!-- <Carousel
|
<Carousel
|
||||||
{timingFunction}
|
{timingFunction}
|
||||||
{arrows}
|
{arrows}
|
||||||
{infinite}
|
{infinite}
|
||||||
@@ -145,7 +145,7 @@
|
|||||||
<p>{text}</p>
|
<p>{text}</p>
|
||||||
</div>
|
</div>
|
||||||
{/each}
|
{/each}
|
||||||
</Carousel> -->
|
</Carousel>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|||||||
Reference in New Issue
Block a user