@xwadex/fesd-next 0.1.0

package/src/fesd/components/index.ts

@@ -0,0 +1,5 @@
+export * from "./Anchors"
+export * from "./Articles"
+export * from "./Collapse"
+export * from "./Modals"
+export * from "./Overlay"

package/src/fesd/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from "./useAnchor4"
+export * from "./useDragScroll4"

package/src/fesd/hooks/useAnchor4/Anchor4.ts

@@ -0,0 +1,185 @@
+/* 2024.06.10 */
+"use client"
+
+import { Easing4, Easing4Type } from "@/fesd/methods"
+import { debug, isElement, delay as timeout } from "@/fesd/tools"
+
+export type EventCallback = (
+    event: string,
+    state: boolean,
+    options?: Anchor4OptionsType
+) => void
+
+export interface Anchor4OptionsType {
+    target?: string
+    scroller: string
+    offseter?: string
+    offset?: number
+    easing?: Easing4Type
+    duration?: number
+    center?: boolean
+    delay?: number
+    direction?: "scrollLeft" | "scrollTop"
+    onceEvent?: boolean
+    onBeforeScroll?: EventCallback
+    onAfterScroll?: EventCallback
+    onScrolling?: EventCallback
+    debug?: boolean
+}
+
+export interface Anchor4Type extends Anchor4OptionsType {
+    targetEl?: Element | null
+    scrollerEl?: Element | string | null
+    offseterEls?: NodeListOf<Element> | null
+    eventCalled?: boolean
+    setScrolling?: React.Dispatch<boolean>
+    setEventCalled?: React.Dispatch<boolean>
+}
+
+export const Anchor4 = async (options: Anchor4Type) => {
+    const {
+        targetEl,
+        scrollerEl = "body",
+        offseterEls,
+
+        eventCalled = false,
+        setScrolling,
+        setEventCalled,
+
+        offset = 0,
+        easing = "easeInOutExpo",
+        duration = 1000,
+        onceEvent = false,
+        center = false,
+        delay,
+        direction = "scrollTop",
+        onBeforeScroll,
+        onAfterScroll,
+        onScrolling,
+        debug: debugMode = false,
+    } = options
+
+    // Init Options
+    const isScrollBody = scrollerEl == "body"
+    const scrollerElement = isScrollBody ? document.scrollingElement : scrollerEl
+    const scrollerContainer = isScrollBody ? document.body : scrollerElement
+
+    if (!isElement(scrollerElement) || !isElement(scrollerContainer)) {
+        throw new Error('Anchor4, scrollerElement or  scrollerContainer is not Element');
+    }
+
+    const isScrollTop = direction == "scrollTop"
+    const property = isScrollTop ? "height" : "width"
+    const padding = isScrollTop ? "padding-top" : "padding-left"
+    const rect = isScrollTop ? "top" : "left"
+
+    const targetElRect = targetEl ? targetEl.getBoundingClientRect()[rect] : 0
+
+    const scrollerElRect = scrollerElement.getBoundingClientRect()
+    const scrollerElProperty = scrollerElRect[property]
+    const scrollerElPadding = getContainerPadding(scrollerContainer, padding)
+    const scrollerElOffset = isScrollBody ? 0 : scrollerElRect[rect]
+    const scrollerElCenterOffset = center ? (scrollerElProperty - scrollerElPadding) * 0.5 : 0
+
+    const offseterElsProperty = offseterEls ? offsetTargetsProperty(offseterEls, property) : 0
+    const offsetValue = scrollerElOffset
+        + scrollerElCenterOffset
+        + offseterElsProperty
+        + offset
+
+    const startScrollValue = scrollerElement[direction]
+    const distanceValue = targetEl
+        ? targetElRect - offsetValue
+        : targetElRect - offsetValue - startScrollValue
+
+    const endScrollValue = startScrollValue + distanceValue
+    const totalScrollValue = scrollerElement.scrollHeight - scrollerElement.clientHeight
+
+    // Check FinalDistanceValue
+    let finalDistanceValue = Math.round(distanceValue)
+
+    if (distanceValue > 0 && endScrollValue >= totalScrollValue)
+        finalDistanceValue = totalScrollValue - startScrollValue
+
+    if (distanceValue < 0 && endScrollValue <= 0)
+        finalDistanceValue = 0 - startScrollValue
+
+    if (finalDistanceValue == 0) return
+
+    // Scroll Process
+    let requestID: number[] = []
+    let currentTime: number
+
+    const setScrollElScrolling = (isScrolling: boolean) => isScrolling
+        ? scrollerContainer.setAttribute("anchor-scrolling", "")
+        : scrollerContainer.removeAttribute("anchor-scrolling")
+
+    const startScrollAnimation = (state: boolean) => state
+        ? requestID.push(requestAnimationFrame(scrollAnimationHandler))
+        : requestID.length && requestID.forEach((id: number) => cancelAnimationFrame(id))
+
+    const endScrollAnimation = () => {
+        startScrollAnimation(false)
+        setScrollElScrolling(false)
+
+        if (!eventCalled) onAfterScroll?.("onAfterScroll", false, options)
+        if (!eventCalled) onScrolling?.("onScrollEnd", false, options)
+        if (onceEvent) setEventCalled?.(true)
+
+        setScrolling?.(false)
+    }
+
+    const containerScrollHandler = (time: number) => scrollerElement[direction] = Math.round(
+        Easing4[easing](time, startScrollValue, Math.round(finalDistanceValue), duration)
+    )
+
+    const scrollAnimationHandler = (requestTime: number) => {
+        currentTime = currentTime ?? requestTime
+        const time = requestTime - currentTime
+
+        if (time < duration) startScrollAnimation(true)
+        if (time >= duration) endScrollAnimation()
+        containerScrollHandler(time)
+    }
+
+    const Anchor4Active = () => {
+        setScrollElScrolling(true)
+        startScrollAnimation(true)
+
+        if (!eventCalled) onScrolling?.("onScrolling", true, options)
+        setScrolling?.(true)
+    }
+
+    // if (debugMode) debug(target ?? "Null", {
+    //     rect,
+    //     padding,
+    //     property,
+    //     targetElRect,
+    //     scrollerElProperty,
+    //     scrollerElPadding,
+    //     scrollerElCenterOffset,
+    //     offseterElsProperty,
+    //     offsetValue,
+    //     startScrollValue,
+    //     distanceValue,
+    //     options: options,
+    // },
+    //     "Anchor4",
+    //     hooksName
+    // )
+
+    if (!eventCalled) onBeforeScroll?.("onBeforeScroll", true, options)
+    if (delay) await timeout(delay)
+
+    Anchor4Active()
+}
+
+export const getContainerPadding = (scrollerEl: Element | HTMLElement, padding: string) =>
+    parseInt(getComputedStyle(scrollerEl)[padding as any])
+
+export const offsetTargetsProperty = (offsetEls: NodeListOf<Element>, property: "width" | "height") => {
+    return offsetEls && offsetEls.length ? [...offsetEls]
+        .map(element => element.getBoundingClientRect()[property])
+        .reduce((value, current) => value + current, 0) : 0
+}
+

