import { ArrayUtil } from "./ArrayUtil" ; import { ClassUtil } from "./ClassUtil" ; export class HTMLUtil { private static readonly _ATTR : string = "data-tween24" ; private static _numTweenElement : number = 0 ; private static _tweenStyle : Map < string , CSSStyleDeclaration > = new Map < string , CSSStyleDeclaration > ( ) ; static getHTMLElement ( classOrNameOrID ) { let result = [ ] ; switch ( classOrNameOrID . charAt ( 0 ) ) { case "#" : const elt = document . getElementById ( classOrNameOrID . substring ( 1 ) ) ; if ( elt ) result . push ( elt ) ; break ; case "." : Array . prototype . forEach . call ( document . getElementsByClassName ( classOrNameOrID . substring ( 1 ) ) , function ( elt ) { result . push ( elt ) ; } ) ; break ; default : Array . prototype . forEach . call ( document . getElementsByName ( classOrNameOrID ) , function ( elt ) { result . push ( elt ) ; } ) ; break ; } return result ; } static querySelectorAll ( query ) { return Array . from ( document . querySelectorAll ( query . split ( "::" ) [ 0 ] ) ) ; } static querySelectorAllWithBase ( base , query ) { return Array . from ( base . querySelectorAll ( query . split ( "::" ) [ 0 ] ) ) ; } static isPseudoQuery ( query ) { return query . match ( /::/ ) ? true : false ; } static getPseudoQuery ( query ) { const pseudo = query . match ( /::.*/g ) ; return pseudo ? pseudo [ 0 ] : null ; } static setStyleProp ( element , prop , value ) { element . style . setProperty ( prop , value as string ) ; } static addWillChange ( style , key ) { if ( style . willChange . length ) style . willChange = style . willChange . split ( "," ) . concat ( key ) . join ( "," ) ; else style . willChange = key . join ( "," ) ; } static removeWillChange ( style , key ) { const willChange = style . willChange . split ( "," ) ; for ( let i = 0 ; i < willChange . length ; i ++ ) { willChange [ i ] = willChange [ i ] . trim ( ) ; } for ( const k of key ) { ArrayUtil . removeItemFromArray ( willChange , k ) ; } style . willChange = willChange . join ( "," ) ; } static getComputedStyle ( element , pseudo = null ) { return window . getComputedStyle ( element , pseudo ) ; } static getTransformMatrix ( element , pseudo = null ) { let t ; if ( pseudo ) t = HTMLUtil . getComputedStyle ( element , pseudo ) . transform ; else t = HTMLUtil . getComputedStyle ( element ) . transform ; return t != "none" ? t : "matrix(1, 0, 0, 1, 0, 0)" ; } static setTweenElementQuery ( target , query ) { const queryList = query . split ( "::" ) ; const pseudo = queryList [ 1 ] ? "::" + queryList [ 1 ] : "" ; if ( Array . isArray ( target ) ) { for ( const t of target ) { excute ( t ) ; } } else { excute ( target ) ; } function excute ( t ) { const attr = t . getAttribute ( HTMLUtil . _ATTR ) ; if ( ! attr ) { HTMLUtil . _numTweenElement ++ ; t . setAttribute ( HTMLUtil . _ATTR , HTMLUtil . _numTweenElement . toString ( ) ) ; } if ( ! HTMLUtil . getAddedStyleByElement ( t , pseudo ) ) { const elementQuery = HTMLUtil . getTweenElementQuery ( attr || HTMLUtil . _numTweenElement , pseudo ) ; const styleSheet = document . styleSheets [ 0 ] ; const index = styleSheet . insertRule ( elementQuery + "{}" , styleSheet . rules . length ) ; HTMLUtil . _tweenStyle . set ( elementQuery , ( styleSheet . cssRules [ index ] as CSSStyleRule ) . style ) ; } } } static getAddedStyleByElement ( element , pseudo ) { const attr = element . getAttribute ( HTMLUtil . _ATTR ) ; if ( attr ) { return HTMLUtil . _tweenStyle . get ( HTMLUtil . getTweenElementQuery ( attr , pseudo ) ) ; } else { return undefined ; } } static getTweenElementQuery ( elementOrID , pseudo ) { let attr = null ; if ( elementOrID instanceof HTMLElement ) { attr = elementOrID . getAttribute ( HTMLUtil . _ATTR ) ; if ( attr ) return `[${ HTMLUtil . _ATTR }="${ attr }"]${ pseudo }` ; else return "" ; } return `[${ HTMLUtil . _ATTR }="${ elementOrID }"]${ pseudo }` ; } }