mirror of
https://github.com/hcengineering/platform.git
synced 2025-03-23 16:24:57 +00:00
1062 lines
32 KiB
Svelte
1062 lines
32 KiB
Svelte
<!--
|
|
// Copyright © 2020 Anticrm Platform Contributors.
|
|
//
|
|
// Licensed under the Eclipse Public License, Version 2.0 (the "License");
|
|
// you may not use this file except in compliance with the License. You may
|
|
// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
|
|
//
|
|
// Unless required by applicable law or agreed to in writing, software
|
|
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
//
|
|
// See the License for the specific language governing permissions and
|
|
// limitations under the License.
|
|
-->
|
|
<script lang="ts">
|
|
import { themeStore as themeOptions } from '@hcengineering/theme'
|
|
import { afterUpdate, beforeUpdate, createEventDispatcher, onDestroy, onMount } from 'svelte'
|
|
import { resizeObserver } from '../resize'
|
|
import { closeTooltip, tooltipstore } from '../tooltips'
|
|
import type { FadeOptions, ScrollParams } from '../types'
|
|
import { defaultSP } from '../types'
|
|
import { DelayedCaller } from '../utils'
|
|
import IconDownOutline from './icons/DownOutline.svelte'
|
|
import HalfUpDown from './icons/HalfUpDown.svelte'
|
|
import IconUpOutline from './icons/UpOutline.svelte'
|
|
|
|
export let padding: string | undefined = undefined
|
|
export let bottomPadding: string | undefined = undefined
|
|
export let autoscroll: boolean = false
|
|
export let bottomStart: boolean = false
|
|
export let fade: FadeOptions = defaultSP
|
|
export let noFade: boolean = true
|
|
export let invertScroll: boolean = false
|
|
export let scrollDirection: 'vertical' | 'vertical-reverse' = 'vertical'
|
|
export let contentDirection: 'vertical' | 'vertical-reverse' | 'horizontal' = 'vertical'
|
|
export let horizontal: boolean = contentDirection === 'horizontal'
|
|
export let align: 'start' | 'center' | 'end' | 'stretch' = 'stretch'
|
|
export let gap: string | undefined = undefined
|
|
export let noStretch: boolean = autoscroll
|
|
export let buttons: 'normal' | 'union' | false = false
|
|
export let shrink: boolean = false
|
|
export let divScroll: HTMLElement | undefined | null = undefined
|
|
export let divBox: HTMLElement | undefined | null = undefined
|
|
export let scrollSnap: boolean = false
|
|
export let checkForHeaders: boolean = false
|
|
export let stickedScrollBars: boolean = false
|
|
export let thinScrollBars: boolean = false
|
|
export let disableOverscroll = false
|
|
export let disablePointerEventsOnScroll = false
|
|
export let onScroll: ((params: ScrollParams) => void) | undefined = undefined
|
|
export let onResize: (() => void) | undefined = undefined
|
|
export let containerName: string | undefined = undefined
|
|
export let containerType: 'size' | 'inline-size' | undefined = containerName !== undefined ? 'inline-size' : undefined
|
|
export let maxHeight: number | undefined = undefined
|
|
|
|
export function scroll (top: number, left?: number, behavior: 'auto' | 'smooth' = 'auto') {
|
|
if (divScroll) {
|
|
if (top !== 0) divScroll.scroll({ top, left: 0, behavior })
|
|
if (left !== 0 && left !== undefined) divScroll.scroll({ top: 0, left, behavior })
|
|
}
|
|
}
|
|
export function scrollBy (top: number, left?: number, behavior: 'auto' | 'smooth' = 'auto') {
|
|
if (divScroll) {
|
|
if (top !== 0) divScroll.scrollBy({ top, left: 0, behavior })
|
|
if (left !== 0 || left !== undefined) divScroll.scrollBy({ top: 0, left, behavior })
|
|
}
|
|
}
|
|
|
|
const dispatch = createEventDispatcher()
|
|
const stepScroll = 52
|
|
|
|
let mask: 'top' | 'bottom' | 'both' | 'none' = 'none'
|
|
let topCrop: 'top' | 'bottom' | 'full' | 'none' = 'none'
|
|
let topCropValue: number = 0
|
|
let maskH: 'left' | 'right' | 'both' | 'none' = 'none'
|
|
|
|
let divHScroll: HTMLElement
|
|
let divBar: HTMLElement
|
|
let divBarH: HTMLElement
|
|
let isScrollingByBar: 'vertical' | 'horizontal' | false = false
|
|
let isScrolling: boolean = false
|
|
let scrollTimer: any = 0
|
|
let dXY: number
|
|
let belowContent: number | undefined = undefined
|
|
let beforeContent: number | undefined = undefined
|
|
let leftContent: number | undefined = undefined
|
|
let rightContent: number | undefined = undefined
|
|
$: scrolling = autoscroll
|
|
let firstScroll = autoscroll
|
|
let orientir: 'vertical' | 'horizontal' = 'vertical'
|
|
|
|
let timer: any | undefined = undefined
|
|
let timerH: any | undefined = undefined
|
|
|
|
const inter = new Set<Element>()
|
|
let hasLastCategories: boolean = false
|
|
|
|
$: fz = $themeOptions.fontSize
|
|
$: shiftTop = fade.multipler?.top ? fade.multipler?.top * fz : 0
|
|
$: shiftBottom = fade.multipler?.bottom ? fade.multipler?.bottom * fz : 0
|
|
$: shiftLeft = fade.multipler?.left ? fade.multipler?.left * fz : 0
|
|
$: shiftRight = fade.multipler?.right ? fade.multipler?.right * fz : 0
|
|
$: orientir = contentDirection === 'horizontal' ? 'horizontal' : 'vertical'
|
|
|
|
const checkBar = (): void => {
|
|
if (divBar && divScroll) {
|
|
dispatch('divScrollTop', divScroll.scrollTop)
|
|
|
|
const trackH = divScroll.clientHeight - shiftTop - shiftBottom - 4
|
|
const scrollH = divScroll.scrollHeight
|
|
const proc = scrollH / trackH
|
|
|
|
const newHeight = (divScroll.clientHeight - 4) / proc
|
|
const newHeightPx = newHeight + 'px'
|
|
if (divBar.style.height !== 'newHeight') {
|
|
divBar.style.height = newHeightPx
|
|
}
|
|
|
|
let newTop = '0px'
|
|
|
|
if (scrollDirection === 'vertical-reverse') {
|
|
newTop = divScroll.clientHeight + divScroll.scrollTop / proc - newHeight - shiftTop - 2 + 'px'
|
|
} else {
|
|
newTop = divScroll.scrollTop / proc + shiftTop + 2 + 'px'
|
|
}
|
|
if (divBar.style.top !== newTop) {
|
|
divBar.style.top = newTop
|
|
}
|
|
if (mask === 'none') {
|
|
if (divBar.style.visibility !== 'hidden') {
|
|
divBar.style.visibility = 'hidden'
|
|
}
|
|
} else {
|
|
if (divBar.style.visibility !== 'visible') {
|
|
divBar.style.visibility = 'visible'
|
|
}
|
|
if (divBar) {
|
|
if (timer) {
|
|
clearTimeout(timer)
|
|
timer = undefined
|
|
if (divBar.style.opacity !== '1') {
|
|
divBar.style.opacity = '1'
|
|
}
|
|
}
|
|
timer = setTimeout(() => {
|
|
if (divBar) {
|
|
divBar.style.opacity = '0'
|
|
}
|
|
}, 1500)
|
|
}
|
|
}
|
|
if (divScroll.clientHeight >= divScroll.scrollHeight) {
|
|
if (divBar.style.visibility !== 'hidden') {
|
|
divBar.style.visibility = 'hidden'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
const checkBarH = (): void => {
|
|
if (divBarH && divScroll) {
|
|
const trackW = divScroll.clientWidth - (mask !== 'none' ? 14 : 4) - shiftLeft - shiftRight
|
|
const scrollW = divScroll.scrollWidth
|
|
const proc = scrollW / trackW
|
|
divBarH.style.width = divScroll.clientWidth / proc + 'px'
|
|
divBarH.style.left = divScroll.scrollLeft / proc + 2 + shiftLeft + 'px'
|
|
if (maskH === 'none') divBarH.style.visibility = 'hidden'
|
|
else {
|
|
divBarH.style.visibility = 'visible'
|
|
if (divBarH) {
|
|
if (timerH) {
|
|
clearTimeout(timerH)
|
|
timerH = undefined
|
|
divBarH.style.opacity = '1'
|
|
}
|
|
timerH = setTimeout(() => {
|
|
if (divBarH) divBarH.style.opacity = '0'
|
|
}, 1500)
|
|
}
|
|
}
|
|
if (divScroll.clientWidth >= divScroll.scrollWidth) divBarH.style.visibility = 'hidden'
|
|
}
|
|
}
|
|
|
|
const handleScroll = (event: PointerEvent): void => {
|
|
scrolling = false
|
|
if (
|
|
(divBar == null && isScrollingByBar === 'vertical') ||
|
|
(divBarH == null && isScrollingByBar === 'horizontal') ||
|
|
divScroll == null
|
|
) {
|
|
return
|
|
}
|
|
|
|
const rectScroll = divScroll.getBoundingClientRect()
|
|
if (isScrollingByBar === 'vertical') {
|
|
let Y = Math.round(event.clientY) - dXY
|
|
if (Y < rectScroll.top + shiftTop + 2) Y = rectScroll.top + shiftTop + 2
|
|
if (Y > rectScroll.bottom - divBar.clientHeight - shiftBottom - 2) {
|
|
Y = rectScroll.bottom - divBar.clientHeight - shiftBottom - 2
|
|
}
|
|
divBar.style.top = Y - rectScroll.y + 'px'
|
|
const topBar = Y - rectScroll.y - shiftTop - 2
|
|
const heightScroll = rectScroll.height - 4 - divBar.clientHeight - shiftTop - shiftBottom
|
|
const procBar = topBar / heightScroll
|
|
|
|
if (scrollDirection === 'vertical-reverse') {
|
|
divScroll.scrollTop = (divScroll.scrollHeight - divScroll.clientHeight) * (procBar - 1)
|
|
} else {
|
|
divScroll.scrollTop = (divScroll.scrollHeight - divScroll.clientHeight) * procBar
|
|
}
|
|
} else if (isScrollingByBar === 'horizontal') {
|
|
let X = Math.round(event.clientX) - dXY
|
|
if (X < rectScroll.left + 2 + shiftLeft) X = rectScroll.left + 2 + shiftLeft
|
|
if (X > rectScroll.right - divBarH.clientWidth - (mask !== 'none' ? 12 : 2) - shiftRight) {
|
|
X = rectScroll.right - divBarH.clientWidth - (mask !== 'none' ? 12 : 2) - shiftRight
|
|
}
|
|
divBarH.style.left = X - rectScroll.x + 'px'
|
|
const leftBar = X - rectScroll.x - shiftLeft - 2
|
|
const widthScroll =
|
|
rectScroll.width - 2 - (mask !== 'none' ? 12 : 2) - divBarH.clientWidth - shiftLeft - shiftRight
|
|
const procBar = leftBar / widthScroll
|
|
divScroll.scrollLeft = (divScroll.scrollWidth - divScroll.clientWidth) * procBar
|
|
}
|
|
}
|
|
const onScrollEnd = (): void => {
|
|
document.removeEventListener('pointermove', handleScroll)
|
|
document.body.style.userSelect = 'auto'
|
|
document.body.style.webkitUserSelect = 'auto'
|
|
document.removeEventListener('pointerup', onScrollEnd)
|
|
isScrollingByBar = false
|
|
}
|
|
const onScrollStart = (event: PointerEvent, direction: 'vertical' | 'horizontal'): void => {
|
|
if (divScroll == null) return
|
|
scrolling = false
|
|
dXY = Math.round(direction === 'vertical' ? event.offsetY : event.offsetX)
|
|
document.addEventListener('pointerup', onScrollEnd)
|
|
document.addEventListener('pointermove', handleScroll)
|
|
document.body.style.userSelect = 'none'
|
|
document.body.style.webkitUserSelect = 'none'
|
|
isScrollingByBar = direction
|
|
}
|
|
|
|
const renderFade = () => {
|
|
if (divScroll && !noFade) {
|
|
const th = shiftTop + (topCrop === 'top' ? 2 * fz - topCropValue : 0)
|
|
const tf =
|
|
topCrop === 'full'
|
|
? 0
|
|
: mask === 'both' || mask === 'top'
|
|
? 2 * fz - (topCrop === 'bottom' ? topCropValue : topCrop === 'top' ? 2 * fz - topCropValue : 0)
|
|
: 0
|
|
const gradient = `linear-gradient(
|
|
0deg,
|
|
rgba(0, 0, 0, 1) ${shiftBottom}px,
|
|
rgba(0, 0, 0, 0) ${shiftBottom}px,
|
|
rgba(0, 0, 0, 1) ${shiftBottom + (mask === 'both' || mask === 'bottom' ? 2 * fz : 0)}px,
|
|
rgba(0, 0, 0, 1) calc(100% - ${th + tf}px),
|
|
rgba(0, 0, 0, 0) calc(100% - ${th}px),
|
|
rgba(0, 0, 0, 1) calc(100% - ${th}px)
|
|
)`
|
|
divScroll.style.webkitMaskImage = gradient
|
|
}
|
|
if (divHScroll && horizontal && !noFade) {
|
|
const gradientH = `linear-gradient(
|
|
90deg,
|
|
rgba(0, 0, 0, 1) ${shiftLeft}px,
|
|
rgba(0, 0, 0, 0) ${shiftLeft}px,
|
|
rgba(0, 0, 0, 1) ${shiftLeft + (maskH === 'both' || maskH === 'right' ? 2 * fz : 0)}px,
|
|
rgba(0, 0, 0, 1) calc(100% - ${shiftRight + (maskH === 'both' || maskH === 'left' ? 2 * fz : 0)}px),
|
|
rgba(0, 0, 0, 0) calc(100% - ${shiftRight}px),
|
|
rgba(0, 0, 0, 1) calc(100% - ${shiftRight}px)
|
|
)`
|
|
divHScroll.style.webkitMaskImage = gradientH
|
|
}
|
|
}
|
|
|
|
const delayedCaller = new DelayedCaller(25)
|
|
|
|
const delayCall = (op: () => void) => {
|
|
delayedCaller.call(op)
|
|
}
|
|
|
|
const checkFade = (): void => {
|
|
delayCall(_checkFade)
|
|
}
|
|
const _checkFade = (): void => {
|
|
if (divScroll) {
|
|
beforeContent = divScroll.scrollTop
|
|
belowContent = divScroll.scrollHeight - divScroll.clientHeight - beforeContent
|
|
if (beforeContent > 2 && belowContent > 2) mask = 'both'
|
|
else if (beforeContent > 2) mask = 'top'
|
|
else if (belowContent > 2) mask = 'bottom'
|
|
else mask = 'none'
|
|
|
|
if (horizontal) {
|
|
leftContent = divScroll.scrollLeft
|
|
rightContent = divScroll.scrollWidth - divScroll.clientWidth - leftContent
|
|
if (leftContent > 2 && rightContent > 2) maskH = 'both'
|
|
else if (leftContent > 2) maskH = 'right'
|
|
else if (rightContent > 2) maskH = 'left'
|
|
else maskH = 'none'
|
|
}
|
|
if (inter.size) {
|
|
checkIntersectionFade()
|
|
}
|
|
renderFade()
|
|
}
|
|
|
|
if (!isScrollingByBar) {
|
|
checkBar()
|
|
}
|
|
if (!isScrollingByBar && horizontal) {
|
|
checkBarH()
|
|
}
|
|
}
|
|
|
|
function checkAutoScroll () {
|
|
if (firstScroll && divHeight && divScroll) {
|
|
scrollDown()
|
|
firstScroll = false
|
|
}
|
|
}
|
|
|
|
const scrollDown = (): void => {
|
|
if (divScroll) {
|
|
divScroll.scrollTop = divScroll.scrollHeight - divHeight + 2
|
|
}
|
|
}
|
|
|
|
$: if (scrolling && belowContent && belowContent > 0) {
|
|
firstScroll = false
|
|
scrollDown()
|
|
}
|
|
|
|
const checkIntersection = (entries: IntersectionObserverEntry[], observer: IntersectionObserver) => {
|
|
const interArr: Element[] = []
|
|
const catEntries: IntersectionObserverEntry[] = []
|
|
const lastCatEntries: IntersectionObserverEntry[] = []
|
|
|
|
entries.forEach((el) => {
|
|
if (el.isIntersecting && el.target.classList.contains('categoryHeader')) {
|
|
inter.add(el.target)
|
|
interArr.push(el.target)
|
|
} else inter.delete(el.target)
|
|
if (hasLastCategories) {
|
|
if (el.isIntersecting && el.target.classList.contains('categoryHeader')) catEntries.push(el)
|
|
if (el.isIntersecting && el.target.classList.contains('lastCat')) lastCatEntries.push(el)
|
|
}
|
|
})
|
|
|
|
if (interArr.length > 0) {
|
|
dispatch('lastScrolledCategory', interArr[interArr.length - 1]?.getAttribute('id'))
|
|
dispatch('firstScrolledCategory', interArr[0]?.getAttribute('id'))
|
|
const interCats: string[] = interArr.map((it) => it.getAttribute('id') as string)
|
|
dispatch('scrolledCategories', interCats)
|
|
}
|
|
if (hasLastCategories) {
|
|
const targets = new Set<Element>()
|
|
const closed = new Set<Element>()
|
|
lastCatEntries.forEach((last) => {
|
|
catEntries.forEach((cat) => {
|
|
if (last.target !== cat.target) {
|
|
if (
|
|
last.boundingClientRect.top < cat.boundingClientRect.top + 8 &&
|
|
last.boundingClientRect.top >= cat.boundingClientRect.top
|
|
) {
|
|
targets.add(cat.target)
|
|
}
|
|
if (cat.target.classList.contains('closed') && !closed.has(cat.target)) closed.add(cat.target)
|
|
}
|
|
})
|
|
})
|
|
closed.forEach((el) => {
|
|
if (!targets.has(el)) el.classList.remove('closed')
|
|
})
|
|
targets.forEach((el) => {
|
|
el.classList.add('closed')
|
|
})
|
|
}
|
|
}
|
|
|
|
const checkIntersectionFade = () => {
|
|
topCrop = 'none'
|
|
topCropValue = 0
|
|
if (!fade.multipler?.top || !divScroll) return
|
|
const offset = divScroll.getBoundingClientRect().top
|
|
inter.forEach((el) => {
|
|
const rect = el.getBoundingClientRect()
|
|
if (shiftTop > 0) {
|
|
if (offset + shiftTop < rect.top && offset + shiftTop + 2 * fz >= rect.top) {
|
|
if (topCrop === 'top' || topCrop === 'full') topCrop = 'full'
|
|
else topCrop = 'bottom'
|
|
topCropValue = offset + shiftTop + 2 * fz - rect.top
|
|
} else if (offset + shiftTop < rect.bottom && offset + shiftTop + 2 * fz > rect.bottom) {
|
|
topCrop = 'top'
|
|
topCropValue = offset + shiftTop + 2 * fz - rect.bottom
|
|
} else if (offset + shiftTop >= rect.top && offset + shiftTop + 2 * fz <= rect.bottom) {
|
|
topCrop = 'full'
|
|
topCropValue = offset + shiftTop + 2 * fz
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
const wheelEvent = (e: WheelEvent) => {
|
|
e = e || window.event
|
|
const deltaY = e.deltaY
|
|
if (deltaY < 0 && autoscroll && scrolling && beforeContent && beforeContent > 0) {
|
|
scrolling = false
|
|
} else if (deltaY > 0 && autoscroll && !scrolling && belowContent && belowContent <= 10) {
|
|
scrolling = true
|
|
}
|
|
}
|
|
|
|
let observer: IntersectionObserver
|
|
onMount(() => {
|
|
if (divScroll && divBox) {
|
|
divScroll.addEventListener('wheel', wheelEvent)
|
|
divScroll.addEventListener('scroll', checkFade)
|
|
delayCall(() => {
|
|
checkBar()
|
|
if (horizontal) {
|
|
checkBarH()
|
|
}
|
|
})
|
|
}
|
|
})
|
|
onDestroy(() => {
|
|
if (observer) observer.disconnect()
|
|
if (divScroll) {
|
|
divScroll.removeEventListener('wheel', wheelEvent)
|
|
divScroll.removeEventListener('scroll', checkFade)
|
|
}
|
|
})
|
|
|
|
let oldTop: number
|
|
|
|
if (checkForHeaders) {
|
|
beforeUpdate(() => {
|
|
if (divBox && divScroll) {
|
|
oldTop = divScroll.scrollTop
|
|
}
|
|
})
|
|
|
|
afterUpdate(() => {
|
|
if (divBox && divScroll) {
|
|
if (oldTop !== divScroll.scrollTop) {
|
|
divScroll.scrollTop = oldTop
|
|
}
|
|
|
|
delayCall(() => {
|
|
if (divBox == null) {
|
|
return
|
|
}
|
|
const tempEls = divBox.querySelectorAll('.categoryHeader')
|
|
observer = new IntersectionObserver(checkIntersection, { root: null, rootMargin: '0px', threshold: 0.1 })
|
|
tempEls.forEach((el) => {
|
|
observer.observe(el)
|
|
})
|
|
const tempCats = divBox.querySelectorAll('.lastCat')
|
|
if (tempCats.length > 0) {
|
|
hasLastCategories = true
|
|
tempCats.forEach((el) => {
|
|
observer.observe(el)
|
|
})
|
|
} else {
|
|
hasLastCategories = false
|
|
}
|
|
})
|
|
}
|
|
})
|
|
}
|
|
|
|
let divHeight: number
|
|
const _resize = (): void => {
|
|
checkFade()
|
|
}
|
|
|
|
const tapScroll = (n: number, dir: 'up' | 'down') => {
|
|
if (divScroll) {
|
|
if (orientir === 'horizontal') {
|
|
divScroll.scrollBy({ top: 0, left: dir === 'up' ? -n : n, behavior: 'smooth' })
|
|
} else {
|
|
divScroll.scrollBy({ top: dir === 'up' ? -n : n, left: 0, behavior: 'smooth' })
|
|
}
|
|
}
|
|
}
|
|
|
|
const clickOnTrack = (
|
|
ev: MouseEvent & { currentTarget: EventTarget & HTMLDivElement },
|
|
horizontal: boolean = false
|
|
) => {
|
|
if (
|
|
(divBar == null && !horizontal) ||
|
|
(divBarH == null && horizontal) ||
|
|
divScroll == null ||
|
|
isScrollingByBar !== false
|
|
) {
|
|
return
|
|
}
|
|
const rectScroll = divScroll.getBoundingClientRect()
|
|
if (horizontal) {
|
|
const x = ev.offsetX
|
|
const trackWidth = ev.currentTarget.clientWidth
|
|
const barWidth = divBarH.clientWidth
|
|
const leftBar =
|
|
x - barWidth / 2 <= 0
|
|
? rectScroll.left + shiftLeft + 2
|
|
: x + barWidth / 2 >= trackWidth
|
|
? rectScroll.right - barWidth - shiftRight - (mask !== 'none' ? 12 : 2)
|
|
: ev.clientX - barWidth / 2
|
|
divBarH.style.left = `${leftBar}px`
|
|
const widthScroll = rectScroll.width - 2 - (mask !== 'none' ? 12 : 2) - barWidth - shiftLeft - shiftRight
|
|
const procBar = (leftBar - rectScroll.left - shiftLeft - 2) / widthScroll
|
|
divScroll.scrollLeft = (divScroll.scrollWidth - divScroll.clientWidth) * procBar
|
|
} else {
|
|
const y = ev.offsetY
|
|
const trackHeight = ev.currentTarget.clientHeight
|
|
const barHeight = divBar.clientHeight
|
|
const topBar =
|
|
y - barHeight / 2 <= 0
|
|
? rectScroll.top + shiftTop + 2
|
|
: y + barHeight / 2 >= trackHeight
|
|
? rectScroll.bottom - barHeight - shiftBottom - 2
|
|
: ev.clientY - barHeight / 2
|
|
divBar.style.top = `${topBar}px`
|
|
const heightScroll = rectScroll.height - 4 - barHeight - shiftTop - shiftBottom
|
|
const procBar = (topBar - rectScroll.top - shiftTop - 2) / heightScroll
|
|
if (scrollDirection === 'vertical-reverse') {
|
|
divScroll.scrollTop = (divScroll.scrollHeight - divScroll.clientHeight) * (procBar - 1)
|
|
} else {
|
|
divScroll.scrollTop = (divScroll.scrollHeight - divScroll.clientHeight) * procBar
|
|
}
|
|
}
|
|
}
|
|
|
|
$: topButton =
|
|
(orientir === 'vertical' && (mask === 'top' || mask === 'both')) ||
|
|
(orientir === 'horizontal' && (maskH === 'right' || maskH === 'both'))
|
|
? 'visible'
|
|
: 'hidden'
|
|
$: bottomButton =
|
|
(orientir === 'vertical' && (mask === 'bottom' || mask === 'both')) ||
|
|
(orientir === 'horizontal' && (maskH === 'left' || maskH === 'both'))
|
|
? 'visible'
|
|
: 'hidden'
|
|
</script>
|
|
|
|
<svelte:window on:resize={_resize} />
|
|
|
|
<div
|
|
class="scroller-container {orientir} {invertScroll ? 'invert' : 'normal'}"
|
|
class:buttons={buttons === 'normal'}
|
|
class:union={buttons === 'union'}
|
|
class:sticked={stickedScrollBars}
|
|
class:thin={thinScrollBars}
|
|
class:shrink
|
|
style:user-select={isScrolling ? 'none' : 'inherit'}
|
|
style:--scroller-header-height={`${(fade.multipler?.top ?? 0) * fz + 2}px`}
|
|
style:--scroller-footer-height={`${(fade.multipler?.bottom ?? 0) * fz + (stickedScrollBars ? 0 : 2)}px`}
|
|
style:--scroller-left-offset={`${(fade.multipler?.left ?? 0) * fz + 2}px`}
|
|
style:--scroller-right-offset={`${(fade.multipler?.right ?? 0) * fz + (mask !== 'none' ? 12 : 2)}px`}
|
|
style:max-height={maxHeight !== undefined ? `${maxHeight}rem` : undefined}
|
|
>
|
|
<div bind:this={divHScroll} class="horizontalBox flex-col flex-shrink">
|
|
<div
|
|
bind:this={divScroll}
|
|
use:resizeObserver={(element) => {
|
|
divHeight = element.clientHeight
|
|
onResize?.()
|
|
}}
|
|
class="scroll relative flex-shrink flex-col"
|
|
style:flex-direction={scrollDirection === 'vertical-reverse' ? 'column-reverse' : 'column'}
|
|
class:disableOverscroll
|
|
class:scrollSnapX={scrollSnap && contentDirection === 'horizontal'}
|
|
class:scrollSnapY={scrollSnap && contentDirection === 'vertical'}
|
|
style:overflow-x={horizontal ? 'auto' : 'hidden'}
|
|
on:scroll={() => {
|
|
if (onScroll) {
|
|
onScroll({ autoScrolling: autoscroll && scrolling })
|
|
}
|
|
if (
|
|
$tooltipstore.label !== undefined ||
|
|
($tooltipstore.component !== undefined && $tooltipstore.kind !== 'submenu')
|
|
) {
|
|
closeTooltip()
|
|
}
|
|
clearTimeout(scrollTimer)
|
|
isScrolling = true
|
|
scrollTimer = setTimeout(() => {
|
|
isScrolling = false
|
|
}, 300)
|
|
}}
|
|
>
|
|
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
|
<div
|
|
bind:this={divBox}
|
|
class="box{gap ? ` ${gap}` : ''}"
|
|
class:items-center={contentDirection === 'horizontal'}
|
|
style:padding
|
|
style:flex-direction={contentDirection === 'vertical'
|
|
? 'column'
|
|
: contentDirection === 'vertical-reverse'
|
|
? 'column-reverse'
|
|
: 'row'}
|
|
style:height={contentDirection === 'vertical-reverse' ? 'max-content' : noStretch ? 'auto' : '100%'}
|
|
style:align-items={align}
|
|
style:container-name={containerName}
|
|
style:container-type={containerType}
|
|
class:disableEvents={isScrolling && disablePointerEventsOnScroll}
|
|
use:resizeObserver={() => {
|
|
checkAutoScroll()
|
|
checkFade()
|
|
}}
|
|
on:dragover
|
|
on:drop
|
|
on:scroll
|
|
>
|
|
{#if bottomStart}<div class="flex-grow flex-shrink" />{/if}
|
|
<slot />
|
|
{#if bottomPadding}
|
|
<div style:width={'100%'} style:min-height={bottomPadding} />
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{#if buttons === 'normal'}
|
|
<button
|
|
class="scrollButton top {orientir}"
|
|
style:visibility={topButton}
|
|
on:click|preventDefault|stopPropagation={() => {
|
|
tapScroll(stepScroll, 'up')
|
|
}}
|
|
>
|
|
<div style:transform={orientir === 'horizontal' ? 'rotate(-90deg)' : ''}>
|
|
<IconUpOutline size={'medium'} />
|
|
</div>
|
|
</button>
|
|
<button
|
|
class="scrollButton bottom {orientir}"
|
|
style:visibility={bottomButton}
|
|
on:click|preventDefault|stopPropagation={() => {
|
|
tapScroll(stepScroll, 'down')
|
|
}}
|
|
>
|
|
<div style:transform={orientir === 'horizontal' ? 'rotate(-90deg)' : ''}>
|
|
<IconDownOutline size={'medium'} />
|
|
</div>
|
|
</button>
|
|
{:else if buttons === 'union'}
|
|
<div class="updown-container {orientir}">
|
|
<button
|
|
class="updown-up"
|
|
style:visibility={topButton}
|
|
on:click|preventDefault|stopPropagation={() => {
|
|
tapScroll(stepScroll, 'up')
|
|
}}
|
|
>
|
|
<HalfUpDown />
|
|
</button>
|
|
<button
|
|
class="updown-down"
|
|
style:visibility={bottomButton}
|
|
on:click|preventDefault|stopPropagation={() => {
|
|
tapScroll(stepScroll, 'down')
|
|
}}
|
|
>
|
|
<HalfUpDown />
|
|
</button>
|
|
</div>
|
|
{/if}
|
|
{#if mask !== 'none'}
|
|
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
|
<div
|
|
class="track"
|
|
class:hovered={isScrollingByBar === 'vertical'}
|
|
on:click|stopPropagation={(ev) => {
|
|
clickOnTrack(ev)
|
|
}}
|
|
/>
|
|
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
|
<div
|
|
class="bar"
|
|
class:hovered={isScrollingByBar === 'vertical'}
|
|
class:reverse={scrollDirection === 'vertical-reverse'}
|
|
bind:this={divBar}
|
|
on:pointerdown|stopPropagation={(ev) => {
|
|
onScrollStart(ev, 'vertical')
|
|
}}
|
|
on:pointerleave={checkFade}
|
|
/>
|
|
{/if}
|
|
{#if horizontal && maskH !== 'none'}
|
|
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
|
<div
|
|
class="track-horizontal"
|
|
class:hovered={isScrollingByBar === 'horizontal'}
|
|
on:click|stopPropagation={(ev) => {
|
|
clickOnTrack(ev, true)
|
|
}}
|
|
/>
|
|
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
|
<div
|
|
class="bar-horizontal"
|
|
class:hovered={isScrollingByBar === 'horizontal'}
|
|
bind:this={divBarH}
|
|
on:pointerdown|stopPropagation={(ev) => {
|
|
onScrollStart(ev, 'horizontal')
|
|
}}
|
|
on:pointerleave={checkFade}
|
|
/>
|
|
{/if}
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
.updown-container {
|
|
position: absolute;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 1rem;
|
|
height: 1rem;
|
|
transform-origin: center;
|
|
transform: rotate(0deg);
|
|
transition: transform 0.15s var(--timing-main);
|
|
|
|
button {
|
|
width: 1rem;
|
|
height: 0.5rem;
|
|
color: var(--theme-trans-color);
|
|
border-radius: 0.25rem;
|
|
border: none;
|
|
outline: none;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: var(--theme-caption-color);
|
|
background-color: var(--theme-button-hovered);
|
|
}
|
|
}
|
|
.updown-down {
|
|
transform-origin: center;
|
|
transform: rotate(180deg);
|
|
}
|
|
&.vertical {
|
|
left: 50%;
|
|
bottom: -2.25rem;
|
|
transform: translate(-50%, 0) rotate(0deg);
|
|
}
|
|
&.horizontal {
|
|
top: 50%;
|
|
right: -1.5rem;
|
|
transform: translate(0, -50%) rotate(90deg);
|
|
}
|
|
}
|
|
.scrollButton {
|
|
position: absolute;
|
|
color: var(--theme-caption-color);
|
|
background-color: transparent;
|
|
border: 1px solid transparent;
|
|
border-radius: 0.25rem;
|
|
visibility: hidden;
|
|
|
|
transform-origin: center;
|
|
transition-property: opacity, transform;
|
|
transition-timing-function: var(--timing-main);
|
|
transition-duration: 0.1s;
|
|
transform: scale(0.8);
|
|
opacity: 0.1;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
transform: scale(1);
|
|
opacity: 0.8;
|
|
}
|
|
&:hover {
|
|
background-color: var(--theme-button-hovered);
|
|
}
|
|
&:focus {
|
|
box-shadow: 0 0 0 2px var(--primary-button-outline);
|
|
}
|
|
&.vertical {
|
|
width: 2rem;
|
|
height: 1.25rem;
|
|
}
|
|
&.horizontal {
|
|
width: 1.25rem;
|
|
height: 2rem;
|
|
}
|
|
&.top.vertical {
|
|
top: calc(var(--scroller-header-height) - 2rem);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
&.top.horizontal {
|
|
top: 50%;
|
|
left: -2rem;
|
|
transform: translateY(-50%);
|
|
}
|
|
&.bottom.vertical {
|
|
right: 50%;
|
|
bottom: calc(var(--scroller-footer-height) - 2rem);
|
|
transform: translateX(50%);
|
|
}
|
|
&.bottom.horizontal {
|
|
right: -2rem;
|
|
bottom: 50%;
|
|
transform: translateY(50%);
|
|
}
|
|
}
|
|
.scroller-container {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
flex-shrink: 1;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
|
|
&:not(.shrink) {
|
|
flex-grow: 1;
|
|
height: 100%;
|
|
}
|
|
|
|
&.vertical {
|
|
min-width: 1.5rem;
|
|
}
|
|
// &.horizontal {
|
|
// margin-right: 2rem;
|
|
// }
|
|
&.buttons.vertical {
|
|
margin: 1.5rem 0;
|
|
}
|
|
&.buttons.horizontal {
|
|
margin-right: 2rem;
|
|
}
|
|
&.union.vertical {
|
|
margin-bottom: 2.75rem;
|
|
}
|
|
&.union.horizontal {
|
|
margin-right: 1.5rem;
|
|
}
|
|
&.normal {
|
|
.track,
|
|
.bar {
|
|
right: 2px;
|
|
}
|
|
.track-horizontal,
|
|
.bar-horizontal {
|
|
bottom: var(--scroller-footer-height);
|
|
}
|
|
}
|
|
&.invert {
|
|
.track,
|
|
.bar {
|
|
left: 2px;
|
|
}
|
|
.track-horizontal,
|
|
.bar-horizontal {
|
|
top: 2px;
|
|
}
|
|
}
|
|
}
|
|
.horizontalBox {
|
|
flex-grow: 1;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.scroll {
|
|
will-change: opacity;
|
|
flex-grow: 1;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
|
|
&.disableOverscroll {
|
|
overscroll-behavior: none;
|
|
}
|
|
&.scrollSnapY {
|
|
scroll-snap-type: y mandatory;
|
|
}
|
|
&.scrollSnapX {
|
|
scroll-snap-type: x mandatory;
|
|
}
|
|
&.scrollSnapX,
|
|
&.scrollSnapY {
|
|
scroll-padding-inline: var(--spacing-1);
|
|
}
|
|
&::-webkit-scrollbar:vertical {
|
|
display: none;
|
|
width: 0;
|
|
}
|
|
&::-webkit-scrollbar:horizontal {
|
|
display: none;
|
|
height: 0;
|
|
}
|
|
|
|
@media print {
|
|
overflow: visible !important;
|
|
}
|
|
}
|
|
.box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.bar,
|
|
.bar-horizontal {
|
|
visibility: hidden;
|
|
position: absolute;
|
|
background-color: var(--scrollbar-bar-color);
|
|
transform-origin: center;
|
|
transition: all 0.15s;
|
|
border-radius: 0.125rem;
|
|
box-shadow: 0 0 1px 1px var(--theme-overlay-color);
|
|
opacity: 0;
|
|
cursor: pointer;
|
|
|
|
&.hovered {
|
|
transition: none;
|
|
}
|
|
}
|
|
.bar {
|
|
top: 2px;
|
|
right: 2px;
|
|
width: 8px;
|
|
min-height: 2rem;
|
|
max-height: calc(100% - 12px);
|
|
transform: scaleX(0.5);
|
|
|
|
&.reverse {
|
|
top: auto;
|
|
bottom: 2px;
|
|
}
|
|
|
|
&:hover,
|
|
&.hovered {
|
|
transform: scaleX(1);
|
|
}
|
|
}
|
|
.bar-horizontal {
|
|
left: 2px;
|
|
bottom: var(--scroller-footer-height, 2px);
|
|
height: 8px;
|
|
min-width: 2rem;
|
|
max-width: calc(100% - 12px);
|
|
transform: scaleY(0.5);
|
|
|
|
&:hover,
|
|
&.hovered {
|
|
transform: scaleY(1);
|
|
}
|
|
}
|
|
.track,
|
|
.track-horizontal {
|
|
position: absolute;
|
|
transform-origin: center;
|
|
transition: all 0.1s ease-in-out;
|
|
background-color: var(--scrollbar-track-color);
|
|
border-radius: 0.5rem;
|
|
opacity: 0;
|
|
|
|
&::after {
|
|
position: absolute;
|
|
content: '';
|
|
inset: 0;
|
|
transform-origin: center;
|
|
transition: all 0.1s ease-in-out;
|
|
}
|
|
}
|
|
.track {
|
|
top: var(--scroller-header-height, 2px);
|
|
bottom: var(--scroller-footer-height, 2px);
|
|
width: 8px;
|
|
transform: scaleX(0.1);
|
|
&::after {
|
|
transform: scaleX(10);
|
|
}
|
|
&:hover {
|
|
transform: scaleX(1);
|
|
opacity: 1;
|
|
&::after,
|
|
& + .bar {
|
|
transform: scaleX(1);
|
|
}
|
|
}
|
|
}
|
|
.track-horizontal {
|
|
bottom: var(--scroller-footer-height, 2px);
|
|
left: var(--scroller-left-offset, 2px);
|
|
right: var(--scroller-right-offset, 2px);
|
|
height: 8px;
|
|
transform: scaleY(0.1);
|
|
&::after {
|
|
transform: scaleY(10);
|
|
}
|
|
&:hover {
|
|
transform: scaleY(1);
|
|
opacity: 1;
|
|
&::after,
|
|
& + .bar-horizontal {
|
|
transform: scaleY(1);
|
|
}
|
|
}
|
|
}
|
|
.track:hover + .bar,
|
|
.track-horizontal:hover + .bar-horizontal,
|
|
.bar:hover,
|
|
.bar-horizontal:hover,
|
|
.bar.hovered,
|
|
.bar-horizontal.hovered {
|
|
background-color: var(--scrollbar-bar-hover);
|
|
border-radius: 0.25rem;
|
|
opacity: 1 !important;
|
|
box-shadow: 0 0 1px black;
|
|
}
|
|
|
|
.scroller-container.sticked,
|
|
.scroller-container.thin {
|
|
.bar,
|
|
.track {
|
|
transform-origin: center right;
|
|
}
|
|
.bar-horizontal,
|
|
.track-horizontal {
|
|
transform-origin: bottom center;
|
|
}
|
|
}
|
|
|
|
.scroller-container.sticked {
|
|
.bar,
|
|
.track {
|
|
right: 0;
|
|
}
|
|
.bar-horizontal,
|
|
.track-horizontal {
|
|
bottom: var(--scroller-footer-height, 0);
|
|
}
|
|
}
|
|
.scroller-container.thin {
|
|
.bar,
|
|
.track {
|
|
width: 6px;
|
|
}
|
|
.bar-horizontal,
|
|
.track-horizontal {
|
|
height: 6px;
|
|
}
|
|
}
|
|
|
|
.disableEvents {
|
|
pointer-events: none !important;
|
|
}
|
|
</style>
|