package/src/fesd/hooks/useAnchor4/index.ts

@@ -0,0 +1,2 @@
+export * from "./Anchor4"
+export * from "./useAnchor4"

package/src/fesd/hooks/useAnchor4/useAnchor4.tsx

@@ -0,0 +1,88 @@
+/* 2024.06.10 */
+"use client"
+
+import * as React from "react"
+import { Anchor4, Anchor4OptionsType } from "./Anchor4"
+import { query, queryAll } from "@/fesd/tools"
+
+export interface useAnchor4Type extends
+    Anchor4OptionsType {
+    as?: React.ElementType
+    href?: string
+    hash?: boolean
+    history?: boolean
+}
+
+export interface useAnchor4SettingType {
+    targetAttr?: string
+    scrollerAttr?: string
+    offseterAttr?: string
+}
+
+export const useAnchor4 = (setting: useAnchor4SettingType = {}) => {
+    const {
+        targetAttr = "anchor-target",
+        scrollerAttr = "anchor-scroller",
+        offseterAttr = "anchor-offseter"
+    } = setting
+
+    const [scrolling, setScrolling] = React.useState(false)
+    const [eventCalled, setEventCalled] = React.useState(false)
+
+    const getTarget = (target: string) =>
+        query(`[${targetAttr}="${target}"]`)
+
+    const getScroller = (scroller: string) =>
+        query(`[${scrollerAttr}="${scroller}"]`)
+
+    const getOffseter = (offseter: string) =>
+        queryAll(`[${offseterAttr}="${offseter}"]`)
+
+    const getElements = (options: useAnchor4Type) => {
+        const { target, scroller, offseter } = options
+
+        const scrollerEl = scroller == "body" ? scroller : scroller
+            ? getScroller(scroller) : undefined
+
+        const targetEl = target
+            ? getTarget(target) : undefined
+
+        const offseterEls = offseter
+            ? getOffseter(offseter) : undefined
+
+        return { targetEl, scrollerEl, offseterEls }
+    }
+
+    const scrollToAnchor = async (options: useAnchor4Type) => {
+        if (scrolling) return
+
+        const {
+            targetEl,
+            scrollerEl,
+            offseterEls
+        } = getElements(options)
+
+        Anchor4({
+            ...options,
+            setScrolling,
+            setEventCalled,
+            eventCalled,
+            targetEl,
+            scrollerEl,
+            offseterEls,
+        })
+    }
+
+    return {
+        scrolling,
+        eventCalled,
+        scrollToAnchor,
+        methods: {
+            getTarget,
+            getScroller,
+            getOffseter,
+            getElements,
+        }
+    }
+
+};

