export interface ToggleOpts { anim : number ; vertical : boolean ; pad : number ; margin : number ; bgOn : object ; bgOff : object ; fgOn : object ; fgOff : object ; } export interface ToggleDotOpts extends ToggleOpts { r : number ; } export interface ToggleRectOpts extends ToggleOpts { w : number ; h : number ; } const DEFAULT_OPTS = { anim : 100 , pad : 1 , margin : 0 , vertical : false , bgOn : { fill : "#000" } , bgOff : { fill : "#999" } , fgOn : { fill : "#fff" } , fgOff : { fill : "#fff" } , } ; export const slideToggleDot = ( opts = { } ) => { const _opts = { r : 5 , ... DEFAULT_OPTS , ... opts , } ; const { r , pad , margin , vertical } = _opts ; const m2 = margin * 2 ; const br = r + pad ; const cx = br + margin ; const width = ( r * 2 + pad ) * 2 ; const height = br * 2 ; const totalW = width + m2 ; const totalH = height + m2 ; const svgSize = vertical ? { width : totalH , height : totalW } : { width : totalW , height : totalH } ; const style = { transition : `all ${ _opts . anim }ms ease-out` } ; const bgOn = { x : margin , y : margin , rx : br , ry : br , ... ( vertical ? { width : height , height : width } : { width , height } ) , ... _opts . bgOn , } ; const bgOff = { ... bgOn , ... _opts . bgOff } ; const shapeOn = { ... ( vertical ? { cx , cy : cx } : { cx : width + margin - br , cy : cx } ) , ... _opts . fgOn , style , r , } ; const shapeOff = { ... shapeOn , ... ( vertical ? { cy : width + margin - br } : { cx } ) , ... _opts . fgOff , } ; return $toggle ( "circle" , svgSize , bgOn , bgOff , shapeOn , shapeOff ) ; } ; export const slideToggleRect = ( opts = { } ) => { const _opts = { w : 10 , h : 10 , ... DEFAULT_OPTS , ... opts , } ; const { w , h , pad , margin , vertical } = _opts ; const m2 = margin * 2 ; const pm = pad + margin ; const width = vertical ? w + pad * 2 : ( w + pad ) * 2 ; const height = vertical ? ( h + pad ) * 2 : h + pad * 2 ; const svgSize = { width : width + m2 , height : height + m2 } ; const style = { transition : `all ${ _opts . anim }ms ease-out` } ; const bgOn = { ... _opts . bgOn , width , height , x : margin , y : margin , } ; const bgOff = { ... bgOn , ... _opts . bgOff } ; const shapeOn = { ... ( vertical ? { x : pm , y : pm } : { x : width + margin - pad - w , y : pm } ) , ... _opts . fgOn , style , width : w , height : h , } ; const shapeOff = { ... shapeOn , ... ( vertical ? { y : height + margin - pad - h } : { x : pm } ) , ... _opts . fgOff , } ; return $toggle ( "rect" , svgSize , bgOn , bgOff , shapeOn , shapeOff ) ; } ; const $toggle = ( shape , size , bgOn , bgOff , shapeOn , shapeOff ) => ( _ , attribs , state ) => [ "svg" , { ... size , ... attribs } , [ "rect" , state ? bgOn : bgOff ] , [ shape , state ? shapeOn : shapeOff ] , ] ;