From d2204fd5c8fb2361e9c29ed31cd0d40eb69d2f4b Mon Sep 17 00:00:00 2001 From: tamaina Date: Fri, 13 Jan 2023 18:25:40 +0900 Subject: refactor: pagination/date-separated-list系処理を良い感じに？ (#8209) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * pages/messaging/messaging-room.vue * wip * wip * wip??? * wip? * :v: * messaaging-room.form.vue rewrite to compositon api * refactor * 関心事でないのでとりあえず置いておく * :art: * :art: * i18n.ts * fix scroll container find function * fix * FIX * :v: * Fix scroll bottom detect * wip * aaaaaaaaaaa * rename * fix * fix? * :v: * :v: * clean up * clena up * refactor * scroll event once or not * fix * fix once * add safe-area-inset-bottom to spacer * fix * :v: * :art: * fix * fix * wip * :v: * clean up * fix lint * Update packages/client/src/components/global/sticky-container.vue Co-authored-by: Johann150 * Update packages/client/src/components/ui/pagination.vue Co-authored-by: Johann150 * Update packages/client/src/pages/messaging/messaging-room.form.vue Co-authored-by: Johann150 * clean up: single line comment * https://github.com/misskey-dev/misskey/pull/8209#discussion_r867386077 * fix * asobi → tolerance * pick form * pick message * pick room * fix lint * fix scroll? * fix scroll.ts * fix directives/sticky-container * update global/sticky-container.vue * fix, :art: * revert merge * :v: * fix lint errors * :art: * Update packages/client/src/types/date-separated-list.ts Co-authored-by: Acid Chicken (硫酸鶏) * https://github.com/misskey-dev/misskey/pull/8209#discussion_r917225080 * use ' * Update packages/client/src/scripts/scroll.ts Co-authored-by: Acid Chicken (硫酸鶏) * use Number.EPSILON Co-authored-by: acid-chicken * revert * fix * fix * Use % instead of vh * :art: * :art: * :art: * wip * wip * css modules Co-authored-by: Johann150 Co-authored-by: Acid Chicken (硫酸鶏) --- packages/frontend/src/scripts/scroll.ts | 120 ++++++++++++++++++++++---------- 1 file changed, 82 insertions(+), 38 deletions(-) (limited to 'packages/frontend/src/scripts') diff --git a/packages/frontend/src/scripts/scroll.ts b/packages/frontend/src/scripts/scroll.ts index f5bc6bf9ce..e3d9dc00c2 100644 --- a/packages/frontend/src/scripts/scroll.ts +++ b/packages/frontend/src/scripts/scroll.ts @@ -10,53 +10,67 @@ export function getScrollContainer(el: HTMLElement | null): HTMLElement | null { } } -export function getScrollPosition(el: Element | null): number { - const container = getScrollContainer(el); - return container == null ? window.scrollY : container.scrollTop; +export function getStickyTop(el: HTMLElement, container: HTMLElement | null = null, top: number = 0) { + if (!el.parentElement) return top; + const data = el.dataset.stickyContainerHeaderHeight; + const newTop = data ? Number(data) + top : top; + if (el === container) return newTop; + return getStickyTop(el.parentElement, container, newTop); } -export function isTopVisible(el: Element | null): boolean { - const scrollTop = getScrollPosition(el); - const topPosition = el.offsetTop; // TODO: container内でのelの相対位置を取得できればより正確になる - - return scrollTop <= topPosition; +export function getScrollPosition(el: HTMLElement | null): number { + const container = getScrollContainer(el); + return container == null ? window.scrollY : container.scrollTop; } -export function isBottomVisible(el: HTMLElement, tolerance = 1, container = getScrollContainer(el)) { - if (container) return el.scrollHeight <= container.clientHeight + Math.abs(container.scrollTop) + tolerance; - return el.scrollHeight <= window.innerHeight + window.scrollY + tolerance; -} +export function onScrollTop(el: HTMLElement, cb: () => unknown, tolerance: number = 1, once: boolean = false) { + // とりあえず評価してみる + if (isTopVisible(el)) { + cb(); + if (once) return null; + } -export function onScrollTop(el: Element, cb) { const container = getScrollContainer(el) || window; + const onScroll = ev => { if (!document.body.contains(el)) return; - if (isTopVisible(el)) { + if (isTopVisible(el, tolerance)) { cb(); - container.removeEventListener('scroll', onScroll); + if (once) removeListener(); } }; + + function removeListener() { container.removeEventListener('scroll', onScroll); } container.addEventListener('scroll', onScroll, { passive: true }); + return removeListener; } -export function onScrollBottom(el: Element, cb) { - const container = getScrollContainer(el) || window; +export function onScrollBottom(el: HTMLElement, cb: () => unknown, tolerance: number = 1, once: boolean = false) { + const container = getScrollContainer(el); + + // とりあえず評価してみる + if (isBottomVisible(el, tolerance, container)) { + cb(); + if (once) return null; + } + + const containerOrWindow = container || window; const onScroll = ev => { if (!document.body.contains(el)) return; - const pos = getScrollPosition(el); - if (pos + el.clientHeight > el.scrollHeight - 1) { + if (isBottomVisible(el, 1, container)) { cb(); - container.removeEventListener('scroll', onScroll); + if (once) removeListener(); } }; - container.addEventListener('scroll', onScroll, { passive: true }); + + function removeListener() { + containerOrWindow.removeEventListener('scroll', onScroll); + } + containerOrWindow.addEventListener('scroll', onScroll, { passive: true }); + return removeListener; } -export function scroll(el: Element, options: { - top?: number; - left?: number; - behavior?: ScrollBehavior; -}) { +export function scroll(el: HTMLElement, options: ScrollToOptions | undefined) { const container = getScrollContainer(el); if (container == null) { window.scroll(options); @@ -65,21 +79,51 @@ export function scroll(el: Element, options: { } } -export function scrollToTop(el: Element, options: { behavior?: ScrollBehavior; } = {}) { +/** + * Scroll to Top + * @param el Scroll container element + * @param options Scroll options + */ +export function scrollToTop(el: HTMLElement, options: { behavior?: ScrollBehavior; } = {}) { scroll(el, { top: 0, ...options }); } -export function scrollToBottom(el: Element, options: { behavior?: ScrollBehavior; } = {}) { - scroll(el, { top: 99999, ...options }); // TODO: ちゃんと計算する +/** + * Scroll to Bottom + * @param el Content element + * @param options Scroll options + * @param container Scroll container element + */ +export function scrollToBottom( + el: HTMLElement, + options: ScrollToOptions = {}, + container = getScrollContainer(el), +) { + if (container) { + container.scroll({ top: el.scrollHeight - container.clientHeight + getStickyTop(el, container) || 0, ...options }); + } else { + window.scroll({ + top: (el.scrollHeight - window.innerHeight + getStickyTop(el, container) + (window.innerWidth <= 500 ? 96 : 0)) || 0, + ...options + }); + } } -export function isBottom(el: Element, asobi = 0) { - const container = getScrollContainer(el); - const current = container - ? el.scrollTop + el.offsetHeight - : window.scrollY + window.innerHeight; - const max = container - ? el.scrollHeight - : document.body.offsetHeight; - return current >= (max - asobi); +export function isTopVisible(el: HTMLElement, tolerance: number = 1): boolean { + const scrollTop = getScrollPosition(el); + return scrollTop <= tolerance; +} + +export function isBottomVisible(el: HTMLElement, tolerance = 1, container = getScrollContainer(el)) { + if (container) return el.scrollHeight <= container.clientHeight + Math.abs(container.scrollTop) + tolerance; + return el.scrollHeight <= window.innerHeight + window.scrollY + tolerance; +} + +// https://ja.javascript.info/size-and-scroll-window#ref-932 +export function getBodyScrollHeight() { + return Math.max( + document.body.scrollHeight, document.documentElement.scrollHeight, + document.body.offsetHeight, document.documentElement.offsetHeight, + document.body.clientHeight, document.documentElement.clientHeight + ); } -- cgit v1.2.3-freya