package/src/fesd/hooks/useDragScroll4.tsx

@@ -0,0 +1,139 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+/* 2024.06.10 */
+"use client"
+
+import { useEffect, useRef } from 'react';
+
+interface useDragScroll4Type {
+    current: HTMLElement | null,
+    active: boolean
+    chilPointer?: boolean
+    cursorGrab?: boolean
+    className?: string
+    attributeKey?: string
+    attributeValue?: string
+    onBeforeDrag?: (e: MouseEvent) => void,
+    onAfterDrag?: (e: MouseEvent) => void,
+    onDraging?: (e: MouseEvent) => void,
+    debug?: boolean
+}
+
+export function useDragScroll4(options: useDragScroll4Type) {
+
+    const {
+        current,
+        active = false,
+        chilPointer = true,
+        cursorGrab = true,
+        attributeKey: attrKey = "drag-scrolling",
+        attributeValue: attrValue = "",
+        className,
+        onBeforeDrag,
+        onAfterDrag,
+        onDraging,
+        debug,
+    } = options
+
+    const mouseDown = useRef(false)
+    const clientX = useRef(0)
+    const clientY = useRef(0)
+
+    const setCursorGrab = (element: HTMLElement, state: string) => {
+        if (state) element.style.cursor = active ? state : ""
+    }
+
+    const setDragScrolling = (element: HTMLElement, state: string) => {
+        if (state == "add") element.setAttribute(attrKey, attrValue)
+        if (state == "remove") element.removeAttribute(attrKey)
+    }
+
+    const setChilPointer = (nodes: HTMLCollection, state: string) => {
+        [...nodes].forEach((node: any) => node.style.pointerEvents = state)
+    }
+
+    const setClassName = (element: HTMLElement, classname: string, action: string) => {
+        if (!element || !classname || !action) return
+        if (action == "add") element.classList.add(classname)
+        if (action == "remove") element.classList.remove(classname)
+    }
+
+    const mousedown = (e: MouseEvent) => {
+        e.preventDefault();
+
+        if (!current) return
+        if (e.button === 2) return
+
+        mouseDown.current = true
+        clientX.current = e.clientX
+        clientY.current = e.clientY
+        onBeforeDrag?.(e)
+    }
+
+    const mousemove = (e: MouseEvent) => {
+        const container = current
+
+        if (!mouseDown.current) return
+        if (!container) return
+        if (
+            Math.abs(clientX.current - e.clientX) > 10 ||
+            Math.abs(clientY.current - e.clientY) > 10
+        ) {
+            if (className) setClassName(container, className, "add")
+            if (cursorGrab) setCursorGrab(container, "grabbing")
+            if (chilPointer) setChilPointer(container.children, "none")
+
+            container.scrollTop -= e.clientY - clientY.current
+            container.scrollLeft -= e.clientX - clientX.current
+            setDragScrolling(container, "add")
+            onDraging?.(e)
+        }
+        clientX.current = e.clientX
+        clientY.current = e.clientY
+
+    }
+
+    const mouseup = (e: MouseEvent) => {
+        e.preventDefault();
+
+        const container = current
+
+        if (!mouseDown.current) return
+        if (!container) return
+
+        if (className) setClassName(container, className, "remove")
+        if (chilPointer) setChilPointer(container.children, "auto")
+
+        mouseDown.current = false
+        setDragScrolling(container, "remove")
+        onAfterDrag?.(e)
+    }
+
+    useEffect(() => {
+        if (!active) return
+        if (!current) return
+
+        const container = current
+
+        current.setAttribute("drag4-scroll", "")
+
+        if (cursorGrab) setCursorGrab(container, "grab")
+        window.addEventListener("mousemove", mousemove)
+        window.addEventListener("mouseup", mouseup)
+        // window.addEventListener("touchmove", mousemove)
+        // window.addEventListener("touchend", mouseup)
+
+        container.addEventListener("mousedown", mousedown)
+        // container.addEventListener("touchstart", mousedown)
+
+        return () => {
+            window.removeEventListener("mousemove", mousemove)
+            window.removeEventListener("mouseup", mouseup)
+            // window.removeEventListener("touchmove", mousemove)
+            // window.removeEventListener("touchend", mouseup)
+
+            container.removeEventListener("mousedown", mousedown)
+            // container.removeEventListener("touchstart", mousedown)
+        }
+    }, [current, active])
+
+}

package/src/fesd/hooks/useTransitionend.tsx

@@ -0,0 +1,3 @@
+// export default function useTransitionend(params) {
+
+// };