morethanwords
4 years ago
30 changed files with 528 additions and 1352 deletions
@ -1,420 +0,0 @@ |
|||||||
import { isElementInViewport, isScrolledIntoView, cancelEvent } from "../lib/utils"; |
|
||||||
|
|
||||||
export default class Scrollable { |
|
||||||
public container: HTMLDivElement; |
|
||||||
public thumb: HTMLDivElement; |
|
||||||
|
|
||||||
public type: string; |
|
||||||
public side: string; |
|
||||||
public scrollType: string; |
|
||||||
public scrollSide: string; |
|
||||||
public clientAxis: string; |
|
||||||
|
|
||||||
public scrollSize = -1; |
|
||||||
public size = 0; |
|
||||||
public thumbSize = 0; |
|
||||||
|
|
||||||
public hiddenElements: { |
|
||||||
up: {element: Element, height: number}[], |
|
||||||
down: {element: Element, height: number}[] |
|
||||||
} = { |
|
||||||
up: [], |
|
||||||
down: [] |
|
||||||
}; |
|
||||||
public paddings = {up: 0, down: 0}; |
|
||||||
|
|
||||||
public paddingTopDiv: HTMLDivElement; |
|
||||||
public paddingBottomDiv: HTMLDivElement; |
|
||||||
|
|
||||||
public splitUp: HTMLElement; |
|
||||||
public splitOffset = 0; |
|
||||||
|
|
||||||
public onAddedBottom: () => void = null; |
|
||||||
|
|
||||||
public topObserver: IntersectionObserver; |
|
||||||
public isTopIntersecting: boolean; |
|
||||||
public bottomObserver: IntersectionObserver; |
|
||||||
public isBottomIntersecting: boolean; |
|
||||||
|
|
||||||
public splitObserver: IntersectionObserver; |
|
||||||
|
|
||||||
constructor(public el: HTMLDivElement, x = false, y = true) { |
|
||||||
this.container = document.createElement('div'); |
|
||||||
this.container.classList.add('scrollable'); |
|
||||||
|
|
||||||
let arr = []; |
|
||||||
for(let i = 0.001; i < 1; i += 0.001) arr.push(i); |
|
||||||
this.topObserver = new IntersectionObserver(entries => { |
|
||||||
let entry = entries[0]; |
|
||||||
|
|
||||||
console.log('top intersection:', entries, this.isTopIntersecting, entry.isIntersecting, entry.intersectionRatio > 0); |
|
||||||
if(this.isTopIntersecting = entry.isIntersecting) { |
|
||||||
this.onTopIntersection(entry); |
|
||||||
} |
|
||||||
console.log('top intersection end'); |
|
||||||
}, {threshold: arr}); |
|
||||||
|
|
||||||
this.bottomObserver = new IntersectionObserver(entries => { |
|
||||||
let entry = entries[0]; |
|
||||||
|
|
||||||
console.log('bottom intersection:', entries, this.isBottomIntersecting, entry.isIntersecting, entry.intersectionRatio > 0); |
|
||||||
if(this.isBottomIntersecting = entry.isIntersecting) { |
|
||||||
this.onBottomIntersection(entry); |
|
||||||
|
|
||||||
if(this.onScrolledBottom) this.onScrolledBottom(); |
|
||||||
} |
|
||||||
}, {threshold: arr}); |
|
||||||
|
|
||||||
this.splitObserver = new IntersectionObserver(entries => { |
|
||||||
//console.log('splitObserver', entries);
|
|
||||||
|
|
||||||
for(let entry of entries) { |
|
||||||
if(!entry.isIntersecting/* && entry.target.parentElement */) { |
|
||||||
let child = entry.target; |
|
||||||
console.log('onscroll entry', entry.boundingClientRect, child, entry); |
|
||||||
|
|
||||||
let isTop = (entry.boundingClientRect.top + this.splitOffset) <= 0; |
|
||||||
let isBottom = entry.rootBounds.height <= entry.boundingClientRect.top; |
|
||||||
|
|
||||||
let height = child.scrollHeight; |
|
||||||
let toPush = {element: child, height}; |
|
||||||
if(isTop) { |
|
||||||
this.paddings.up += height; |
|
||||||
this.hiddenElements.up.push(toPush); |
|
||||||
child.parentElement.removeChild(child); |
|
||||||
|
|
||||||
console.log('onscroll sliced up', child); |
|
||||||
|
|
||||||
this.paddingTopDiv.style.height = this.paddings.up + 'px'; |
|
||||||
} else if(isBottom) { |
|
||||||
this.paddings.down += height; |
|
||||||
this.hiddenElements.down.unshift(toPush); |
|
||||||
child.parentElement.removeChild(child); |
|
||||||
|
|
||||||
console.log('onscroll sliced down', child); |
|
||||||
|
|
||||||
this.paddingBottomDiv.style.height = this.paddings.down + 'px'; |
|
||||||
} |
|
||||||
|
|
||||||
//console.log('splitObserver', entry, entry.target, isTop);
|
|
||||||
} |
|
||||||
} |
|
||||||
}); |
|
||||||
|
|
||||||
if(x) { |
|
||||||
this.container.classList.add('scrollable-x'); |
|
||||||
this.type = 'width'; |
|
||||||
this.side = 'left'; |
|
||||||
this.scrollType = 'scrollWidth'; |
|
||||||
this.scrollSide = 'scrollLeft'; |
|
||||||
this.clientAxis = 'clientX'; |
|
||||||
|
|
||||||
let scrollHorizontally = (e: any) => { |
|
||||||
e = window.event || e; |
|
||||||
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))); |
|
||||||
this.container.scrollLeft -= (delta * 20); |
|
||||||
e.preventDefault(); |
|
||||||
}; |
|
||||||
if(this.container.addEventListener) { |
|
||||||
// IE9, Chrome, Safari, Opera
|
|
||||||
this.container.addEventListener("mousewheel", scrollHorizontally, false); |
|
||||||
// Firefox
|
|
||||||
this.container.addEventListener("DOMMouseScroll", scrollHorizontally, false); |
|
||||||
} else { |
|
||||||
// IE 6/7/8
|
|
||||||
// @ts-ignore
|
|
||||||
this.container.attachEvent("onmousewheel", scrollHorizontally); |
|
||||||
} |
|
||||||
} else if(y) { |
|
||||||
this.container.classList.add('scrollable-y'); |
|
||||||
this.type = 'height'; |
|
||||||
this.side = 'top'; |
|
||||||
this.scrollType = 'scrollHeight'; |
|
||||||
this.scrollSide = 'scrollTop'; |
|
||||||
this.clientAxis = 'clientY'; |
|
||||||
} else { |
|
||||||
throw new Error('no side for scroll'); |
|
||||||
} |
|
||||||
|
|
||||||
this.thumb = document.createElement('div'); |
|
||||||
this.thumb.className = 'scrollbar-thumb'; |
|
||||||
|
|
||||||
// @ts-ignore
|
|
||||||
this.thumb.style[this.type] = '30px'; |
|
||||||
|
|
||||||
let onMouseMove = (e: MouseEvent) => { |
|
||||||
let rect = this.thumb.getBoundingClientRect(); |
|
||||||
|
|
||||||
let diff: number; |
|
||||||
// @ts-ignore
|
|
||||||
diff = e[this.clientAxis] - rect[this.side]; |
|
||||||
// @ts-ignore
|
|
||||||
this.container[this.scrollSide] += diff * 0.5; |
|
||||||
|
|
||||||
console.log('onMouseMove', e, diff); |
|
||||||
|
|
||||||
cancelEvent(e); |
|
||||||
}; |
|
||||||
|
|
||||||
this.thumb.addEventListener('mousedown', () => { |
|
||||||
window.addEventListener('mousemove', onMouseMove); |
|
||||||
|
|
||||||
window.addEventListener('mouseup', () => { |
|
||||||
window.removeEventListener('mousemove', onMouseMove); |
|
||||||
}, {once: true}); |
|
||||||
}); |
|
||||||
|
|
||||||
//this.container.addEventListener('mouseover', this.resize.bind(this)); // omg
|
|
||||||
window.addEventListener('resize', this.resize.bind(this)); |
|
||||||
|
|
||||||
this.paddingTopDiv = document.createElement('div'); |
|
||||||
this.paddingTopDiv.classList.add('scroll-padding'); |
|
||||||
this.paddingBottomDiv = document.createElement('div'); |
|
||||||
this.paddingBottomDiv.classList.add('scroll-padding'); |
|
||||||
|
|
||||||
this.topObserver.observe(this.paddingTopDiv); |
|
||||||
this.bottomObserver.observe(this.paddingBottomDiv); |
|
||||||
|
|
||||||
this.container.addEventListener('scroll', this.onScroll.bind(this)); |
|
||||||
|
|
||||||
//this.container.append(this.paddingTopDiv);
|
|
||||||
Array.from(el.children).forEach(c => this.container.append(c)); |
|
||||||
//this.container.append(this.paddingBottomDiv);
|
|
||||||
|
|
||||||
el.append(this.container);//container.append(el);
|
|
||||||
this.container.parentElement.append(this.thumb); |
|
||||||
this.resize(); |
|
||||||
} |
|
||||||
|
|
||||||
public resize() { |
|
||||||
console.time('scroll resize'); |
|
||||||
// @ts-ignore
|
|
||||||
this.scrollSize = this.container[this.scrollType]; |
|
||||||
|
|
||||||
let rect = this.container.getBoundingClientRect(); |
|
||||||
|
|
||||||
// @ts-ignore
|
|
||||||
this.size = rect[this.type]; |
|
||||||
|
|
||||||
if(!this.size || this.size == this.scrollSize) { |
|
||||||
this.thumbSize = 0; |
|
||||||
|
|
||||||
// @ts-ignore
|
|
||||||
this.thumb.style[this.type] = this.thumbSize + 'px'; |
|
||||||
console.timeEnd('scroll resize'); |
|
||||||
return; |
|
||||||
} |
|
||||||
//if(!height) return;
|
|
||||||
|
|
||||||
let divider = this.scrollSize / this.size / 0.5; |
|
||||||
this.thumbSize = this.size / divider; |
|
||||||
|
|
||||||
if(this.thumbSize < 20) this.thumbSize = 20; |
|
||||||
|
|
||||||
// @ts-ignore
|
|
||||||
this.thumb.style[this.type] = this.thumbSize + 'px'; |
|
||||||
|
|
||||||
console.timeEnd('scroll resize'); |
|
||||||
|
|
||||||
// @ts-ignore
|
|
||||||
//console.log('onresize', thumb.style[type], thumbHeight, height);
|
|
||||||
} |
|
||||||
|
|
||||||
public setVirtualContainer(el?: HTMLElement) { |
|
||||||
this.splitUp = el; |
|
||||||
|
|
||||||
this.hiddenElements.up.length = this.hiddenElements.down.length = 0; |
|
||||||
this.paddings.up = this.paddings.down = 0; |
|
||||||
|
|
||||||
if(this.paddingTopDiv.parentElement) { |
|
||||||
this.paddingTopDiv.style.height = ''; |
|
||||||
this.paddingBottomDiv.style.height = ''; |
|
||||||
} |
|
||||||
|
|
||||||
/* this.topObserver.unobserve(this.paddingTopDiv); |
|
||||||
this.bottomObserver.unobserve(this.paddingBottomDiv); |
|
||||||
|
|
||||||
this.topObserver.observe(this.paddingTopDiv); |
|
||||||
this.bottomObserver.observe(this.paddingBottomDiv); */ |
|
||||||
|
|
||||||
if(el) { |
|
||||||
el.parentElement.insertBefore(this.paddingTopDiv, el); |
|
||||||
el.parentNode.insertBefore(this.paddingBottomDiv, el.nextSibling); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
public onScroll() { |
|
||||||
// @ts-ignore
|
|
||||||
//let st = container[scrollSide];
|
|
||||||
|
|
||||||
//console.time('scroll onScroll');
|
|
||||||
|
|
||||||
// @ts-ignore
|
|
||||||
if(this.container[this.scrollType] != this.scrollSize || this.thumbSize == 0) { |
|
||||||
this.resize(); |
|
||||||
} |
|
||||||
|
|
||||||
// @ts-ignore
|
|
||||||
let value = this.container[this.scrollSide] / (this.scrollSize - this.size) * 100; |
|
||||||
let maxValue = 100 - (this.thumbSize / this.size * 100); |
|
||||||
|
|
||||||
//console.log('onscroll', container.scrollHeight, thumbHeight, height, value, maxValue);
|
|
||||||
|
|
||||||
// @ts-ignore
|
|
||||||
this.thumb.style[this.side] = (value >= maxValue ? maxValue : value) + '%'; |
|
||||||
|
|
||||||
//console.timeEnd('scroll onScroll');
|
|
||||||
} |
|
||||||
|
|
||||||
public async onTopIntersection2(entry: IntersectionObserverEntry) { |
|
||||||
console.log('onTopIntersection'); |
|
||||||
|
|
||||||
if(this.hiddenElements.up.length && this.paddings.up) { |
|
||||||
//while(this.isTopIntersecting && this.paddings.up) {
|
|
||||||
let child = this.hiddenElements.up.pop(); |
|
||||||
|
|
||||||
console.log('top returning from hidden', child); |
|
||||||
|
|
||||||
if(!child) { |
|
||||||
this.paddings.up = 0; |
|
||||||
this.paddingTopDiv.style.height = '0px'; |
|
||||||
return; |
|
||||||
} |
|
||||||
|
|
||||||
/* await new Promise((resolve, reject) => { |
|
||||||
window.requestAnimationFrame(resolve); |
|
||||||
}); */ |
|
||||||
|
|
||||||
this.splitUp.prepend(child.element); |
|
||||||
this.paddings.up -= child.height; |
|
||||||
|
|
||||||
this.paddingTopDiv.style.height = this.paddings.up + 'px'; |
|
||||||
//}
|
|
||||||
} else { |
|
||||||
this.paddingTopDiv.style.height = '0px'; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
public async onTopIntersection(entry: IntersectionObserverEntry) { |
|
||||||
console.log('onTopIntersection'); |
|
||||||
|
|
||||||
if(this.hiddenElements.up.length && this.paddings.up) { |
|
||||||
let needHeight = entry.intersectionRect.height + this.splitOffset; |
|
||||||
|
|
||||||
while(needHeight > 0 && this.paddings.up) { |
|
||||||
let child = this.hiddenElements.up.pop(); |
|
||||||
|
|
||||||
console.log('top returning from hidden', child); |
|
||||||
|
|
||||||
if(!child) { |
|
||||||
this.paddings.up = 0; |
|
||||||
this.paddingTopDiv.style.height = '0px'; |
|
||||||
break; |
|
||||||
} |
|
||||||
|
|
||||||
/* await new Promise((resolve, reject) => { |
|
||||||
window.requestAnimationFrame(resolve); |
|
||||||
}); */ |
|
||||||
|
|
||||||
this.splitUp.prepend(child.element); |
|
||||||
let height = child.height || child.element.scrollHeight; |
|
||||||
|
|
||||||
needHeight -= height; |
|
||||||
this.paddings.up -= height; |
|
||||||
|
|
||||||
this.paddingTopDiv.style.height = this.paddings.up + 'px'; |
|
||||||
} |
|
||||||
} else { |
|
||||||
this.paddingTopDiv.style.height = '0px'; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
public onBottomIntersection2() { |
|
||||||
console.log('onBottomIntersection'); |
|
||||||
|
|
||||||
if(this.hiddenElements.down.length && this.paddings.down) { |
|
||||||
//while(this.isBottomIntersecting && this.paddings.down) {
|
|
||||||
let child = this.hiddenElements.down.shift(); |
|
||||||
|
|
||||||
if(!child) { |
|
||||||
this.paddings.down = 0; |
|
||||||
this.paddingBottomDiv.style.height = '0px'; |
|
||||||
return;//break;
|
|
||||||
} |
|
||||||
|
|
||||||
this.splitUp.append(child.element); |
|
||||||
|
|
||||||
this.paddings.down -= child.height; |
|
||||||
this.paddingBottomDiv.style.height = this.paddings.down + 'px'; |
|
||||||
//}
|
|
||||||
|
|
||||||
if(this.onAddedBottom) this.onAddedBottom(); |
|
||||||
} else { |
|
||||||
this.paddingBottomDiv.style.height = '0px'; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
public onBottomIntersection(entry: IntersectionObserverEntry) { |
|
||||||
console.log('onBottomIntersection'); |
|
||||||
|
|
||||||
if(this.hiddenElements.down.length && this.paddings.down) { |
|
||||||
let needHeight = entry.intersectionRect.height + this.splitOffset; |
|
||||||
|
|
||||||
while(needHeight > 0 && this.paddings.down) { |
|
||||||
let child = this.hiddenElements.down.shift(); |
|
||||||
|
|
||||||
if(!child) { |
|
||||||
this.paddings.down = 0; |
|
||||||
this.paddingBottomDiv.style.height = '0px'; |
|
||||||
break; |
|
||||||
} |
|
||||||
|
|
||||||
this.splitUp.append(child.element); |
|
||||||
let height = child.height || child.element.scrollHeight; |
|
||||||
|
|
||||||
needHeight -= height; |
|
||||||
this.paddings.down -= height; |
|
||||||
|
|
||||||
this.paddingBottomDiv.style.height = this.paddings.down + 'px'; |
|
||||||
} |
|
||||||
|
|
||||||
if(this.onAddedBottom) this.onAddedBottom(); |
|
||||||
} else { |
|
||||||
this.paddingBottomDiv.style.height = '0px'; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
public onScrolledBottom() { |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
public splitAppend(...smth: (string | Node)[]) { |
|
||||||
this.splitUp.append(...smth); |
|
||||||
|
|
||||||
for(let node of smth) { |
|
||||||
if(typeof(node) !== 'string') { |
|
||||||
this.splitObserver.observe(node as Element); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
set scrollTop(y: number) { |
|
||||||
this.container.scrollTop = y; |
|
||||||
} |
|
||||||
|
|
||||||
get scrollTop() { |
|
||||||
return this.container.scrollTop; |
|
||||||
} |
|
||||||
|
|
||||||
get scrollHeight() { |
|
||||||
return this.container.scrollHeight; |
|
||||||
} |
|
||||||
|
|
||||||
get parentElement() { |
|
||||||
return this.container.parentElement; |
|
||||||
} |
|
||||||
|
|
||||||
get offsetHeight() { |
|
||||||
return this.container.offsetHeight; |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,270 +0,0 @@ |
|||||||
import { isElementInViewport } from "../lib/utils"; |
|
||||||
|
|
||||||
export default class Scrollable { |
|
||||||
public container: HTMLDivElement; |
|
||||||
public thumb: HTMLDivElement; |
|
||||||
|
|
||||||
public type: string; |
|
||||||
public side: string; |
|
||||||
public scrollType: string; |
|
||||||
public scrollSide: string; |
|
||||||
|
|
||||||
public scrollSize = -1; |
|
||||||
public size = 0; |
|
||||||
public thumbSize = 0; |
|
||||||
|
|
||||||
public hiddenElements: { |
|
||||||
up: Element[], |
|
||||||
down: Element[] |
|
||||||
} = { |
|
||||||
up: [], |
|
||||||
down: [] |
|
||||||
}; |
|
||||||
public paddings = {up: 0, down: 0}; |
|
||||||
|
|
||||||
public paddingTopDiv: HTMLDivElement; |
|
||||||
public paddingBottomDiv: HTMLDivElement; |
|
||||||
|
|
||||||
public splitUp: HTMLElement; |
|
||||||
public spliceCount = 1; |
|
||||||
public useStylePadding = false; |
|
||||||
public useOneHeight = false; |
|
||||||
|
|
||||||
constructor(public el: HTMLDivElement, x = false, y = true) { |
|
||||||
this.container = document.createElement('div'); |
|
||||||
this.container.classList.add('scrollable'); |
|
||||||
|
|
||||||
if(x) { |
|
||||||
this.container.classList.add('scrollable-x'); |
|
||||||
this.type = 'width'; |
|
||||||
this.side = 'left'; |
|
||||||
this.scrollType = 'scrollWidth'; |
|
||||||
this.scrollSide = 'scrollLeft'; |
|
||||||
} else if(y) { |
|
||||||
this.container.classList.add('scrollable-y'); |
|
||||||
this.type = 'height'; |
|
||||||
this.side = 'top'; |
|
||||||
this.scrollType = 'scrollHeight'; |
|
||||||
this.scrollSide = 'scrollTop'; |
|
||||||
} else { |
|
||||||
throw new Error('no side for scroll'); |
|
||||||
} |
|
||||||
|
|
||||||
this.thumb = document.createElement('div'); |
|
||||||
this.thumb.className = 'scrollbar-thumb'; |
|
||||||
|
|
||||||
// @ts-ignore
|
|
||||||
this.thumb.style[this.type] = '30px'; |
|
||||||
|
|
||||||
this.container.addEventListener('mouseover', this.resize.bind(this)); |
|
||||||
window.addEventListener('resize', this.resize.bind(this)); |
|
||||||
|
|
||||||
this.paddingTopDiv = document.createElement('div'); |
|
||||||
this.paddingTopDiv.classList.add('scroll-padding'); |
|
||||||
this.paddingBottomDiv = document.createElement('div'); |
|
||||||
this.paddingBottomDiv.classList.add('scroll-padding'); |
|
||||||
|
|
||||||
this.container.addEventListener('scroll', this.onScroll.bind(this)); |
|
||||||
|
|
||||||
this.container.append(this.paddingTopDiv); |
|
||||||
Array.from(el.children).forEach(c => this.container.append(c)); |
|
||||||
this.container.append(this.paddingBottomDiv); |
|
||||||
|
|
||||||
el.append(this.container);//container.append(el);
|
|
||||||
this.container.parentElement.append(this.thumb); |
|
||||||
this.resize(); |
|
||||||
} |
|
||||||
|
|
||||||
public resize() { |
|
||||||
// @ts-ignore
|
|
||||||
this.scrollSize = this.container[this.scrollType]; |
|
||||||
|
|
||||||
let rect = this.container.getBoundingClientRect(); |
|
||||||
|
|
||||||
// @ts-ignore
|
|
||||||
this.size = rect[this.type]; |
|
||||||
|
|
||||||
if(!this.size || this.size == this.scrollSize) { |
|
||||||
this.thumbSize = 0; |
|
||||||
|
|
||||||
// @ts-ignore
|
|
||||||
this.thumb.style[this.type] = this.thumbSize + 'px'; |
|
||||||
return; |
|
||||||
} |
|
||||||
//if(!height) return;
|
|
||||||
|
|
||||||
let divider = this.scrollSize / this.size / 0.5; |
|
||||||
this.thumbSize = this.size / divider; |
|
||||||
|
|
||||||
if(this.thumbSize < 20) this.thumbSize = 20; |
|
||||||
|
|
||||||
// @ts-ignore
|
|
||||||
this.thumb.style[this.type] = this.thumbSize + 'px'; |
|
||||||
|
|
||||||
// @ts-ignore
|
|
||||||
//console.log('onresize', thumb.style[type], thumbHeight, height);
|
|
||||||
} |
|
||||||
|
|
||||||
public setVirtualContainer(el: HTMLElement, spliceCount = 1, useStylePadding = false, useOneHeight = false) { |
|
||||||
this.splitUp = el; |
|
||||||
this.hiddenElements = { |
|
||||||
up: [], |
|
||||||
down: [] |
|
||||||
}; |
|
||||||
this.paddings = { |
|
||||||
up: 0, |
|
||||||
down: 0 |
|
||||||
}; |
|
||||||
|
|
||||||
this.spliceCount = spliceCount; |
|
||||||
this.useStylePadding = useStylePadding; |
|
||||||
this.useOneHeight = useOneHeight; |
|
||||||
|
|
||||||
if(this.paddingTopDiv.parentElement) { |
|
||||||
this.paddingTopDiv.style.height = ''; |
|
||||||
this.paddingBottomDiv.style.height = ''; |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* if(useStylePadding) { |
|
||||||
this.paddingTopDiv.parentElement.removeChild(this.paddingTopDiv); |
|
||||||
this.paddingBottomDiv.parentElement.removeChild(this.paddingBottomDiv); |
|
||||||
} else { */ |
|
||||||
el.parentElement.insertBefore(this.paddingTopDiv, el); |
|
||||||
el.parentNode.insertBefore(this.paddingBottomDiv, el.nextSibling); |
|
||||||
//}
|
|
||||||
|
|
||||||
if(useStylePadding) { |
|
||||||
this.paddingTopDiv.style.height = '10px'; |
|
||||||
this.paddingBottomDiv.style.height = '10px'; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
public onScroll() { |
|
||||||
// @ts-ignore
|
|
||||||
//let st = container[scrollSide];
|
|
||||||
|
|
||||||
|
|
||||||
if(this.container[this.scrollType] != this.scrollSize || this.thumbSize == 0) { |
|
||||||
this.resize(); |
|
||||||
} |
|
||||||
|
|
||||||
// @ts-ignore
|
|
||||||
let value = this.container[this.scrollSide] / (this.scrollSize - this.size) * 100; |
|
||||||
let maxValue = 100 - (this.thumbSize / this.size * 100); |
|
||||||
|
|
||||||
//console.log('onscroll', container.scrollHeight, thumbHeight, height, value, maxValue);
|
|
||||||
|
|
||||||
// @ts-ignore
|
|
||||||
this.thumb.style[this.side] = (value >= maxValue ? maxValue : value) + '%'; |
|
||||||
|
|
||||||
if(!this.splitUp) { |
|
||||||
return; |
|
||||||
} |
|
||||||
|
|
||||||
let splitUp = this.splitUp; |
|
||||||
let children = Array.from(splitUp.children) as HTMLElement[]; |
|
||||||
let firstVisible = -1, lastVisible = -1; |
|
||||||
let length = children.length; |
|
||||||
for(let i = 0; i < length; ++i) { |
|
||||||
let child = children[i]; |
|
||||||
if(isElementInViewport(child)) { |
|
||||||
if(firstVisible < 0) firstVisible = i; |
|
||||||
lastVisible = i; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
console.log('onscroll', firstVisible, lastVisible); |
|
||||||
|
|
||||||
if(firstVisible > 0) { |
|
||||||
let sliced = children.slice(0, firstVisible); |
|
||||||
|
|
||||||
let height = 0, singleHeight = sliced[0].scrollHeight; |
|
||||||
for(let child of sliced) { |
|
||||||
height += child.scrollHeight; |
|
||||||
this.hiddenElements.up.push(child); |
|
||||||
child.parentElement.removeChild(child); |
|
||||||
} |
|
||||||
|
|
||||||
this.paddings.up += this.useOneHeight ? singleHeight : height; |
|
||||||
|
|
||||||
//console.log('sliced up', sliced.length);
|
|
||||||
|
|
||||||
//sliced.forEach(child => child.style.display = 'none');
|
|
||||||
if(this.useStylePadding) splitUp.style.paddingTop = this.paddings.up + 'px'; |
|
||||||
else this.paddingTopDiv.style.height = this.paddings.up + 'px'; |
|
||||||
//console.log('onscroll need to add padding: ', paddings.up);
|
|
||||||
} else if(this.hiddenElements.up.length) { |
|
||||||
console.log('onscroll up', isElementInViewport(this.paddingTopDiv), this.paddings.up); |
|
||||||
while(isElementInViewport(this.paddingTopDiv) && this.paddings.up) { |
|
||||||
//let child = this.hiddenElements.up.pop();
|
|
||||||
|
|
||||||
/* |
|
||||||
splitUp.prepend(...childs); |
|
||||||
|
|
||||||
this.paddings.up -= child.scrollHeight; |
|
||||||
this.paddingTopDiv.style.height = this.paddings.up + 'px';*/ |
|
||||||
|
|
||||||
let childs = this.hiddenElements.up.splice(-this.spliceCount).reverse(); |
|
||||||
|
|
||||||
let height = 0; |
|
||||||
for(let child of childs) { |
|
||||||
splitUp.prepend(child); |
|
||||||
height += child.scrollHeight; |
|
||||||
} |
|
||||||
|
|
||||||
this.paddings.up -= this.useOneHeight ? childs[0].scrollHeight : height; |
|
||||||
|
|
||||||
if(this.useStylePadding) splitUp.style.paddingTop = this.paddings.up + 'px'; |
|
||||||
else this.paddingTopDiv.style.height = this.paddings.up + 'px'; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
if(lastVisible < (length - 1)) { |
|
||||||
let sliced = children.slice(lastVisible + 1, this.useOneHeight ? lastVisible + 1 + this.spliceCount : undefined).reverse(); |
|
||||||
|
|
||||||
let height = 0, singleHeight = sliced[0].scrollHeight; |
|
||||||
for(let child of sliced) { |
|
||||||
height += child.scrollHeight; |
|
||||||
this.hiddenElements.down.unshift(child); |
|
||||||
child.parentElement.removeChild(child); |
|
||||||
} |
|
||||||
|
|
||||||
this.paddings.down += this.useOneHeight ? singleHeight : height; |
|
||||||
|
|
||||||
console.log('onscroll sliced down', splitUp, sliced.length, this.paddings.down + 'px'); |
|
||||||
|
|
||||||
//sliced.forEach(child => child.style.display = 'none');
|
|
||||||
|
|
||||||
/* if(this.useStylePadding) splitUp.style.paddingBottom = this.paddings.down + 'px'; |
|
||||||
else */ this.paddingBottomDiv.style.height = this.paddings.down + 'px'; |
|
||||||
//console.log('onscroll need to add padding: ', paddings.up);
|
|
||||||
} else if(this.hiddenElements.down.length) { |
|
||||||
console.log('onscroll down', isElementInViewport(this.paddingBottomDiv), this.paddings.down, this.hiddenElements); |
|
||||||
while(isElementInViewport(this.paddingBottomDiv) && this.paddings.down) { |
|
||||||
/* let child = this.hiddenElements.down.shift(); |
|
||||||
|
|
||||||
splitUp.append(child); |
|
||||||
|
|
||||||
this.paddings.down -= child.scrollHeight; |
|
||||||
this.paddingBottomDiv.style.height = this.paddings.down + 'px'; */ |
|
||||||
let childs = this.hiddenElements.down.splice(0, this.spliceCount); |
|
||||||
|
|
||||||
let height = 0; |
|
||||||
for(let child of childs) { |
|
||||||
splitUp.append(child); |
|
||||||
height += child.scrollHeight; |
|
||||||
} |
|
||||||
|
|
||||||
this.paddings.down -= this.useOneHeight ? childs[0].scrollHeight : height; |
|
||||||
/* if(this.useStylePadding) splitUp.style.paddingBottom = this.paddings.down + 'px'; |
|
||||||
else */ this.paddingBottomDiv.style.height = this.paddings.down + 'px'; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
//console.log('onscroll', container, firstVisible, lastVisible, hiddenElements);
|
|
||||||
|
|
||||||
//lastScrollPos = st;
|
|
||||||
} |
|
||||||
} |
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,5 +1,5 @@ |
|||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
import LottiePlayer from "lottie-web/build/player/lottie_canvas.min.js"; |
//import LottiePlayer from "lottie-web/build/player/lottie_canvas.min.js";
|
||||||
//import LottiePlayer from "lottie-web/build/player/lottie_light.min.js";
|
import LottiePlayer from "lottie-web/build/player/lottie_light.min.js"; |
||||||
|
|
||||||
(window as any).lottie = LottiePlayer; |
(window as any).lottie = LottiePlayer; |
||||||
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue