@lexriver/dome 2.0.1 → 2.0.3

package/src/DomeComponent.mts

@@ -1,63 +0,0 @@
-import { debounce } from 'ts-debounce'
-import { Animation } from './Animation.mjs'
-import { DomeManipulator } from "./DomeManipulator.mjs"
-
-
-interface InternalAttrs{
-    ref?:(ref)=>void
-    onShowAnimation?:Animation
-    onHideAnimation?:Animation
-}
-export abstract class DomeComponent<Attrs>{
-    public rootElement!:Element|HTMLElement
-    constructor(
-        public attrs:Attrs & InternalAttrs, 
-        public children:any
-    ){
-        //this.init()
-
-    }
-    //abstract render(attrs:Attrs, children:any):HTMLElement
-    protected init():void{}
-    protected abstract render():HTMLElement
-    protected afterRender():void{
-        //console.log('afterRender(), el=', this.el)
-    }
-    // protected onMount(){
-         
-    // }
-
-    async updateAsync(){
-        //console.log('DomeComponent: calling native update() method!') //TODO: remove this
-        if(!this.rootElement) {
-            console.error('DomeComponent: unable to update, no rootElement', 'this=', this)
-            return
-        }
-        if(!this.rootElement.parentNode){
-            console.error('DomeComponent: unable to update, no parent for rootElement, not mounted?', 'this=', this)
-            return
-        }
-        
-        //console.time('browser')
-        const newEl = this.render()
-        //console.log('DomeComponent: update() newEl=', newEl) //TODO: remove this
-        //DomeManipulator.unhideElement(this.el) // if was null before
-        await DomeManipulator.replaceAsync(this.rootElement, newEl, this.attrs.onHideAnimation, this.attrs.onShowAnimation)
-        this.rootElement = newEl
-        //console.timeEnd('browser')
-        this.afterUpdate()
-        
-    }
-    scheduleUpdate = debounce(() => {
-        this.updateAsync()
-    }, 5)
-
-    protected afterUpdate(){
-
-    }
-}
-DomeComponent.prototype['__DomeComponent'] = true
-
-// export interface DomeComponent<Attrs>{
-//     render:(attrs:Attrs)=>HTMLElement
-// }

package/src/DomeManipulator.mts

@@ -1,380 +0,0 @@
-import { Async } from "@lexriver/async"
-import { DataTypes } from "@lexriver/data-types"
-import { ObservableVariable, checkIfObservable } from "@lexriver/observable"
-import { Animation } from './Animation.mjs'
-
-
-export type CssClass = {[key:string]:boolean|ObservableVariable<boolean>} | string[] | string
-
-export namespace DomeManipulator {
-
-    export async function hideElementAsync(element: Element, animation?:Animation) {
-        if(!element) throw new Error('hideElementAsync failed, no element')
-        if((element as HTMLElement).hidden) return
-        if(animation){
-            await addCssClassAsync(element, animation.cssClassName, animation.timeMs)
-        }
-        (element as HTMLElement).style.display = 'none'; //TODO: remove this?
-        (element as HTMLElement).hidden = true
-
-    }
-
-    export async function unhideElementAsync(element: Element, animation?:Animation) {
-        if(!element) throw new Error('unhideElementAsync failed, no element')
-        if(!(element as HTMLElement).hidden) return
-        (element as HTMLElement).style.display = ''; //TODO: remove this?
-        (element as HTMLElement).hidden = false
-        if(animation){
-            await addCssClassAsync(element, animation.cssClassName, animation.timeMs)
-        }
-    }
-
-    export async function insertAsFirstChildAsync(elementToInsert: Element, parentElement: Element | DocumentFragment, animation?:Animation) {
-        parentElement.insertBefore(elementToInsert, parentElement.firstChild)
-        if(animation){
-            await addCssClassAsync(elementToInsert, animation.cssClassName, animation.timeMs)
-        }
-
-    }
-
-    export async function insertBeforeAsync(elementToInsert: Element, refElement: Element | null, parentElement: Element | DocumentFragment, animation?:Animation) {
-        parentElement.insertBefore(elementToInsert, refElement)
-        if(animation){
-            await addCssClassAsync(elementToInsert, animation.cssClassName, animation.timeMs)
-        }
-
-    }
-
-    export async function insertAfterAsync(elementToInsert: Element, refElement: Element | null | undefined, parentElement: Element | DocumentFragment, animation?:Animation) {
-        if (refElement) {
-            parentElement.insertBefore(elementToInsert, refElement.nextSibling)
-        } else {
-            parentElement.appendChild(elementToInsert)
-        }
-        if(animation){
-            await addCssClassAsync(elementToInsert, animation.cssClassName, animation.timeMs)
-        }
-
-    }
-
-    export async function insertByIndexAsync(elementToInsert: Element, index: number, parentElement: Element | DocumentFragment, animation?:Animation) {
-        if (index == 0) {
-            parentElement.appendChild(elementToInsert)
-            if(animation){
-                await addCssClassAsync(elementToInsert, animation.cssClassName, animation.timeMs)
-            }
-            return
-        }
-
-        await insertAfterAsync(elementToInsert, parentElement.children[index], parentElement, animation)
-        
-    }
-
-
-    export async function replaceAsync(oldElement: Element, newElement: Element, animationHide?:Animation, animationShow?:Animation) {
-        if(!oldElement.parentNode){
-            // almost impossible if in DOM
-            console.error('replaceAsync() failed, no parentNode.', 'oldElement=', oldElement)
-            throw new Error('no parent node for replaceAsync')
-        }
-        
-        // hide
-        if(animationHide){
-            await addCssClassAsync(oldElement, animationHide.cssClassName, animationHide.timeMs)
-        }
-
-        // replace
-        const parent = oldElement.parentNode
-        if (!parent) {
-            //TODO: do not throw error here?
-            console.error('replaceAsync() failed, no parent. Probably node was deleted while hide animation.', 'oldElement=', oldElement, 'type=', typeof oldElement, 'parent=', oldElement.parentElement, oldElement.parentNode)
-            throw new Error('no parent for replaceAsync()')
-        }
-        parent.replaceChild(newElement, oldElement)
-
-        // show
-        if(animationShow){
-            await addCssClassAsync(newElement, animationShow.cssClassName, animationShow.timeMs)
-        }
-        
-        return newElement
-
-    }
-
-    export async function removeElementAsync(element: Element, animation?:Animation) {
-        //console.log('#dome', 'removeELementAsync', element)
-        if(animation){
-            //console.log('#dome', 'add animation', animation.cssClassName, animation.timeMs, element)
-            await addCssClassAsync(element, animation.cssClassName, animation.timeMs)
-        }
-        //console.log('#dome', 'removing from dom', element)
-        element.remove()
-    }
-
-    export function forEachChildrenOf(element:Element, action:(child:ChildNode)=>void){
-        for(let i=0;i<element.childNodes.length;i++){
-            action(element.childNodes[i])
-        }
-    }
-
-
-    export async function removeAllChildrenAsync(element: Element, animation?:Animation) {
-        // await Promise.all( //TODO: this doesn't remove text nodes
-        //     Array.from(element.children).map(child => removeElementAsync(child, animation))
-        // )
-
-        if(!animation){
-            while (element.firstChild) {
-                //element.removeChild(element.firstChild);
-                element.firstChild.remove()
-            }
-            //return
-        }  else {
-            //console.log('##', 'assign remove animation for each children', element.childNodes)
-            forEachChildrenOf(element, (child) => child.nodeType == Node.ELEMENT_NODE && (child as Element).classList.add(animation.cssClassName))
-            //console.log('##', 'wait ms', animation.timeMs)
-            await Async.waitMsAsync(animation.timeMs)
-            //console.log('##', 'removing children', element.childNodes)
-            forEachChildrenOf(element, (child) => child.remove())
-            //console.log('##', 'done')
-        }
-
-        // if(element.children.length>0) {
-        //     console.error('DomeManipulator: removeAllChildrenAsync() failed', 'length=', element.children.length, 'children=', element.children, 'animation=', animation, 'element=', element)
-        //     throw new Error()
-        // }
-
-    }
-
-    export async function appendChildAsync(containerElement:Element, child:Element, animation?:Animation){
-        containerElement.appendChild(child)
-        if(animation){
-            await addCssClassAsync(child, animation.cssClassName, animation.timeMs)
-        }
-    }
-
-    export async function appendChildrenAsync(containerElement:Element, children:Element | Element[] | DocumentFragment | Text | string | null | undefined, animation?:Animation){
-        //console.log('DomeManipulator: appendChildrenAsync', 'containerELement=', containerElement, 'children=', children, 'animation=', animation)
-        if (DataTypes.isString(children)) {
-            // no animation for text?
-            containerElement.appendChild(document.createTextNode(children as string))
-
-        } else if (DataTypes.isArray(children)) {
-            await Promise.all(
-                (children as Element[]).map(child => appendChildAsync(containerElement, child, animation))
-            )
-
-        } else if (children) {
-            await appendChildAsync(containerElement, children as Element, animation)
-
-        }
-
-    }
-
-
-    export async function replaceAllChildrenAsync(
-        containerElement: Element, 
-        childrenToInsert: Element | Element[] | DocumentFragment | Text | string | null | undefined, 
-        animationForHide?:Animation, 
-        animationForShow?:Animation
-    ) {
-        //await removeAllChildrenAsync(containerElement, animationForHide)
-
-        if(containerElement.childNodes.length>0){
-            await removeAllChildrenAsync(containerElement, animationForHide) 
-        }
-
-        // while(containerElement.childNodes.length>0){
-        //     await removeAllChildrenAsync(containerElement, animationForHide) // can be executed more than once! TODO: why?
-        // }
-        // if(containerElement.children.length>0) {
-        //     console.error('DomeManipulator: replaceAllChildenrAsync() failed:', 'containerElement.children.length=', containerElement.children.length, 'children=', containerElement.children, 'containerElement=', containerElement, 'animationForHide=', animationForHide)
-        //     throw new Error()
-        // }
-        await appendChildrenAsync(containerElement, childrenToInsert, animationForShow)    
-    }
-
-
-    
-    export function isInDom(el: Element | undefined) {
-        if (!el) return false
-        return document.body.contains(el)
-    }
-
-    export function isOnScreen(el:Element|undefined){
-        if(!el) return false
-        var rect = el.getBoundingClientRect()
-        var viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight)
-        return !(rect.bottom < 0 || rect.top - viewHeight >= 0)
-    }
-
-    export async function addCssClassAsync(element: Element, cssClassName: string, removeAfterMs?:number) {
-        if(element.nodeType !== Node.ELEMENT_NODE) return
-        element.classList.add(cssClassName)
-        if(removeAfterMs && removeAfterMs>0){
-            await Async.waitMsAsync(removeAfterMs)
-            element.classList.remove(cssClassName)
-        }
-        
-    }
-
-    export async function addCssClassesAsync(element: Element, cssClassNames: string[], removeAfterMs?:number) {
-        await Promise.all(cssClassNames.map(cssClassName => addCssClassAsync(element, cssClassName, removeAfterMs)))
-    }
-
-    export function removeCssClass(element: Element, cssClassName: string) {
-        element.classList.remove(cssClassName)
-    }
-
-    export function removeCssClasses(element: Element, cssClassNames: string[]) {
-        for (let cssClassName of cssClassNames) {
-            element.classList.remove(cssClassName)
-        }
-
-
-    }
-
-
-    /**
-     * set css classes by array ['class1', 'class2'] or 
-     * by object {class1:true, class2:false} or 
-     * by Observable<boolean> {class1:true, class2:myVarO} or
-     * by string
-     * this function will replace class attribute so all classes that are not in params will be removed
-     * @param value 
-     * @param element 
-     */
-    export function setCssClasses(element: Element, value: CssClass) {
-
-        if (!value) return // skip empty
-        if (DataTypes.isArray(value)) {
-            //console.log('setCssClasses', 'data is array', value)
-            setAttribute(element, 'class', (value as string[]).join(' '))
-
-        } else if (DataTypes.isObjectWithKeys(value)) {
-            //console.log('setCssClasses', 'data is object with keys', value)
-            let classNameArray: Array<string> = []
-            for (let [k, v] of Object.entries(value)) {
-                if (checkIfObservable(v)) {
-                    if ((v as ObservableVariable<boolean>).get()) {
-                        classNameArray.push(k)
-                    }
-                } else if (v) {
-                    classNameArray.push(k)
-                }
-            }
-            setAttribute(element, 'class', classNameArray.join(' '))
-
-        } else {
-            //console.log('setCssClasses', 'data is unknown', value)
-            setAttribute(element, 'class', value)
-
-        }
-
-    }
-
-    export function setAttribute(element: Element, name: string, value: any) {
-        if (value === undefined || value === null) {
-            return
-        }
-
-        // Naive support for xlink namespace
-        // Full list: https://github.com/facebook/react/blob/1843f87/src/renderers/dom/shared/SVGDOMPropertyConfig.js#L258-L264
-        if (/^xlink[AHRST]/.test(name)) {
-            element.setAttributeNS('http://www.w3.org/1999/xlink', name.replace('xlink', 'xlink:').toLowerCase(), value)
-        } else {
-            element.setAttribute(name, value)
-        }
-    }
-
-    export function hasFocus(el: Element):boolean {
-        return document.activeElement == el
-    }
-
-    export function scrollIntoView(element: Element, paddingFromTop:number = 100) {
-        if(isOnScreen(element)) {
-            return  // no need to scroll
-        }
-        //const positionBefore = getCurrentScrollPosition()
-        //element.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
-        //const positionAfter = getCurrentScrollPosition()
-        //console.log('before=', positionBefore, 'after=', positionAfter)
-        let expectedPosition = element.getBoundingClientRect().top + window.pageYOffset;
-        expectedPosition -= paddingFromTop
-        window.scrollTo({top: expectedPosition, behavior: 'smooth'});
-
-        
-        
-    }
-
-    // https://stackoverflow.com/questions/15935318/smooth-scroll-to-top/55926067
-    export const scrollToTop = () => {
-        //console.log('scrollToTop')
-        let position = getCurrentScrollPosition()
-
-        if (position > 0) {
-            window.requestAnimationFrame(scrollToTop);
-            if (position < 20) {
-                window.scrollTo(0, 0)
-            } else {
-                window.scrollTo(0, position - position / 9)
-            }
-        }
-    }
-
-    export function getCurrentScrollPosition(){
-        return document.documentElement.scrollTop || document.body.scrollTop;
-    }
-
-    export async function scrollToAsync(p:{
-        pxFromTop?:number, 
-        pxFromLeft?:number,
-        smooth?:boolean,
-        msStep?:number, 
-        maxMsToWait?:number
-    }){
-        //console.log('scrollToAsync', p)
-        const msStep = p.msStep ?? 50
-        const maxMsToWait = p.maxMsToWait ?? 5000
-
-        let scrollOptions:ScrollToOptions = {
-        }
-
-        if(p.pxFromTop){
-            scrollOptions.top = p.pxFromTop
-        }
-        if(p.pxFromLeft){
-            scrollOptions.left = p.pxFromLeft
-        }
-        if(p.smooth){
-            scrollOptions.behavior = 'smooth'
-        }
-
-
-        try {
-            if(p.pxFromLeft || p.pxFromTop){
-                await Async.waitForFunctionToReturnTrueAsync(() => {
-                    if(p.pxFromTop){
-                        return document.body.scrollHeight >= p.pxFromTop
-                    }
-                    if(p.pxFromLeft){
-                        return document.body.scrollWidth >= p.pxFromLeft
-                    }
-                    return false
-                }, msStep, maxMsToWait)
-            }
-            
-        } catch(error){
-            // ignore error
-
-        }
-        //console.log('scrollToY', pxFromTop, 'height=', document.body.clientHeight)
-        //console.log('scrollToAsync now', scrollOptions)
-        window.scrollTo(scrollOptions)
-    }
-
-
-
-
-
-}

package/src/DomeRouter.console-test.mts

@@ -1,52 +0,0 @@
-
-// //import { DomeRouter } from "./DomeRouter"
-// function getRouteSlices(route:string){
-//     return route.split('/').filter(x => x.length>0)
-// }
-
-// function checkUrlMatchRouteAndGetParameters(url:string, route:string, exactMatch:boolean = true):Map<string,string>|undefined{
-//     // this function is purely for export
-    
-//     const urlSlices = getRouteSlices(url)
-//     const routeSlices = getRouteSlices(route)
-//     if(exactMatch && routeSlices.length !== urlSlices.length) return undefined
-//     // all routeSlices must match for !exactMatch
-//     const extractedParameters = new Map<string,string>()
-//     for(let i=0;i<routeSlices.length;i++){
-//         let cRouteSlice = routeSlices[i]
-//         let cUrlSlice = urlSlices[i] // could be undefined
-//         //console.info('\t\t cRouteSlice=', cRouteSlice, 'cUrlSlice=', cUrlSlice)
-
-//         if(cRouteSlice.startsWith(':')){
-//             // we have a param name
-//             if(cUrlSlice === undefined){
-//                 return undefined
-//             }
-//             // we have some variable, save it
-//             extractedParameters.set(cRouteSlice.substring(1), cUrlSlice)
-
-//         } else {
-//             // no param name
-//             if(cRouteSlice !== cUrlSlice){
-//                 return undefined
-//             }
-//         }
-//     }
-//     return extractedParameters
-// }
-
-
-    // DomeRouter.onRoute('/', true, ()=>{ console.log('exact /')})
-    // DomeRouter.onRoute('/', false, ()=>{ console.log('notexact /')})
-    // DomeRouter.onRoute('/test', true, ()=>{ console.log('exact /test')})
-    // DomeRouter.onRoute('/test/:id', true, (p)=>{ console.log('exact /test/:id', 'params=', p)})    
-    // DomeRouter.onRoute('/test/:id', false, (p)=>{ console.log('notexact /test/:id', 'params=', p)})    
-    // DomeRouter.onRoute('/test', false, ()=>{ console.log('notexact /test')})    
-    // DomeRouter.onRoute('/test/:id/:id2', true, (p)=>{ console.log('exact /test/:id/:id2', 'params=', p)})    
-
-    // let testRoute = '//test/34/st'
-    // console.log('** testing route:', testRoute)
-    // DomeRouter.execute(testRoute)
-    // //expect(!true).toBeTruthy()
-
-//console.log(checkUrlMatchRouteAndGetParameters('/get-product/123', '/get-product/:id/:id2', false))