import { removeLastQuestionDivAfterDebounce , watchForMouseMovementInQuestionContainer } from './removeLastQuestionDivAfterDebounce' ; import { makeQuestionContainer } from './makeQuestionContainer' ; import { pendingQuestionColor } from '../pendingQuestionColor' ; let questionContainer ; const mouseoverHandlersByQuestionDiv = new Map < HTMLElement , ( ) => void > ( ) ; export const insertQuestionDiv = ( questionOuterHTML , channel ) => { if ( ! questionContainer ) { questionContainer = makeQuestionContainer ( ) ; if ( ! questionContainer ) { return ; } watchForMouseMovementInQuestionContainer ( questionContainer ) ; } questionContainer . insertAdjacentHTML ( 'afterbegin' , questionOuterHTML ) ; const questionDiv = questionContainer . firstElementChild as HTMLElement ; questionDiv . removeAttribute ( 'style' ) ; questionDiv . style . backgroundColor = pendingQuestionColor ; const mouseoverHandler = ( ) => { channel . postMessage ( `Cancel ${ questionDiv . id }` ) ; questionDiv . style . removeProperty ( 'background-color' ) ; removeLastQuestionDivAfterDebounce ( ) ; } ; questionDiv . addEventListener ( 'mouseover' , mouseoverHandler , { once : true } ) ; mouseoverHandlersByQuestionDiv . set ( questionDiv , mouseoverHandler ) ; window . setTimeout ( mouseoverHandler , 20000 ) ; } ; export const tryUnhighlightQuestionDiv = ( questionId ) => { if ( ! questionContainer ) { return ; } removeLastQuestionDivAfterDebounce ( ) ; const questionDiv = ( [ ... questionContainer . children ] as Array < HTMLElement > ) . find ( ( { id } ) => id === questionId ) ; if ( questionDiv ) { questionDiv . style . removeProperty ( 'background-color' ) ; const mouseoverHandler = mouseoverHandlersByQuestionDiv . get ( questionDiv ) ; questionDiv . removeEventListener ( 'mouseover' , mouseoverHandler ! ) ; } } ;