import { EMPTY , Observable , Subject , defer , distinctUntilKeyChanged , finalize , map , tap } from "rxjs" ; import { Viewport , getElementSize , getOptionalElement , watchViewportAt } from "~/browser" ; import { Component } from "../../_" ; import { Header } from "../_" ; /**
 * Header
 */ export interface HeaderTitle { active : boolean ; } /**
 * Watch options
 */ interface WatchOptions { viewport$ : Observable < Viewport > ; header$ : Observable < Header > ; } /**
 * Mount options
 */ interface MountOptions { viewport$ : Observable < Viewport > ; header$ : Observable < Header > ; } param el param options returns export function watchHeaderTitle ( el , { viewport$ , header$ } ) { return watchViewportAt ( el , { viewport$ , header$ } ) . pipe ( map ( ( { offset : { y } } ) => { const { height } = getElementSize ( el ) ; return { active : y >= height } ; } ) , distinctUntilKeyChanged ( "active" ) ) ; } param el param options returns export function mountHeaderTitle ( el , options ) { return defer ( ( ) => { const push$ = new Subject < HeaderTitle > ( ) ; push$ . subscribe ( ( { active } ) => { if ( active ) el . setAttribute ( "data-md-state" , "active" ) ; else el . removeAttribute ( "data-md-state" ) ; } ) ; const heading = getOptionalElement ( "article h1" ) ; if ( typeof heading === "undefined" ) return EMPTY ; return watchHeaderTitle ( heading , options ) . pipe ( tap ( state => push$ . next ( state ) ) , finalize ( ( ) => push$ . complete ( ) ) , map ( state => ( { ref : el , ... state } ) ) ) ; } ) ; }